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

Initial design study materials

Browse Source
This commit is contained in:
emil28092005
2026-09-19 12:58:15 +03:00
commit 937f9c1f64
2 changed files with 125 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+34
View File
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="styles.css">
<body>
<nav id="navbar" class="horizontal">
<div class="logo">t</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>
<span>A</span>
</nav>
<main class="menu horizontal">
<section class="column first-column">
<small>Shop</small>
<div>Shop the Latest</div><div>Mac</div><div>iPad</div><div>iPhone</div><div>Apple Watch</div><div>Apple Vision Pro</div><div>AirPods</div><div>Accessories</div>
</section>
<section class="column">
<small>Quick Links</small>
<div>Find a Store</div><div>Order Status</div><div>Apple Upgrade</div><div>Apple Trade In</div><div>Financing</div><div>Personal Setup</div><div>College Student Offer</div>
</section>
<section class="column">
<small>Shop Special Stores</small>
<div>Certified Refurbished</div><div>Education</div><div>Business</div><div>Veterans and Military</div><div>Government</div>
</section>
</main>
</body>
</html>
styles.css
+91
View File
@@ -0,0 +1,91 @@
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f5f5f7;
color: #333;
}
.horizontal {
display: flex;
flex-direction: row;
}
#navbar {
width: 80%;
height: 40px;
margin: 12px auto 25px;
padding: 0 12px;
align-items: center;
justify-content: space-between;
background-color: white;
}
#navbar > div {
color: #555;
font-size: 11px;
text-decoration: none;
}
#navbar > div:hover {
color: black;
}
.logo {
color: black;
font-size: 18px;
}
#navbar span {
color: #555;
font-size: 17px;
}
.menu {
width: 55%;
margin-left: 11%;
align-items: flex-start;
gap: 30px;
}
.column {
display: flex;
flex-direction: column;
background-color: #f5f5f7;
}
.column small {
padding: 6px;
margin-bottom: 4px;
color: #777;
font-size: 10px;
background-color: white;
}
.column > div {
padding: 3px 6px;
color: #444;
font-size: 11px;
font-weight: bold;
}
.column > div:hover {
color: black;
}
.first-column {
width: 160px;
}
.first-column > div {
font-size: 18px;
}