By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
Responding to and Tracking Key Presses
How to Work With Responding to and Tracking Key Presses
JavaScript
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > Landing Pages > How To Make Watches E-commerce Website Design
Landing Pages

How To Make Watches E-commerce Website Design

Admin
Last updated: 2022/11/25 at 5:33 AM
Admin
Share
27 Min Read
Watches E-commerce Website Design

Hello friends, today in this blog you’ll learn to Create a Responsive Watches E-commerce Website Design Using HTML CSS & JavaScript. We’ll use HTML CSS and JavaScript to create this awesome Watches E-commerce Website. Build a complete responsive online Watches E-commerce website design step by step.

Contents
Features of Responsive Watches Website Design What should you know before you start?Steps of Creating Watches E-commerce Website designWatches E-commerce Website Designmain.js FileYou may also like:

Features of Responsive Watches Website Design 

  • Responsive Watches Website Using HTML CSS & JavaScript.
  • Smooth scrolling in each section.
  • Includes a dark and light mode.
  • Compatible with all mobile devices and with a beautiful and pleasant user interface.

What should you know before you start?

  • HTML
  • CSS
  • JavaScript

Steps of Creating Watches E-commerce Website design

  • Project Setup
  • Variables CSS
  • Reset HTML & Reusable CSS Classes
  • Header & Nav Menu
  • Home
  • Buttons
  • Change Background Header
  • Featured
  • Story
  • Products
  • Testimonial
  • New
  • Newsletter
  • Footer
  • Scroll Sections Active Link
  • Scroll Up
  • Scroll Bar
  • Cart
  • Dark/Light Theme
  • Breakpoints For Responsive design

Watches E-commerce Website Design

Watches E-commerce Website Design
DEMO
DOWNLOAD

Now start the design. the first step is Project setup. So Create a folder Responsive Watches Website. You can see below, our project’s folder structure.

Watches E-commerce Website design  project structure

in index.html file link CSS and js file

<!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="assets/img/favicon.png" type="image/x-icon">

        <!--=============== BOXICONS ===============-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

        <!--=============== SWIPER CSS ===============--> 
        <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">

        <!--=============== CSS ===============-->
        <link rel="stylesheet" href="assets/css/styles.css">

        <title>Responsive watches website - Bedimcode</title>
    </head>
    <body>
        <!--==================== HEADER ====================-->
        <header class="header" id="header">
        </header>

        <!--==================== CART ====================-->
        <div class="cart" id="cart">
        </div>

        <main class="main">
            <!--==================== HOME ====================-->
            <section class="home" id="home">
                
            </section>

            <!--==================== FEATURED ====================-->
            <section class="featured section container" id="featured">
                
            </section>

            <!--==================== STORY ====================-->
            <section class="story section container">
                
            </section>

            <!--==================== PRODUCTS ====================-->
            <section class="products section container" id="products">
                
            </section>

            <!--==================== TESTIMONIAL ====================-->
            <section class="testimonial section container">
                
            </section>

            <!--==================== NEW ====================-->
            <section class="new section container" id="new">
               
            </section>

            <!--==================== NEWSLETTER ====================-->
            <section class="newsletter section container">
                
            </section>
        </main>

        <!--==================== FOOTER ====================-->
        <footer class="footer section">
        </footer>

        <!--=============== SCROLL UP ===============-->
        

        <!--=============== SWIPER JS ===============-->
        <script src="assets/js/swiper-bundle.min.js"></script>

        <!--=============== MAIN JS ===============-->
        <script src="assets/js/main.js"></script>    </body>
</html>

Now In the styles.css file, we need do to define some CSS Variables. A CSS Variables is Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that contain specific values to be reused throughout a document.

/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap");

/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  --first-color: hsl(31, 100%, 70%);
  --button-color: hsl(0, 0%, 17%);
  --button-color-alt: hsl(0, 0%, 21%);
  --title-color: hsl(0, 0%, 15%);
  --text-color: hsl(0, 0%, 35%);
  --text-color-light: hsl(0, 0%, 55%);
  --body-color: hsl(0, 0%, 99%);
  --container-color: #fff;
  --border-color: hsl(0, 0%, 94%);

  /*========== Font and typography ==========*/
  --body-font: 'Roboto', sans-serif;
  --biggest-font-size: 2rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-bold: 700;

  /*========== Margenes Bottom ==========*/
  --mb-0-5: .5rem;
  --mb-0-75: .75rem;
  --mb-1: 1rem;
  --mb-1-5: 1.5rem;
  --mb-2: 2rem;
  --mb-2-5: 2.5rem;
  --mb-3: 3rem;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
}

@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 2.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

Reset HTML & Reusable CSS Classes

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body,
button,
input {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
}

body {
  margin: 0;
  background-color: var(--body-color);
  color: var(--text-color);
  /*For animation dark mode*/
  transition: .4s;
}

