Skip to content

Commit

Permalink
Shop A Thon
Browse files Browse the repository at this point in the history
  • Loading branch information
@arpansinhaaaa
arpansinhaaaa committed Jul 29, 2023
1 parent 7529f8a commit 2a78cb5
Show file tree
Hide file tree
Showing 4 changed files with 730 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .vscode/settings.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}
242 changes: 242 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shop-A-Thon</title>
</head>
<body>
<head>

<link rel="stylesheet" href="style.css">
<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
</head>

<body>
<header>
<div class="logo"><a href="#">Shop-A-Thon</a></div>
<div class="menu">
<a href="#">
<ion-icon name="close" class="close"></ion-icon>
</a>

<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="search">

<a href=""><input type="text" placeholder="search products" id="input">
<ion-icon class="s" name="search"></ion-icon>
</a>
</div>
<div class="heading">
<ul>
<li><a href="#" class="under">HOME</a></li>
<li><a href="#" class="under">SHOP</a></li>
<li><a href="#" class="under">OUR PRODUCTS</a></li>
<li><a href="#" class="under">CONTACT US</a></li>
<li><a href="#" class="under">ABOUT US</a></li>
</ul>
</div>
<div class="heading1">
<ion-icon name="menu" class="ham"></ion-icon>
</div>
</header>
<section>
<div class="section">
<div class="section1">
<div class="img-slider">
<img src="https://images.pexels.com/photos/6347888/pexels-photo-6347888.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
<img src="https://images.pexels.com/photos/3962294/pexels-photo-3962294.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
<img src="https://images.pexels.com/photos/2292953/pexels-photo-2292953.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500" alt="" class="img">
<img src="https://images.pexels.com/photos/1229861/pexels-photo-1229861.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
<img src="https://images.pexels.com/photos/1598505/pexels-photo-1598505.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="" class="img">
</div>

