Add files via upload

Nayemmolllick · Nov 10, 2023 · 0053549 · 0053549
commit 0053549
Show file tree

Hide file tree

Showing 14 changed files with 738 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,12 @@
+# Responsive Watches Website
+## [Watch it on youtube](https://youtu.be/0GT6yF3r10Q)
+### Responsive Watches Website
+
+- Responsive Watches Website Design Using HTML CSS & JavaScript
+- Contains animated images.
+- Developed first with the Mobile First methodology, then for desktop.
+- Compatible with all mobile devices and with a beautiful and pleasant user interface.
+
+💙 Join the channel to see more videos like this. [Bedimcode](https://www.youtube.com/@Bedimcode)
+
+![preview img](/preview.png)
diff --git a/Text Responsive watches website.txt b/Text Responsive watches website.txt
@@ -0,0 +1,33 @@
+========== HEADER ==========
+.nav__logo
+WATCHES
+
+.nav__link
+HOME - ABOUT - FEATURED - NEW
+
+.nav__social-link
+https://www.facebook.com/
+https://www.instagram.com/
+https://twitter.com/
+
+
+========== HOME ==========
+.home__title
+Baume Custom <br> 
+Timepiece Small <br> 
+Second
+
+.home__price
+$620
+
+.home__button
+ADD TO CART
+
+.home__info-description
+Personalized watches are a job of quality 
+and commitment. Each piece is the result of a 
+work of co-creation of innovation and responsible 
+sensitivity for users.
+
+.home__button-link
+LEARN MORE
diff --git a/favicon.png b/favicon.png
diff --git a/gsap.min.js b/gsap.min.js
diff --git a/index.html b/index.html
@@ -0,0 +1,153 @@
+<!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="favicon.png" type="image/x-icon">
+
+      <!--=============== REMIXICONS ===============-->
+      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/3.5.0/remixicon.css">
+
+      <!--=============== SWIPER CSS ===============-->
+      <link rel="stylesheet" href="swiper-bundle.min.css">
+
+      <!--=============== CSS ===============-->
+      <link rel="stylesheet" href="styles.css">
+
+      <title>Responsive wacthes website - Bedimcode</title>
+   </head>
+   <body>
+      <!--==================== HEADER ====================-->
+      <header class="header" id="header">
+   <nav class="nav container">
+     <a href="#" class="nav__logo">
+       WATCHES
+     </a>
+
+     <div class="nav__menu" id="nav-menu">
+        <ul class="nav__list">
+          <li class="nav__item">
+          <a href="#home" class="nav__link"> Home
+            </a>
+          </li>
+
+          <li class="nav__item">
+         <a href="#about" class="nav__link">
+             About
+            </a>
+          </li>
+
+          <li class="nav__item">
+           <a href="#featured" class="nav__link">  
+           FEATURED
+            </a>
+          </li>
+
+          <li class="nav__item">
+            <a href="#new" class="nav__link">
+               NEW
+            </a>
+          </li>
+        </ul>
+
+      <div class="nav__social">
+       <a href="https://www.facebook.com/" target="_blank" class="nav__social-link">
+         <i class="ri-facebook-circle-line"></i>
+       </a> 
+
+       <a href="https://www.instagram.com/" target="_blank" class="nav__social-link">
+         <i class="ri-instagram-line"></i>
+       </a> 
+
+       <a href="https://twitter.com/" target="_blank" class="nav__social-link">
+         <i class="ri-twitter-x-line"></i>
+       </a> 
+      </div> 
+
+     <!-- close button -->
+    <div class="nav__close" id="nav-close">
+         <i class="ri-close-line"></i>
+      </div>
+     </div>
+
+     <!-- Toggle button -->
+      <div class="nav__toggle" id="nav-toggle">
+         <i class="ri-menu-fill"></i>
+      </div>
+   </nav>
+      </header>
+
+      <!--==================== MAIN ====================-->
+      <main class="main">
+         <!--==================== HOME ====================-->
+         <section class="home">
+    <div class="home__container container">
+      <div class="home__data">
+        <div class="home__content">
+          <div class="home__stars">
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+            <i class="ri-star-fill"></i>
+           <i class="ri-star-half-fill"></i>
+          </div>
+
+          <h1 class="home__title">Baume Custom <br> Timepiece Small <br> Second</h1>
+        <h3 class="home__price">$620</h3>
+        </div>
+
+        <a href="#" class="home__button">ADD TO CART
+       <i class="ri-arrow-right-s-line"></i>
+        </a>
+      </div>
+
+      <div class="home__images">
+        <div class="home__swiper swiper">
+        <div class="swiper-wrapper">
+          <article class="home__article swiper-slide">
+            <img src="watches-1.png" alt="image" class="home__img">
+          </article>
+          <article class="home__article swiper-slide">
+            <img src="watches-2.png" alt="image" class="home__img">
+          </article>
+          <article class="home__article swiper-slide">
+            <img src="watches-3.png" alt="image" class="home__img">
+          </article>
+          </div>
+        </div>
+
+        <!-- Pagination -->
+        <div class="swiper-pagination"></div>
+      </div>
+
+      <div class="home__info">
+       <img src="watches-border.png" alt="image" class="home__info-img">
+        <div class="home__info-content">
+          <p class="home__info-description">
+Personalized watches are a job of quality 
+and commitment. Each piece is the result of a 
+work of co-creation of innovation and responsible 
+sensitivity for users.
+          </p>
+
+        <a href="#" class="home__button-link">LEARN MORE
+        </a>
+        </div>
+      </div>
+    </div>      
+    </section>
+      </main>
+
+      <!--=============== GSAP ===============-->
+     <script src="gsap.min.js"></script>
+
+
+      <!--=============== SWIPER JS ===============-->
+      <script src="swiper-bundle.min.js"></script>
+
+      <!--=============== MAIN JS ===============-->
+      <script src="main.js"></script>
+   </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,66 @@
+/*=============== 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')
+
+const 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))
+
+/*=============== SWIPER WACTHES ===============*/
+let swiperWacthes = new Swiper('.home__swiper', {
+  loop: true,
+  spaceBetween: 32,
+  grabCursor: true,
+  effect: "creative",
+  creativeEffect: {
+    prev: {
+      translate: [-100, 0, -500], 
+      rotate: [0, 0, 15], 
+      opacity: 0
+    },
+
+  next: {
+      translate: [100, 0, -500], 
+      rotate: [0, 0, -15], 
+      opacity: 0
+    },
+  },
+
+  pagination: {
+    el: ".swiper-pagination",
+    clickable: true,
+  },
+})
+
+
+/*=============== GSAP ANIMATION ===============*/
+gsap.from('.home__images', 1.5, {opacity:0, y:150, delay: .1})
+gsap.from('.home__data', 1.8, {opacity:0, y:-100, delay: .8})
+gsap.from('.home__info', 1.8, {opacity:0, y:-100, delay: 1})
+
+
+
+
diff --git a/preview.png b/preview.png