Skip to content
Permalink
main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Project-3/index.html

Go to file
 
 
Cannot retrieve contributors at this time
283 lines (256 sloc) 10.4 KB
Raw Blame
Open in GitHub Desktop
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://kit.fontawesome.com/bcb2c05d90.js" crossorigin="anonymous"></script>
<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>Vision World - Apple Vision Pro Accessories Shop</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<a href="index.html" class="logo"><img src="img/logo.svg" alt="Vision World Logo" class="logo"></a>
<nav>
<ul id="navbar">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="shop.html">Shop</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li id="lg-bag"><a href="cart.html"><i class="fa fa-bag-shopping"></i></a></li>
<a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
</ul>
</nav>
<div id="mobile">
<a href="cart.html"><i class="fa fa-bag-shopping"></i></a>
<i id="bar" class="fas fa-outdent"></i>
</div>
</header>
<section id="hero">
<h4>Welcome to Vision World</h4>
<h2>Enhance Your Apple Vision Pro Experience</h2>
<h1>Find the Perfect Accessory</h1>
<p>Shop the latest Vision Pro accessories and get up to 50% off!</p>
<button id="shopNowBtn">Shop Now</button>
</section>
<section id="feature" class="section-p1">
<div class="fe-box">
<img src="img/features/f1.png" alt="">
<h6>Free Shipping on orders over $50</h6>
</div>
<div class="fe-box">
<img src="img/features/f2.png" alt="">
<h6>Secure Online Order</h6>
</div>
<div class="fe-box">
<img src="img/features/f3.png" alt="">
<h6>Save on Bundles</h6>
</div>
<div class="fe-box">
<img src="img/features/f4.png" alt="">
<h6>Exclusive Promotions</h6>
</div>
<div class="fe-box">
<img src="img/features/f5.png" alt="">
<h6>Customer Satisfaction</h6>
</div>
<div class="fe-box">
<img src="img/features/f6.png" alt="">
<h6>24/7 Support</h6>
</div>
</section>
<section id="product1" class="section-p1">
<h2>Featured Vision Pro Accessories</h2>
<p class="heading">Explore our best accessories designed exclusively for Vision Pro</p>
<div class="pro-container">
<div class="pro" onclick="window.location.href='sproduct.html';">
<img src="img/products/vp1.jpg" alt="Vision Pro Screen Protector">
<div class="des">
<span>Generic</span>
<h5>SCREEN PROTECTOR</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
<h4>$25</h4>
<a href="#"><i class="fa-solid fa-cart-shopping cart"></i></a>
</div>
</div>
<div class="pro">
<img src="img/products/vp2.jpg" alt="Vision Pro Case">
<div class="des">
<span>Generic</span>
<h5>PROTECTIVE CASE</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
<h4>$40</h4>
<a href="#"><i class="fa-solid fa-cart-shopping cart"></i></a>
</div>
</div>
<div class="pro">
<img src="img/products/vp3.jpg" alt="Vision Pro Cleaning Kit">
<div class="des">
<span>Generic</span>
<h5>CLEANING KIT</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<h4>$20</h4>
<a href="#"><i class="fa-solid fa-cart-shopping cart"></i></a>
</div>
</div>
<div class="pro">
<img src="img/products/vp4.jpg" alt="Vision Pro Charger">
<div class="des">
<span>Generic</span>
<h5>FAST CHARGER</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<h4>$35</h4>
<a href="#"><i class="fa-solid fa-cart-shopping cart"></i></a>
</div>
</div>
<div class="pro">
<img src="img/products/vp5.jpg" alt="Vision Pro Earphones">
<div class="des">
<span>Generic</span>
<h5>WIRELESS EARPHONES</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
<i class="fa-regular fa-star"></i>
</div>
<h4>$50</h4>
<a href="#"><i class="fa-solid fa-cart-shopping cart"></i></a>
</div>
</div>
<div class="pro">
<img src="img/products/vp6.jpg" alt="Vision Pro VR Headset">
<div class="des">
<span>Generic</span>
<h5>VR HEADSET</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fa-solid fa-star-half-stroke"></i>
</div>
<h4>$65</h4>
<a href="#"><i class="fa-solid fa-cart-shopping cart"></i></a>
</div>
</div>
<div class="pro">
<img src="img/products/vp7.jpg" alt="Vision Pro Adjustable Stand">
<div class="des">
<span>Generic</span>
<h5>ADJUSTABLE STAND</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i the="fas fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<h4>$40</h4>
<a href="#"><i the="fa-solid fa-cart-shopping cart"></i></a>
</div>
</div>
<div class="pro">
<img src="img/products/vp8.jpg" alt="Vision Pro Controller">
<div class="des">
<span>Generic</span>
<h5>GAME CONTROLLER</h5>
<div class="star">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i the="fas fa-star"></i>
<i class="fa-regular fa-star"></i>
<i the="fa-regular fa-star"></i>
</div>
<h4>$42</h4>
<a href="#"><i the="fa-solid fa-cart-shopping cart"></i></a>
</div>
</div>
</div>
</section>
<section id="newsletter" class="section-p1 section-m1">
<div class="newstext">
<h4>Sign Up For Newsletters</h4>
<p>Get E-mail updates about our latest shop and <span>special offers.</span></p>
</div>
<div class="form">
<input type="text" placeholder="Your email adress">
<button class="normal" id="signUpButton">Sign Up</button>
</div>
</section>
<footer class="section-p1">
<div class="col">
<img src="img/logo.svg" alt="" class="logo">
<h4>Contact</h4>
<p><strong>Address:</strong> West Lafayette, IN 47907, USA</p>
<p><strong>Phone:</strong> +1 765-494-4600</p>
<p><strong>Hours:</strong> 8:00 am - 5:00 pm, Mon - Fri</p>
<div class="icon follow">
<h4>Follow US</h4>
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-pinterest-p"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
<div class="col">
<h4>About</h4>
<a href="#">About Us</a>
<a href="#">Delivery Information</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
</div>
<div class="col">
<h4>My Account</h4>
<a href="#">Sign In</a>
<a href="#">View Cart</a>
<a href="#">My Wishlist</a>
<a href="#">Track My Order</a>
<a href="#">Help</a>
</div>
<div class="col install">
<h4>Install App</h4>
<p>From App Store or Google Play</p>
<div class="row">
<img src="img/pay/app.jpg" alt="">
<img src="img/pay/play.jpg" alt="">
</div>
<p>Secured Payment Gateways</p>
<img src="img/pay/pay.png" alt="">
</div>
<div class="copyright">
<p>&copy; 2024, Vision World Accessories - A Vision for the Future </p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>