Skip to content

Commit 4b4efc5

Browse files
AiriseruAiriseru
committed
Accomplish flex, foundations, and margin-and-padding from css exercises
1 parent d2b199b commit 4b4efc5

File tree

21 files changed

+275
-50
lines changed

21 files changed

+275
-50
lines changed

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

Lines changed: 3 additions & 0 deletions
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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
.header {
22
font-family: monospace;
33
background: papayawhip;
4+
display: flex;
5+
align-items: center;
6+
justify-content: space-between;
47
}
58

69
.logo {
@@ -14,6 +17,10 @@
1417
ul {
1518
/* this removes the dots on the list items*/
1619
list-style-type: none;
20+
display: flex;
21+
gap: 8px;
22+
margin: 0;
23+
padding: 0;
1724
}
1825

1926
a {

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,14 @@ 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+
align-items: center;
17+
gap: 8px;
18+
}
19+
20+
.links {
21+
display: flex;
22+
gap: 8px;
1523
}
1624

1725
.profile-image {
@@ -20,13 +28,15 @@ body {
2028
border-radius: 50%;
2129
width: 48px;
2230
height: 48px;
31+
margin-right: 16px;
2332
}
2433

2534
.logo {
2635
color: rebeccapurple;
2736
font-size: 32px;
2837
font-weight: 900;
2938
font-style: italic;
39+
margin-left: 16px;
3040
}
3141

3242
button {
@@ -35,6 +45,7 @@ button {
3545
background: rebeccapurple;
3646
color: white;
3747
padding: 8px 24px;
48+
margin-left: auto;
3849
}
3950

4051
a {

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,25 @@
1010
<body>
1111
<div class="title">Information!</div>
1212

13-
<img src="./images/barberry.png" alt="barberry">
14-
<div class="text">This is a type of plant. We love this one.</div>
15-
16-
<img src="./images/chilli.png" alt="chili">
17-
<div class="text">This is another type of plant. Isn't it nice?</div>
18-
19-
<img src="./images/pepper.png" alt="pepper">
20-
<div class="text">We have so many plants. Yay plants.</div>
21-
22-
<img src="./images/saffron.png" alt="saffron">
23-
<div class="text">I'm running out of things to say about plants.</div>
13+
<div class="container">
14+
<div class="item">
15+
<img src="./images/barberry.png" alt="barberry">
16+
<div class="text">This is a type of plant. We love this one.</div>
17+
</div>
18+
<div class="item">
19+
<img src="./images/chilli.png" alt="chili">
20+
<div class="text">This is another type of plant. Isn't it nice?</div>
21+
</div>
22+
<div class="item">
23+
<img src="./images/pepper.png" alt="pepper">
24+
<div class="text">We have so many plants. Yay plants.</div>
25+
</div>
26+
<div class="item">
27+
<img src="./images/saffron.png" alt="saffron">
28+
<div class="text">I'm running out of things to say about plants.</div>
29+
</div>
30+
</div>
31+
2432

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

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
11
body {
22
font-family: 'Courier New', Courier, monospace;
3+
text-align: center;
34
}
45

56
img {
67
width: 100px;
78
height: 100px;
89
}
910

11+
.container {
12+
display: flex;
13+
justify-content: center;
14+
gap: 52px;
15+
margin-top: 32px;
16+
}
17+
1018
.title {
1119
font-size: 36px;
1220
font-weight: 900;
1321
}
1422

23+
.item {
24+
max-width: 200px;
25+
}
26+
1527
/* do not edit this footer */
1628
.footer {
1729
position: fixed;

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

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,18 @@
1010
<body>
1111
<div class="modal">
1212
<div class="icon">!</div>
13-
<div class="header">Are you sure you want to do that?</div>
14-
<button class="close-button">✖</button>
15-
<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>
16-
<button class="continue">Continue</button>
17-
<button class="cancel">Cancel</button>
13+
<div class="info">
14+
<div class="top">
15+
<div class="header">Are you sure you want to do that?</div>
16+
<button class="close-button">✖</button>
17+
</div>
18+
<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>
19+
<div class="buttons">
20+
<button class="continue">Continue</button>
21+
<button class="cancel">Cancel</button>
22+
</div>
23+
</div>
24+
1825
</div>
1926
</body>
2027
</html>

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +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+
gap: 20px;
25+
padding: 20px;
26+
}
27+
28+
.top {
29+
display: flex;
30+
align-items: center;
31+
justify-content: space-between;
2332
}
2433

34+
.header {
35+
font-weight: bold;
36+
font-size: 20px;
37+
}
38+
39+
.info {
40+
display: flex;
41+
flex-direction: column;
42+
gap: 12px;
43+
}
44+
45+
2546
.icon {
2647
color: royalblue;
2748
font-size: 26px;
@@ -33,6 +54,7 @@ body {
3354
display: flex;
3455
align-items: center;
3556
justify-content: center;
57+
flex-shrink: 0;
3658
}
3759

3860
.close-button {

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,17 @@ body {
55
margin: 0;
66
overflow: hidden;
77
font-family: Roboto, sans-serif;
8+
display: flex;
9+
flex-direction: column;
10+
}
11+
12+
ul {
13+
list-style: none;
14+
}
15+
16+
a {
17+
color: black;
18+
text-decoration: none;
819
}
920

1021
img {
@@ -16,6 +27,7 @@ button {
1627
border: none;
1728
border-radius: 8px;
1829
background: #eee;
30+
padding: 9px 12px;
1931
}
2032

2133
input {
@@ -25,3 +37,31 @@ input {
2537
width: 400px;
2638
margin-bottom: 16px;
2739
}
40+
41+
.header, .footer {
42+
display: flex;
43+
justify-content: space-between;
44+
padding: 2px 17px;
45+
}
46+
47+
.left-links, .right-links {
48+
display: flex;
49+
gap: 20px;
50+
}
51+
52+
.left-links {
53+
padding-left: 0;
54+
}
55+
56+
.content {
57+
display: flex;
58+
flex-direction: column;
59+
text-align: center;
60+
flex: 1;
61+
justify-content: center;
62+
align-items: center;
63+
}
64+
65+
.footer {
66+
background-color: #eee;
67+
}

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

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,27 @@
1212
MY AWESOME WEBSITE
1313
</div>
1414

15-
<div class="sidebar">
16-
<ul>
17-
<li><a href="#">⭐ - link one</a></li>
18-
<li><a href="#">🦸🏽‍♂️ - link two</a></li>
19-
<li><a href="#">🖌️ - link three</a></li>
20-
<li><a href="#">👌🏽 - link four</a></li>
21-
</ul>
15+
<div class="content">
16+
<div class="sidebar">
17+
<ul>
18+
<li><a href="#">⭐ - link one</a></li>
19+
<li><a href="#">🦸🏽‍♂️ - link two</a></li>
20+
<li><a href="#">🖌️ - link three</a></li>
21+
<li><a href="#">👌🏽 - link four</a></li>
22+
</ul>
23+
</div>
24+
<div class="cards">
25+
<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>
26+
<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>
27+
<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>
28+
<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>
29+
<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>
30+
<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>
31+
</div>
32+
2233
</div>
23-
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>
30-
3134
<div class="footer">
32-
The Odin Project ❤️
35+
<div>The Odin Project ❤️</div>
3336
</div>
3437
</body>
3538
</html>

‎flex/07-flex-layout-2/style.css

Lines changed: 40 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,66 @@ body {
22
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
33
margin: 0;
44
min-height: 100vh;
5+
display: flex;
6+
flex-direction: column;
57
}
68

79
.header {
8-
height: 72px;
910
background: darkmagenta;
1011
color: white;
12+
font-weight: 900;
13+
font-size: 32px;
14+
padding: 16px;
15+
}
16+
17+
.content {
18+
display: flex;
19+
flex: 1;
20+
}
21+
22+
.cards {
23+
display: flex;
24+
flex: 3;
25+
flex-wrap: wrap;
26+
padding: 32px;
27+
gap: 8px;
1128
}
1229

1330
.footer {
31+
display: flex;
1432
height: 72px;
1533
background: #eee;
1634
color: darkmagenta;
35+
justify-content: center;
36+
align-items: center;
1737
}
1838

1939
.sidebar {
2040
width: 300px;
2141
background: royalblue;
2242
box-sizing: border-box;
43+
flex-shrink: 0;
44+
}
45+
46+
ul {
47+
list-style: none;
48+
padding-left: 16px;
49+
}
50+
51+
li {
52+
padding: 8px;
2353
}
2454

2555
.card {
2656
border: 1px solid #eee;
2757
box-shadow: 2px 4px 16px rgba(0,0,0,.06);
2858
border-radius: 4px;
29-
}
59+
flex-basis: 400px;
60+
padding: 16px;
61+
}
62+
63+
a {
64+
text-decoration: none;
65+
color: white;
66+
font-size: 24px;
67+
}

‎foundations/01-css-methods/index.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,18 @@
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
77
<title>Methods for Adding CSS</title>
8+
<link rel="stylesheet" href="./styles.css">
9+
<style>
10+
p {
11+
background-color: green;
12+
color: white;
13+
font-size: 18px;
14+
}
15+
</style>
816
</head>
917
<body>
1018
<div>Style me via the external method!</div>
1119
<p>I would like to be styled with the internal method, please.</p>
12-
<button>Inline Method</button>
20+
<button style="background-color: orange; font-size: 18px;">Inline Method</button>
1321
</body>
1422
</html>

0 commit comments

Comments
 (0)