diff --git a/README.md b/README.md index 0e166a2..04b443c 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# mini-project \ No newline at end of file +[# mini-project](https://647ec95ee68106628ede56aa--jovial-dango-ec2413.netlify.app/) diff --git a/mini project/index.html b/mini project/index.html new file mode 100644 index 0000000..73ba155 --- /dev/null +++ b/mini project/index.html @@ -0,0 +1,218 @@ + + + + + + + + + + + + Document + + + +
+
+ + + + Call Us: +917009025478 +
+
+ + + + + Signin +
+
+ + + + + Create Account +
+
+ + + + + Wishlist +
+
+ +
+
+ +
+ + +
+ + + + + +
+
abc

SPORTS

+

FITNESS

+

SHOES

+
+ +
+

OUR COUSTOMISED SERVICES

+
+
RACKET STRINGINGHYRID STRINGINGTT ASSEMBLYBAT KNOCKING
+

BADMINTON RACKET STRINGING

Some players prefer to have the comfort, power and flexibility to choose a combination of features on a single string. For this, few tennis brands offer Hybrid Strings, which have one string for Mains and a different string for Crosses. Now, YOU can also create your very own hybrid string! + To avail of this service at Sportsjam.in, add your favourite racquet in your order, along with Tennis String for Mains and Tennis String for Crosses (Hybrid Stringing). Please note that a good understanding of string features are required to achieve an optimum balance between comfort, durability, control and power.

+
+
+ +
+
PICKLEBALL SPORTS
+
PEDAL 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!

+
+
+ +
+

TESTIMONIALS

+

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.

+ +
+ + + + + + + + \ No newline at end of file diff --git a/mini project/scripts/index.js b/mini project/scripts/index.js new file mode 100644 index 0000000..a010c30 --- /dev/null +++ b/mini project/scripts/index.js @@ -0,0 +1,20 @@ +let array = ['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/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/ArcSaber11-1.jpg']; + +let nextBtn = document.getElementById("next"); +nextBtn.addEventListener("click", function (){ + let presentInp = document.querySelector("#banner>img").scr; + let presentIndx; + for(let i = 0;i= array.length){ + presentIndx -= array.length; + } + + document.querySelector("#banner>img").setAttribute("src", array[presentIndx]); + +}) \ No newline at end of file diff --git a/mini project/style.css b/mini project/style.css new file mode 100644 index 0000000..a09da2e --- /dev/null +++ b/mini project/style.css @@ -0,0 +1,430 @@ + +body{ + font-family: 'Roboto', sans-serif; + margin: 0; + padding: 0; + } + #top-bar{ + /* border: 2px solid red; */ + display: flex; + justify-content: flex-end; + gap: 20px; + padding: 5px; + background-color: black; + color: white; + } + #top-bar>div{ + /* border: 2px solid blue; */ + display: flex; + align-items: center; + gap: 7px; + } + #top-bar>div>svg{ + width: 20px; + } + #top-bar>div>a{ + color: white; + text-decoration: none; + } + + /* Second Bar */ + + #second-bar{ + margin-top: 25px; + padding: 10px 3%; + display: flex; + justify-content: space-between; + } + #second-bar>div{ + display: flex; + align-items: center; + /* border: 2px solid green; */ + } + #search-bar{ + width: 50%; + position: relative; + } + #search-bar>i{ + width: 30px; + position: absolute; + right: 3%; + } + #search-bar>input{ + padding: 5px; + width: 100%; + height: 40px; + border-radius: 5px; + border: 0; + box-shadow: 0 0 4px grey; + } + + #cart-link{ + display: flex; + gap: 10px; + } + #cart-link>svg{ + width: 50px; + } + #cart-link>a{ + color: black; + font-size: 20px; + text-decoration: none; + font-weight: bold; + } + + /* navbar */ + + #navbar{ + display: flex; + padding: 0 3%; + box-shadow: 0 0 2px grey; + margin-top: 20px; + margin-bottom: 15px; + } + #navbar>a{ + padding: 8px 12px; + color: rgb(105, 105, 105); + text-decoration: none; + } + #navbar>a:hover{ + color: white; + background-color: black; + } + + /* banner */ + + #banner{ + position: relative; + display: flex; + align-items: center; + } + #banner>img{ + width: 100%; + } + #banner>i{ + position: absolute; + width: 50px; + color: white; + } + #next{ + right: 10px; + } + #prev{ + left: 10px; + } + #effect{ + width: 100%; + position: absolute; + height: 100%; + display: flex; + justify-content: space-between; + } + #effect>div{ + width: 70px; + opacity: 0.2; + background-color: rgb(82, 82, 82); + /* border: 2px solid red; */ + + } + + + /* Cards */ + + #container{ + margin: auto; + margin-top: 50px; + display: flex; + width: 95%; + justify-content: space-between; + } + #container>div{ + /* border: 2px solid red; */ + width: 30%; + display: flex; + flex-direction: column; + position: relative; + align-items: center; + } + + #container>div>img{ + width: 100%; + } + #container>div>div{ + width: 100%; + /* padding: 8px 0; */ + position: absolute; + bottom: 0; + background-color: rgb(70, 70, 70); + opacity: 0.6; + color: white; + display: flex; + justify-content: center; + } + + /* services */ + #services{ + margin-top: 50px; + text-align: center; + color: rgb(105, 105, 105); + } + #services>div{ + width: 95%; + margin: auto; + display: flex; + justify-content: space-between; + + } + #services>div>div{ + width: 49%; + } + #services>div>div>img{ + width: 100%; + } + #services>div>.text{ + text-align: left; + } + #services>div>.text>h3{ + color: black; + } + #services>div>.text>button{ + padding: 10px; + border: 1px solid rgb(105, 105, 105); + border-radius: 2px; + background-color: white; + } + #services>div>.figure>div{ + display: flex; + margin-top: 0; + } + #services>div>.figure>div>a{ + width: 25%; + text-align: center; + padding: 10px 0; + font-size: 14px; + text-decoration: none; + color: rgb(105, 105, 105); + } + #services>div>.figure>div>a:hover{ + background-color: black; + color: white; + } + + + /* items */ + + #items{ + display: flex; + width: 95%; + margin: auto; + justify-content: space-between; + text-align: center; + color: black; + margin-top: 50px; + + }#items>div{ + width: 49%; + } + #items img{ + width: 100%; + } + #items>div>div{ + padding: 5px 0; + } + + /* colors */ + + #colors{ + margin-top: 50px; + } + #colors>img{ + width: 100%; + } + + /* logos */ + + #logos{ + display: flex; + justify-content: center; + position: relative; + } + #logos>.images{ + width: 11.25%; + } + #logos img{ + width: 80%; + /* opacity: 0.1; */ + } + #revolver{ + margin-top: 30px; + display: flex; + position: relative; + align-items: center; + justify-content: center; + } + #revolver>.icons{ + display: flex; + position: absolute; + width: 98%; + margin: auto; + justify-content: space-between; + } + #revolver>.icons>div{ + width: 50px; + } + #revolver>.icons>div>i{ + color: rgb(105, 105, 105); + } + + /* stores */ + + #stores{ + margin-top: 50px; + text-align: center; + color: rgb(105, 105, 105); + } + #stores>div{ + width: 95%; + margin: auto; + display: flex; + justify-content: space-between; + + } + #stores>div>div{ + width: 49%; + } + #stores>div>div>img{ + width: 100%; + } + #stores>div>.about{ + text-align: left; + } + #stores>div>.about>button{ + padding: 10px; + border: 1px solid black; + border-radius: 2px; + background-color: black; + font-weight: bold; + color: white; + } + #stores>div>.about>button:hover{ + background-color: orangered; + color: white; + } + + /* testimonials */ + + + #testimonials{ + text-align: center; + width: 95%; + margin: auto; + } + #testimonials>p{ + color: rgb(105, 105, 105); + } + #testimonials>button{ + padding: 10px 35px; + border: 1px solid black; + border-radius: 2px; + background-color: white; + font-size: 16px; + color: black; + } + #testimonials>button:hover{ + border: 1px solid orangered; + color: orangered; + } + + + /* links */ + + #links{ + margin-top: 50px; + display: flex; + justify-content: center; + gap: 15px; + padding: 20px 0; + box-shadow: 0 0 2px grey; + background-color: rgb(201, 201, 201); + + } + #links>div{ + width: 12.8%; + display: flex; + flex-direction: column; + /* align-items: center; */ + text-align: center; + } + #links>div svg{ + width: 30%; + } + #links>div>a{ + color: black; + } + + + /* footer */ + + #footer{ + background-color: black; + display: flex; + justify-content: center; + color: rgb(179, 179, 179); + padding: 10px 0 50px 0; + } + #footer>div{ + width: 20%; + + } + #footer>.top>div{ + display: flex; + flex-direction: column; + } + #footer>.top>div>a{ + text-decoration: none; + color: rgb(179, 179, 179); + font-size: 12px; + line-height: 20px; + } + #footer>.top>div>a:hover{ + color: orangered; + } + #footer .media-cont{ + display: flex; + justify-content: space-between; + } + + #footer .media{ + width: 50px; + height: 50px; + color: black; + background-color: white; + border-radius: 5px; + display: flex; + justify-content: center; + align-items: center; + font-size: 40px; + } + #footer .newsletter>div{ + width: 80%; + display: flex; + justify-content: space-between; + align-items: center; + position: relative;; + } + #footer .newsletter input{ + width: 100%; + height: 25px; + border: 0; + border-radius: 4px; + } + #footer .newsletter i{ + color: black; + font-size: 20px; + position: absolute; + right: 5%; + } + + + +