Skip to content

Commit 7ee9e02

Browse files
YoditEYoditE
committed
complete wireframe practice
1 parent ff7b9d0 commit 7ee9e02

2 files changed

Lines changed: 56 additions & 8 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,25 +8,40 @@
88
</head>
99
<body>
1010
<header>
11-
<h1>Wireframe</h1>
11+
<h1>Page Title</h1>
1212
<p>
13-
This is the default, provided code and no changes have been made yet.
13+
A short description about the page.
1414
</p>
1515
</header>
1616
<main>
1717
<article>
1818
<img src="placeholder.svg" alt="" />
19-
<h2>Title</h2>
19+
<h2>Article Title</h2>
2020
<p>
21-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
22-
voluptates. Quisquam, voluptates.
21+
Article summary
22+
</p>
23+
<a href="">Read more</a>
24+
</article><article>
25+
<img src="placeholder.svg" alt="" />
26+
<h2>Article Title</h2>
27+
<p>
28+
Article summary
29+
</p>
30+
<a href="">Read more</a>
31+
</article>
32+
<article>
33+
<img src="placeholder.svg" alt="" />
34+
<h2>Article Title</h2>
35+
<p>
36+
Article summary
2337
</p>
2438
<a href="">Read more</a>
2539
</article>
40+
2641
</main>
2742
<footer>
2843
<p>
29-
This is the default, provided code and no changes have been made yet.
44+
Footer information about the website.
3045
</p>
3146
</footer>
3247
</body>

‎Wireframe/style.css‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,7 @@ main {
5050
margin: 0 auto calc(var(--space) * 4) auto;
5151
}
5252
footer {
53-
position: fixed;
54-
bottom: 0;
53+
5554
text-align: center;
5655
}
5756
/* ====== Articles Grid Layout ====
@@ -87,3 +86,37 @@ article {
8786
grid-column: span 3;
8887
}
8988
}
89+
h1 {
90+
color: rgb(47, 159, 174);
91+
\text-align: center;
92+
93+
}
94+
95+
header p {
96+
text-align: center;
97+
}
98+
header {
99+
margin-bottom: 30px;
100+
}
101+
a {
102+
background-color: black;
103+
color: white;
104+
text-decoration: none;
105+
border-radius: 8px;
106+
transition: 0.3s;
107+
}
108+
a:hover{
109+
background-color: teal;}
110+
111+
112+
article {
113+
border: var(-- line);
114+
padding-bottom: var(--space);
115+
text-align: left;
116+
display: grid;
117+
grid-template-columns: var(--space) 1fr var(--space);
118+
border-radius: 12px;
119+
overflow: hidden;
120+
padding: 16px;
121+
}
122+

0 commit comments

Comments
 (0)