web-development-session-content · suriyasingaravel · Jun 5, 2023 · Jun 5, 2023
diff --git a/README.md b/README.md
@@ -1 +1,4 @@
-# mini-project
+# mini-project
+
+Netlify link
+https://app.netlify.com/sites/chimerical-snickerdoodle-52ef16/deploys/647dfd10537e2921b4f9bee3
diff --git a/index.html b/index.html
@@ -0,0 +1,212 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <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>Sportsjam</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <nav id="navbar">
+        <div>
+            <a href=""> Call Us:+91-8883259467</a>
+            <a href=""> Sign in </a>
+            <a href="">Create Account</a>
+            <a href=""> Wishlist</a>
+        </div>
+    </nav>
+
+    <nav id="navbar2">
+        <div>
+            <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/logo.jpg" alt="">
+            <form action=""> 
+                <input type="text" placeholder="Search" >
+                <button type="submit"> <img style="width: 20px;" src="https://cdn-icons-png.flaticon.com/128/16/16492.png" alt=""></button>
+            </form>
+            <h3> <img style="width: 26px;" src="https://cdn-icons-png.flaticon.com/128/833/833314.png" alt=""> Shopping Cart</h3>
+        </div>
+    </nav>
+
+    <nav id="navbar3">
+       <div>
+        <a href="">SPORTS</a>
+        <a href=""> FITNESS</a>
+        <a href="">SHOES</a>
+        <a href="">CLOTHING</a>
+        <a href="">ACCESSORIES</a>
+        <a href="">LEISURE SPORTS</a>
+        <a href="">FANGEAR</a>
+        <a href="">BRANDS</a>
+       </div>
+    </nav>
+
+   <div id="slides">
+    <img id="image" src="" alt="">
+    <button id="Prev"> < </button>
+    <button id="Next"> > </button>
+   </div>
+
+   <div id="category">
+    <div> 
+        <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/callout_img1.jpg" alt="">
+        <h3>SPORTS</h3>
+    </div>
+    <div>
+        <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/callout_img2.jpg" alt="">
+        <h3> FITNESS </h3>
+    </div>
+    <div>
+        <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/callout_img3.jpg" alt="">
+        <h3>SHOES </h3>
+    </div>
+   </div>
+
+   <br>
+   <div>
+    <div id="heading">
+       <h2 style="text-align: center;">OUR CUSTOMIZED SERVICES</h2>
+    </div>
+    <br>
+
+    <div class="middle">
+        <div id="image">
+            <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/bslide5.jpg" alt="">
+            <br>    
+            <a href="">RACKET STRINGING</a>
+            <a href="">HYBRID STRINGING</a>
+            <a href="">TT ASSEMBLY</a>
+            <a href=""> BAT KNOCKING</a>
+        </div>
+        <div>
+            <h3>CRICKET BAT KNOCKING IN</h3>
+            <br>
+            <p style="color: grey;">Buying your best suited Cricket Bat is the key to score those massive runs – true, yet the important process often ignored is getting your bat ready to play. </p>
+             <p style="color: grey;">Get your bat knocked-in to prepare the blade for optimum performance and longevity. In this, the bat goes through a process of oiling and hammer/ball knocks to make it ready to face the impact of high speed deliveries. To avail this service at Sportsjam.in, add your desired English willow bat along with the knocking-in service in your order</p>   
+                <br>
+                <button> Read More</button>
+        </div>
+
+    </div>
+
+   </div>
+
+   <div id="sports">
+    <div>
+        <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/PICKLEBALL1.jpg" alt="">
+        <p>PICKBALL SPORTS</p>
+    </div>
+    <div>
+        <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/PADEL1.jpg" alt="">
+        <p>PADEL SPORTS</p>
+    </div>
+   </div>
+<br>
+<br>
+
+   <div id="shoes">
+    <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/Yonex-Shoe-July22.jpg" alt="">
+   </div>
+
+<div id="brand">
+
+</div>
+<br>  
+<div class="middle">
+    <div id="image">
+        <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/bta-store.jpg" alt="">
+
+    </div>
+    <div id="para">
+        <h3>ABOUT SPORTSJAM  </h3>
+        <br>
+        <p style="color: grey;">Let’s get going to dig out the best products in your game & make ‘em available right at your doorstep. We will be glad to serve you in any city in India & speedily, so that you enjoy your product in the coming weekend! All this, with no shipping charges if you purchase above Rs.1000 </p>
+         <p style="color: grey;">Scout through your favourite brands with latest technologies. Just click & be its proud owner, at the best available price in the market. Come, help us help you to fly high with your new & improved game with high quality sportsgear!</p>   
+            <br>
+            <button> Read More</button>
+    </div>
+
+</div>
+<br>
+<h2 style="text-align: center;">TESTIMONALS</h2>
+<br>
+
+
+<div style="display: flex; width: 87%; margin: auto; flex-wrap: wrap;"> 
+    Amazing products and Excellent Service. Whenever I have called, I have got professional, prompt and consistent reply. Even during giving the free tshirt, you guys called to know the size, but unfortunately the size is large on me. Any chances I can exchange with M size. Although I am loving my new racquet. - Rajnish, New Delhi.
+
+</div>
+
+<br>
+<br>
+
+<div id="services">
+    <div>
+        <img src="https://cdn-icons-png.flaticon.com/128/9004/9004265.png" alt="">
+        <a href="">  E-gift Voucher </a>
+    </div>
+    <div>
+        <img src="https://cdn-icons-png.flaticon.com/128/4108/4108373.png" alt="">
+        <a href=""> Reward Points</a>
+    </div>
+    <div>
+        <img src="https://cdn-icons-png.flaticon.com/128/3145/3145765.png" alt="">
+        <a href=""> Buyer's guide</a>
+    </div>
+
+    <div>
+        <img src="https://cdn-icons-png.flaticon.com/128/9937/9937893.png" alt="">
+        <a href=""> Customized Services</a>
+    </div>
+    <div>
+        <img src="https://cdn-icons-png.flaticon.com/128/1981/1981844.png" alt="">
+        <a href="">  Express Shipping</a>
+    </div>
+
+    <div>
+        <img src="https://cdn-icons-png.flaticon.com/128/726/726488.png" alt="">
+        <a href="">Secure Shopping</a>
+    </div>
+
+    <div>
+        <img src="https://cdn-icons-png.flaticon.com/128/6005/6005952.png" alt="">
+        <a href="">Authentic</a>
+    </div>
+
+</div>
+<BR></BR>
+ <div id="bottom">
+   <div>
+    <h3><a href="">GET TO KNOW US</a></h3>
+    <a href="">ABOUT US</a>
+    <a href="">CONTACT US</a>
+    <a href="">INQUIRY/FEEDBACK</a>
+    <a href="">OUR STORIES</a>
+    <a href="">SPORTSJAM TEAM</a>
+   </div>
+   <div>
+    <h3><a href="">HERE TO HELP</a></h3>
+    <a href="">REGISTER/LOGIN</a>
+    <a href="">DELIVERY & CHARGES</a>
+    <a href="">PAYMENT OPTIONS</a>
+    <a href="">FAQS</a>
+    <a href="">RETURN POLICY</a>
+    <a href="">TRACK MY ORDER</a>
+    <a href="">BUY IN BULK</a>
+   </div>
+   <div>
+    <h3><a href="">PAYMENTS</a></h3>
+    <img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/Payments.png" alt="">
+   </div>
+   <div>
+    <h3><a href="">SIGN UP FOR NEWSLETTER</a></h3>
+    <input type="text" placeholder="Email here">
+
+   </div>
+
+ </div>
+
+ <script src="index.js"></script>
+
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,37 @@
+
+
+let image=document.querySelector("#image");
+let prevButton=document.querySelector("#Prev");
+let nextButton=document.querySelector("#Next");
+
+let currentImage=0;
+let imagesArr=[
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/speed2022.jpg",
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/PARAFA2023.jpg",
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/Pro-Staff-V14-BUY-Now.jpg",
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/Joma%20offer.jpg",
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/osaka-ezone.jpg",
+    "https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/ArcSaber11-1.jpg",
+
+];
+
+image.setAttribute("src",imagesArr[currentImage])
+
+nextButton.addEventListener("click", function(){
+    currentImage++;
+    if(currentImage>=imagesArr.length){
+        currentImage=0;
+    }
+    image.setAttribute("src",imagesArr[currentImage])
+
+})
+
+prevButton.addEventListener("click", function(){
+    currentImage--;
+    if(currentImage < 0){
+        currentImage=imagesArr.length-1;
+    }
+    image.setAttribute("src",imagesArr[currentImage])
+
+})
+