Skip to content
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

ecommerce page created #23

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

ecommerce page created #23

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0fcf3cb
ecommerce page created
navnithi Jan 26, 2023
c7f0b19
netlify link added
navnithi Jan 26, 2023
97e4cce
changes made in nav
navnithi Jan 27, 2023
b2422a4
changes made in nav
navnithi Jan 30, 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
Binary file added New images/Picture1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added New images/Picture2.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added New images/Picture3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added New images/Picture4.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added New images/Picture5.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added New images/Picture6.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added New images/Picture7.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added New images/Picture8.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added New images/Picture9.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added New images/contact us.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,6 @@
- make sure the website is 100% accessibile (2 point)
- make sure the website is 100% responsive (2 points)
- Your creativity and additional functionality to the project will help you to get extra 1 point

https://verdant-sunshine-ee54bc.netlify.app

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://dazzling-narwhal-cb71aa.netlify.app/

204 changes: 204 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
<!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>Smash Zone</title>
<meta name="description" content="My page">
<!--google font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lobster&family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
<!--fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="main-head">
<i class="fa-solid fa-volleyball icon-ball"></i>
<nav class="menu">
<ul class="menu__lists">
<li class="menu__list"><a href="" class="menu__link">Home</a></li>
<li class="menu__list"><a href=".products" class="menu__link">Products</a></li>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

href="#products"

<li class="menu__list"><a href="#review section" class="menu__link">Review</a></li>
<li class="menu__list"><a href="#contact-section" class="menu__link">Contact us</a></li>
</ul>
</nav>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With "media query" change the nav to burger menu.


<div class="icons">
<a href="" class="fas fa-heart icon"></a>
<a href="" class="fas fa-shopping-cart icon"></a>
<a href="" class="fas fa-user icon"></a>

</div>
</div>
<header id="header">

<div class="banner">
<h1 class="banner__title">Smash Sport Zone</h1>
<p class="banner__desc">Playing sports builds your personality and teaches you to live life in a better way.</p>
<button class="btn banner__btn">Shop Now</button>
</div>
</header>

<main>
<!--product section starts here-->


<marquee behavior="" direction="">End of season sale upto 50% discount</marquee>

<h2 class="product-title">Sports Accessories and Equipment</h2>

<section class="products">
<div class="product__item">
<figure class="product__item-image">
<img src="./New images/Picture1.jpg" alt="pic1">
</figure>
<span>10% discount</span>
<button class="btn product__btn">Buy Now</button>
</div>
<div class="product__item">
<figure class="product__item">
<img src="./New images/Picture2.png" alt="pic2">
</figure>
<button class="btn product__btn">Buy Now</button>
</div>
<div class="product__item">
<figure class="product__item-image">
<img src="./New images/Picture3.jpg" alt="pic3">
</figure>
<button class="btn product__btn">Buy Now</button>
</div>
<div class="product__item">
<figure class="product__item-image">
<img src="./New images/Picture4.jpg" alt="pic4">
</figure>
<button class="btn product__btn">Buy Now</button>
</div>
<div class="product__item">
<figure class="product__item-image">
<img src="./New images/Picture5.jpg" alt="pic5">
</figure>
<button class="btn product__btn">Buy Now</button>
</div>
<div class="product__item">
<figure class="product__item-image">
<img src="./New images/Picture6.png" alt="pic6">
</figure>
<button class="btn product__btn">Buy Now</button>
</div>
<div class="product__item">
<figure class="product__item-image">
<img src="./New images/Picture7.jpg" alt="pic7">
</figure>
<button class="btn product__btn">Buy Now</button>
</div>
<div class="product__item">
<figure class="product__item-image">
<img src="./New images/Picture8.jpg" alt="pic8">
</figure>
<button class="btn product__btn">Buy Now</button>
</div>
<div class="product__item">
<figure class="product__item-image">
<img src="./New images/Picture9.jpg" alt="pic9">
</figure>
<button class="btn product__btn">Buy Now</button>
</div>

</section>



<!--product section ends here-->

<!--review section stats here-->
<section id="review section">
<h2 class="review-title">Customer Review</h2>
<div class="reviews">
<article class="review card">
<i class="fa-solid fa-user user__icon"></i>
<h3>Review 1</h3>
<p class="review__des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi odit, architecto possimus itaque consequuntur expedita quisquam dolores repellat aut nobis!</p>
<button class="btn review__btn">Read more</button>
</article>

<article class="review card">
<i class="fa-solid fa-user user__icon"></i>
<h3>Review 2</h3>
<p class="review__des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi odit, architecto possimus itaque consequuntur expedita quisquam dolores repellat aut nobis!</p>
<button class="btn review__btn">Read more</button>
</article>

<article class="review card">
<i class="fa-solid fa-user user__icon"></i>
<h3>Review 3</h3>
<p class="review__des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi odit, architecto possimus itaque consequuntur expedita quisquam dolores repellat aut nobis!</p>
<button class="btn review__btn">Read more</button>
</article>

</div>

</section>
<!--review section stats here-->

<!--contact section starts here-->
<section id="contact-section">
<h2 class="contact-heading">Contact Us</h2>
<form class="forms">

<div class="form-control">
<label for="name">Name: </label>
<input type="text" id="name" autocomplete="name" required>
</div>

<div class="form-control">
<label for="email">Email id: </label>
<input type="email" id="email" autocomplete="email" required>
</div>

<div class="form-control">
<label for="message">Message: </label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</div>

<div class="form-control form__btn">
<button class="btn contact__btn">Submit</button>
</div>


</form>


</section>

<!--contact section ends here-->


</main>



<footer>
<p class="copyright__text"> Copyright &copy; Smash Sports Zone</p>
<nav class="footer">

<a href="#header" class="footer__link"><i class="fa fa-home footer__icon"></i>
</a>

<a href="https://www.facebook.com/photo/?fbid=2578851875774620&set=ecnf.100063705474253" target="_blank" class="footer__link"><i class="fab fa-facebook footer__icon"></i>
</a>

<a href="https://www.youtube.com/results?search_query=smash+sporting+club" target="_blank" class="footer__link"><i class="fab fa-youtube footer__icon" ></i>
</a>



</nav>
</footer>
</body>

</html>
Loading