Skip to content

Commit 17d2845

Browse files
biigbiig
committed
flexbox
1 parent b37ce33 commit 17d2845

File tree

3 files changed

+129
-83
lines changed

3 files changed

+129
-83
lines changed

‎my_solution/04-CSS-Layouts/flexbox.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,33 @@
4040
margin: 40px;
4141

4242
/* FLEXBOX */
43+
display: flex;
44+
align-items: center;
45+
justify-content: flex-start;
46+
/* gap: 30px; */
47+
}
48+
49+
.el {
50+
/* flex-grow: 0;
51+
flex-shrink: 1;
52+
flex-basis: auto; */
53+
54+
/* flex-basis: 200px; */
55+
/* flex-shrink: 0;
56+
flex-grow: 1; */
57+
58+
/* flex: 1 0 auto; */
59+
flex: 1;
60+
}
61+
.el--1 {
62+
align-self: flex-start;
63+
}
64+
65+
.el--5 {
66+
align-self: stretch;
67+
}
68+
.el--6 {
69+
order: -1;
4370
}
4471
</style>
4572
</head>

‎my_solution/04-CSS-Layouts/index.html

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -18,32 +18,37 @@ <h6>The Basic Language of the Web: HTML</h6>
1818
-->
1919

2020
<div class="container">
21-
<header class="main-header">
21+
<header class="main-header clearfix">
2222
<h1>📘 The Code Magazine</h1>
2323

2424
<nav>
2525
<!-- <strong>This is the navigation</strong> -->
2626
<a href="blog.html">Blog</a>
2727
<a href="#">Challenges</a>
28-
<a href="#">Flexbox</a>
29-
<a href="#">CSS Grid</a>
28+
<a href="flexbox.html">Flexbox</a>
29+
<a href="css-grid.html">CSS Grid</a>
3030
</nav>
31+
32+
<!-- <div class="clear">dd</div> -->
3133
</header>
3234

3335
<article>
3436
<header class="post-header">
3537
<h2>The Basic Language of the Web: HTML</h2>
3638

37-
<img
38-
src="img/laura-jones.jpg"
39-
alt="Headshot of Laura Jones"
40-
height="50"
41-
width="50"
42-
/>
39+
<div class="author-box">
40+
<img
41+
src="img/laura-jones.jpg"
42+
alt="Headshot of Laura Jones"
43+
height="50"
44+
width="50"
45+
class="author-img"
46+
/>
4347

44-
<p id="author">
45-
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
46-
</p>
48+
<p id="author" class="author">
49+
Posted by <strong>Laura Jones</strong> on Monday, June 21st 2027
50+
</p>
51+
</div>
4752

4853
<img
4954
src="img/post-img.jpg"
@@ -123,35 +128,41 @@ <h3>Why should you learn HTML?</h3>
123128
<h4>Related posts</h4>
124129

125130
<ul class="related">
126-
<li>
131+
<li class="related-post">
127132
<img
128133
src="img/related-1.jpg"
129134
alt="Person programming"
130135
width="75"
131136
height="75"
132137
/>
133-
<a href="#">How to Learn Web Development</a>
134-
<p class="related-author">By Jonas Schmedtmann</p>
138+
<div>
139+
<a href="#" class="realted-link">How to Learn Web Development</a>
140+
<p class="related-author">By Jonas Schmedtmann</p>
141+
</div>
135142
</li>
136-
<li>
143+
<li class="related-post">
137144
<img
138145
src="img/related-2.jpg"
139146
alt="Lightning"
140147
width="75"
141148
height="75"
142149
/>
143-
<a href="#">The Unknown Powers of CSS</a>
144-
<p class="related-author">By Jim Dillon</p>
150+
<div class="">
151+
<a href="#" class="realted-link">The Unknown Powers of CSS</a>
152+
<p class="related-author">By Jim Dillon</p>
153+
</div>
145154
</li>
146-
<li>
155+
<li class="related-post">
147156
<img
148157
src="img/related-3.jpg"
149158
alt="JavaScript code on a screen"
150159
width="75"
151160
height="75"
152161
/>
153-
<a href="#">Why JavaScript is Awesome</a>
154-
<p class="related-author">By Matilda</p>
162+
<div class="">
163+
<a href="#" class="realted-link">Why JavaScript is Awesome</a>
164+
<p class="related-author">By Matilda</p>
165+
</div>
155166
</li>
156167
</ul>
157168
</aside>

‎my_solution/04-CSS-Layouts/style.css

Lines changed: 70 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
* {
2-
/* border-top: 10px solid #1098ad; */
32
margin: 0;
43
padding: 0;
4+
box-sizing: border-box;
55
}
66

