module-2
REDSTORE
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>RedStore</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;
0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,400&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/
4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNH
SoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
<link href="images/icon.png" rel="icon" type="image/x-icon" />
</head>
<body>
<!-- header -->
<div id="latest" class="header">
<div class="container">
<div class="navbar">
<div class="logo">
<img src="images/logo.png" width="125px" />
</div>
<nav>
<ul class="menuitems">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Account</a></li>
</ul>
</nav>
<img src="images/cart.png" width="30px" height="30px" alt="">
<img src="images/menu.png" class="menu-icon">
</div>
<div class="row">
<div class="col-2">
<div class="content">
<h1 class="heading">
Give Your <br />
Workout A new Style
</h1>
<p style="margin-bottom: 20px">
Success isnt always about greatness. It's about consistency.
Consistent hard work gains success. Greatness will come.
</p>
<a class="btn" href="#">Expolre Now → </a>
</div>
</div>
<div class="col-2">
<img src="images/image1.png" />
</div>
</div>
</div>
</div>
<!--
categories -->
<div class="categories">
<div class="small-container">
<div class="row">
<div class="col-3">
<img src="images/category-1.jpg" alt="">
</div>
<div class="col-3">
<img src="images/category-2.jpg" alt="">
</div>
<div class="col-3">
<img src="images/category-3.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- featured prodcucts -->
<div class="featured-prodcuct">
<div class="small-container">
<h2 class="titletext" id="text">
Featured Products
</h2>
<div class="row">
<div class="col-4">
<img src="images/product-1.jpg" alt="">
<h4>Red Printed tshirt</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 350</p>
</div>
<div class="col-4">
<img src="images/product-2.jpg" alt="">
<h4>HRX Shoes For Men</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 500</p>
</div>
<div class="col-4">
<img src="images/product-3.jpg" alt="">
<h4>Trousers</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 850</p>
</div>
<div class="col-4">
<img src="images/product-4.jpg" alt="">
<h4>Blue printed T-Shirt</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 350</p>
</div>
</div>
</div>
</div>
<!-- latest products -->
<div id="latest_products"class="latest_products">
<div class="small-container">
<h2 class="titletext" id="text">
Latest Products
</h2>
<div class="row">
<div class="col-4">
<img src="images/product-5.jpg" alt="">
<h4>Hrx Shoes for Men</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 600</p>
</div>
<div class="col-4">
<img src="images/product-6.jpg" alt="">
<h4>Black Priented T-shirt</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 450</p>
</div>
<div class="col-4">
<img src="images/product-7.jpg" alt="">
<h4>Shoks</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 250</p>
</div>
<div class="col-4">
<img src="images/product-8.jpg" alt="">
<h4>Watch</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 550</p>
</div>
</div>
<div class="row" style="margin-top:5px">
<div class="col-4">
<img src="images/product-9.jpg" alt="">
<h4>Watch</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 750</p>
</div>
<div class="col-4">
<img src="images/product-10.jpg" alt="">
<h4>Sport Shoes</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 900</p>
</div>
<div class="col-4">
<img src="images/product-11.jpg" alt="">
<h4>Formal Shoes</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<p> ₹ 650</p>
</div>
<div class="col-4">
<img src="images/product-12.jpg" alt="">
<h4>Pant</h4>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
</div>
<p> ₹ 550</p>
</div>
</div>
</div>
</div>
<!-- offer -->
<div class="offer">
<div class="container">
<div class="row">
<div class="col-2" style="padding:20px">
<img src="images/exclusive.png" alt="">
</div>
<div class="col-2">
<p>Exclusive Offer</p>
<h1>Smart watch</h1>
<p style=" margin-bottom: 30px;">Lorem ipsum dolor sit, amet
consectetur adipisicing elit. Quaerat, repellendus! Id maiores alias,
doloribus accusantium mollitia architecto vero ut eius laborum nisi est
officia, consectetur odio libero. Vitae, veritatis id.</p>
<a class="btn" href="#" id="offer_btn">Expolre Now → </a>
</div>
</div>
</div>
</div>
<!-- testimonials -->
<div id="testimonials" class="testimonials">
<div class="small-container">
<div class="row">
<div class="col-3">
<i class="fa fa-quote-left" aria-hidden="true"></i>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit
perferendis velit libero dolore, laborum repudiandae ipsa eius, itaque
laudantium exercitationem facere quisquam aspernatur earum quos veritatis a
sed sit dolorum!</p>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<img src="images/user-1.png" alt="">
<h4>Priaynka Patil</h4>
</div>
<div class="col-3">
<i class="fa fa-quote-left" aria-hidden="true"></i>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit
perferendis velit libero dolore, laborum repudiandae ipsa eius, itaque
laudantium exercitationem facere quisquam aspernatur earum quos veritatis
a sed sit dolorum!</p>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<img src="images/user-2.png" alt="">
<h4>sagar sonawane</h4>
</div>
<div class="col-3">
<i class="fa fa-quote-left" aria-hidden="true"></i>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Suscipit
perferendis velit libero dolore, laborum repudiandae ipsa eius, itaque
laudantium exercitationem facere quisquam aspernatur earum quos veritatis a
sed sit dolorum!</p>
<div class="rating">
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star" aria-hidden="true"></i>
<i class="fa fa-star-o" aria-hidden="true"></i>
</div>
<img src="images/user-3.png" alt="">
<h4>saloni patil</h4>
</div>
</div>
</div>
</div>
<div class="brands">
<div class="small-container">
<div class="row">
<div class="col-5">
<img src="images/logo-godrej.png" alt="">
</div>
<div class="col-5">
<img src="images/logo-oppo.png" alt="">
</div>
<div class="col-5">
<img src="images/logo-coca-cola.png" alt="">
</div>
<div class="col-5">
<img src="images/logo-paypal.png" alt="">
</div>
<div class="col-5">
<img src="images/logo-philips.png" alt="">
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<div class="row">
<div class="footer-col-1" style="flex-basis: 34%; ">
<h3 style="color: white;">Download our App</h3>
<p style="color: white;">Download App for Android and ios Mobile
phones</p>
<img src="images/play-store.png" alt="">
<img src="images/app-store.png" alt="" >
</div>
<div class="footer-col-2" style="flex:1">
<img src="images/logo-white.png" alt="" width="180px">
<p style="color: gray;">Lorem ipsum dolor sit amet consectetur
adipisicing elit. Magnam obcaecati laborum ad facere ipsa, minima
deserunt eum ipsum, fugit</p>
</div>
<div class="footer-col-3" style="flex-basis: 12%;">
<h4 style="color: white;">Useful Links</h4>
<p style="color: gray;">Coupons</p>
<p style="color: gray;">Blog Post</p>
<p style="color: gray;">Return Policy</p>
<p style="color: gray;">Join Affiliate</p>
</div>
<div class="footer-col-4" style="flex-basis: 12%;" >
<h4 style="color: white;">Follow Us</h4>
<p style="color: gray;">Facebook</p>
<p style="color: gray;">Twitter</p>
<p style="color: gray;">Instagram</p>
<p style="color: gray;">Youtube</p>
</div>
</div>
<div class="copy">
<hr style="color: gray; " > </hr>
<p style="color: white; text-align: center;">Copyright 2020 - ©
2020 PRUTHVIRAJ RAJPUT </p>
</div>
</div>
</div>
<div class="small-container">
<div class="row">
<a class="btn" href="#latest"> Go To Top </a>
</div>
</div>
</body>
</html>
CSS CODE
/** @format */
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Poppins", sans-serif;
}
.navbar {
display: flex;
padding: 20px;
}
nav {
flex: 1;
text-align: right;
}
nav ul {
display: inline-block;
list-style-type: none;
}
nav ul li {
display: inline-block;
margin-right: 20px;
}
a {
text-decoration: none;
color: #555;
}
a:hover {
color: rgb(12, 12, 12);
}
.header {
background: radial-gradient(#fff, #ffd6d6);
}
.container {
max-width: 1300px;
margin: auto;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-top: 70px;
margin-bottom: 30px;
justify-content: space-around;
}
.col-2 {
flex-basis: 50%;
min-width: 300px;
}
.content {
padding: 50px;
}
.heading {
font-size: 50px;
font-weight: 700;
padding-right: 30px;
}
.col-2 img {
max-width: 100%;
}
.btn {
margin-top: 10px;
background-color: red;
color: white;
padding: 5px 20px;
border-radius: 25px;
transition: all 0.5s;
}
.btn:hover {
background-color: black;
color: white;
}
.categories {
margin: 70px auto;
}
.small-container {
max-width: 1080px;
align-items: center;
margin: auto;
}
.small-container .row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-evenly;
}
.col-3 {
flex-basis: 30%;
min-width: 250px;
}
.col-3 img {
max-width: 100%;
}
.col-4 {
min-width: 200px;
flex-basis: 25%;
padding: 20px 10px;
}
.col-4 img {
width: 100%;
}
.titletext {
text-align: center;
margin: 0px auto 80px;
position: relative;
line-height: 60px;
color: #555;
}
.titletext::after {
content: ".";
background-color: #ff523b;
width: 80px;
font-size: 5px;
height: 5px;
line-height: 5px;
border-radius: 5px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.rating {
color: #ff523b;
}
.col-4 h4 {
font-weight: normal;
color: #555;
}
.offer {
background: radial-gradient(#fff, #ffd6d6);
margin: 40px auto;
padding: 30px 20px;
}
.offer h1 {
margin: 20px 0;
font-size: 50px;
}
#offer_btn {
margin-top: 20px;
}
.testimonials {
margin: 50px 10px;
}
.testimonials .col-3 {
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.068);
padding: 30px 15px;
border-radius: 25px;
text-align: center;
max-width: 280px;
}
.testimonials .col-3 p {
font-size: 13px;
color: #777;
margin: 12px 0;
}
.testimonials .col-3 img {
margin: 10px 0;
width: 50px;
border-radius: 50%;
}
.fa.fa-quote-left {
font-size: 34px !important;
color: #ff523b;
}
.col-5 {
flex-basis: 20%;
margin: 40px 0;
}
.col-5 img {
filter: grayscale(100%);
transition: all 0.5s ease-in-out;
}
.col-5 img:hover {
filter: grayscale(0%);
}
.footer {
background-color: black;
color: white;
padding: 60px 0 20px;
}
.footer .row {
display: flex;
align-items: center;
}
.footer-col-1 img {
width: 180px;
margin-bottom: 20px;
margin: 0px auto;
text-align: center;
}
.footer-col-1 h3 {
text-align: center;
}
.footer-col-1 p {
text-align: center;
}
.footer-col-2 img {
width: 180px;
margin-bottom: 20px;
}
.footer-col-2 p {
text-align: center;
}
.footer-col-1,
.footer-col-2,
.footer-col-3,
.footer-col-4 {
min-width: 250px;
margin-bottom: 20px;
padding: 10px;
align-items: center;
text-align: center;
}
@media only screen and (max-width: 600px) {
.row {
text-align: center;
}
.col-2,
.col-3,
.col-4,
.col-5 {
flex-basis: 100% !important;
padding: 20px;
}
.testimonials .col-3 {
max-width: 100%;
margin: 20px 10px;
}
}
.menu-icon {
width: 28px;
margin-left: 20px;
display: none;
}
Comments
Post a Comment