-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathnav.html
147 lines (129 loc) · 3.43 KB
/
nav.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
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Navbar</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar">
<!-- Menu Left -->
<div class="nav-left">
<a href="#" class="nav-item">Our Products</a>
<a href="#" class="nav-item">Our Science</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">News</a>
</div>
<!-- Logo Center -->
<div class="nav-center">
<img class="logo"
src="resource/Bioumjan.png"/>
</div>
<!-- Search and Icons Right -->
<div class="nav-right">
<div class="search-box">
<input type="text" placeholder="Find your supplement">
<button class="search-button">
<img src="resource/search-icon.png" alt="Search Icon" />
</button>
</div>
<a href="#" class="icon">
<img src="resource/cart.png" alt="Search Icon" />
</a>
<a href="#" class="icon">
<img src="resource/user.png" alt="Search Icon" />
</a>
</div>
</nav>
</body>
</html>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
/* Navbar Container */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #ffffff; /* Màu nền */
}
/* Menu Left */
.nav-left {
margin-left: 5%;
display: flex;
gap: 20px;
}
.nav-item {
color: rgba(4, 6, 16, 0.88);
text-decoration: none;
color: #333;
font-size: 17px;
font-family: Roboto;
font-weight: 500;
}
.nav-item:hover {
color: #007BFF;
}
/* Logo Center */
.nav-center {
display: flex;
justify-content: center; /* Căn giữa theo chiều ngang */
align-items: center; /* Căn giữa theo chiều dọc */
justify-content: space-between; /* Căn trái và phải */
position: relative;
height: 50%;
}
.logo {
max-height: 40px; /* Điều chỉnh chiều cao tối đa của hình ảnh */
width: auto; /* Đảm bảo hình ảnh không bị méo */
}
/* Menu Right */
.nav-right {
margin-right: 5%;
display: flex;
align-items: center;
gap: 15px;
}
/* Search Box */
.search-box {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 20px;
padding: 5px 10px;
}
.search-box input {
border: none;
outline: none;
width: 150px;
font-size: 12px;
}
.search-button {
border: none;
background: none;
cursor: pointer;
font-size: 14px;
}
.search-button img {
width: 20px;
}
/* Icons */
.icon {
display: flex;
align-items: center;
border: 1px solid #ccc;
border-radius: 20px;
padding: 5px 10px;
}
.icon:hover {
color: #007BFF;
}
.icon img {
width: 20px;
}
</style>