7-
/* PAGE SECTIONS */
87
body {
98
color: #444;
109
font-family: sans-serif;
@@ -14,25 +13,18 @@ body {
1413
}
1514

1615
.container {
17-
width: 800px;
18-
/* margin-left: auto;
19-
margin-right: auto; */
16+
width: 1200px;
2017
margin: 0 auto;
2118
}
2219

2320
.main-header {
2421
background-color: #f7f7f7;
25-
/* padding: 20px;
26-
padding-left: 40px;
27-
padding-right: 40px; */
2822
padding: 20px 40px;
2923
margin-bottom: 60px;
30-
/* height: 80px; */
3124
}
3225

3326
nav {
3427
font-size: 18px;
35-
/* text-align: center; */
3628
}
3729

3830
article {
@@ -41,20 +33,16 @@ article {
4133

4234
.post-header {
4335
margin-bottom: 40px;
44-
/* position: relative; */
4536
}
4637

4738
aside {
4839
background-color: #f7f7f7;
4940
border-top: 5px solid #1098ad;
5041
border-bottom: 5px solid #1098ad;
51-
/* padding-top: 50px;
52-
padding-bottom: 50px; */
5342
padding: 50px 0;
54-
width: 500px;
43+
margin-bottom: 30px;
5544
}
5645

57-
/* SMALLER ELEMENTS */
5846
h1,
5947
h2,
6048
h3 {
@@ -99,21 +87,12 @@ ol {
9987
li {
10088
font-size: 20px;
10189
margin-bottom: 10px;
102-
/* display: inline; */
10390
}
10491

10592
li:last-child {
10693
margin-bottom: 0;
10794
}
10895

109-
/* footer p {
110-
font-size: 16px;
111-
} */
112-
113-
/* article header p {
114-
font-style: italic;
115-
} */
116-
11796
#author {
11897
font-style: italic;
11998
font-size: 18px;
@@ -128,22 +107,14 @@ li:last-child {
128107
font-weight: bold;
129108
}
130109

131-
/* ul {
132-
list-style: none;
133-
} */
134-
135110
.related {
111+
margin: 0;
136112
list-style: none;
137113
}
138114

139115
body {
140-
/* background-color: orangered; */
141116
}
142117

143-
/* .first-li {
144-
font-weight: bold;
145-
} */
146-
147118
li:first-child {
148119
font-weight: bold;
149120
}
@@ -153,22 +124,18 @@ li:last-child {
153124
}
154125

155126
li:nth-child(even) {
156-
/* color: red; */
157127
}
158128

159-
/* Misconception: this won't work! */
160129
article p:first-child {
161130
color: red;
162131
}
163132

164-
/* Styling links */
165133
a:link {
166134
color: #1098ad;
167135
text-decoration: none;
168136
}
169137

170138
a:visited {
171-
/* color: #777; */
172139
color: #1098ad;
173140
}
174141

@@ -182,22 +149,14 @@ a:active {
182149
background-color: black;
183150
font-style: italic;
184151
}
185-
/* LVHA */
186152

187153
.post-img {
188154
width: 100%;
189155
height: auto;
190156
}
191157

192158
nav a:link {
193-
/* background-color: orangered;
194-
margin: 20px;
195-
padding: 20px;
196-
197-
display: block; */
198-
199159
margin-right: 30px;
200-
margin-top: 10px;
201160
display: inline-block;
202161
}
203162

@@ -211,8 +170,6 @@ button {
211170
cursor: pointer;
212171

213172
position: absolute;
214-
/* top: 50px;
215-
left: 50px; */
216173
bottom: 50px;
217174
right: 50px;
218175
}
@@ -223,11 +180,9 @@ h1::first-letter {
223180
}
224181

225182
h3 + p::first-line {
226-
/* color: red; */
227183
}
228184

229185
h2 {
230-
/* background-color: orange; */
231186
position: relative;
232187
}
233188

@@ -244,24 +199,77 @@ h2::before {
244199
right: -25px;
245200
}
246201

247-
/* Resolving conflicts */
248-
/* #copyright {
249-
color: red;
202+
/*
203+
.author-img {
204+
float: left;
205+
}
206+
207+
.author {
208+
float: left;
209+
margin-left: 20px;
210+
margin-top: 10px;
250211
}
251212
252-
.copyright {
253-
color: blue;
213+
h1 {
214+
float: left;
215+
}
216+
nav {
217+
float: right;
218+
}
219+
.clear {
220+
clear: both;
254221
}
255222
256-
.text {
257-
color: yellow;
223+
.clearfix::after {
224+
content: "";
225+
clear: both;
226+
display: block;
258227
}
259228
260-
footer p {
261-
color: green !important;
229+
article {
230+
width: 825px;
231+
float: left;
232+
}
233+
aside {
234+
width: 300px;
235+
float: right;
236+
padding: 50px 40px;
237+
}
238+
footer {
239+
clear: both;
262240
} */
263241

264-
/* nav a:link,
265-
nav p {
266-
font-size: 18px;
267-
} */
242+
.main-header {
243+
display: flex;
244+
align-items: center;
245+
justify-content: space-between;
246+
}
247+
.author-box {
248+
display: flex;
249+
align-items: center;
250+
margin-bottom: 30px;
251+
}
252+
.author {
253+
margin-left: 20px;
254+
}
255+
.related-post {
256+
display: flex;
257+
align-items: center;
258+
gap: 20px;
259+
margin-bottom: 30px;
260+
}
261+
262+
.realted-link :link {
263+
font-size: 17px;
264+
font-weight: bold;
265+
font-style: normal;
266+
margin-bottom: 5px;
267+
display: block;
268+
}
269+
270+
.related-author {
271+
margin-bottom: 0;
272+
font-size: 14px;
273+
font-weight: normal;
274+
font-style: italic;
275+
}

0 commit comments

Comments
 (0)