-
Notifications
You must be signed in to change notification settings - Fork 0
/
routine.html
152 lines (119 loc) · 5.47 KB
/
routine.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
<!DOCTYPE html>
<html>
<head>
<title>Blushed</title>
<link rel="stylesheet" href="styles.css">
<style>
body::before{
background-image: url("routine.png");
background-size: cover;
background-position: center;
content: "";
position: absolute;
width: 100%;
height: 100%;
z-index: -2;
opacity: .8;
}
.routineButton {
text-align: center;
border-radius: 1px;
background-color: white;
font-family: Georgia;
text-decoration: none;
padding: 10px ;
border-radius: 5px;
border-color: white;
border: 0.5px solid #333333;
}
.routineButton:link {
color: white;
}
.routineButton:visited {
color: white;
}
.routineButton:hover {
color: white;
font-weight: bold;
}
.routineButton:active {
color: white;
}
summary {
background-color: rgb(248, 227, 210);
padding: 1em;
border-radius: 5px;
}
details {
padding: 16px;
}
</style>
</head>
<body style="background-color: rgb(248, 227, 210);">
<div id="navbar"></div>
<script>
fetch('navbar.html')
.then(response => response.text())
.then(response => {
document.getElementById('navbar').innerHTML = response;
console.log(response);
});
</script>
<main>
<div id="bg" >
<section>
<div style= "width: 100%; display: flex; justify-content: space-evenly; margin-left: 10px; margin-top: 90px; " >
<div style="background-color: black; padding: 10px; margin: 15px; border-radius: 10px; justify-content: space-evenly;">
<h1 style="color: white; text-align: left; "><b>Don't know where to start? Here are some quick descriptions.</b></h1>
</div>
</div>
</section>
<section>
<div style= " opacity: 0.9; width: 95%; padding: 15px; display: flex; justify-content: space-between; margin-left: 15px;">
<div class="col1" style=" border-radius: 10px; background-color: black; width: 48%; float:left;">
<h1 style="color: white; text-align: center; padding:9px;"> Products</h1>
<details >
<summary>Foundation</summary>
<p style="background-color: #f8e3d2; padding: 10px; border-radius: 5px;">After applying skincare, Foundation comes next. This is a liquid, cream, or powder and is applied to the face and neck to create an even, uniform colour to the complexion, cover flaws and, sometimes, to change the natural skin tone.</p>
</details>
<details>
<summary>Bronzer</summary>
<p style="background-color: #f8e3d2; padding: 10px; border-radius: 5px;">Comes after foundation. This adds warmth to your makeup, creating a glowing, sun-kissed effect to enhance your complexion.</p>
</details>
<details>
<summary>Blush</summary>
<p style="background-color: #f8e3d2; padding: 10px; border-radius: 5px;">Comes after foundation. This is a liquid, cream, or powder for colouring the cheeks in a variety of shades, or the lips red.</p>
</details>
<details>
<summary>Eyebrow</summary>
<p style="background-color: #f8e3d2; padding: 10px; border-radius: 5px;">Once the desired complexion is achieved, remove excess foundation from the eyebrows. Eyebrow pencils are used to fill in sparse areas.</p>
</details>
</div>
<div class="col2" style=" border-radius: 10px; background-color: black; width:48%; float:left; justify-content: space-between; ">
<details>
<summary>Eyeshadow</summary>
<p style="background-color: #f8e3d2; padding: 10px; border-radius: 5px;">Comes after eyebrow makeup. This is a liquid or powder for colouring the eyelids.</p>
</details>
<details>
<summary>Eyeliner</summary>
<p style="background-color: #f8e3d2; padding: 10px; border-radius: 5px;">Comes after eyeshadow. Used to define the eyes by contouring around the eyes. Can be used to create various aesthetic effects.</p>
</details>
<details>
<summary>Mascara</summary>
<p style="background-color: #f8e3d2; padding: 10px; border-radius: 5px;">Comes after eyeliner. This will lengthen, curl, darken and thicken the eyelashes to give them a more noticeable and dramatic effect.</p>
</details>
<details>
<summary>Lip Liner</summary>
<p style="background-color: #f8e3d2; padding: 10px; border-radius: 5px;">Comes before lipstick. Lip liners adds volume and definition to the lips. For a flawless look, line and fill in your lips with lip liner, then apply a lipstick or lip gloss inside the lines for the finishing touch.</p>
</details>
<details>
<summary>Lipstick</summary>
<p style="background-color: #f8e3d2; padding: 10px; border-radius: 5px;">Comes after lip liner. Lipsticks add pigment and volume to the lips for a refreshing touch to your completed look.</p>
</details>
</div>
</div>
</section>
</div>
</main>
</body>
</html>