h1, h2, h3, h4 {
  color: var(--title-color);
  font-weight: var(--font-medium);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
}
/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 1024px;
  margin-left: var(--mb-1-5);
  margin-right: var(--mb-1-5);
}

.grid {
  display: grid;
}

.main {
  overflow: hidden;
}

.section {
  padding: 6.5rem 0 1rem;
}

.section__title {
  position: relative;
  font-size: var(--h3-font-size);
  margin-bottom: var(--mb-3);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}

.section__title::before {
  content: '';
  position: absolute;
  top: -1rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 67px;
  height: 1px;
  background-color: var(--first-color);
}

Now we Create Header

<!--==================== HEADER ====================-->
        <header class="header" id="header">
            <nav class="nav container">
                <a href="#" class="nav__logo">
                    <i class='bx bxs-watch nav__logo-icon'></i> Rolex
                </a>

                <div class="nav__menu" id="nav-menu">
                    <ul class="nav__list">
                        <li class="nav__item">
                            <a href="#home" class="nav__link active-link">Home</a>
                        </li>
                        <li class="nav__item">
                            <a href="#featured" class="nav__link">Featured</a>
                        </li>
                        <li class="nav__item">
                            <a href="#products" class="nav__link">Products</a>
                        </li>
                        <li class="nav__item">
                            <a href="#new" class="nav__link">New</a>
                        </li>
                    </ul>

                    <div class="nav__close" id="nav-close">
                        <i class='bx bx-x' ></i>
                    </div>
                </div>

                <div class="nav__btns">
                    <!-- Theme change button -->
                    <i class='bx bx-moon change-theme' id="theme-button"></i>

                    <div class="nav__shop" id="cart-shop">
                        <i class='bx bx-shopping-bag' ></i>
                    </div>

                    <div class="nav__toggle" id="nav-toggle">
                        <i class='bx bx-grid-alt' ></i>
                    </div>
                </div>
            </nav>
        </header>
/*=============== HEADER & NAV ===============*/
.header {
  width: 100%;
  background: transparent;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-fixed);
  /*For animation dark mode*/
  transition: .4s;
}

.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav__logo, 
.nav__toggle, 
.nav__shop, 
.nav__close {
  color: var(--title-color);
}

.nav__logo {
  text-transform: uppercase;
  font-weight: var(--font-bold);
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  column-gap: .25rem;
}

.nav__logo-icon {
  font-size: 1.25rem;
}

.nav__btns {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.nav__toggle, 
.nav__shop {
  font-size: 1.25rem;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .nav__menu {
    position: fixed;
    background-color: var(--body-color);
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    padding: 6rem 2rem 3.5rem;
    transition: .3s;
  }
}

.nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2rem;
}

.nav__link {
  color: var(--title-color);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  font-size: var(--h2-font-size);
  transition: .3s;
}

.nav__link:hover {
  color: var(--first-color);
}

.nav__close {
  font-size: 2rem;
  position: absolute;
  top: .9rem;
  right: 1.25rem;
  cursor: pointer;
}

/* Show menu */
.show-menu {
  right: 0;
}

/* Change background header */
.scroll-header {
  background-color: var(--body-color);
  box-shadow: 0 1px 4px hsla(0, 4%, 15%, .10);
}

/* Active link */
.active-link {
  color: var(--first-color);
}
Watches E-commerce Website Design Header

Creating Cart section

<!--==================== CART ====================-->
        <div class="cart" id="cart">
            <i class='bx bx-x cart__close' id="cart-close"></i>

            <h2 class="cart__title-center">My Cart</h2>

            <div class="cart__container">
                <article class="cart__card">
                    <div class="cart__box">
                        <img src="assets/img/featured1.png" alt="" class="cart__img">
                    </div>

                    <div class="cart__details">
                        <h3 class="cart__title">Jazzmaster</h3>
                        <span class="cart__price">$1050</span>

                        <div class="cart__amount">
                            <div class="cart__amount-content">
                                <span class="cart__amount-box">
                                    <i class='bx bx-minus' ></i>
                                </span>

                                <span class="cart__amount-number">1</span>

                                <span class="cart__amount-box">
                                    <i class='bx bx-plus' ></i>
                                </span>
                            </div>

                            <i class='bx bx-trash-alt cart__amount-trash' ></i>
                        </div>
                    </div>
                </article>
                
                <article class="cart__card">
                    <div class="cart__box">
                        <img src="assets/img/featured3.png" alt="" class="cart__img">
                    </div>

                    <div class="cart__details">
                        <h3 class="cart__title">Rose Gold</h3>
                        <span class="cart__price">$850</span>

                        <div class="cart__amount">
                            <div class="cart__amount-content">
                                <span class="cart__amount-box">
                                    <i class='bx bx-minus' ></i>
                                </span>

                                <span class="cart__amount-number">1</span>

                                <span class="cart__amount-box">
                                    <i class='bx bx-plus' ></i>
                                </span>
                            </div>

                            <i class='bx bx-trash-alt cart__amount-trash' ></i>
                        </div>
                    </div>
                </article>

                <article class="cart__card">
                    <div class="cart__box">
                        <img src="assets/img/new1.png" alt="" class="cart__img">
                    </div>

                    <div class="cart__details">
                        <h3 class="cart__title">Longines Rose</h3>
                        <span class="cart__price">$980</span>

                        <div class="cart__amount">
                            <div class="cart__amount-content">
                                <span class="cart__amount-box">
                                    <i class='bx bx-minus' ></i>
                                </span>

                                <span class="cart__amount-number">1</span>

                                <span class="cart__amount-box">
                                    <i class='bx bx-plus' ></i>
                                </span>
                            </div>

                            <i class='bx bx-trash-alt cart__amount-trash' ></i>
                        </div>
                    </div>
                </article>
            </div>

            <div class="cart__prices">
                <span class="cart__prices-item">3 items</span>
                <span class="cart__prices-total">$2880</span>
            </div>
        </div>
