Skip to content

Commit d9d87ba

Browse files
myllahmyllah
committed
6 - CSS Flexbox
1 parent 5ead1d7 commit d9d87ba

18 files changed

+756
-0
lines changed

‎6-css-flexbox/01-use-display-flex-to-position-two-boxes.html

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<style>
2+
#box-container {
3+
height: 500px;
4+
display: flex;
5+
}
6+
7+
#box-1 {
8+
background-color: dodgerblue;
9+
width: 50%;
10+
height: 50%;
11+
}
12+
13+
#box-2 {
14+
background-color: orangered;
15+
width: 50%;
16+
height: 50%;
17+
}
18+
</style>
19+
<div id="box-container">
20+
<div id="box-1"></div>
21+
<div id="box-2"></div>
22+
</div>

‎6-css-flexbox/02-add-flex-superpowers-to-the-tweet-embed.html

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<style>
2+
body {
3+
font-family: Arial, sans-serif;
4+
}
5+
header {
6+
display: flex;
7+
}
8+
header .profile-thumbnail {
9+
width: 50px;
10+
height: 50px;
11+
border-radius: 4px;
12+
}
13+
header .profile-name {
14+
display: flex;
15+
margin-left: 10px;
16+
}
17+
header .follow-btn {
18+
display: flex;
19+
margin: 0 0 0 auto;
20+
}
21+
header .follow-btn button {
22+
border: 0;
23+
border-radius: 3px;
24+
padding: 5px;
25+
}
26+
header h3, header h4 {
27+
display: flex;
28+
margin: 0;
29+
}
30+
#inner p {
31+
margin-bottom: 10px;
32+
font-size: 20px;
33+
}
34+
#inner hr {
35+
margin: 20px 0;
36+
border-style: solid;
37+
opacity: 0.1;
38+
}
39+
footer {
40+
display: flex;
41+
}
42+
footer .stats {
43+
display: flex;
44+
font-size: 15px;
45+
}
46+
footer .stats strong {
47+
font-size: 18px;
48+
}
49+
footer .stats .likes {
50+
margin-left: 10px;
51+
}
52+
footer .cta {
53+
margin-left: auto;
54+
}
55+
footer .cta button {
56+
border: 0;
57+
background: transparent;
58+
}
59+
</style>
60+
<header>
61+
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
62+
<div class="profile-name">
63+
<h3>Quincy Larson</h3>
64+
<h4>@ossia</h4>
65+
</div>
66+
<div class="follow-btn">
67+
<button>Follow</button>
68+
</div>
69+
</header>
70+
<div id="inner">
71+
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
72+
<span class="date">1:32 PM - 12 Jan 2018</span>
73+
<hr>
74+
</div>
75+
<footer>
76+
<div class="stats">
77+
<div class="Retweets">
78+
<strong>107</strong> Retweets
79+
</div>
80+
<div class="likes">
81+
<strong>431</strong> Likes
82+
</div>
83+
</div>
84+
<div class="cta">
85+
<button class="share-btn">Share</button>
86+
<button class="retweet-btn">Retweet</button>
87+
<button class="like-btn">Like</button>
88+
</div>
89+
</footer>

‎6-css-flexbox/03-use-the-flex-direction-property-to-make-a-row.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<style>
2+
#box-container {
3+
display: flex;
4+
height: 500px;
5+
flex-direction: row-reverse;
6+
}
7+
#box-1 {
8+
background-color: dodgerblue;
9+
width: 50%;
10+
height: 50%;
11+
}
12+
13+
#box-2 {
14+
background-color: orangered;
15+
width: 50%;
16+
height: 50%;
17+
}
18+
</style>
19+
20+
<div id="box-container">
21+
<div id="box-1"></div>
22+
<div id="box-2"></div>
23+
</div>

