Give a Javascript source codes using vscode to create a home page of an e-commerce app
Give a Javascript source codes using vscode to create a home page of an e-commerce app
Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
Related questions
Question
Give a Javascript source codes using vscode to create a home page of an e-commerce app
Expert Solution
Step 1
Answer:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Favicon -->
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
<!-- Box icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css" />
<!-- Custom StyleSheet -->
<link rel="stylesheet" href="./css/styles.css" />
<title>Ecommerce Website</title>
</head>
<body>
<!-- Header -->
<header id="home" class="header">
<!-- Navigation -->
<nav class="nav">
<div class="navigation container">
<div class="logo">
<h1>Codevo</h1>
</div>
<div class="menu">
<div class="top-nav">
<div class="logo">
<h1>Codevo</h1>
</div>
<div class="close">
<i class="bx bx-x"></i>
</div>
</div>
<ul class="nav-list">
<li class="nav-item">
<a href="#home" class="nav-link scroll-link">Home</a>
</li>
<li class="nav-item">
<a href="product.html" class="nav-link">Products</a>
</li>
<li class="nav-item">
<a href="#about" class="nav-link scroll-link">About</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link scroll-link">Contact</a>
</li>
<li class="nav-item">
<a href="#account" class="nav-link scroll-link">Account</a>
</li>
<li class="nav-item">
<a href="cart.html" class="nav-link icon"><i class="bx bx-shopping-bag"></i></a>
</li>
</ul>
</div>
<a href="cart.html" class="cart-icon">
<i class="bx bx-shopping-bag"></i>
</a>
<div class="hamburger">
<i class="bx bx-menu"></i>
</div>
</div>
</nav>
<!-- Hero -->
<img src="./images/banner.png" alt="" class="hero-img" />
<div class="hero-content">
<h2><span class="discount">70% </span> SALE OFF</h2>
<h1>
<span>Summer Vibes</span>
<span>mode on</span>
</h1>
<a class="btn" href="#">shop now</a>
</div>
</header>
<!-- Main -->
<main>
<section class="advert section">
<div class="advert-center container">
<div class="advert-box">
<div class="dotted">
<div class="content">
<h2>
Girls <br />
Clothing
</h2>
<h4>Worlds Best Brands</h4>
</div>
</div>
<img src="./images/advert1.png" alt="">
</div>
<div class="advert-box">
<div class="dotted">
<div class="content">
<h2>
Summer <br />
Clothing
</h2>
<h4>Worlds Best Brands</h4>
</div>
</div>
<img src="./images/advert2.png" alt="">
</div>
<div class="advert-box">
<div class="dotted">
<div class="content">
<h2>
Boys <br />
Clothing
</h2>
<h4>Worlds Best Brands</h4>
</div>
</div>
<img src="./images/advert3.png" alt="">
</div>
</div>
</section>
<!-- Featured -->
<section class="section featured">
<div class="title">
<h1>Featured Products</h1>
</div>
<div class="product-center container">
<div class="product">
<div class="product-header">
<img src="./images/pic2.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
<div class="product">
<div class="product-header">
<img src="./images/pic1.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
<div class="product">
<div class="product-header">
<img src="./images/pic3.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
<div class="product">
<div class="product-header">
<img src="./images/pic4.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
</div>
</section>
<!--Latest -->
<section class="section featured">
<div class="title">
<h1>Latest Products</h1>
</div>
<div class="product-center container">
<div class="product">
<div class="product-header">
<img src="./images/pic5.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
<div class="product">
<div class="product-header">
<img src="./images/pic2.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
<div class="product">
<div class="product-header">
<img src="./images/pic1.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
<div class="product">
<div class="product-header">
<img src="./images/pic4.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
<div class="product">
<div class="product-header">
<img src="./images/pic1.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
<div class="product">
<div class="product-header">
<img src="./images/pic3.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
<div class="product">
<div class="product-header">
<img src="./images/pic2.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
<div class="product">
<div class="product-header">
<img src="./images/pic5.jpg" alt="">
<ul class="icons">
<span><i class="bx bx-heart"></i></span>
<span><i class="bx bx-shopping-bag"></i></span>
<span><i class="bx bx-search"></i></span>
</ul>
</div>
<div class="product-footer">
<a href="#">
<h3>Boy’s T-Shirt</h3>
</a>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<h4 class="price">$50</h4>
</div>
</div>
</div>
</section>
<!-- Product Banner -->
<section class="section">
<div class="product-banner">
<div class="left">
<img src="./images/test.jpg" alt="" />
</div>
<div class="right">
<div class="content">
<h2><span class="discount">70% </span> SALE OFF</h2>
<h1>
<span>Collect Your</span>
<span>Kids Collection</span>
</h1>
<a class="btn" href="#">shop now</a>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="section">
<div class="testimonial-center container">
<div class="testimonial">
<span>“</span>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
fugiat labore. Veritatis et omnis consequatur.
</p>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<div class="img-cover">
<img src="./images/profile1.jpg" alt="" />
</div>
<h4>Will Smith</h4>
</div>
<div class="testimonial">
<span>“</span>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
fugiat labore. Veritatis et omnis consequatur.
</p>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<div class="img-cover">
<img src="./images/profile2.jpg" alt="" />
</div>
<h4>Will Smith</h4>
</div>
<div class="testimonial">
<span>“</span>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
fugiat labore. Veritatis et omnis consequatur.
</p>
<div class="rating">
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bxs-star"></i>
<i class="bx bx-star"></i>
</div>
<div class="img-cover">
<img src="./images/profile3.jpg" alt="" />
</div>
<h4>Will Smith</h4>
</div>
</div>
</section>
<!-- Brands -->
<section class="section">
<div class="brands-center container">
<div class="brand">
<img src="./images/brand1.png" alt="" />
</div>
<div class="brand">
<img src="./images/brand2.png" alt="" />
</div>
<div class="brand">
<img src="./images/brand1.png" alt="" />
</div>
<div class="brand">
<img src="./images/brand2.png" alt="" />
</div>
<div class="brand">
<img src="./images/brand1.png" alt="" />
</div>
<div class="brand">
<img src="./images/brand2.png" alt="" />
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer id="footer" class="section footer">
<div class="container">
<div class="footer-container">
<div class="footer-center">
<h3>EXTRAS</h3>
<a href="#">Brands</a>
<a href="#">Gift Certificates</a>
<a href="#">Affiliate</a>
<a href="#">Specials</a>
<a href="#">Site Map</a>
</div>
<div class="footer-center">
<h3>INFORMATION</h3>
<a href="#">About Us</a>
<a href="#">Privacy Policy</a>
<a href="#">Terms & Conditions</a>
<a href="#">Contact Us</a>
<a href="#">Site Map</a>
</div>
<div class="footer-center">
<h3>MY ACCOUNT</h3>
<a href="#">My Account</a>
<a href="#">Order History</a>
<a href="#">Wish List</a>
<a href="#">Newsletter</a>
<a href="#">Returns</a>
</div>
<div class="footer-center">
<h3>CONTACT US</h3>
<div>
<span>
<i class="fas fa-map-marker-alt"></i>
</span>
42 Dream House, Dreammy street, 7131 Dreamville, USA
</div>
<div>
<span>
<i class="far fa-envelope"></i>
</span>
company@gmail.com
</div>
<div>
<span>
<i class="fas fa-phone"></i>
</span>
456-456-4512
</div>
<div>
<span>
<i class="far fa-paper-plane"></i>
</span>
Dream City, USA
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- End Footer -->
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
<!-- Custom Script -->
<script src="./js/index.js"></script>
</body>
</html>
Step by step
Solved in 2 steps
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY