fineanmol · fineanmol · Oct 11, 2021 · Oct 10, 2021
diff --git a/apple.svg b/apple.svg
diff --git a/bag.svg b/bag.svg
diff --git a/index.html b/index.html
@@ -0,0 +1,129 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Apple</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<header>
+    <div class="container">
+        <nav class="nav">
+            <ul class="nav-list nav-list-mobile">
+                <li class="nav-item">
+                    <div class="mobile-menu">
+                        <span class="line line-top"></span>
+                        <span class="line line-bottom"></span>
+                    </div>
+                </li>
+                <li class="nav-item">
+                 <a href="index.html" class="nav-link nav-link-apple"></a>           
+                </li>
+                <li class="nav-item">
+                    <a href="#" class="nav-link nav-link-bag"></a>           
+                   </li>
+            </ul>
+            <!-- /.nav-list nav-list mobile -->
+            <ul class="nav-list nav-list larger">
+
+                <li class="nav-item nav-item-hidden ">
+                 <a href="#" class="nav-link">Mac</a>           
+                </li>
+                <li class="nav-item nav-item-hidden ">
+                    <a href="#" class="nav-link">iPad</a>           
+                   </li>
+                   <li class="nav-item nav-item-hidden ">
+                    <a href="#" class="nav-link">iPhone</a>           
+                   </li>
+                   <li class="nav-item nav-item-hidden ">
+                    <a href="#" class="nav-link">Watch</a>           
+                   </li>
+                   <li class="nav-item nav-item-hidden ">
+                    <a href="#" class="nav-link">TV</a>           
+                   </li>
+                   <li class="nav-item nav-item-hidden ">
+                    <a href="#" class="nav-link">Music</a>           
+                   </li>
+                   <li class="nav-item nav-item-hidden ">
+                    <a href="#" class="nav-link">Support</a>           
+                   </li>
+
+                <li class="nav-item">
+                    <a href="#" class="nav-link "></a>           
+                   </li>
+                   <li class="nav-item">
+                    <a href="#" class="nav-link nav-link-search"></a>           
+                   </li>
+                <li class="nav-item nav-item-hidden">
+                    <a href="#" class="nav-link nav-link-bag"></a>           
+                   </li>
+            </ul>
+            <!-- /.nav-list nav-list larger -->
+        </nav>
+    </div>
+</header>
+<section class="hero iphone-11-pro">
+   <div class="container">
+       <div class="title">
+           <h2 class="title-heading">iPhone 11 Pro</h2>
+           <h3 class="title-sub-heading">Pro camera. Pro display. Pro performance</h3>
+           <p class="title-price">From $24.95/mo. or $599 with trade-in*</p>
+       </div>
+       <div class="cta">
+        <a href="#" class="cta-link">Learn more</a>
+        <a href="#" class="cta-link">Buy</a>
+       </div>
+   </div>
+
+</section>
+<section class="hero iphone-11">
+    <div class="container">
+        <div class="title title-dark">
+            <h2 class="title-heading">iPhone 11</h2>
+            <h3 class="title-sub-heading">Just the right amount of everything.</h3>
+            <p class="title-price">From $16.62/mo. or $399 with trade-in*</p>
+        </div>
+        <div class="cta">
+         <a href="#" class="cta-link cta-link-darker">Learn more</a>
+         <a href="#" class="cta-link cta-link-darker">Buy</a>
+        </div>
+    </div>
+
+ </section>
+
+ <section class="hero watch">
+    <div class="container">
+        <div class="title title-dark">
+            <h2 class="title-heading-watch"></h2>
+            <h3 class="title-sub-heading">With the new always On-Retina display. <br>
+            You never seen a watch like this</h3>
+        </div>
+        <div class="cta">
+         <a href="#" class="cta-link cta-link-darker">Learn more</a>
+         <a href="#" class="cta-link cta-link-darker">Buy</a>
+        </div>
+    </div>
+
+ </section>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<script src="main.js"></script>
+</body>
+</html>
diff --git a/iphone_11_large.jpg b/iphone_11_large.jpg
diff --git a/iphone_11_medium.jpg b/iphone_11_medium.jpg
diff --git a/iphone_11_pro_large.jpg b/iphone_11_pro_large.jpg
diff --git a/iphone_11_pro_medium.jpg b/iphone_11_pro_medium.jpg
diff --git a/iphone_11_pro_small.jpg b/iphone_11_pro_small.jpg
diff --git a/iphone_11_small.jpg b/iphone_11_small.jpg
diff --git a/logo_watch_large.png b/logo_watch_large.png
diff --git a/logo_watch_medium.png b/logo_watch_medium.png
diff --git a/main.js b/main.js
@@ -0,0 +1,4 @@
+const selectElement = (element) => document.querySelector(element);
+selectElement('.mobile-menu'). addEventListener('click',()=>{
+selectElement('header').classList.toggle('active')
+});
diff --git a/search.svg b/search.svg