/*=============== CART ===============*/
.cart {
  position: fixed;
  background-color: var(--body-color);
  z-index: var(--z-fixed);
  width: 100%;
  height: 100%;
  top: 0;
  right: -100%;
  padding: 3.5rem 2rem;
  transition: .4s;
}

.cart__title-center {
  font-size: var(--h2-font-size);
  text-align: center;
  margin-bottom: var(--mb-3);
}

.cart__close {
  font-size: 2rem;
  color: var(--title-color);
  position: absolute;
  top: 1.25rem;
  right: .9rem;
  cursor: pointer;
}

.cart__container {
  display: grid;
  row-gap: 1.5rem;
}

.cart__card {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.cart__box {
  background-color: var(--container-color);
  padding: .75rem 1.25rem;
  border: 1px solid var(--border-color);
}

.cart__img {
  width: 50px;
}

.cart__title {
  font-size: var(--normal-font-size);
  margin-bottom: .5rem;
}

.cart__price {
  display: block;
  font-size: var(--small-font-size);
  color: var(--first-color);
  margin-bottom: var(--mb-1-5);
}

.cart__amount,
.cart__amount-content{
  display: flex;
  align-items: center;
}

.cart__amount{
  column-gap: 3rem;
}

.cart__amount-content{
  column-gap: 1rem;
}

.cart__amount-box {
  display: inline-flex;
  padding: .25rem;
  background-color: var(--container-color);
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.cart__amount-trash {
  font-size: 1.15rem;
  color: var(--first-color);
  cursor: pointer;
}

.cart__prices {
  margin-top: 6rem;
  display: flex;
  justify-content: space-between;
}

.cart__prices-item, 
.cart__prices-total {
  color: var(--title-color);
}

.cart__prices-item {
  font-size: var(--small-font-size);
}

.cart__prices-total {
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
}

/* Show cart */
.show-cart {
  right: 0;
}

Home Section

<!--==================== HOME ====================-->
            <section class="home" id="home">
                <div class="home__container container grid">
                    <div class="home__img-bg">
                        <img src="assets/img/home.png" alt="" class="home__img">
                    </div>
    
                    <div class="home__social">
                        <a href="https://www.facebook.com/" target="_blank" class="home__social-link">
                            Facebook
                        </a>
                        <a href="https://twitter.com/" target="_blank" class="home__social-link">
                            Twitter
                        </a>
                        <a href="https://www.instagram.com/" target="_blank" class="home__social-link">
                            Instagram
                        </a>
                    </div>
    
                    <div class="home__data">
                        <h1 class="home__title">NEW WATCH <br> COLLECTIONS B720</h1>
                        <p class="home__description">
                            Latest arrival of the new imported watches of the B720 series, 
                            with a modern and resistant design.
                        </p>
                        <span class="home__price">$1245</span>

                        <div class="home__btns">
                            <a href="#" class="button button--gray button--small">
                                Discover
                            </a>

                            <button class="button home__button">ADD TO CART</button>
                        </div>
                    </div>
                </div>
            </section>
/*=============== HOME ===============*/
.home__container {
  position: relative;
  row-gap: 2.5rem;
}

.home__img {
  width: 240px;
}

.home__img-bg {
  background-color: var(--first-color);
  width: 258px;
  height: 430px;
  padding-bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  justify-self: flex-end;
  transform: translateX(1.5rem);
}

.home__social {
  position: absolute;
  top: 35%;
  left: -5rem;
  transform: rotate(-90deg);
  display: flex;
  column-gap: 1rem;
}

.home__social-link {
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
  transition: .3s;
}

.home__social-link:hover {
  color: var(--title-color);
}

.home__title {
  font-size: var(--biggest-font-size);
  font-weight: var(--font-bold);
  margin-bottom: var(--mb-1);
}

.home__description {
  margin-bottom: var(--mb-1-5);
}

.home__price {
  display: inline-block;
  font-size: var(--h2-font-size);
  font-weight: var(--font-medium);
  color: var(--first-color);
  margin-bottom: var(--mb-3);
}

.home__btns {
  display: flex;
  align-items: center;
}

.home__button {
  box-shadow: 0 12px 24px hsla(0, 0%, 10%, .2);
}
Watches E-commerce Website Design Home

FEATURED Section

            <!--==================== FEATURED ====================-->
            <section class="featured section container" id="featured">
                <h2 class="section__title">
                    Featured
                </h2>

                <div class="featured__container grid">
                    <article class="featured__card">
                        <span class="featured__tag">Sale</span>

                        <img src="assets/img/featured1.png" alt="" class="featured__img">

                        <div class="featured__data">
                            <h3 class="featured__title">Jazzmaster</h3>
                            <span class="featured__price">$1050</span>
                        </div>

                        <button class="button featured__button">ADD TO CART</button>
                    </article>

                    <article class="featured__card">
                        <span class="featured__tag">Sale</span>

                        <img src="assets/img/featured2.png" alt="" class="featured__img">

                        <div class="featured__data">
                            <h3 class="featured__title">Ingersoll</h3>
                            <span class="featured__price">$250</span>
                        </div>

                        <button class="button featured__button">ADD TO CART</button>
                    </article>

                    <article class="featured__card">
                        <span class="featured__tag">Sale</span>

                        <img src="assets/img/featured3.png" alt="" class="featured__img">

                        <div class="featured__data">
                            <h3 class="featured__title">Rose gold</h3>
                            <span class="featured__price">$890</span>
                        </div>

                        <button class="button featured__button">ADD TO CART</button>
                    </article>
                </div>
            </section>
/*=============== FEATURED ===============*/
.featured__container {
  row-gap: 2.5rem;
}

.featured__card {
  position: relative;
  text-align: center;
  background-color: var(--container-color);
  padding-top: 2rem;
  border: 1px solid var(--border-color);
  overflow-y: hidden;
  transition: .3s;
}

.featured__tag {
  background-color: var(--first-color);
  padding: .5rem 1rem;
  color: #fff;
  text-transform: uppercase;
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  position: absolute;
  transform: rotate(-90deg);
  left: -1rem;
  top: 3rem;
}

.featured__img {
  height: 214px;
  margin-bottom: var(--mb-1);
}

.featured__title, 
.featured__price {
  font-size: var(--h3-font-size);
  font-weight: var(--font-bold);
}

.featured__title {
  text-transform: uppercase;
  margin-bottom: var(--mb-0-75);
}

.featured__price {
  display: block;
  color: var(--first-color);
  transition: .3s;
}

.featured__button {
  font-size: var(--small-font-size);
  transform: translateY(1rem);
  opacity: 0;
}

.featured__card:hover {
  box-shadow: 0 12px 32px hsla(0, 0%, 20%, .1);
  padding: 2rem 0 3rem 0;
}

.featured__card:hover .featured__button {
  transform: translateY(0);
  opacity: 1;
}

.featured__card:hover .featured__price {
  margin-bottom: var(--mb-1-5);
}
Watches E-commerce Website Design Featured Section

Our Story Section

            <!--==================== STORY ====================-->
            <section class="story section container">
                <div class="story__container grid">
                    <div class="story__data">
                        <h2 class="section__title story__section-title">
                            Our Story
                        </h2>
    
                        <h1 class="story__title">
                            Inspirational Watch of <br> this year
                        </h1>
    
                        <p class="story__description">
                            The latest and modern watches of this year, is available in various 
                            presentations in this store, discover them now.
                        </p>
    
                        <a href="#" class="button button--small">Discover</a>
                    </div>

                    <div class="story__images">
                        <img src="assets/img/story.png" alt="" class="story__img">
                        <div class="story__square"></div>
                    </div>
                </div>
            </section>
/*=============== STORY ===============*/
.story__container {
  row-gap: 7.5rem;
}

.story__title {
  font-size: var(--h1-font-size);
  margin-bottom: var(--mb-1);
}

.story__description {
  margin-bottom: var(--mb-2-5);
}

.story__images {
  position: relative;
}

.story__img, 
.story__square {
  width: 250px;
}

.story__square {
  height: 250px;
  background-color: var(--first-color);
}

.story__img {
  position: absolute;
  left: 3rem;
  top: -3rem;
}
Watches E-commerce Website Design Our Story

Products Section

<!--==================== PRODUCTS ====================-->
            <section class="products section container" id="products">
                <h2 class="section__title">
                    Products
                </h2>

                <div class="products__container grid">
                    <article class="products__card">
                        <img src="assets/img/product1.png" alt="" class="products__img">

                        <h3 class="products__title">Spirit rose</h3>
                        <span class="products__price">$1500</span>

                        <button class="products__button">
                            <i class='bx bx-shopping-bag'></i>
                        </button>
                    </article>

                    <article class="products__card">
                        <img src="assets/img/product2.png" alt="" class="products__img">

                        <h3 class="products__title">Khaki pilot</h3>
                        <span class="products__price">$1350</span>

                        <button class="products__button">
                            <i class='bx bx-shopping-bag'></i>
                        </button>
                    </article>

                    <article class="products__card">
                        <img src="assets/img/product3.png" alt="" class="products__img">

                        <h3 class="products__title">Jubilee black</h3>
                        <span class="products__price">$870</span>

                        <button class="products__button">
                            <i class='bx bx-shopping-bag'></i>
                        </button>
                    </article>

                    <article class="products__card">
                        <img src="assets/img/product4.png" alt="" class="products__img">

                        <h3 class="products__title">Fosil me3</h3>
                        <span class="products__price">$650</span>

                        <button class="products__button">
                            <i class='bx bx-shopping-bag'></i>
                        </button>
                    </article>

                    <article class="products__card">
                        <img src="assets/img/product5.png" alt="" class="products__img">

                        <h3 class="products__title">Duchen</h3>
                        <span class="products__price">$950</span>

                        <button class="products__button">
                            <i class='bx bx-shopping-bag'></i>
                        </button>
                    </article>
                </div>
            </section>
/*=============== PRODUCTS ===============*/
.products__container {
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.products__card {
  position: relative;
  background-color: var(--container-color);
  padding: 1.25rem 0;
  border: 1px solid var(--border-color);
  text-align: center;
  transition: .3s;
}

.products__img {
  height: 125px;
  margin-bottom: var(--mb-1);
}

.products__title, 
.products__price {
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
}

.products__title {
  text-transform: uppercase;
  margin-bottom: var(--mb-0-5);
}

.products__price {
  color: var(--first-color);
}

.products__button {
  background-color: var(--button-color);
  padding: .4rem;
  color: #fff;
  font-size: 1rem;
  position: absolute;
  right: 0;
  bottom: 0;
  transition: .3s;
}

.products__button:hover {
  background-color: var(--button-color-alt);
}

.products__card:hover {
  box-shadow: 0 8px 32px hsla(0, 0%, 10%, .1);
}
Watches E-commerce Website Design Products Section

TESTIMONIAL Section

 <!--==================== TESTIMONIAL ====================-->
            <section class="testimonial section container">
                <div class="testimonial__container grid">
                    <div class="swiper testimonial-swiper">
                        <div class="swiper-wrapper">
                            <div class="testimonial__card swiper-slide">
                                <div class="testimonial__quote">
                                    <i class='bx bxs-quote-alt-left' ></i>
                                </div>
                                <p class="testimonial__description">
                                    They are the best watches that one acquires, also they are always with the latest 
                                    news and trends, with a very comfortable price and especially with the attention 
                                    you receive, they are always attentive to your questions.
                                </p>
                                <h3 class="testimonial__date">March 27. 2021</h3>
        
                                <div class="testimonial__perfil">
                                    <img src="assets/img/testimonial1.jpg" alt="" class="testimonial__perfil-img">
        
                                    <div class="testimonial__perfil-data">
                                        <span class="testimonial__perfil-name">Lee Doe</span>
                                        <span class="testimonial__perfil-detail">Director of a company</span>
                                    </div>
                                </div>
                            </div>

                            <div class="testimonial__card swiper-slide">
                                <div class="testimonial__quote">
                                    <i class='bx bxs-quote-alt-left' ></i>
                                </div>
                                <p class="testimonial__description">
                                    They are the best watches that one acquires, also they are always with the latest 
                                    news and trends, with a very comfortable price and especially with the attention 
                                    you receive, they are always attentive to your questions.
                                </p>
                                <h3 class="testimonial__date">March 27. 2021</h3>
        
                                <div class="testimonial__perfil">
                                    <img src="assets/img/testimonial2.jpg" alt="" class="testimonial__perfil-img">
        
                                    <div class="testimonial__perfil-data">
                                        <span class="testimonial__perfil-name">Samantha Mey</span>
                                        <span class="testimonial__perfil-detail">Director of a company</span>
                                    </div>
                                </div>
                            </div>

                            <div class="testimonial__card swiper-slide">
                                <div class="testimonial__quote">
                                    <i class='bx bxs-quote-alt-left' ></i>
                                </div>
                                <p class="testimonial__description">
                                    They are the best watches that one acquires, also they are always with the latest 
                                    news and trends, with a very comfortable price and especially with the attention 
                                    you receive, they are always attentive to your questions.
                                </p>
                                <h3 class="testimonial__date">March 27. 2021</h3>
        
                                <div class="testimonial__perfil">
                                    <img src="assets/img/testimonial3.jpg" alt="" class="testimonial__perfil-img">
        
                                    <div class="testimonial__perfil-data">
                                        <span class="testimonial__perfil-name">Raul Zaman</span>
                                        <span class="testimonial__perfil-detail">Director of a company</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="swiper-button-next">
                            <i class='bx bx-right-arrow-alt' ></i>
                        </div>
                        <div class="swiper-button-prev">
                            <i class='bx bx-left-arrow-alt' ></i>
                        </div>
                    </div>

                    <div class="testimonial__images">
                        <div class="testimonial__square"></div>
                        <img src="assets/img/testimonial.png" alt="" class="testimonial__img">
                    </div>
                </div>
            </section>
/*=============== TESTIMONIAL ===============*/
.testimonial__container {
  row-gap: 4rem;
}

.testimonial__quote {
  display: inline-flex;
  background-color: var(--container-color);
  padding: .5rem .75rem;
  font-size: 1.5rem;
  color: var(--first-color);
  box-shadow: 0 4px 12px hsla(0, 0%, 20%, .1);
  margin-bottom: var(--mb-2);
}

.testimonial__description {
  margin-bottom: var(--mb-1);
}

.testimonial__date {
  font-size: var(--normal-font-size);
  margin-bottom: var(--mb-2);
}

.testimonial__perfil {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  margin-bottom: 7rem;
}

.testimonial__perfil-img {
  width: 60px;
  height: 60px;
  border-radius: 3rem;
}

.testimonial__perfil-data {
  display: flex;
  flex-direction: column;
  row-gap: .5rem;
}

.testimonial__perfil-name {
  font-size: var(--h3-font-size);
  font-weight: var(--font-medium);
  color: var(--title-color);
}

.testimonial__perfil-detail {
  font-size: var(--small-font-size);
}

.testimonial__images {
  position: relative;
}

.testimonial__img, 
.testimonial__square {
  width: 250px;
}

.testimonial__square {
  height: 250px;
  background-color: var(--first-color);
  margin-left: auto;
}

.testimonial__img {
  position: absolute;
  right: 2rem;
  top: 3rem;
}

.testimonial-swiper {
  margin-left: initial;
  margin-right: initial;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  content: '';
}

/* Swiper class */
.swiper-button-next,
.swiper-button-prev {
  top: initial;
  bottom: 5%;
  width: initial;
  height: initial;
  background-color: var(--container-color);
  box-shadow: 0 4px 12px hsla(0, 0%, 20%, .1);
  padding: .25rem;
  font-size: 1.5rem;
  color: var(--first-color);
}

.swiper-button-next {
  right: initial;
  left: 4rem;
}
Watches E-commerce Website Design Testimonial Section

NEW ARRIVALS Section

<!--==================== NEW ====================-->
            <section class="new section container" id="new">
                <h2 class="section__title">
                    New Arrivals
                </h2>
                
                <div class="new__container">
                    <div class="swiper new-swiper">
                        <div class="swiper-wrapper">
                            <article class="new__card swiper-slide">
                                <span class="new__tag">New</span>
        
                                <img src="assets/img/new1.png" alt="" class="new__img">
        
                                <div class="new__data">
                                    <h3 class="new__title">Longines rose</h3>
                                    <span class="new__price">$980</span>
                                </div>
        
                                <button class="button new__button">ADD TO CART</button>
                            </article>

                            <article class="new__card swiper-slide">
                                <span class="new__tag">New</span>
        
                                <img src="assets/img/new2.png" alt="" class="new__img">
        
                                <div class="new__data">
                                    <h3 class="new__title">Jazzmaster</h3>
                                    <span class="new__price">$1150</span>
                                </div>
        
                                <button class="button new__button">ADD TO CART</button>
                            </article>

                            <article class="new__card swiper-slide">
                                <span class="new__tag">New</span>
        
                                <img src="assets/img/new3.png" alt="" class="new__img">
        
                                <div class="new__data">
                                    <h3 class="new__title">Dreyfuss gold</h3>
                                    <span class="new__price">$750</span>
                                </div>
        
                                <button class="button new__button">ADD TO CART</button>
                            </article>

                            <article class="new__card swiper-slide">
                                <span class="new__tag">New</span>
        
                                <img src="assets/img/new4.png" alt="" class="new__img">
        
                                <div class="new__data">
                                    <h3 class="new__title">Portuguese rose</h3>
                                    <span class="new__price">$1590</span>
                                </div>
        
                                <button class="button new__button">ADD TO CART</button>
                            </article>                       
                        </div>
                    </div>
                </div>
            </section>
/*=============== NEW ===============*/
.new__card {
  position: relative;
  text-align: center;
  background-color: var(--container-color);
  padding-top: 2rem;
  border: 1px solid var(--border-color);
  overflow-y: hidden;
  transition: .3s;
}

.new__tag {
  background-color: var(--first-color);
  padding: .5rem 1rem;
  color: #fff;
  text-transform: uppercase;
  font-size: var(--small-font-size);
  font-weight: var(--font-medium);
  position: absolute;
  top: 1rem;
  right: 1rem;
  transition: .3s;
}

.new__img {
  height: 215px;
  margin-bottom: var(--mb-1);
}

.new__title, 
.new__price {
  font-size: var(--h3-font-size);
  font-weight: var(--font-bold);
}

.new__title {
  text-transform: uppercase;
  margin-bottom: var(--mb-0-75);
}

.new__price {
  display: block;
  color: var(--first-color);
  transition: .3s;
}

.new__button {
  font-size: var(--small-font-size);
  transform: translateY(1rem);
  opacity: 0;
}

.new__card:hover {
  background-color: var(--first-color);
  box-shadow: 0 12px 32px hsla(0, 0%, 20%, .1);
  padding: 2rem 0 3rem 0;
}

.new__card:hover .new__tag {
  background-color: var(--button-color);
}

.new__card:hover .new__button {
  transform: translateY(0);
  opacity: 1;
}

.new__card:hover .new__title {
  color: hsl(0, 0%, 15%);
}

.new__card:hover .new__price {
  color: hsl(0, 0%, 15%);
  margin-bottom: var(--mb-1-5);
}
Watches E-commerce Website Design NEW ARRIVALS Section

NEWSLETTER Section

<section class="newsletter section container">
                <div class="newsletter__bg grid">
                    <div>
                        <h2 class="newsletter__title">Subscribe Our <br> Newsletter</h2>
                        <p class="newsletter__description">
                            Don't miss out on your discounts. Subscribe to our email 
                            newsletter to get the best offers, discounts, coupons, 
                            gifts and much more.
                        </p>
                    </div>

                    <form action="" class="newsletter__subscribe">
                        <input type="email" placeholder="Enter your email" class="newsletter__input">
                        <button class="button">
                            SUBSCRIBE
                        </button>
                    </form>
                </div>
            </section>
/*=============== NEWSLETTER ===============*/
.newsletter__bg {
  background-color: var(--first-color);
  padding: 3rem 1.5rem;
  text-align: center;
  row-gap: 2.5rem;
}

.newsletter__title {
  font-size: var(--h1-font-size);
  color: hsl(0, 0%, 15%);
  margin-bottom: var(--mb-1-5);
}

.newsletter__description {
  color: hsl(0, 0%, 35%);
}

.newsletter__subscribe {
  display: flex;
  flex-direction: column;
  row-gap: .75rem;
}

.newsletter__input {
  border: none;
  outline: none;
  background-color: hsl(0, 0%, 94%);
  padding: 1.25rem 1rem;
  color: hsl(0, 0%, 15%);
}
Watches E-commerce Website Design News Letter

FOOTER Section

 <!--==================== FOOTER ====================-->
        <footer class="footer section">
            <div class="footer__container container grid">
                <div class="footer__content">
                    <h3 class="footer__title">Our information</h3>

                    <ul class="footer__list">
                        <li>1234 - Peru</li>
                        <li>La Libertad 43210</li>
                        <li>123-456-789</li>
                    </ul>
                </div>
                <div class="footer__content">
                    <h3 class="footer__title">About Us</h3>

                    <ul class="footer__links">
                        <li>
                            <a href="#" class="footer__link">Support Center</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">Customer Support</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">About Us</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">Copy Right</a>
                        </li>
                    </ul>
                </div>

                <div class="footer__content">
                    <h3 class="footer__title">Product</h3>

                    <ul class="footer__links">
                        <li>
                            <a href="#" class="footer__link">Road bikes</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">Mountain bikes</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">Electric</a>
                        </li>
                        <li>
                            <a href="#" class="footer__link">Accesories</a>
                        </li>
                    </ul>
                </div>

                <div class="footer__content">
                    <h3 class="footer__title">Social</h3>

                    <ul class="footer__social">
                        <a href="https://www.facebook.com/" target="_blank" class="footer__social-link">
                            <i class='bx bxl-facebook'></i>
                        </a>

                        <a href="https://twitter.com/" target="_blank" class="footer__social-link">
                            <i class='bx bxl-twitter' ></i>
                        </a>

                        <a href="https://www.instagram.com/" target="_blank" class="footer__social-link">
                            <i class='bx bxl-instagram' ></i>
                        </a>
                    </ul>
                </div>
            </div>

            <span class="footer__copy">&#169; Bedimcode. All rigths reserved</span>
        </footer>
/*=============== FOOTER ===============*/
.footer__container {
  row-gap: 2rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 3rem;
}

.footer__title {
  font-size: var(--h2-font-size);
  margin-bottom: var(--mb-1-5);
}

.footer__list, 
.footer__links {
  display: flex;
  flex-direction: column;
  row-gap: .75rem;
}

.footer__link {
  color: var(--text-color);
}

.footer__link:hover {
  color: var(--title-color);
}

.footer__social {
  display: flex;
  column-gap: 1rem;
}

.footer__social-link {
  font-size: 1.25rem;
  color: var(--text-color);
}

.footer__social-link:hover {
  color: var(--title-color);
}

.footer__copy {
  display: block;
  margin: 3.5rem 0 1rem 0;
  text-align: center;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}
Watches E-commerce Website Design Footer Section

main.js File

Inside Js File show menu & hide menu code below

/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu')
    })
}

