Emil_Shanaty/Design_HSE_Study
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine Apple navigation icons

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+9 -3
View File
@@ -8,10 +8,16 @@
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<body> <body>
<nav id="navbar" class="horizontal"> <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> <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> <a class="nav-icon" href="https://www.apple.com/us/search" aria-label="Search">
<span>A</span> <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> </nav>
<main class="menu horizontal"> <main class="menu horizontal">
styles.css
+22
View File
@@ -39,6 +39,28 @@ body {
.logo { .logo {
color: black; color: black;
font-size: 18px; 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 { #navbar span {