Responsive Hoodie Store Website Using HTML CSS With Source Code
Introduction
Hello coders, i hope you all are ding well. In this article we’ve build the Responsive Hoodie Store Website Using HTML CSS. To create this type of project you’ll need only HTML and CSS. If you have some good knowledge of HTML and CSS then you can also build this type of project.
Our today’s project is a Responsive Hoodie Store Website Using HTML CSS. We’ve made this using only HTML and CSS. HTML is used to create the basic structure of the website and then CSS is applied to style the webpage. In Our project we’ve made different section of our website like product, client and other all.
This project is a simple Hoodie store website which we’ve developed using HTML and CSS. Creating this type of project isn’t a big task. to create this type of project all you need is the knowledge of HTML and CSS. Let’s move forward to our code and understand what we’ve made.
index.html
This HTML code is used to create a simple webpage for a hoodie store, including navigation, product displays, and customer reviews. Let’s break it down step by step.
At the top, we have the head section. It doesn’t show anything on the page but holds key information like the title of the webpage (“Hoodie”) and links to an external CSS file (styles.css) that controls the appearance of the site. The viewport tag ensures the page looks good on both mobile and desktop devices.
Next, in the body of the page, we start with a navigation bar, which contains the logo and a “burger menu” (three horizontal lines) often used on mobile devices to toggle navigation options.
Then comes the header section, which introduces the main message of the page. It features a headline (“New Cocktail Hoodies”), a paragraph of text describing the product, and two buttons: one for shopping and another highlighting a 50% off offer. On the right side of this section, there’s space for an image of the product (though it’s styled using CSS).
The first section of the page promotes a “Summer Sale Offer” with a button to learn more. Another section highlights the store’s products, displaying items like red, black, and teal hoodies. Each item is shown with an image, name, price, and a “View Product” link.
Further down, there’s a customer review section, where three customers share feedback, helping to build trust in the products.
Lastly, the footer provides the location, working hours, and contact information for the store, making it easy for visitors to find essential details
<html lang="en"></html>
<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>Hoodie</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/09/post15-768x366.png 768w, https://developergoutam.com/wp-content/uploads/2024/09/post15-300x143.png 300w, https://developergoutam.com/wp-content/uploads/2024/09/post15-1024x488.png 1024w, https://developergoutam.com/wp-content/uploads/2024/09/post15-1536x732.png 1536w, https://developergoutam.com/wp-content/uploads/2024/09/post15-150x71.png 150w, https://developergoutam.com/wp-content/uploads/2024/09/post15-450x214.png 450w, https://developergoutam.com/wp-content/uploads/2024/09/post15-1200x572.png 1200w, https://developergoutam.com/wp-content/uploads/2024/09/post15.png 1861w" imagesizes="(max-width: 749px) 100vw, 749px" /><link rel="preload" as="font" href="https://developergoutam.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v3.0" type="font/woff2" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav>
<div class="logo">
<h1>Logo</h1>
</div>
<div class="burger">
<span></span>
<span></span>
<span></span>
</div>
</nav>
<header>
<div class="header-content">
<h1 class="main-headings">
New Cocktail <br />
<span>Hoodies</span>
</h1>
<p class="primary-headings">
Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed do
eiusmod. Sit amet, constecture orem Ipsum dolor adipiscing elit, sed
do eiusmod.
</p>
<div class="btns-container">
<button class="btn-fill">Shop Now</button>
<button class="btn-outline active">50% OFF</button>
</div>
</div>
<div class="img-container">
<div class="header-img"></div>
</div>
</header>
<section class="section-one">
<div class="img-container">
<div class="section-one-img header-img"></div>
</div>
<div class="section-content">
<h1 class="main-headings">
Summer <span>Sell <br /> Offer</span>
</h1>
<p class="primary-headings">
Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed do
eiusmod.
</p>
<button class="btn-fill">Learn More</button>
</div>
</div>
</section>
<section class="products">
<h1 class="products-heading">OUR PRODUCTS</h1>
<section class="product-categories">
<button class="btn-outline active">NEW ARRIVALS</button>
<button class="btn-outline">TOP RATING</button>
<button class="btn-outline">BEST SELLER</button>
</section>
<div class="product-items-container">
<div class="item">
<div class="item-layer">
<img decoding="async" src="https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/Product/1.png" >
</div>
<h4 class="item-name">Red Hoodie</h4>
<p class="item-price">$52.99</p>
<a href="#" class="view-product">View Product</a>
</div>
<div class="item">
<div class="item-layer">
<img decoding="async" src="https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/Product/2.png" >
</div>
<h4 class="item-name">Black Luxurious Hoodie</h4>
<p class="item-price">$52.99</p>
<a href="#" class="view-product">View Product</a>
</div>
<div class="item">
<div class="item-layer">
<img decoding="async" src="https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/Product/3.png" >
</div>
<h4 class="item-name">Teal Expensive Hoodie</h4>
<p class="item-price">$52.99</p>
<a href="#" class="view-product">View Product</a>
</div>
<div class="item">
<div class="item-layer">
<img decoding="async" src="https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/Product/2.png" >
</div>
<h4 class="item-name">Red Hoodie</h4>
<p class="item-price">$52.99</p>
<a href="#" class="view-product">View Product</a>
</div>
<div class="item">
<div class="item-layer">
<img decoding="async" src="https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/Product/3.png" >
</div>
<h4 class="item-name">Black Luxurious Hoodie</h4>
<p class="item-price">$52.99</p>
<a href="#" class="view-product">View Product</a>
</div>
<div class="item">
<div class="item-layer">
<img decoding="async" src="https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/Product/1.png" >
</div>
<h4 class="item-name">Teal Expensive Hoodie</h4>
<p class="item-price">$52.99</p>
<a href="#" class="view-product">View Product</a>
</div>
</div>
</section>
<h1 class="customers-heading">OUR CLIENT'S SAYS</h1>
<section class="customers-reviews">
<div class="customer">
<div class="customer-img">
<div class="img img-one"></div>
</div>
<h1 class="customer-name">Anna Maria</h1>
<p class="customer-description">Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed</p>
</div>
<div class="customer">
<div class="customer-img">
<div class="img img-two"></div>
</div>
<h1 class="customer-name">Anna Maria</h1>
<p class="customer-description">Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed</p>
</div>
<div class="customer">
<div class="customer-img">
<div class="img img-three"></div>
</div>
<h1 class="customer-name">Anna Maria</h1>
<p class="customer-description">Lorem Ipsum dolor sit amet, constecture adipiscing elit, sed.</p>
</div>
</section>
<footer>
<div class="container">
<h1 class="footer-heading">Location</h1>
<h2 class="footer-primary-heading">Start With Our Fresh shrimps</h2>
<h2 class="footer-primary-heading">4213 Somewhere On Earth</h2>
</div>
<div class="container">
<h1 class="footer-heading">Working Hours</h1>
<h2 class="footer-primary-heading">Monday - Thursday - Friday</h2>
<h2 class="footer-primary-heading">Saturday - Sunday</h2>
</div>
<div class="container">
<h1 class="footer-heading">Contact Us</h1>
<h2 class="footer-primary-heading">yoursdeveloper@gmail.com</h2>
</div>
</footer>
</body>
</html>
styles.css
This CSS is like a set of instructions that tells the Hoodie Store webpage how to look. It decides things like the colors, fonts, and how everything is placed on the page.
First, two fonts are used: Playfair Display for the titles, and Roboto for the other words. These fonts help the page look clean and easy to read. Some rules are also added to remove extra spaces around things, making the page look neat.
In the main part, a color and the fonts are picked so that they can be used easily everywhere on the page.
For the menu bar at the top, the logo goes on the left side, and a burger menu (three lines) on the right. The burger menu is usually used for mobile phones.
The header section has big titles and a button for shopping. The titles are bold, and the colors change a little to make them look interesting. When you move your mouse over the buttons, they change color, making them fun to click.
In the product section, each product shows a picture, price, and a link to see more. The products are arranged in a nice grid, so they look good even on smaller screens like phones.
The customer reviews section shows what people think about the store. The customers’ pictures are in circles with a little shadow behind them, which makes the page look modern.
At the bottom, the footer has important information like how to contact the store. It has a dark background with white words, so it’s easy to read. The page also works well on phones, making sure everything stays in the right place!
/* Playfair Display */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&display=swap");
/* Roboto */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
:root {
--main-color: #239b7e;
--main-font: "Playfair Display SC", serif;
--primary-font: "Roboto", sans-serif;
}
nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 20px;
font-family: var(--primary-font);
font-weight: bold;
}
.logo {
margin-left: 5rem;
}
.burger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
margin-right: 5rem;
/* --- uncomment this code --- */
/* border: 2px solid #000; */
}
.burger span {
border: 2px solid var(--main-color);
width: 40px;
height: 1px;
margin: 2px;
}
/* header */
header {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
height: 90vh;
margin-top: 2rem;
}
.main-headings {
font-size: 4rem;
font-family: var(--main-font);
transform: translateY(-40px);
color: #00000097;
line-height: 5rem;
}
.main-headings span {
color: #000;
}
.primary-headings {
max-width: 500px;
font-family: var(--primary-font);
line-height: 25px;
margin-bottom: 1rem;
color: #716d6d;
}
.btn-fill {
background: var(--main-color);
color: #fff;
border: none;
padding: 12px 20px;
margin-right: 10px;
cursor: pointer;
transition: all 0.5s ease-out;
}
.btn-fill:hover {
background-color: #fff;
border: 1px solid var(--main-color);
color: var(--main-color);
}
.btn-outline.active {
border: 2px solid var(--main-color);
color: var(--main-color);
background: transparent;
padding: 10px 20px;
cursor: pointer;
transition: all 0.5s ease-out;
}
.btn-outline.active:hover {
background: var(--main-color);
color: #fff;
}
.btn-outline {
border: 2px solid #ccc;
color: #ccc;
background: transparent;
padding: 10px 20px;
cursor: pointer;
transition: all 0.5s ease-out;
}
.btn-outline:hover {
border-color: var(--main-color);
color: var(--main-color);
}
.img-container {
border-radius: 50%;
box-shadow: 4px 7px 5px 2px #bcbaba;
}
.header-img {
border-radius: 100%;
background: url(https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/oswaldo-ibanez-1NPUmTaiMeg-unsplash.jpg);
background-position: top;
background-size: cover;
width: 400px;
height: 400px;
}
/* Section 1 */
.section-one {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin-top: 7rem;
}
.img-container {
border-radius: 50%;
box-shadow: 4px 7px 5px 2px #bcbaba;
}
.section-one-img {
background: url(https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/gesphotoss-1i9K55ni5Dk-unsplash.jpg);
background-position: top;
background-size: cover;
}
.primary-headings {
max-width: 500px;
font-family: var(--primary-font);
line-height: 25px;
margin-bottom: 1rem;
color: #716d6d;
}
/* Products */
.products {
margin-top: 10rem;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
}
.products .products-heading {
font-family: var(--primary-font);
font-size: 2rem;
margin-bottom: 3rem;
}
.products .product-categories button {
margin-right: 20px;
margin-bottom: 2rem;
}
.products .product-items-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 20px;
max-width: 60rem;
}
.products .product-items-container .item {
margin: 20px;
}
.products .product-items-container .item-layer {
background: #ebf1f0;
padding: 40px;
margin-right: 20px;
margin: 0 auto;
margin-bottom: 20px;
}
.products .product-items-container .item-layer img {
width: 150px;
height: 200px;
}
.products .product-items-container .item .item-name {
font-family: var(--primary-font);
margin-bottom: 10px;
}
.products .product-items-container .item .item-price {
font-family: var(--primary-font);
margin-bottom: 10px;
}
.products .product-items-container .item .view-product {
font-family: var(--primary-font);
margin-bottom: 10px;
text-decoration: none;
color: var(--main-color);
border-bottom: 1px solid var(--main-color);
}
/* Customers */
.customers-reviews {
margin-top: 7rem;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.customer {
text-align: center;
}
.customers-heading {
font-family: var(--primary-font);
font-size: 2rem;
margin-bottom: 20px;
text-align: center;
margin-top: 10rem;
}
.customers-reviews .customer-description {
font-size: 12px;
margin-top: 20px;
max-width: 200px;
text-align: center;
margin: 10px;
font-family: var(--primary-font);
}
.customer .customer-img .img {
width: 200px;
height: 200px;
border-radius: 100%;
background-size: cover;
background-position: center;
margin: 0 auto;
margin-bottom: 20px;
}
.customer-img .img-one {
background: url(https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/yogendra-singh-uWs_N5Dlyiw-unsplash.jpg);
}
.customer-img .img-two {
background: url(https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/joshua-rondeau-xazIYnxpS2Q-unsplash.jpg);
}
.customer-img .img-three {
background: url(https://raw.githubusercontent.com/HuXn-WebDev/HTML-And-CSS-Masterclass/main/12.%20Landing%20Pages/3.%20Hoodie/images/milan-popovic-kOnmHdLJTNI-unsplash.jpg);
}
footer {
background: #1f1e1e;
margin-top: 10rem;
color: #fff;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
height: 100vh;
font-family: var(--primary-font);
}
footer .container .footer-heading {
margin-bottom: 3rem;
}
footer .container .footer-primary-heading {
font-weight: normal;
font-size: 15px;
margin-bottom: 20px;
}
/* You can make it responsive for your own screen if you wanna to, but for now this is good enough. */
@media only screen and (max-width: 900px) {
header {
height: 120vh;
text-align: center;
}
.section-one {
height: 120vh;
text-align: center;
}
.header-img {
width: 250px;
height: 250px;
}
.main-headings {
font-size: 3rem;
margin-top: 2rem;
}
.primary-headings {
width: 400px;
}
.customer .customer-img .img {
width: 150px;
height: 150px;
}
}