Initial design study materials

2026-09-19 12:58:15 +03:00
commit 937f9c1f64
2 changed files with 125 additions and 0 deletions
@@ -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>
@@ -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;
+}