-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnavbar.html
137 lines (133 loc) · 6.54 KB
/
navbar.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<link rel="stylesheet" href="navbar.css">
<!-- // icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Eczar:wght@400;500;600;800&family=Gentium+Book+Plus:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,500;1,600;1,800&family=Roboto+Slab:wght@200;400;600;800;900&family=Splash&family=Yantramanav:wght@400;500;900&display=swap"
rel="stylesheet">
<title>Navbar</title>
</head>
<body>
<!-- navbar -->
<div id="navbar">
<div id="navigation-links">
<div class="heading_one">
<div>
<i class="fa-solid fa-location-dot"></i>
</div>
<div> <a href=""> STORE & SPA LOCATOR </a></div>
</div>
<div class="heading_one">
<div>
<i class="fa-regular fa-heart"></i>
</div>
<div> <a href=""> WISHLIST </a></div>
</div>
<div class="heading_one">
<div><i class="fa-solid fa-magnifying-glass"></i></div>
<div> <a href="">SEARCH </a></div>
</div>
<div id="click-log" class="heading_one">
<div>
<i class="fa-regular fa-circle-user"></i>
</div>
<div> <a href="siginUp.html">SIGN IN/UP</a></div>
</div>
<div class="heading_one" onclick="window.location.href = 'cart.html'">
<div>
<a href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a>
</div>
<div> <a href="">BAG</a></div>
</div>
</div>
<div class="logo"><img id="img-click"
src="https://cdn.shopify.com/s/files/1/0283/0185/2747/files/[email protected]?v=1588538421">
</div>
<div id="shoplink">
<!-- <div><button class="productlink"><a href>SHOP</a></button></div> -->
<div class="btn1"><button id="disappear"><a id="shop" class="heading_a">SHOP</a></button></div>
<div><button class="productlink"><a href="" target="_blank" id="go-to-new">NEW!</a></button></div>
<div><button class="productlink"><a href="" target="_blank">BRANDS</a></button></div>
<div><button class="productlink"><a href="" target="_blank">EXPLORE</a></button></div>
<div><button class="productlink"><a href="" target="_blank">EVENTS</a></button></div>
<div><button class="productlink"><a href="" target="_blank">BLUEREWARDS</a></button></div>
<div><button class="productlink"><a href="" target="_blank">HOLIDAY GIFT GUIDE</a></button></div>
</div>
<!-- Hover Start -->
<div id="shop_hover">
<div id="first" class="one">
<p><a href="">SKIN CARE</a></p>
<p><a href="">MAKEUP</a></p>
<p><a href="">BATH AND BODY</a></p>
<p><a href="">HAIR</a></p>
<p><a href="">SUN AND TAN</a></p>
<P><a href="">SCENTS & HOME</a></P>
<P><a href="">MEN</a></P>
<P><a href="">GIFTS</a></P>
</div>
<div id="second" class="two"></div>
<div id="third" class="one">
<P style="color:rgba(18, 40, 76, 0.6);">BY CATEGORY</P>
<P><a href="">Shop All</a></P>
<P><a href="">Cleaners</a></P>
<p><a href="">Eye Care</a></p>
<p><a href="">Masks</a></p>
<p><a href="">Sets</a></p>
<p><a href="">Sun Care</a></p>
<p><a href="">Tools & Accessories</a></p>
</div>
<div id="fourth" class="one">
<p style="color:rgba(18, 40, 76, 0.6);">FEATURED</p>
<p><a href="">Best Seller</a></p>
<p><a href="">New Arrivals</a></p>
<p><a href="">Anti-Aging</a></p>
<p><a href="">Antioxidants</a></p>
<p><a href="">Skincare Tools</a></p>
<p><a href="">Supplements</a></p>
<p><a href="">Travel Size</a></p>
<p><a href="">Vitamin C</a></p>
</div>
<div id="fifth" class="one">
<div>
<img src="https://cdn.shopify.com/s/files/1/0283/0185/2747/files/cooling_eye_gel_nav_114x114.jpg?v=1626722614" alt="">
<p><a href="">M-61</a></p>
<p><a href="">Hydraboosyt Cooling Eye Gel</a></p>
<br/>
</div>
<div>
<img src="https://cdn.shopify.com/s/files/1/0283/0185/2747/files/kiehl_s_nav_feature_114x114.jpg?v=1629317112" alt="">
<p><a href="">Kiehl's</a></p>
<spanp><a href="">Retinol daily Microdose Serum</a></span>
</div>
</div>
</div>
<!-- Hover Ends -->
</div>
<!-- Header Ends Here -->
<!-- Header Ends Here -->
</body>
</html>
<script>
var btn = document.getElementById("disappear")
function divAppear() {
var cll = document.getElementById("shop_hover");
cll.style.display = "grid";
cll.style.background = "white";
}
btn.addEventListener("mouseover", divAppear);
// work on div of shop_hover =>
var cll = document.getElementById("shop_hover");
function divDisappear() {
cll.style.display = "none";
}
cll.addEventListener("mouseleave", divDisappear);
</script>