Skip to content

complete HTML & CSS #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

complete HTML & CSS #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6cb0fa4
first commit
May 31, 2023
3fff8b2
complete HTML & CSS
Jun 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 224 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,224 @@
<!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>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="up-header">
<div class="container">
<div>
<a href="#"><i class="fa-solid fa-phone"></i> Call Us: +91-9555461555</a>
<a href="#"><i class="fa-solid fa-right-to-bracket"></i> sign in</a>
<a href="#"><i class="fa-solid fa-user"></i> Creat Account</a>
<a href="#"><i class="fa-solid fa-heart"></i> Wishlist</a>
</div>
</div>
</div>
<div class="lower-header">
<div class="container">
<div class="mobile-nav">
<i class="fa-solid fa-bars"></i>
</div>
<div class="logo">
<img src="//storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/logo.jpg" alt="SportsJam">
</div>
<div class="search-bar">
<input type="text" id="search" placeholder="Search">
<a href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
</div>
<div class="shoping-cart">
<i class="fa-solid fa-cart-shopping"></i>
<p>Shopping Cart</p>
</div>
</div>
</div>
<div class="navbar">
<div class="container">
<a href="#">SPORT</a>
<a href="#">FITNESS</a>
<a href="#">SHOES</a>
<a href="#">CLOTHING</a>
<a href="#">ACCESSORIES</a>
<a href="#">LEISURE SPORT</a>
<a href="#">FANGEAR</a>
<a href="#">BRANDS</a>
</div>
</div>
<div class="container main-card">
<div>
<img src="//storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/callout_img1.jpg" alt="">
<div class="card-info">
<h3>SPORTS</h3>
<p>A huge collection of running shoes and sports equipments</p>
<div class="card-btn">
<button>BADMINTON</button>
<button> FOOTBALL</button>
<button>TENNIS</button>
</div>
</div>
</div>
<div>
<img src="//storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/callout_img1.jpg" alt="">
<div class="card-info">
<h3>SPORTS</h3>
<p>A huge collection of running shoes and sports equipments</p>
<div class="card-btn">
<button>BADMINTON</button>
<button> FOOTBALL</button>
<button>TENNIS</button>
</div>
</div>
</div>
<div>
<img src="//storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/callout_img1.jpg" alt="">
<div class="card-info">
<h3>SPORTS</h3>
<p>A huge collection of running shoes and sports equipments</p>
<div class="card-btn">
<button>BADMINTON</button>
<button> FOOTBALL</button>
<button>TENNIS</button>
</div>
</div>
</div>
</div>
<div class="container tech-context">
<h1>OUR CUSTOMIZED SERVICES</h1>
<div class="main-context">
<div class="left-context">
<img src="//storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/BadmintonStringing.jpg" alt="">
<div>
<p>Racket Stringing</p>
<p>Hybrid Stringing</p>
<p>TT Assembly</p>
<p>Bat Knocking </p>
</div>
</div>
<div class="right-context">
<h3>BADMINTON RACKET STRINGING</h3>
<p>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.</p>
<button class="blk-btn">Read More</button>
</div>
</div>
</div>
<div class="poster-bet container">
<div>
<img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/PICKLEBALL1.jpg" alt="">
<h2>PICKLEBALL SPORTS</h2>
</div>
<div>
<img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/PADEL1.jpg" alt="">
<h2>PADEL SPORTS</h2>
</div>
</div>
<div class="big-poster">
<img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/Yonex-Shoe-July22.jpg" alt="">
</div>
<div class="container about">
<div class="main-context">
<div class="left-context">
<img src="https://storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/bta-store.jpg" alt="">
</div>
<div class="right-context">
<h3>BADMINTON RACKET STRINGING</h3>
<p>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.</p>
<button class="blk-bng-btn">FIND OUT STORE</button>
</div>
</div>
</div>
<div class="testimonial container">
<h2>TESTIMONIAL</h2>
<p>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. - <span>Rajnish, New Delhi</span></p>
<button class="tes-blk-btn">View All</button>
</div>
<div class="services">
<div>
<i class="fa-solid fa-gift"></i></i>
<a href="#">E-gift Vousher</a>
</div>
<div>
<i class="fa-solid fa-star"></i>
<a href="#">E-gift Vousher</a>
</div>
<div>
<i class="fa-solid fa-book-open-reader"></i>
<a href="#">E-gift Vousher</a>
</div>
<div>
<i class="fa-solid fa-table-tennis-paddle-ball"></i>
<a href="#">E-gift Vousher</a>
</div>
<div>
<i class="fa-solid fa-truck"></i>
<a href="#">E-gift Vousher</a>
</div>
<div>
<i class="fa-solid fa-shield"></i>
<a href="#">E-gift Vousher</a>
</div>
<div>
<i class="fa-solid fa-receipt"></i>
<a href="#">E-gift Vousher</a>
</div>
</div>
<div class="main-footer">
<div class="footer">
<div class="get-know">
<h3>GET TO KNOW US</h3>
<div>
<a href="#">ABOUT US</a>
<a href="#">CONTACT US</a>
<a href="#">INQUIRY / FEEDBACK</a>
<a href="#">OUR STORES</a>
<a href="#">SPORTSJAM TEAM</a>
</div>
</div>
<div class="help-sec">
<h3>HERE TO HELP</h3>
<div>
<a href="#">REGISTER / LOGIN</a>
<a href="#">DELIVERY & CHANGES</a>
<a href="#">PAYMENT OPTIONS</a>
<a href="#">FAQ'S</a>
<a href="#">TRACK MY ORDER</a>
<a href="#">BUY IN BULK</a>
</div>
</div>
<div class="payment-sec">
<h3>PAYMENTS</h3>
<div>
<img src="//storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/Payments.png" alt="">
</div>
</div>
<div class="newletter">
<h3>SIGN UP FOR NEWSLETTER</h3>
<div class="email-bar">
<input type="text" id="email" placeholder="Email here">
<i class="fa-solid fa-envelope"></i>
</div>
<div class="social-cont">
<h3>CONNECT WITH US</h3>
<div class="social-icon">
<i class="fa-brands fa-square-facebook"></i>
<i class="fa-brands fa-square-twitter"></i>
<i class="fa-brands fa-square-instagram"></i>
<i class="fa-brands fa-square-youtube"></i>
</div>
<img src="//storage.sg.content-cdn.io/in-resources/b368029c-a4dd-448a-a888-58348cb1b144/Images/userimages/ssl.png" alt="">
</div>
</div>
</div>
<div class="copyright">
<p>COPYRIGHT</p>
<div>
<img src="https://d27y3gxg1nz5bk.cloudfront.net/wp-content/uploads/2022/12/CapillaryTech.webp" alt="">
</div>
</div>
</div>
</body>
</html>
Empty file added mini.js
View file
Open in desktop
Empty file.
Loading