Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 4e9852d

Browse files
southbaycoder408southbaycoder408
committed
adding code to personal branch
1 parent 6f82afe commit 4e9852d

File tree

20 files changed

+311
-56
lines changed

20 files changed

+311
-56
lines changed

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

Lines changed: 4 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 {
@@ -12,4 +15,5 @@
1215
border: 6px solid maroon;
1316
width: 80px;
1417
height: 80px;
18+
flex-basis: auto;
1519
}

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
1+
2+
*{
3+
border: 1px solid red;
4+
}
5+
6+
17
.header {
28
font-family: monospace;
39
background: papayawhip;
10+
display: flex;
11+
justify-content: space-between;
12+
align-items: center;
13+
flex: 1 1 0%;
414
}
515

616
.logo {
@@ -9,11 +19,19 @@
919
color: tomato;
1020
background: white;
1121
padding: 4px 32px;
22+
margin: 10px;
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
1226
}
1327

1428
ul {
1529
/* this removes the dots on the list items*/
1630
list-style-type: none;
31+
display: flex;
32+
gap: 8px;
33+
padding-left: 10px;
34+
padding-right: 10px;
1735
}
1836

1937
a {

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

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,34 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge">
67
<meta name="viewport" content="width=device-width, initial-scale=1.0">
78
<title>Flex Header 2</title>
89
<link rel="stylesheet" href="style.css">
910
</head>
11+
1012
<body>
11-
<div class="header">
12-
<div class="logo">
13-
LOGO
13+
<div class="header-parent">
14+
<div class="header-left">
15+
<div class="logo">
16+
LOGO
17+
</div>
18+
<ul class="links">
19+
<li><a href="google.com">link-one</a></li>
20+
<li><a href="google.com">link-two</a></li>
21+
<li><a href="google.com">link-three</a></li>
22+
</ul>
23+
</div>
24+
25+
<div class="header-right">
26+
<button class="notifications">
27+
1 new notification
28+
</button>
29+
<div class="profile-image"></div>
1430
</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>
20-
<button class="notifications">
21-
1 new notification
22-
</button>
23-
<div class="profile-image"></div>
2431
</div>
2532
</body>
33+
2634
</html>

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

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,39 @@
22
you'll learn about it later. */
33
@import url('https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400;1,900&display=swap');
44

5+
/* *{
6+
border: 1px solid red;
7+
} */
8+
59
body {
610
margin: 0;
711
background: #eee;
812
font-family: Besley, serif;
913
}
1014

11-
.header {
12-
background: white;
13-
border-bottom: 1px solid #ddd;
15+
.header-parent{
16+
display: flex;
17+
justify-content: space-between;
1418
box-shadow: 0 0 8px rgba(0,0,0,.1);
19+
border-bottom: 1px solid #ddd;
20+
background-color: white;
21+
padding: 8px;
22+
margin: 0;
23+
}
24+
25+
.header-left{
26+
background: white;
27+
display: flex;
28+
align-items: center;
1529
}
1630

31+
.header-right {
32+
background: white;
33+
display: flex;
34+
align-items: center;
35+
}
36+
37+
1738
.profile-image {
1839
background: rebeccapurple;
1940
box-shadow: inset 2px 2px 4px rgba(0,0,0,.5);
@@ -27,6 +48,13 @@ body {
2748
font-size: 32px;
2849
font-weight: 900;
2950
font-style: italic;
51+
padding-left: 0px;
52+
padding-right: 16px;
53+
}
54+
55+
.links{
56+
display: inline-flex;
57+
padding: 0px;
3058
}
3159

3260
button {
@@ -35,14 +63,18 @@ button {
3563
background: rebeccapurple;
3664
color: white;
3765
padding: 8px 24px;
66+
margin-right: 16px;
3867
}
3968

4069
a {
4170
/* this removes the line under our links */
4271
text-decoration: none;
4372
color: rebeccapurple;
73+
display: flex;
74+
padding-right: 16px;
4475
}
4576

4677
ul {
4778
list-style-type: none;
79+
margin: 0;
4880
}

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

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,27 @@
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>
13+
<div class="items">
14+
<div class="barberry1">
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+
19+
<div class="chilli1">
20+
<img src="./images/chilli.png" alt="chili">
21+
<div class="text">This is another type of plant. Isn't it nice</div>
22+
</div>
1523

16-
<img src="./images/chilli.png" alt="chili">
17-
<div class="text">This is another type of plant. Isn't it nice</div>
24+
<div class="pepper1">
25+
<img src="./images/pepper.png" alt="pepper">
26+
<div class="text">We have so many plants. Yay plants.</div>
27+
</div>
1828

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>
29+
<div class="saffron1">
30+
<img src="./images/saffron.png" alt="saffron">
31+
<div class="text">I'm running out of things to say about plants.</div>
32+
</div>
33+
</div>
2434

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

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,29 @@ img {
77
height: 100px;
88
}
99

10+
.items{
11+
display: flex;
12+
justify-content: center;
13+
margin-top: 32px;
14+
}
15+
16+
.barberry1,
17+
.chilli1,
18+
.pepper1,
19+
.saffron1{
20+
padding: 26px;
21+
width: 200px;
22+
text-align: center;
23+
}
24+
.text{
25+
/*display:inline-flex;*/
26+
}
27+
1028
.title {
1129
font-size: 36px;
1230
font-weight: 900;
31+
display: flex;
32+
justify-content: center;
1333
}
1434

1535
/* do not edit this footer */

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,21 @@
99
</head>
1010
<body>
1111
<div class="modal">
12-
<div class="icon">!</div>
13-
<div class="header">Are you sure you want to do that?</div>
14-
<div class="close-button">✖</div>
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>
12+
13+
<div class="left">
14+
<div class="icon">!</div>
15+
</div>
16+
<div class="center">
17+
<h3 class="header">Are you sure you want to do that?</h3>
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+
<div class="right">
25+
<div class="close-button">✖</div>
26+
</div>
1827
</div>
1928
</body>
2029
</html>

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

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
22

3+
/* *{
4+
border: 2px solid red;
5+
}
6+
7+
*/
8+
39
html, body {
410
height: 100%;
11+
512
}
613

714
body {
@@ -20,6 +27,14 @@ body {
2027
width: 480px;
2128
border-radius: 10px;
2229
box-shadow: 2px 4px 16px rgba(0,0,0,.2);
30+
padding: 10px;
31+
display: flex;
32+
}
33+
34+
.header{
35+
font-weight: bolder;
36+
margin-top: auto;
37+
margin-bottom: auto;
2338
}
2439

2540
.icon {
@@ -33,6 +48,17 @@ body {
3348
display: flex;
3449
align-items: center;
3550
justify-content: center;
51+
flex-shrink: 0;
52+
margin-left: 0px;
53+
margin-right: 10px;
54+
margin-top: auto;
55+
}
56+
57+
.text{
58+
margin-top: 10px;
59+
}
60+
.buttons{
61+
margin-top: 10px;
3662
}
3763

3864
.close-button {
@@ -46,21 +72,25 @@ body {
4672
display: flex;
4773
align-items: center;
4874
justify-content: center;
75+
flex-shrink: 0;
4976
}
5077

5178
button {
5279
padding: 8px 16px;
5380
border-radius: 8px;
81+
flex-shrink: 0;
5482
}
5583

5684
button.continue {
5785
background: royalblue;
5886
border: 1px solid royalblue;
5987
color: white;
88+
flex-shrink: 0;
6089
}
6190

6291
button.cancel {
6392
background: white;
6493
border: 1px solid #ddd;
6594
color: royalblue;
66-
}
95+
flex-shrink: 0;
96+
}

0 commit comments

Comments
 (0)