</div>
<div class="section2">
<div class="container">
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/1464625/pexels-photo-1464625.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></div>
<div class="name">SHOES</div>
<div class="price">5999/-</div>
<div class="info">Stylish and comfortable sneaker shoes for all occasions.</div>
</div>
<div class="items">
<div class="img img2"><img src="https://images.pexels.com/photos/3649765/pexels-photo-3649765.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></div>
<div class="name">MEN's T-SHIRT</div>
<div class="price">Starting From 499/-</div>
<div class="info">Comfy, stylish, and affordable T-shirts for everyone.</div>
</div>
<div class="items">
<div class="img img3"><img src="https://media.istockphoto.com/photos/folded-blue-jeans-on-a-white-background-modern-casual-clothing-flat-picture-id1281304280" alt=""></div>
<div class="name">JEANS</div>
<div class="price">Starting From 599/-</div>
<div class="info">Comfortable, stylish, and built to last.</div>
</div>
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/8839887/pexels-photo-8839887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></div>
<div class="name">WATCH</div>
<div class="price">Starting From 1499/-</div>
<div class="info">All Kinds Of Smart Watch Available Here..</div>
</div>
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/6858618/pexels-photo-6858618.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></div>
<div class="name">SMART PHONE</div>
<div class="price">Starting From 7999/-</div>
<div class="info">All Kinds Of Smartphone Available Here.</div>
</div>
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/5552789/pexels-photo-5552789.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></div>
<div class="name">TELEVISION</div>
<div class="price">Starting From 9899/-</div>
<div class="info">Ultra-clear 4K TV with HDR for stunning visuals.</div>
</div>
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/4295985/pexels-photo-4295985.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></div>
<div class="name">HOODIES</div>
<div class="price">Starting From 899/-</div>
<div class="info">Soft & Premium Quality Hoodies to choose from.</div>
</div>
<div class="items">
<div class="img img1"><img src="https://media.istockphoto.com/photos/vintage-plates-with-silver-teaspoons-picture-id184363070" alt=""></div>
<div class="name">DINNER SET</div>
<div class="price">Starting From 699/-</div>
<div class="info">Dinnerware set for 6 with elegant design.</div>
</div>
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/6463348/pexels-photo-6463348.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></div>
<div class="name">BLANKETS</div>
<div class="price">Starting From 499/-</div>
<div class="info">Luxurious, soft, and cozy blanket set for a perfect night's sleep.</div>
</div>
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/2659939/pexels-photo-2659939.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></div>
<div class="name">LAPTOP</div>
<div class="price">Starting From 37999/-</div>
<div class="info">Ultra-slim, powerful laptop with all-day battery life.</div>
</div>
<div class="items">
<div class="img img1"><img src="https://media.istockphoto.com/photos/modern-kitchen-microwave-oven-picture-id1144960519" alt=""></div>
<div class="name">MICROWAVE</div>
<div class="price">Starting from 13000/-</div>
<div class="info">Fast, convenient, and easy to use microwave..</div>
</div>
<div class="items">
<div class="img img1"><img src="https://media.istockphoto.com/photos/black-coffee-maker-with-green-led-lights-picture-id177395430" alt=""></div>
<div class="name">COFFEE MAKER</div>
<div class="price">Starting from 1449/-</div>
<div class="info">Electronic Coffe Makers with Inverter Technology</div>
</div>
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/6606354/pexels-photo-6606354.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt=""></div>
<div class="name">BED</div>
<div class="price">Starting from 27000/-</div>
<div class="info">Best Quality Bed's </div>
</div>
<div class="items">
<div class="img img1"><img src="https://media.istockphoto.com/photos/woman-turning-on-air-conditioner-picture-id1325708905" alt=""></div>
<div class="name">AIR CONDITIONER</div>
<div class="price">Starting from 56000/-</div>
<div class="info">Cool, quiet, and energy-efficient air conditioner.</div>
</div>
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/5834/nature-grass-leaf-green.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></div>
<div class="name">Story Books</div>
<div class="price">Starting from 300/-</div>
<div class="info">Perfeect Gifts for your Biblophile Friends </div>
</div>
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/4339598/pexels-photo-4339598.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></div>
<div class="name">BAG</div>
<div class="price">Starting from 659/-</div>
<div class="info">Take look at our premium leather bag.</div>
</div>
<div class="items">
<div class="img img1"><img src="https://media.istockphoto.com/photos/hand-of-a-lady-selecting-yellow-colored-saree-in-a-shop-picture-id1301740530" alt=""></div>
<div class="name">SAREES</div>
<div class="price">Starting from 390/-</div>
<div class="info">Surprise Your Mom with best quality sarees.</div>
</div>
<div class="items">
<div class="img img1"><img src="https://images.pexels.com/photos/5816934/pexels-photo-5816934.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt=""></div>
<div class="name">WASHING MACHINE</div>
<div class="price">Starting from 46000/-</div>
<div class="info">Top Class washing machine cleans better with steam.</div>
</div>
</div>

</div>
</div>

</section>
<footer>
<div class="footer0">
<h1>Shop-A-Thon</h1>
</div>
<div class="footer1 ">
Connect with us at<div class="social-media">
<a href="#">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-linkedin"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-youtube"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-instagram"></ion-icon>
</a>
<a href="#">
<ion-icon name="logo-twitter"></ion-icon>
</a>
</div>
</div>
<div class="footer2">
<div class="product">
<div class="heading">Products</div>
<div class="div">Sell your Products</div>
<div class="div">Advertise</div>
<div class="div">Pricing</div>
<div class="div">Product Buisness</div>

</div>
<div class="services">
<div class="heading">Services</div>
<div class="div">Return</div>
<div class="div">Cash Back</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Others</div>
</div>
<div class="Company">
<div class="heading">Company</div>
<div class="div">Complaint</div>
<div class="div">Careers</div>
<div class="div">Affiliate Marketing</div>
<div class="div">Support</div>
</div>
<div class="Get Help">
<div class="heading">Get Help</div>
<div class="div">Help Center</div>
<div class="div">Privacy Policy</div>
<div class="div">Terms</div>
<div class="div">Login</div>
</div>
</div>
<div class="footer3">Copyright © <h4>Shop-A-Thon</h4> 2021-2028</div>
<h6>Made With Love by Arpan Sinha</h6>
</footer>
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<script src="main.js"></script>

</body>

</html>
</body>
</html>
9 changes: 9 additions & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const close = document.querySelector(".close");
const open = document.querySelector(".ham");
const menu = document.querySelector(".menu");
close.addEventListener("click", () => {
menu.style.visibility = "hidden";
});
open.addEventListener("click", () => {
menu.style.visibility = "visible";
});
Loading

0 comments on commit 2a78cb5

Please sign in to comment.