Skip to content

Commit f49ab36

Browse files
SpudgunSpudgun
committed
assignment TheOdinProject#5: more flex modal
1 parent 11ba407 commit f49ab36

File tree

2 files changed

+94
-65
lines changed

2 files changed

+94
-65
lines changed

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

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link rel="stylesheet" href="style.css">
8-
<title>Modal</title>
9-
</head>
10-
<body>
11-
<div class="modal">
12-
<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>
18-
</div>
19-
</body>
20-
</html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>Modal</title>
9+
</head>
10+
<body>
11+
<div class="modal">
12+
<div class="icon">!</div>
13+
<div class="middle">
14+
<div class="header">
15+
Are you sure you want to do that?
16+
<button class="close-button">✖</button>
17+
</div>
18+
19+
<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>
20+
<button class="continue">Continue</button>
21+
<button class="cancel">Cancel</button>
22+
</div>
23+
</div>
24+
</body>
25+
</html>

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

Lines changed: 71 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,93 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
1+
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
22

3-
html, body {
4-
height: 100%;
3+
html,
4+
body {
5+
height: 100%;
6+
}
7+
8+
* {
9+
/* outline: solid red 2px; */
510
}
611

712
body {
8-
font-family: Roboto, sans-serif;
9-
margin: 0;
10-
background: #aaa;
11-
color: #333;
12-
/* I'll give you this one for free lol */
13-
display: flex;
14-
align-items: center;
15-
justify-content: center;
13+
font-family: Roboto, sans-serif;
14+
margin: 0;
15+
background: #aaa;
16+
color: #333;
17+
/* I'll give you this one for free lol */
18+
display: flex;
19+
justify-content: center;
20+
align-items: center;
21+
}
22+
23+
.header {
24+
display: flex;
25+
justify-content: space-between;
26+
align-items: center;
27+
font-size: 18px;
28+
font-weight: 800;
1629
}
1730

1831
.modal {
19-
background: white;
20-
width: 480px;
21-
border-radius: 10px;
22-
box-shadow: 2px 4px 16px rgba(0,0,0,.2);
32+
background: white;
33+
width: 480px;
34+
border-radius: 10px;
35+
box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.2);
36+
display: flex;
37+
padding: 10px;
38+
justify-content: space-between;
39+
gap: 10px;
40+
}
41+
42+
.text {
43+
margin: 10px 0;
2344
}
2445

2546
.icon {
26-
color: royalblue;
27-
font-size: 26px;
28-
font-weight: 700;
29-
background: lavender;
30-
width: 42px;
31-
height: 42px;
32-
border-radius: 50%;
33-
display: flex;
34-
align-items: center;
35-
justify-content: center;
47+
color: royalblue;
48+
font-size: 26px;
49+
font-weight: 700;
50+
background: lavender;
51+
width: 42px;
52+
height: 42px;
53+
min-height: 42px;
54+
min-width: 42px;
55+
border-radius: 50%;
56+
/* My solution is different */
57+
display: flex;
58+
align-items: center;
59+
justify-content: center;
3660
}
3761

3862
.close-button {
39-
background: #eee;
40-
border-radius: 50%;
41-
color: #888;
42-
font-weight: 400;
43-
font-size: 16px;
44-
height: 24px;
45-
width: 24px;
46-
display: flex;
47-
align-items: center;
48-
justify-content: center;
49-
border: 1px solid #eee;
50-
padding: 0;
63+
background: #eee;
64+
border-radius: 50%;
65+
color: #888;
66+
font-weight: 400;
67+
font-size: 16px;
68+
height: 24px;
69+
width: 24px;
70+
display: flex;
71+
align-items: center;
72+
justify-content: center;
73+
border: 1px solid #eee;
74+
padding: 0;
5175
}
5276

5377
button {
54-
cursor: pointer;
55-
padding: 8px 16px;
56-
border-radius: 8px;
78+
cursor: pointer;
79+
padding: 8px 16px;
80+
border-radius: 8px;
5781
}
5882

5983
button.continue {
60-
background: royalblue;
61-
border: 1px solid royalblue;
62-
color: white;
84+
background: royalblue;
85+
border: 1px solid royalblue;
86+
color: white;
6387
}
6488

6589
button.cancel {
66-
background: white;
67-
border: 1px solid #ddd;
68-
color: royalblue;
69-
}
90+
background: white;
91+
border: 1px solid #ddd;
92+
color: royalblue;
93+
}

0 commit comments

Comments
 (0)