-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmakeup_page.html
134 lines (105 loc) · 6.8 KB
/
makeup_page.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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Make Up </title>
<script src="https://kit.fontawesome.com/132c3d850c.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./styles/makeup_page.css">
<link rel="stylesheet" href="./navbar.css">
<link rel="stylesheet" href="./Styles/footer.css">
</head>
<body>
<div id="navbar"></div>
<div id="container">
<div id="top">
<img src="https://d32baadbbpueqt.cloudfront.net/Collection/6a68d77f-80b5-4860-9a4d-6005844c937d.jpg" alt=""> <br>
<a href="./index.html">Home   <i class="fa-solid fa-chevron-right"></i>   Makeup</a>
</div>
<div id="main">
<div id="side_bar">
<div class="item">
<h3 class="sub-btn">Sort By: <span>Relevance <i class="fa-solid fa-chevron-down dropdown"></i> </span> </h3>
<!-- dropdrow -->
<div class="sub_menu">
<p id="sub-item1"><i class="fa-regular fa-circle"></i>   Relevance</p>
<p id="sub-item2"><i class="fa-regular fa-circle"></i>   Price: High To Low</p>
<p id="sub-item3"><i class="fa-regular fa-circle"></i>   Price: Low To High</p>
</div>
</div>
<!-- -------------------------- -->
<div class="side_bar_bottom">
<h3> Filter<span style=" position: absolute; right: 0; margin-right: 20px; color: red; font-size: 15px;"> Reset</span></h3> <br> <hr>
<h4 class="sub-btn"> Product Type <i class="fa-solid fa-chevron-down dropdown"></i> </h4>
<!-- dropdrow -->
<div class="sub_menu">
<p id="Filter-type1"><i class="fa-regular fa-circle"></i>   Eyeliner</p>
<p id="Filter-type2"><i class="fa-regular fa-circle"></i>   Lipstick</p>
<p id="Filter-type3"><i class="fa-regular fa-circle"></i>   Nail Polish</p>
<p id="Filter-type4"><i class="fa-regular fa-circle"></i>   Mascara</p>
<p id="Filter-type5"><i class="fa-regular fa-circle"></i>   Lip Liner</p>
</div><hr>
<!-- -------------------------- -->
<h4 class="sub-btn"> Feature <i class="fa-solid fa-chevron-down dropdown"></i> </h4>
<!-- dropdrow -->
<div class="sub_menu">
<p id="Filter-feature1"><i class="fa-regular fa-circle"></i>   Natural Eyeshadow</p>
<p id="Filter-feature2"><i class="fa-regular fa-circle"></i>   Cream Foundation</p>
<p id="Filter-feature3"><i class="fa-regular fa-circle"></i>   Gluten Free Mascara</p>
<p id="Filter-feature4"><i class="fa-regular fa-circle"></i>   Natural Eyliner</p>
<p id="Filter-feature5"><i class="fa-regular fa-circle"></i>   Liquid Lipstick</p>
</div><hr>
<!-- -------------------------- -->
<h4 class="sub-btn"> Finish <i class="fa-solid fa-chevron-down dropdown"></i> </h4>
<!-- dropdrow -->
<div class="sub_menu">
<p id="Filter-finish1"><i class="fa-regular fa-circle"></i>   Natural</p>
<p id="Filter-finish2"><i class="fa-regular fa-circle"></i>   Creme</p>
<p id="Filter-finish3"><i class="fa-regular fa-circle"></i>   Gluten Free</p>
<p id="Filter-finish4"><i class="fa-regular fa-circle"></i>   BB CC</p>
<p id="Filter-finish5"><i class="fa-regular fa-circle"></i>   Canadian</p>
</div><hr>
<!-- -------------------------- -->
<h4 class="sub-btn"> Formulation <i class="fa-solid fa-chevron-down dropdown"></i> </h4>
<!-- dropdrow -->
<div class="sub_menu">
<p id="Filter-formu1"><i class="fa-regular fa-circle"></i>   Powder</p>
<p id="Filter-formu2"><i class="fa-regular fa-circle"></i>   Gloss</p>
<p id="Filter-formu3"><i class="fa-regular fa-circle"></i>   Vegan</p>
<p id="Filter-formu4"><i class="fa-regular fa-circle"></i>   Mineral</p>
<p id="Filter-formu5"><i class="fa-regular fa-circle"></i>   Gel</p>
</div>
<hr>
<!-- -------------------------- -->
<h4 class="sub-btn"> Converc <i class="fa-solid fa-chevron-down dropdown"></i> </h4>
<!-- dropdrow -->
<div class="sub_menu">
<p id="Filter-converc1"><i class="fa-regular fa-circle"></i>   Eyeliner</p>
<p id="Filter-converc2"><i class="fa-regular fa-circle"></i>   Eyebrow</p>
<p id="Filter-converc3"><i class="fa-regular fa-circle"></i>   Highlighter</p>
</div>
</div>
</div>
<div id="right_side"></div>
</div>
<p id="bottom-heding">READ MORE ABOUT MAKEUP <i class="fa-solid fa-chevron-right"></i></p>
<div id="bottom">
<!-- <div class="line"> -->
<!-- <div> <hr style=" width: 120px; height: 1px; border: none;"> </div> -->
<h2>LET’S STAY IN TOUCH</h2>
<!-- <div> <hr style=" width: 120px; height: 1px; border: none;"> </div> -->
<!-- </div> -->
<p>Get the latest beauty tips straight to your inbox. Can’t wait to connect!</p> <br>
<input type="email"id="email" placeholder="Enter Email">
<button>SUBSCRIBE</button>
</div>
</div>
<div id="footer"></div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="./Scripts/header.js" type="module"></script>
<script src="./navbar.js"></script>
<script src="./Scripts/bottom.js" type="module"></script>
<script src="./scripts/makeup_page.js" type="module"></script>