added all the files and folders of Myntra clone website

Amarkantsonkar · Jun 8, 2024 · d3bcfc9 · d3bcfc9
1 parent 8942fd4
commit d3bcfc9
Show file tree

Hide file tree

Showing 26 changed files with 281 additions and 0 deletions.
diff --git a/images/banner.jpg b/images/banner.jpg
diff --git a/images/categories/1.jpg b/images/categories/1.jpg
diff --git a/images/categories/10.jpg b/images/categories/10.jpg
diff --git a/images/categories/2.jpg b/images/categories/2.jpg
diff --git a/images/categories/3.jpg b/images/categories/3.jpg
diff --git a/images/categories/4.jpg b/images/categories/4.jpg
diff --git a/images/categories/5.jpg b/images/categories/5.jpg
diff --git a/images/categories/6.jpg b/images/categories/6.jpg
diff --git a/images/categories/7.jpg b/images/categories/7.jpg
diff --git a/images/categories/8.jpg b/images/categories/8.jpg
diff --git a/images/categories/9.jpg b/images/categories/9.jpg
diff --git a/images/myntra_logo.webp b/images/myntra_logo.webp
diff --git a/images/offers/1.png b/images/offers/1.png
diff --git a/images/offers/10.png b/images/offers/10.png
diff --git a/images/offers/11.png b/images/offers/11.png
diff --git a/images/offers/12.png b/images/offers/12.png
diff --git a/images/offers/2.png b/images/offers/2.png
diff --git a/images/offers/3.png b/images/offers/3.png
diff --git a/images/offers/4.png b/images/offers/4.png
diff --git a/images/offers/5.png b/images/offers/5.png
diff --git a/images/offers/6.png b/images/offers/6.png
diff --git a/images/offers/7.png b/images/offers/7.png
diff --git a/images/offers/8.png b/images/offers/8.png
diff --git a/images/offers/9.png b/images/offers/9.png
diff --git a/index.css b/index.css
@@ -0,0 +1,154 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: Assistant, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+    box-sizing: border-box;
+}
+
+header {
+    display: flex;
+    background-color: #ffffff;
+    height: 80px;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid #b6b1b1;
+
+}
+
+.myntra_home {
+    height: 45px;
+}
+
+.logo_container {
+    margin-left: 4%;
+}
+
+.action_bar {
+    margin-right: 4%;
+}
+
+.nav_bar {
+    display: flex;
+    min-width: 500px;
+    justify-content: space-evenly;
+}
+
+.nav_bar a {
+    font-size: 14px;
+    letter-spacing: .3px;
+    color: #282c3f;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-decoration: none;
+    padding: 28px 0;
+    border-bottom: 5px solid #ffffff;
+}
+
+.nav_bar a:hover {
+    border-bottom: 4px solid #f54e77;
+}
+
+.nav_bar a sup {
+    color: #ff3f6c;
+    font-size: 10px;
+}
+
+.search_bar {
+    height: 40px;
+    min-width: 200px;
+    width: 30%;
+    display: flex;
+    align-items: center;
+}
+
+.search_icon {
+    box-sizing: content-box;
+    height: 20px;
+    padding: 10px;
+
+    background-color: #f5f5f6;
+    color: #282c3f;
+    font-weight: 300;
+    border-radius: 4px 0 0 4px;
+}
+
+.search_input {
+    color: #696e79;
+    background-color: #f5f5f6;
+    flex-grow: 1;
+    height: 40px;
+    border: 0;
+    border-radius: 0 4px 4px 0;
+}
+
+.action_bar {
+    display: flex;
+    min-width: 200px;
+    justify-content: space-evenly;
+}
+
+.action_container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Main section */
+.banner_container {
+    margin: 40px 0;
+}
+
+.banner_image {
+    width: 100%;
+}
+
+.category_heading {
+    text-transform: uppercase;
+    color: #3e4152;
+    letter-spacing: .15em;
+    font-size: 1.8em;
+    margin: 50px 0 10px 30px;
+    max-height: 5em;
+    font-weight: 700;
+}
+
+.category_items {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+}
+
+.sale_item {
+    width: 250px;
+}
+
+.footer_container {
+    padding: 30px 0px 40px 0px;
+    background: #FAFBFC;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.footer_column {
+    display: flex;
+    flex-direction: column;
+}
+
+.footer_column h3 {
+    color: #282c3f;
+    font-size: 14px;
+    margin-bottom: 25px;
+}
+
+.footer_column a {
+    color: #696b79;
+    font-size: 15px;
+    text-decoration: none;
+    padding-bottom: 5px;
+}
+
+.copyright {
+    color: #94969f;
+    text-align: center;
+    padding: 15px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Myntra Clone</title>
+    <link rel="stylesheet" href="index.css">
+    <link rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+</head>
+
+<body>
+    <header>
+        <div class="logo_container">
+            <a href="#"><img class="myntra_home" src="images/myntra_logo.webp" alt="Myntra Home"></a>
+        </div>
+        <nav class="nav_bar">
+            <a href="#">Men</a>
+            <a href="#">Women</a>
+            <a href="#">Kids</a>
+            <a href="#">Home & Living</a>
+            <a href="#">Beauty</a>
+            <a href="#">Studio <sup>New</sup></a>
+        </nav>
+        <div class="search_bar">
+            <span class="material-symbols-outlined search_icon">search</span>
+            <input class="search_input" placeholder="Search for products, brands and more">
+        </div>
+        <div class="action_bar">
+            <div class="action_container">
+                <span class="material-symbols-outlined action_icon">person</span>
+                <span class="action_name">Profile</span>
+            </div>
+
+            <div class="action_container">
+                <span class="material-symbols-outlined action_icon">favorite</span>
+                <span class="action_name">Wishlist</span>
+            </div>
+
+            <div class="action_container">
+                <span class="material-symbols-outlined action_icon">shopping_bag</span>
+                <span class="action_name">Bag</span>
+            </div>
+        </div>
+    </header>
+    <main>
+        <div class="banner_container">
+            <img class="banner_image" src="images/banner.jpg" alt="Main Banner">
+        </div>
+        <div class="category_heading">MEDAL WORTHY BRANDS TO BAG</div>
+        <div class="category_items">
+            <a href="#"><img class="sale_item" src="images/offers/1.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/2.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/3.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/4.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/5.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/6.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/7.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/8.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/9.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/10.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/11.png"></a>
+            <a href="#"><img class="sale_item" src="images/offers/12.png"></a>
+        </div>
+
+        <div class="category_heading">SHOP BY CATEGORY</div>
+        <div class="category_items">
+            <a href="#"><img class="sale_item" src="images/categories/1.jpg"></a>
+            <a href="#"><img class="sale_item" src="images/categories/2.jpg"></a>
+            <a href="#"><img class="sale_item" src="images/categories/3.jpg"></a>
+            <a href="#"><img class="sale_item" src="images/categories/4.jpg"></a>
+            <a href="#"><img class="sale_item" src="images/categories/5.jpg"></a>
+            <a href="#"><img class="sale_item" src="images/categories/6.jpg"></a>
+            <a href="#"><img class="sale_item" src="images/categories/7.jpg"></a>
+            <a href="#"><img class="sale_item" src="images/categories/8.jpg"></a>
+            <a href="#"><img class="sale_item" src="images/categories/9.jpg"></a>
+            <a href="#"><img class="sale_item" src="images/categories/10.jpg"></a>
+        </div>
+    </main>
+    <footer>
+        <div class="footer_container">
+            <div class="footer_column">
+                <h3>ONLINE SHOPPING</h3>
+
+                <a href="#">Men</a>
+                <a href="#">Women</a>
+                <a href="#">Kids</a>
+                <a href="#">Home & Living</a>
+                <a href="#">Beauty</a>
+                <a href="#">Gift Card</a>
+                <a href="#">Myntra Insider</a>
+            </div>
+
+            <div class="footer_column">
+                <h3>CUSTOMER POLICIES</h3>
+
+                <a href="#">Contact Us</a>
+                <a href="#">FAQ</a>
+                <a href="#">T&C</a>
+                <a href="#">Terms Of Use</a>
+                <a href="#">Track Orders</a>
+                <a href="#">Shipping</a>
+                <a href="#">Cancellation</a>
+                <a href="#">Returns</a>
+                <a href="#">Privacy policy</a>
+                <a href="#">Grievance Officer</a>
+            </div>
+
+            <div class="footer_column">
+                <h3> USEFUL LINKS </h3>
+
+                <a href="#">Blog</a>
+                <a href="#">Careers</a>
+                <a href="#">Site Map</a>
+                <a href="#">Corporate Information</a>
+                <a href="#">Whitehat</a>
+                <a href="#">Cleartrip</a>
+            </div>
+        </div>
+        <hr>
+
+        <div class="copyright">
+            © 2023 www.myntra.com. All rights reserved.
+        </div>
+    </footer>
+</body>
+
+</html>