Refine Apple navigation icons

This commit is contained in:
emil28092005
2026-09-19 13:12:42 +03:00
parent 937f9c1f64
commit 39644b0008
2 changed files with 31 additions and 3 deletions
+9 -3
View File
@@ -8,10 +8,16 @@
<link rel="stylesheet" href="styles.css">
<body>
<nav id="navbar" class="horizontal">
<div class="logo">t</div>
<a class="logo" href="https://www.apple.com/" aria-label="Apple">
<img src="https://www.apple.com/ac/globalnav/7/en_US/images/svg/apple.svg" alt="Apple">
</a>
<div>Store</div><div>Mac</div><div>iPad</div><div>iPhone</div><div>Watch</div><div>Vision</div><div>AirPods</div><div>TV & Home</div><div>Entertainment</div><div>Accessories</div><div>Support</div>
<span>s</span>
<span>A</span>
<a class="nav-icon" href="https://www.apple.com/us/search" aria-label="Search">
<img src="https://www.apple.com/ac/globalnav/7/en_US/images/svg/search.svg" alt="">
</a>
<a class="nav-icon" href="https://www.apple.com/us/shop/goto/bag" aria-label="Shopping bag">
<img src="https://www.apple.com/ac/globalnav/7/en_US/images/svg/bag.svg" alt="">
</a>
</nav>
<main class="menu horizontal">
+22
View File
@@ -39,6 +39,28 @@ body {
.logo {
color: black;
font-size: 18px;
display: inline-flex;
align-items: center;
}
#navbar img {
width: 16px;
height: 16px;
display: block;
}
#navbar .logo img {
width: 18px;
height: 18px;
}
.nav-icon {
display: inline-flex;
align-items: center;
}
#navbar a:hover {
opacity: .65;
}
#navbar span {