diff --git a/README.md b/README.md index 0e166a2..83c0876 100644 --- a/README.md +++ b/README.md @@ -1 +1,4 @@ -# mini-project \ No newline at end of file +# mini-project + +Netlify link +https://app.netlify.com/sites/chimerical-snickerdoodle-52ef16/deploys/647dfd10537e2921b4f9bee3 \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3397da1 --- /dev/null +++ b/index.html @@ -0,0 +1,212 @@ + + + + + + + Sportsjam + + + + + + + + + +
+ + + +
+ +
+
+ +

SPORTS

+
+
+ +

FITNESS

+
+
+ +

SHOES

+
+
+ +
+
+
+

OUR CUSTOMIZED SERVICES

+
+
+ +
+ +
+

CRICKET BAT KNOCKING IN

+
+

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.

+

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

+
+ +
+ +
+ +
+ +
+
+ +

PICKBALL SPORTS

+
+
+ +

PADEL SPORTS

+
+
+
+
+ +
+ +
+ +
+ +
+
+
+
+ + +
+
+

ABOUT SPORTSJAM

+
+

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

+

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!

+
+ +
+ +
+
+

TESTIMONALS

+
+ + +
+ 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. + +
+ +
+
+ +
+
+ + E-gift Voucher +
+
+ + Reward Points +
+
+ + Buyer's guide +
+ +
+ + Customized Services +
+
+ + Express Shipping +
+ +
+ + Secure Shopping +
+ +
+ + Authentic +
+ +
+

+
+
+

GET TO KNOW US

+ ABOUT US + CONTACT US + INQUIRY/FEEDBACK + OUR STORIES + SPORTSJAM TEAM +
+
+

HERE TO HELP

+ REGISTER/LOGIN + DELIVERY & CHARGES + PAYMENT OPTIONS + FAQS + RETURN POLICY + TRACK MY ORDER + BUY IN BULK +
+
+

PAYMENTS

+ +
+
+

SIGN UP FOR NEWSLETTER

+ + +
+ +
+ + + + + \ No newline at end of file diff --git a/index.js b/index.js new file mode 100644 index 0000000..c0fd338 --- /dev/null +++ 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]) + +}) + diff --git a/style.css b/style.css new file mode 100644 index 0000000..abe578c --- /dev/null +++ b/style.css @@ -0,0 +1,159 @@ +*{ + box-sizing: border-box; + padding: 0px; + margin: 0px; + +} +#navbar{ +background-color: black; +height: 35px; +} + +#navbar > div{ +display: flex; +justify-content: end; +align-items: center; +gap: 20px; +padding: 8px; +padding-right: 20px; + +} +#navbar > div > a{ +color: white; +} + +#navbar2{ +background-color:white; +} +#navbar2 > div{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 8px; +} +#navbar3{ +border: 1px solid lightgray; +height: 40px; +} +#navbar3 > div{ +display: flex; +justify-content: start; +gap: 14px; +align-items: end; +padding: 10px; +} +#navbar3 > div > a{ +color: black; +} + +#slides{ +width: 99%; +margin: auto; +text-align: center; +} +#slides img{ +width: 100%; +} +#slides button{ + font-size: 18px; +} +#category{ + width: 97%; + margin: auto; + display: flex; + text-align: center; + +} +#category div{ + width: 33%; + gap: 25px; + +} +#category div > img{ +width: 100%; +padding: 20px; +} + +.middle{ +display: flex; +align-items: center; +width: 93%; +margin: auto; +} +.middle > div { +width: 50%; + +} +.middle > div> img{ +width: 550px; +} + +#sports{ +display: flex; +width: 93%; +margin: auto; +padding-top: 25px; +text-align: center; + +} +#sports> div{ +width: 50%; + +} + +#sports> div >img{ +width: 550px; +} + + +#shoes{ +width: 100%; +margin: auto; +} + +#shoes > img{ +width:100%; +} + +#services{ +background-color: lightgrey; +display: grid; +grid-template-columns: repeat(6,1fr); + +} +#services> div{ +display: grid; +width: 18%; +margin-left: 75px; +padding: 30px; + + +} + +#services> div > img{ + width: 60px; + text-align: center; +} + +#services > div > a{ +color: black; +} + +#bottom{ +background-color: black; +display: flex; +justify-content: space-between; +height: 400px; + +} +#bottom > div{ +display: grid; + +} + +#bottom > div > a{ +color: white; +} +#bottom > div > h3 > a{ +color: white; +}