Skip to content

Commit 41b373c

Browse files
robgitnycrobgitnyc
committed
mega commit
1 parent 5f72a6f commit 41b373c

File tree

28 files changed

+396
-57
lines changed

28 files changed

+396
-57
lines changed

‎flex/01-flex-center/style.css

+3
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
border: 4px solid midnightblue;
44
width: 400px;
55
height: 300px;
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
69
}
710

811
.box {

‎flex/02-flex-header/style.css

+9
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
11
.header {
22
font-family: monospace;
33
background: papayawhip;
4+
display: flex;
5+
justify-content: space-between;
6+
align-items: center;
7+
padding: 10px;
48
}
59

10+
11+
612
.logo {
713
font-size: 48px;
814
font-weight: 900;
@@ -14,6 +20,9 @@
1420
ul {
1521
/* this removes the dots on the list items*/
1622
list-style-type: none;
23+
display: flex;
24+
gap: 5px;
25+
1726
}
1827

1928
a {

‎flex/03-flex-header-2/index.html

+12-7
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,23 @@
99
</head>
1010
<body>
1111
<div class="header">
12-
<div class="logo">
13-
LOGO
12+
<div class="izquierdo">
13+
<div class="logo">
14+
LOGO
15+
</div>
16+
<ul class="links">
17+
<li><a href="google.com">link-one</a></li>
18+
<li><a href="google.com">link-two</a></li>
19+
<li><a href="google.com">link-three</a></li>
20+
</ul>
1421
</div>
15-
<ul class="links">
16-
<li><a href="google.com">link-one</a></li>
17-
<li><a href="google.com">link-two</a></li>
18-
<li><a href="google.com">link-three</a></li>
19-
</ul>
22+
23+
<div class="derecho">
2024
<button class="notifications">
2125
1 new notification
2226
</button>
2327
<div class="profile-image"></div>
2428
</div>
29+
</div>
2530
</body>
2631
</html>

‎flex/03-flex-header-2/style.css

+17
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,27 @@ body {
1212
background: white;
1313
border-bottom: 1px solid #ddd;
1414
box-shadow: 0 0 8px rgba(0,0,0,.1);
15+
display: flex;
16+
justify-content: space-between;
1517
}
18+
.izquierdo {
19+
display: flex;
20+
}
21+
.derecho {
22+
display: flex;
23+
gap: 16px;
24+
align-items: center;
25+
}
26+
27+
1628

1729
.profile-image {
1830
background: rebeccapurple;
1931
box-shadow: inset 2px 2px 4px rgba(0,0,0,.5);
2032
border-radius: 50%;
2133
width: 48px;
2234
height: 48px;
35+
margin-right: 8px;
2336
}
2437

2538
.logo {
@@ -35,6 +48,7 @@ button {
3548
background: rebeccapurple;
3649
color: white;
3750
padding: 8px 24px;
51+
height: 30px;
3852
}
3953

4054
a {
@@ -45,4 +59,7 @@ a {
4559

4660
ul {
4761
list-style-type: none;
62+
padding-left: 16px;
63+
display: flex;
64+
gap: 16px;
4865
}

‎flex/04-flex-information/index.html

+12-1
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,29 @@
99
</head>
1010
<body>
1111
<div class="title">Information!</div>
12-
12+
<div class="padre">
13+
<div class="block1">
1314
<img src="./images/barberry.png" alt="barberry">
1415
<div class="text">This is a type of plant. We love this one.</div>
16+
</div>
1517

18+
<div class="block2">
1619
<img src="./images/chilli.png" alt="chili">
1720
<div class="text">This is another type of plant. Isn't it nice</div>
21+
</div>
1822

23+
<div class="block3">
1924
<img src="./images/pepper.png" alt="pepper">
2025
<div class="text">We have so many plants. Yay plants.</div>
26+
</div>
2127

28+
<div class="block4">
2229
<img src="./images/saffron.png" alt="saffron">
2330
<div class="text">I'm running out of things to say about plants.</div>
31+
</div>
32+
</div>
33+
</body>
34+
2435

2536
<!-- disregard this section, it's here to give attribution to the creator of these icons -->
2637
<div class="footer">

‎flex/04-flex-information/style.css

+16
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
11
body {
22
font-family: 'Courier New', Courier, monospace;
33
}
4+
.padre {
5+
display: flex;
6+
justify-content: center;
7+
gap: 52px;
8+
}
9+
10+
.block1, .block2, .block3, .block4 {
11+
display: flex;
12+
flex-wrap: wrap;
13+
width: 200px;
14+
justify-content: center;
15+
text-align: center;
16+
17+
}
418

519
img {
620
width: 100px;
@@ -10,6 +24,8 @@ img {
1024
.title {
1125
font-size: 36px;
1226
font-weight: 900;
27+
text-align: center;
28+
margin-bottom: 22px;
1329
}
1430

1531
/* do not edit this footer */

‎flex/05-flex-modal/index.html

+19
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,31 @@
99
</head>
1010
<body>
1111
<div class="modal">
12+
13+
<div class="izquierda">
1214
<div class="icon">!</div>
15+
</div>
16+
17+
18+
<div class="derecha">
19+
<div class="arriba">
1320
<div class="header">Are you sure you want to do that?</div>
21+
22+
<div class="close">
1423
<div class="close-button">✖</div>
24+
</div>
25+
</div>
26+
1527
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
28+
29+
30+
1631
<button class="continue">Continue</button>
1732
<button class="cancel">Cancel</button>
33+
34+
35+
36+
</div>
1837
</div>
1938
</body>
2039
</html>

‎flex/05-flex-modal/style.css

+28
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,29 @@ body {
2020
width: 480px;
2121
border-radius: 10px;
2222
box-shadow: 2px 4px 16px rgba(0,0,0,.2);
23+
display: flex;
24+
padding: 10px;
25+
}
26+
27+
.arriba {
28+
display: flex;
29+
justify-content: space-between;
30+
margin-bottom: 8px;
31+
}
32+
33+
.header {
34+
font-weight: bold;
35+
font-size: 20px;
36+
}
37+
38+
.derecha {
39+
margin: 8px 8px 8px 0px;
40+
}
41+
42+
.izquierda {
43+
display: flex;
44+
justify-content: center;
45+
padding: 8px;
2346
}
2447

2548
.icon {
@@ -33,6 +56,11 @@ body {
3356
display: flex;
3457
align-items: center;
3558
justify-content: center;
59+
flex-shrink: 0;
60+
}
61+
62+
.text {
63+
margin-bottom: 8px;
3664
}
3765

3866
.close-button {

‎flex/06-flex-layout/style.css

+37
Original file line numberDiff line numberDiff line change
@@ -5,17 +5,49 @@ body {
55
margin: 0;
66
overflow: hidden;
77
font-family: Roboto, sans-serif;
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: space-between;
11+
}
12+
13+
ul {
14+
display: flex;
15+
gap: 16px;
16+
padding: 0px 20px;
17+
18+
}
19+
20+
li {
21+
list-style-type: none;
22+
23+
}
24+
25+
a {
26+
text-decoration: none;
27+
}
28+
29+
.header {
30+
display: flex;
31+
justify-content: space-between;
32+
}
33+
34+
.content {
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
838
}
939

1040
img {
1141
width: 600px;
42+
1243
}
1344

1445
button {
1546
font-family: Roboto, sans-serif;
1647
border: none;
1748
border-radius: 8px;
1849
background: #eee;
50+
padding: 15px;
1951
}
2052

2153
input {
@@ -25,3 +57,8 @@ input {
2557
width: 400px;
2658
margin-bottom: 16px;
2759
}
60+
.footer {
61+
display: flex;
62+
justify-content: space-between;
63+
background-color: #eee;
64+
}

‎flex/07-flex-layout-2/index.html

+29-17
Original file line numberDiff line numberDiff line change
@@ -8,26 +8,38 @@
88
<link rel="stylesheet" href="style.css">
99
</head>
1010
<body>
11-
<div class="header">
12-
MY AWESOME WEBSITE
13-
</div>
14-
15-
<div class="sidebar">
16-
<ul>
17-
<li><a href="google.com">⭐ - link one</a></li>
18-
<li><a href="google.com">🦸🏽‍♂️ - link two</a></li>
19-
<li><a href="google.com">🖌️ - link three</a></li>
20-
<li><a href="google.com">👌🏽 - link four</a></li>
21-
</ul>
11+
<div class="container1">
12+
<div class="header">
13+
MY AWESOME WEBSITE
14+
</div>
2215
</div>
2316

24-
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
25-
<div class="card">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
26-
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
27-
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
28-
<div class="card">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
29-
<div class="card">Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
17+
<div class="centro">
18+
<div class="sidebar">
19+
<ul>
20+
<li><a href="google.com">⭐ - link one</a></li>
21+
<li><a href="google.com">🦸🏽‍♂️ - link two</a></li>
22+
<li><a href="google.com">🖌️ - link three</a></li>
23+
<li><a href="google.com">👌🏽 - link four</a></li>
24+
</ul>
25+
</div>
26+
27+
28+
29+
30+
<div class="txtcontainer">
31+
<div class="card">1Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora, eveniet? Dolorem dignissimos maiores non delectus possimus dolor nulla repudiandae vitae provident quae, obcaecati ipsam unde impedit corrupti veritatis minima porro?</div>
32+
<div class="card">2orem ipsum dolor sit, amet consectetur adipisicing elit. Quasi quaerat qui iure ipsam maiores velit tempora, deleniti nesciunt fuga suscipit alias vero rem, corporis officia totam saepe excepturi odit ea.</div>
33+
<div class="card">3Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
34+
<div class="card">4Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
35+
<div class="card">5Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nobis illo ex quas, commodi eligendi aliquam ut, dolor, atque aliquid iure nulla. Laudantium optio accusantium quaerat fugiat, natus officia esse autem?</div>
36+
<div class="card">6Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus nihil impedit eius amet adipisci dolorum vel nostrum sit excepturi corporis tenetur cum, dolore incidunt blanditiis. Unde earum minima laboriosam eos!</div>
37+
</div>
38+
3039

40+
41+
</div>
42+
3143
<div class="footer">
3244
The Odin Project ❤️
3345
</div>

0 commit comments

Comments
 (0)