-
Notifications
You must be signed in to change notification settings - Fork 38
/
Copy pathindex.html
129 lines (109 loc) · 5.35 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
<!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/ */
</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. */
/* 👉 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. */
/* 👉 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. */
/* 👉 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. */
/* 👉 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. */
/* 👉 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. */
/* 👉 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 */
/* 👉 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. */
/* 👉 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. */
/* 👉 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. */
/* 👉 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*/
/* 👉 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. */
/* 👉 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. */
/* 👉 Task 15- Target the second email and have its font weight be bold.
This will make it look "unread". */
/* 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>
<span>Super Mail</span>
<span>Jess</span>
</div>
<div>
<input type="text" placeholder="Search Mail" />
</div>
</div>
<div id="headerBottom">
<div>Compose</div>
<div>
<button>All mail</button>
<button>Unread</button>
<button>Pinned</button>
<button>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>