Skip to content

01-ecommers-project #72

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
1khansaad wants to merge 17 commits into
base: master
Choose a base branch
from
Open

01-ecommers-project #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
9c2e80c
added img and logos
1khansaad Jan 3, 2022
9884f5b
added index.html ans style.css
1khansaad Jan 3, 2022
d3f2b59
added navbar
1khansaad Jan 3, 2022
1cc5908
added class col-2
1khansaad Jan 3, 2022
61d5918
added header containes image, quote, hover effect on button and nav b…
1khansaad Jan 3, 2022
12291be
added featured categories and product but not completed yet
1khansaad Jan 3, 2022
b451c2a
added various sections
1khansaad Jan 3, 2022
a36d457
fixed-navbar-prob
1khansaad Jan 3, 2022
6a46477
added altatributes and used some shorthand property
1khansaad Jan 4, 2022
9f49c16
added product.html
1khansaad Jan 4, 2022
2ff77af
added padding to <select> tag
1khansaad Jan 4, 2022
9109b91
added product-detail.html
1khansaad Jan 4, 2022
5e6329f
added cart.html
1khansaad Jan 5, 2022
829774b
Removed margin of .cart-page class
1khansaad Jan 5, 2022
521930c
added account.html
1khansaad Jan 5, 2022
49f6ae6
linked all pages with each other
1khansaad Jan 5, 2022
bb569e8
added bootstrap icons
1khansaad Jan 6, 2022
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
283 changes: 283 additions & 0 deletions tasks-by-users/1khansaad/01-Ecommers-project/Product.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,283 @@
<!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">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<title>Redstore Ecommers web design</title>
</head>
<body>
<div class="container">
<div class="navbar">
<div class="logo">
<a href="index.html"><img src="images/logo.png" alt="logo" width="125px"></a>
</div>
<nav>
<ul id="MenuItems">
<li><a href="index.html">Home</a></li>
<li><a href="Product.html">Products</a></li>
<li><a href="">About</a></li>
<li><a href="">Contacts</a></li>
<li><a href="account.html">Accounts</a></li>
</ul>
</nav>
<a href="cart.html"><img src="images/cart.png" alt="cart-icon" class="cart-img" width="30px" height="30px"></a>
<img src="images/menu.png" alt="menu-icon" class="menu-icon"
onclick="menutoggle()">
</div>
</div>

<div class="small-container">
<div class="row">
<div class="filter">
<h2>All Products</h2>
<select>
<option>Default Shorting </option>
<option>Short By Price </option>
<option>Short By Popularty</option>
<option>Short By rating</option>
<option>Short By Sale</option>
</select>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="images/product-1.jpg" alt="product-1">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-2.jpg" alt="product-2">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-3.jpg" alt="product-3">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-4.jpg" alt="product-4">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-5.jpg" alt="product-5">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-6.jpg" alt="product-6">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-7.jpg" alt="product-7">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-8.jpg" alt="product-8">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-9.jpg" alt="product-9">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-10.jpg" alt="product-10">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-11.jpg" alt="product-11">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
<div class="col-4">
<img src="images/product-12.jpg" alt="product-12">
<h4>Red Printed Tshirt</h4>
<div class="rating">
<div class="rating">
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-fill"></i>
<i class="bi bi-star-half"></i>
</div>
<p>$50.00</p>
</div>
</div>
</div>
<div class="row">
<div class="page-btn">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>&#8594</span>
</div>
</div>

<!-- footer -->

<div class="footer">
<div class="container">
<div class="row">
<div class="footer-col-1">
<h3>Dowmload our app</h3>
<p>It is a long established fact that a reader will be.</p>
<div class="app-logo">
<img src="images/play-store.png" alt="play-store-icon">
<img src="images/app-store.png" alt="app-store-icon">
</div>
</div>
<div class="footer-col-2">
<img src="images/logo-white.png" alt="redstore-logo">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</div>
<div class="footer-col-3">
<h3>Useful link</h3>
<ul>
<li>coupons</li>
<li>blog post</li>
<li>return policy</li>
<li>Join us</li>
</ul>
</div>
<div class="footer-col-4">
<h3>Follow us</h3>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Linked in</li>
<li>You tube</li>
</ul>
</div>
</div>

<hr>
<p class="copyright"> Copyright 2020 - Red Store</p>
</div>
</div>

</div>
<script>
var MenuItems = document.getElementById("MenuItems");

MenuItems.style.maxHeight = "0px";

function menutoggle() {
if (MenuItems.style.maxHeight == "0px") {
MenuItems.style.maxHeight = "200px";
} else {
MenuItems.style.maxHeight = "0px";
}
}
</script>
</body>
</html>
Loading