Added music store (#915)

arpit456jain · Oct 13, 2022 · b03f47e · b03f47e
1 parent 6a87723
commit b03f47e
Show file tree

Hide file tree

Showing 29 changed files with 714 additions and 0 deletions.
diff --git a/Music store/homepage.css b/Music store/homepage.css
diff --git a/Music store/homepage.html b/Music store/homepage.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="homepage.css" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+</head>
+<body>
+    <div class="header">
+        <div class="searchdiv">
+            <i style="font-size: 32px; color:#6F4C3F ;" class="material-icons search-icon">search</i>
+            <input class="searchbar" type="text" placeholder="Search for any musical intrument"  />
+            <button class="searchbtn"> SEARCH</button>
+        </div>
+        <div class="bg">
+            <img width="100%" height="100%" src="./img/homebg.jpg" />
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="white" fill-opacity="1" d="M0,128L48,133.3C96,139,192,149,288,128C384,107,480,53,576,64C672,75,768,149,864,181.3C960,213,1056,203,1152,192C1248,181,1344,171,1392,165.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>
+        </div>
+    </div>
+    <div class="head-content">
+        <nav>
+            <i style="font-size: 32px;" class="material-icons search-icon">search</i>
+            <p class="name">MUSICA</p>
+            <div>
+                <i style="font-size: 32px;" class="material-icons search-icon">person</i>
+                <i style="font-size: 32px;" class="material-icons cart-icon">shopping_cart</i>
+            </div>
+        </nav>
+        <p class="line">LEGACY-GRADE MUSICAL INSTRUMENTS</p>
+        <p class="sub-line">Experience the best Quality !</p>
+        <a href="./shop.html"><button class="shopbtn"> SHOP  &nbsp;&nbsp;&rarr;</button></a>
+    </div>
+
+    <div class="sub-head">
+        <div class="lines left">
+            <hr><hr><hr>
+        </div>
+        <p class="hotdeals"><span>HOT</span> &nbsp;&nbsp;DEALS</p>
+        <div class="lines">
+            <hr><hr><hr>
+        </div>
+    </div>
+
+    <div class="dotd">
+        <div class="grid-item item1">
+            <img height="100%" width="100%" src="./img/deal1.jpg" class="bgimg"/>
+            <div class="deal">
+                KEYBOARDS @ 20% OFF
+            </div>
+        </div>
+        <div class="grid-item item2">
+            <img height="100%" width="100%" src="./img/deal2.jpg" class="bgimg"/>
+            <div class="deal">
+                DISCOUNTS ON GUITARS
+            </div>
+        </div>
+        <div class="grid-item item3">
+            <img width="100%" height="100%"  src="./img/deal3.jpg" class="bgimg"/>
+            <div class="deal">
+                P's @ 10% OFF
+            </div>
+        </div>  
+        <div class="grid-item item4">
+            <img width="100%" height="100%"  src="./img/deal4.jpg" class="bgimg"/>
+            <div class="deal">
+                TRUMPETS AT LOWEST PRICES
+            </div>
+        </div>
+        <div class="grid-item item5">
+            <img width="100%" height="100%"  src="./img/deal5.jpg" class="bgimg"/>
+            <div class="deal">
+                MIC @399 
+            </div>
+        </div>
+        <div class="grid-item item6">
+            <img width="100%" height="100%"  src="./img/deal6.jpg" class="bgimg"/>
+            <div class="deal">
+                BUY 1 GET 1 SALE
+            </div>
+        </div>
+    </div>
+
+    <div class="sub-head">
+        <div class="lines">
+            <hr><hr><hr>
+        </div>
+        <p class="hotdeals"><span>ABOUT </span> &nbsp;&nbsp;US</p>
+        <div class="lines left">
+            <hr><hr><hr>
+        </div>
+    </div>
+
+    <div class="about">
+        <img width="50%" height="100%" src="./img/band.jpg"/>
+        <div class="about-content">
+            <p class="smalltext">From trumpets to pianos </p>
+            <p class="maintext">The best quality musical instruments at best prices. </p>
+            <p class="smalltext">We also act as the mediating source that connects the famous music bands with you. </p>
+            <button class="learn">LEARN MORE</button>
+        </div>
+    </div>
+
+    <div class="marquee">
+        <div class="track one"><span>50% off on first order </span> <span> Free shipping above Rs.700 </span> <span>Buy 2 Get 1 Free@ 20% Off</span><span>new brands - best quality</span><span>Easy returns</span></div>
+        <div class="track two"><span>50% off on first order </span> <span> Free shipping above Rs.700 </span> <span>Buy 2 Get 1 Free@ 20% Off</span><span>new brands - best quality</span><span>Easy returns</span></div>
+    </div>
+
+    <div class="newsletter">
+        <p class="news-head">NEWS<br/>LETTER</p>
+        <div class="newslettercontent">
+            <p class="smalltext">Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>
+            <input class="emailinput" type="email" placeholder="[email protected]"  />
+            <button class="joinbtn"> JOIN </button>
+        </div>
+    </div>
+
+    <div class="premium">
+        <h1>GO BEYOND !</h1>
+        <p class="wmusica"> 
+            <img width="120px" src="./img/leafline.png"/> <span> with musica  </span>   <img  width="120px" src="./img/leafline2.png"/>
+        </p>
+    </div>
+
+    <div class="footer">
+        <p class="tagline"> OUR MUSIC - YOUR MELODY </p>
+        <p class="brand-name">MUSICA</p>
+        <div class="footerdiv">
+            <div class="followlinks fo">
+                <p class="head">Follow Links</p>
+
+            </div>
+            <div class="devinfo fo">
+                <p class="head">Dev-pedia</p>
+                <p class="links">T SAIMAHESH</p>
+                <p class="links">[email protected]</p>
+                <p class="links"></p>
+            </div>
+            <div class="contactus fo">
+                <p class="head">Contact Us</p>
+                <p class="addr"><b>Musica</b></p>
+                <p class="addr">18 B abcstreet </p>
+                <p class="addr">xyzstate, NY, 808808 </p>
+                <p class="addr">Email: [email protected]</p>
+            </div>
+        </div>
+       <div class="blinks">
+            <p class="footc">MUSICA.2022 ALL RIGHTS RESERVED</p>
+            <p class="footc">PRIVACY POLICY</p>
+            <p class="footc">TERMS OF SERVICE</p>
+       </div>
+    </div>
+
+    <script src="./homepage.js"></script> 
+</body>
+</html>
diff --git a/Music store/homepage.js b/Music store/homepage.js
@@ -0,0 +1,18 @@
+const searchbtn  = document.querySelector("nav .search-icon");
+const searchdiv = document.querySelector(".searchdiv");
+const searchbar = document.querySelector(".searchdiv .searchbar");
+const headContent = document.querySelector(".head-content");
+
+var searchbarVisible = false;
+
+searchbtn.addEventListener("click", () => {
+    searchdiv.classList.add("showup");
+    searchbarVisible = true;
+    searchbar.focus();
+    window.onscroll = function(){
+        searchdiv.classList.remove("showup");
+        searchbarVisible = false;
+    }
+})
+
+
diff --git a/Music store/img/band.jpg b/Music store/img/band.jpg
diff --git a/Music store/img/bg.webp b/Music store/img/bg.webp
diff --git a/Music store/img/bghome.jpg b/Music store/img/bghome.jpg
diff --git a/Music store/img/bghome2.jpg b/Music store/img/bghome2.jpg
diff --git a/Music store/img/bghome3.jpg b/Music store/img/bghome3.jpg
diff --git a/Music store/img/bghome4.jpg b/Music store/img/bghome4.jpg
diff --git a/Music store/img/deal1.jpg b/Music store/img/deal1.jpg
diff --git a/Music store/img/deal2.jpg b/Music store/img/deal2.jpg
diff --git a/Music store/img/deal3.jpg b/Music store/img/deal3.jpg
diff --git a/Music store/img/deal4.jpg b/Music store/img/deal4.jpg
diff --git a/Music store/img/deal5.jpg b/Music store/img/deal5.jpg
diff --git a/Music store/img/deal6.jpg b/Music store/img/deal6.jpg
diff --git a/Music store/img/f1.gif b/Music store/img/f1.gif
diff --git a/Music store/img/f2.gif b/Music store/img/f2.gif
diff --git a/Music store/img/f3.gif b/Music store/img/f3.gif
diff --git a/Music store/img/fancy-line.png b/Music store/img/fancy-line.png
diff --git a/Music store/img/fancy-line2.png b/Music store/img/fancy-line2.png
diff --git a/Music store/img/homebg.jpg b/Music store/img/homebg.jpg
diff --git a/Music store/img/leaf-line.png b/Music store/img/leaf-line.png
diff --git a/Music store/img/leaf-line1.png b/Music store/img/leaf-line1.png
diff --git a/Music store/img/leaf-line2.png b/Music store/img/leaf-line2.png
diff --git a/Music store/img/leafline.png b/Music store/img/leafline.png
diff --git a/Music store/img/leafline2.png b/Music store/img/leafline2.png
diff --git a/Music store/img/logo.png b/Music store/img/logo.png
diff --git a/Music store/img/music-notes.gif b/Music store/img/music-notes.gif
diff --git a/Music store/preview.png b/Music store/preview.png