generated from bloominstituteoftechnology/W_S2M4_Project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
232 lines (223 loc) · 7.43 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
/* 👉 Task 1- Apply the reset found on this page: https://www.joshwcomeau.com/css/custom-css-reset/ */
/*
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
5. Improve media defaults
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/*
6. Remove built-in form typography styles
*/
input, button, textarea, select {
font: inherit;
}
/*
7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/*
8. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}
</style>
<style>
/* 👉 Task 2- Target the body element.
Apply a font family of Arial to the body element.
The font property is inherited by descendant (nested) elements. */
body{
font-family: Arial;
}
/* 👉 Task 3- Target the element with id headerTop.
Apply white color to the text, some padding using px or rem units, and a dark background color. */
#headerTop{
color:white;
padding: 0.5rem ;
background-color: rgb(130, 2, 130);
}
/* 👉 Task 4- Target the divs that are directly nested underneath the id headerTop.
Make them display as inline block, instead of block.
This will make them render on the same line. */
#headerTop{
display: flex;
align-items: baseline;
}
/* 👉 Task 5- Target the spans that are nested inside the id headerTop.
Make them have some margin on the right.
This will prevent the spans from crashing against one another. */
.spanClass{
margin: 15px;
}
/* 👉 Task 6- Target the first span nested inside the element with id headerTop.
Make it have a font weight of bold, and transform the text to uppercase. */
#soloSpan{
font-weight: bold;
text-transform: uppercase;
}
/* 👉 Task 7- Target the id headerBottom.
Give it a bottom border of 1 pixel, solid gray, and a little bit of padding using px or rem units. */
#headerBottom{
border-bottom: solid gray;
padding: 0.5rem;
}
/* 👉 Task 8- Target the divs that are nested directly inside the element with id headerBottom.
Make them display as inline block, instead of block.
This will cause them to render on the same line.
You can consolidate this rule with the one on step. 4 */
#headerBottom{
display: flex;
}
/* 👉 Task 9- Target the "Compose" button, although note it's a div instead an actual button.
Give it color, bold text, background, padding, border radius, margin right, and a cursor of pointer. */
#composeButtom{
color:whitesmoke;
background-color: darkgreen;
padding: 0.1rem ;
border-radius: 5px;
margin-right: 10px;
cursor: pointer;
}
/* 👉 Task 10- Research how to remove all the default styling of button elements.
Target the button elements inside the element with id headerBottom.
Remove all their styling, give them a bit of margin to the right, and a cursor of pointer. */
button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
#headerBottom .buttom{
margin-right: 5px ;
cursor: pointer;
}
/* 👉 Task 11- Target the button element inside the id headerBottom that has a class of active
Make the font weight be bolder, and add a bottom border of 2 pixels solid color (you choose the color).
Add the class name to the "All mail" button. */
.name{
font-weight: bolder;
border-bottom: 2px solid darkgreen;
}
/* 👉 Task 12- Target all divs directly nested inside elements with a class of email,
and make them display as inline-block elements.
This will make each email render all its details in the same line*/
.email {
display: flex;
}
/* 👉 Task 13- Target the elements with a class of email.
Give them some padding, bigger padding to the left, and a bottom border of very light grey. */
.email{
padding: 5px;
padding-left: 15px;
border-bottom: 1px solid lightgray;
}
/* 👉 Task 14- Target each div inside the element with a class of email.
Make the email author and the email subject take 35% of the width of the parent element.
Make the check, the date and the size take up 8% of the width of the parent element.
This will arrange the details in visible columns. */
.email-name, .email-subject{
width: 35%;
}
.email-check, .email-size, .email-date{
width: 8%;
}
/* 👉 Task 15- Target the second email and have its font weight be bold.
This will make it look "unread". */
.email:nth-child(2){
font-weight: bold;
}
/* Well done! Check the design file to make sure you are close enough. */
</style>
<title>Document</title>
</head>
<body>
<div id="instructions">
<!-- <h1>HTML & CSS II</h1>
<p>Please load this file in VSCode and Chrome, and open the Elements tab, Sources sub-tab, in Chrome Dev Tools.</p>
<p>Work through the challenges found inside both style tags in this document.</p>
<p>You will find a screenshot of the end result inside the design folder.</p>
<p>You can now comment out the h1 and the p tags...</p> -->
</div>
<div>
<header>
<div id="headerTop">
<div Class="insideTop">
<span class="spanClass" id="soloSpan">Super Mail</span>
<span class="spanClass">Jess</span>
</div>
<div class="insideTop">
<input type="text" placeholder="Search Mail" />
</div>
</div>
<div id="headerBottom">
<div class="buttoms" id="composeButtom">Compose</div>
<div class="buttoms">
<button class="name">All mail</button>
<button class="buttom">Unread</button>
<button class="buttom">Pinned</button>
<button class="buttom">VIPs</button>
</div>
</div>
</header>
<main id="emails">
<div class="email">
<div class="email-check"><input type="checkbox" /></div>
<div class="email-name" >Carol Shaw</div>
<div class="email-subject">Your login link</div>
<div class="email-date">Feb 28</div>
<div class="email-size">16 KB</div>
</div>
</main>
</div>
<script>
// ❗ Note: do not change ids or class names inside the main element
// or the following code to programmatically add emails will stop working
const emailData = [
{ name: 'Ada Lovelace', subject: 'A new device is using your account', date: 'Feb 28', size: '2 KB' },
{ name: 'Grace Hopper', subject: 'Undelivered mail returned to sender', date: 'Feb 27', size: '6 KB' },
{ name: 'Carol Shaw', subject: 'Approve sign-in', date: 'Feb 25', size: '14 KB' },
{ name: 'Edith Clarke', subject: 'Fwd: Invoice', date: 'Feb 24', size: '33 KB' },
]
emailData.forEach(email => {
const clone = emails.querySelector('.email').cloneNode(true)
clone.querySelector('.email-name').textContent = email.name
clone.querySelector('.email-subject').textContent = email.subject
clone.querySelector('.email-date').textContent = email.date
clone.querySelector('.email-size').textContent = email.size
emails.append(clone)
})
</script>
</body>
</html>