/*=============== REMOVE MENU MOBILE ===============*/
const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    const navMenu = document.getElementById('nav-menu')
    // When we click on each nav__link, we remove the show-menu class
    navMenu.classList.remove('show-menu')
}
navLink.forEach(n => n.addEventListener('click', linkAction))

TESTIMONIAL SWIPER JS Code below

/*=============== TESTIMONIAL SWIPER ===============*/
let testimonialSwiper = new Swiper(".testimonial-swiper", {
    spaceBetween: 30,
    loop: 'true',

    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

/*=============== NEW SWIPER ===============*/
let newSwiper = new Swiper(".new-swiper", {
    spaceBetween: 24,
    loop: 'true',

    breakpoints: {
        576: {
          slidesPerView: 2,
        },
        768: {
          slidesPerView: 3,
        },
        1024: {
          slidesPerView: 4,
        },
    },
});

SCROLL UP & DOWN JS Code

/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/
const sections = document.querySelectorAll('section[id]')

function scrollActive(){
    const scrollY = window.pageYOffset

    sections.forEach(current =>{
        const sectionHeight = current.offsetHeight,
              sectionTop = current.offsetTop - 58,
              sectionId = current.getAttribute('id')

        if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link')
        }else{
            document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link')
        }
    })
}
window.addEventListener('scroll', scrollActive)

/*=============== SHOW SCROLL UP ===============*/ 
function scrollUp(){
    const scrollUp = document.getElementById('scroll-up');
    // When the scroll is higher than 350 viewport height, add the show-scroll class to the a tag with the scroll-top class
    if(this.scrollY >= 350) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll')
}
window.addEventListener('scroll', scrollUp)

Show Or Close Cart Section using JS

/*=============== SHOW CART ===============*/
const cart = document.getElementById('cart'),
      cartShop = document.getElementById('cart-shop'),
      cartClose = document.getElementById('cart-close')

/*===== CART SHOW =====*/
/* Validate if constant exists */
if(cartShop){
    cartShop.addEventListener('click', () =>{
        cart.classList.add('show-cart')
    })
}

/*===== CART HIDDEN =====*/
/* Validate if constant exists */
if(cartClose){
    cartClose.addEventListener('click', () =>{
        cart.classList.remove('show-cart')
    })
}

DARK LIGHT Mode

/*=============== DARK LIGHT THEME ===============*/ 
const themeButton = document.getElementById('theme-button')
const darkTheme = 'dark-theme'
const iconTheme = 'bx-sun'

// Previously selected topic (if user selected)
const selectedTheme = localStorage.getItem('selected-theme')
const selectedIcon = localStorage.getItem('selected-icon')

// We obtain the current theme that the interface has by validating the dark-theme class
const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light'
const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx bx-moon' : 'bx bx-sun'

// We validate if the user previously chose a topic
if (selectedTheme) {
  // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark
  document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme)
  themeButton.classList[selectedIcon === 'bx bx-moon' ? 'add' : 'remove'](iconTheme)
}

// Activate / deactivate the theme manually with the button
themeButton.addEventListener('click', () => {
    // Add or remove the dark / icon theme
    document.body.classList.toggle(darkTheme)
    themeButton.classList.toggle(iconTheme)
    // We save the theme and the current icon that the user chose
    localStorage.setItem('selected-theme', getCurrentTheme())
    localStorage.setItem('selected-icon', getCurrentIcon())
})

Watch The Video Create a Responsive Watches E-commerce Website Design Using HTML CSS & JavaScript ⌚

You may also like:

  • Christmas Website Design Using HTML, CSS & JavaScript

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: Watches E-commerce Website Design
Share this Article
Facebook Twitter Email Print
What do you think?
Love0
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Admin
Follow:
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article Christmas Website design How To Make Christmas Website Design
Next Article Plants Website Design How To Make Plants Website Design
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Responsive Covid-19 Website Using HTML

How to Make Responsive Covid-19 Website Using HTML

December 3, 2022
Application Website Using HTML

How to Make Application Website Using HTML

December 3, 2022
Personal Blog Website Using HTML

How to Make Personal Blog Website Using HTML

December 3, 2022
eCommerce Website Using HTML

How to Make An eCommerce Website Using HTML

December 3, 2022
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?