Skip to content

Commit 62e6207

Browse files
hackertainmenthackertainment
authored
Use CSS to lay out and style header so they match a wireframe design
1 parent a0ae654 commit 62e6207

2 files changed

Lines changed: 69 additions & 21 deletions

File tree

‎Wireframe/index.html‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="stylesheet" href="style.css" />
88
</head>
99
<body>
10-
<header>
10+
<header class="header">
1111
<h1>Wireframe</h1>
1212
<p>
1313
This is the default, provided code and no changes have been made yet.
@@ -24,25 +24,27 @@ <h2>Title</h2>
2424
<a href="">Read more</a>
2525
</article>
2626

27-
<article>
28-
<img src="placeholder.svg" alt="" />
29-
<h2>Title</h2>
30-
<p>
31-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
32-
voluptates. Quisquam, voluptates.
33-
</p>
34-
<a href="">Read more</a>
35-
</article>
27+
<section>
28+
<article>
29+
<img src="placeholder.svg" alt="" />
30+
<h2>Title</h2>
31+
<p>
32+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
33+
voluptates. Quisquam, voluptates.
34+
</p>
35+
<a href="">Read more</a>
36+
</article>
3637

37-
<article>
38-
<img src="placeholder.svg" alt="" />
39-
<h2>Title</h2>
40-
<p>
41-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
42-
voluptates. Quisquam, voluptates.
43-
</p>
44-
<a href="">Read more</a>
45-
</article>
38+
<article>
39+
<img src="placeholder.svg" alt="" />
40+
<h2>Title</h2>
41+
<p>
42+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
43+
voluptates. Quisquam, voluptates.
44+
</p>
45+
<a href="">Read more</a>
46+
</article>
47+
</section>
4648
</main>
4749
<footer>
4850
<p>

‎Wireframe/style.css‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,52 @@
33
1. Lay out the top-level elements: <header>, <main>, <footer>
44
2. Lay out the articles within <main>
55
3. Style individual elements
6-
7-
Please REMOVE this comment before submitting your work.
86
*/
7+
8+
:root {
9+
--grey-dark: #292b2c;
10+
--grey-light: #e4e4e4;
11+
--black: #000;
12+
--white: #fff;
13+
}
14+
15+
body {
16+
margin: 0;
17+
}
18+
19+
body,
20+
button {
21+
font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
22+
color: var(--grey-dark);
23+
font-size: 1rem;
24+
}
25+
26+
h1,h2,h3,h4,h5,h6 {
27+
margin-top: 0;
28+
margin-bottom: 0;
29+
}
30+
31+
p {
32+
margin-top: 0;
33+
margin-bottom: 0;
34+
}
35+
36+
.header,
37+
.content,
38+
.footer {
39+
padding: 0 1.5rem;
40+
max-width: 1200px;
41+
margin: 0 auto;
42+
}
43+
44+
/* Header */
45+
46+
.header {
47+
display: flex;
48+
flex-direction: column;
49+
align-items: center;
50+
height: 5rem;
51+
margin-bottom: 1rem;
52+
padding-top: 1rem;
53+
gap: 1rem;
54+
}

0 commit comments

Comments
 (0)