‎6-css-flexbox/04-apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.html

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<style>
2+
body {
3+
font-family: Arial, sans-serif;
4+
}
5+
header {
6+
display: flex;
7+
flex-direction: row;
8+
}
9+
header .profile-thumbnail {
10+
width: 50px;
11+
height: 50px;
12+
border-radius: 4px;
13+
}
14+
header .profile-name {
15+
display: flex;
16+
margin-left: 10px;
17+
}
18+
header .follow-btn {
19+
display: flex;
20+
margin: 0 0 0 auto;
21+
}
22+
header .follow-btn button {
23+
border: 0;
24+
border-radius: 3px;
25+
padding: 5px;
26+
}
27+
header h3, header h4 {
28+
display: flex;
29+
margin: 0;
30+
}
31+
#inner p {
32+
margin-bottom: 10px;
33+
font-size: 20px;
34+
}
35+
#inner hr {
36+
margin: 20px 0;
37+
border-style: solid;
38+
opacity: 0.1;
39+
}
40+
footer {
41+
display: flex;
42+
flex-direction: row;
43+
}
44+
footer .stats {
45+
display: flex;
46+
font-size: 15px;
47+
}
48+
footer .stats strong {
49+
font-size: 18px;
50+
}
51+
footer .stats .likes {
52+
margin-left: 10px;
53+
}
54+
footer .cta {
55+
margin-left: auto;
56+
}
57+
footer .cta button {
58+
border: 0;
59+
background: transparent;
60+
}
61+
</style>
62+
<header>
63+
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
64+
<div class="profile-name">
65+
<h3>Quincy Larson</h3>
66+
<h4>@ossia</h4>
67+
</div>
68+
<div class="follow-btn">
69+
<button>Follow</button>
70+
</div>
71+
</header>
72+
<div id="inner">
73+
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
74+
<span class="date">1:32 PM - 12 Jan 2018</span>
75+
<hr>
76+
</div>
77+
<footer>
78+
<div class="stats">
79+
<div class="Retweets">
80+
<strong>107</strong> Retweets
81+
</div>
82+
<div class="likes">
83+
<strong>431</strong> Likes
84+
</div>
85+
</div>
86+
<div class="cta">
87+
<button class="share-btn">Share</button>
88+
<button class="retweet-btn">Retweet</button>
89+
<button class="like-btn">Like</button>
90+
</div>
91+
</footer>

‎6-css-flexbox/05-use-the-flex-direction-property-to-make-a-column.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<style>
2+
#box-container {
3+
display: flex;
4+
height: 500px;
5+
flex-direction: column;
6+
}
7+
#box-1 {
8+
background-color: dodgerblue;
9+
width: 50%;
10+
height: 50%;
11+
}
12+
13+
#box-2 {
14+
background-color: orangered;
15+
width: 50%;
16+
height: 50%;
17+
}
18+
</style>
19+
20+
<div id="box-container">
21+
<div id="box-1"></div>
22+
<div id="box-2"></div>
23+
</div>

‎6-css-flexbox/06-apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.html

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<style>
2+
body {
3+
font-family: Arial, sans-serif;
4+
}
5+
header, footer {
6+
display: flex;
7+
flex-direction: row;
8+
}
9+
header .profile-thumbnail {
10+
width: 50px;
11+
height: 50px;
12+
border-radius: 4px;
13+
}
14+
header .profile-name {
15+
display: flex;
16+
flex-direction: column;
17+
margin-left: 10px;
18+
}
19+
header .follow-btn {
20+
display: flex;
21+
margin: 0 0 0 auto;
22+
}
23+
header .follow-btn button {
24+
border: 0;
25+
border-radius: 3px;
26+
padding: 5px;
27+
}
28+
header h3, header h4 {
29+
display: flex;
30+
margin: 0;
31+
}
32+
#inner p {
33+
margin-bottom: 10px;
34+
font-size: 20px;
35+
}
36+
#inner hr {
37+
margin: 20px 0;
38+
border-style: solid;
39+
opacity: 0.1;
40+
}
41+
footer .stats {
42+
display: flex;
43+
font-size: 15px;
44+
}
45+
footer .stats strong {
46+
font-size: 18px;
47+
}
48+
footer .stats .likes {
49+
margin-left: 10px;
50+
}
51+
footer .cta {
52+
margin-left: auto;
53+
}
54+
footer .cta button {
55+
border: 0;
56+
background: transparent;
57+
}
58+
</style>
59+
<header>
60+
<img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
61+
<div class="profile-name">
62+
<h3>Quincy Larson</h3>
63+
<h4>@ossia</h4>
64+
</div>
65+
<div class="follow-btn">
66+
<button>Follow</button>
67+
</div>
68+
</header>
69+
<div id="inner">
70+
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
71+
<span class="date">1:32 PM - 12 Jan 2018</span>
72+
<hr>
73+
</div>
74+
<footer>
75+
<div class="stats">
76+
<div class="Retweets">
77+
<strong>107</strong> Retweets
78+
</div>
79+
<div class="likes">
80+
<strong>431</strong> Likes
81+
</div>
82+
</div>
83+
<div class="cta">
84+
<button class="share-btn">Share</button>
85+
<button class="retweet-btn">Retweet</button>
86+
<button class="like-btn">Like</button>
87+
</div>
88+
</footer>

‎6-css-flexbox/07-align-elements-using-the-justify-content-property.html

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<style>
2+
#box-container {
3+
background: gray;
4+
display: flex;
5+
height: 500px;
6+
justify-content: center;
7+
}
8+
#box-1 {
9+
background-color: dodgerblue;
10+
width: 25%;
11+
height: 100%;
12+
}
13+
14+
#box-2 {
15+
background-color: orangered;
16+
width: 25%;
17+
height: 100%;
18+
}
19+
</style>
20+
21+
<div id="box-container">
22+
<div id="box-1"></div>
23+
<div id="box-2"></div>
24+
</div>

0 commit comments

Comments
 (0)