Sneaker Shop Using HTML and CSS With Source Code
Introduction
Hello developers, today we’ve created a Sneaker Shop website with the help of HTML and CSS. This website is a one page simple website about sneaker shop. The structure of this website is simple and easy to understand. We’ve used HTML to create structure of our website and later on we added CSS to style our Sneaker Shop website.
As we know in today’s digital world every small business is on internet so that you can create this project to showcase your business online. This project will also helps you to recall all your previous knowledge that gain in your development journey.
This project is build using HTML and CSS. If you’ve enough knowledge of HTML and CSS then you can build this type of project without any trouble. All you need is basics of frontend.
In this project you’ll learn many new CSS properties that gonna help you in coding journey. We’ve used some of the best CSS properties for our project to make it better and user interactive. Let us see and understand our code.
index.html
An interesting yet gorgeous website is the prime requirement of any online business. In this article, we’re going to deconstruct the HTML code for a sample shoe store website. It will help you learn how to structure your website in a better way, improving its functionality and appeal.
HTML Structure
HTML stands for Hypertext Markup Language. It is the skeleton of any webpage. It structures content on the web. Let us go through the HTML code step by step.
The Basic Structure
The basic HTML structure includes the document type declaration, language attribute, and the <head> and <body> sections.
- Document Type and Language: The document type declaration specifies the version of HTML, and the language attribute defines the primary language of the document.
- Head Section: Contains meta-information such as character encoding, viewport settings for responsive design, and a link to an external CSS file for styling.
- Body Section: Contains all the visible content of the webpage.
Header Section
The header section typically contains a hero image or banner with a call to action.
- Header: Contains a hero image or background, providing a visually striking introduction to the site.
- Container: Ensures the content is properly aligned and spaced within the header.
- Primary Title: A large, prominent heading that captures the visitor’s attention.
- Paragraph: Offers additional information or a tagline to complement the title.
- Call-to-Action Button: A button encouraging visitors to explore the products or services offered.
Main Content
The main content of the website includes sections for featured sneakers and the full range of products.
Featured Sneakers Section
- Featured Section: Highlights selected sneakers with high visual impact.
- Section Title: Introduces the featured products section with a heading.
- Split Container: Arranges the featured items in a visually appealing layout.
- Featured Items: Each item includes an image, price, and brief details, all wrapped in clickable links.
Our Products Section
- Our Products Section: Showcases a range of available sneakers.
- Section Title: Introduces the full product range with a heading.
- Product Articles: Each product is presented with an image, title, description, and a call-to-action button.
- Product Styling: Different classes are used to apply specific styles to individual products, such as border colors for visual differentiation.
Knowing what every piece of this HTML does and why you could actually make a pretty organized and nice-looking website for your shoe store or any other kind of online business. You can actually create an engaging user-friendly online store with this as your foundation when you get into HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Great Sneakers Inc.</title><link rel="preload" as="image" imagesrcset="https://developergoutam.com/wp-content/uploads/2024/07/post4-768x362.png 768w, https://developergoutam.com/wp-content/uploads/2024/07/post4-300x141.png 300w, https://developergoutam.com/wp-content/uploads/2024/07/post4-1024x482.png 1024w, https://developergoutam.com/wp-content/uploads/2024/07/post4-1536x724.png 1536w, https://developergoutam.com/wp-content/uploads/2024/07/post4-150x71.png 150w, https://developergoutam.com/wp-content/uploads/2024/07/post4-450x212.png 450w, https://developergoutam.com/wp-content/uploads/2024/07/post4-1200x565.png 1200w, https://developergoutam.com/wp-content/uploads/2024/07/post4-600x283.png 600w, https://developergoutam.com/wp-content/uploads/2024/07/post4.png 1700w" 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" />
</head>
<body>
<header class="hero">
<div class="container spacing">
<h1 class="primary-title">It's okay to be a little obsessed with shoes</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
perspiciatis facilis beatae laudantium quidem enim sit sequi!
</p>
<a href="#" class="btn">See what we have</a>
</div>
</header>
<main>
<section class="featured">
<div class="container">
<h2 class="section-title">Featured sneakers</h2>
<div class="split">
<a href="#" class="featured__item">
<img decoding="async"
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-4.png?raw=true"
alt=""
class="featured__img"
/>
<p class="featured__details">
<span class="price">$99</span>shoe name
</p>
</a>
<a href="#" class="featured__item">
<img decoding="async"
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-5.png?raw=true"
alt=""
class="featured__img"
/>
<p class="featured__details">
<span class="price">$99</span>shoe name
</p>
</a>
<a href="#" class="featured__item">
<img decoding="async"
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-6.png?raw=true"
alt=""
class="featured__img"
/>
<p class="featured__details">
<span class="price">$99</span>shoe name
</p>
</a>
</div>
</div>
</section>
<section class="our-products">
<div class="container">
<h2 class="section-title">Our sneakers</h2>
<article class="product shoe-red spacing">
<img decoding="async"
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-1.png?raw=true"
alt=""
class="product__image"
/>
<h3 class="product__title">A really nice shoe</h3>
<p class="product__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
perspiciatis facilis beatae laudantium quidem enim sit sequi!
</p>
<a href="" class="btn">Buy now</a>
</article>
<article class="product shoe-white shoe-left spacing">
<img decoding="async"
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-2.png?raw=true"
alt=""
class="product__image"
/>
<h3 class="product__title">A really nice shoe</h3>
<p class="product__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
perspiciatis facilis beatae laudantium quidem enim sit sequi!
</p>
<a href="" class="btn">Buy now</a>
</article>
<article class="product shoe-blue spacing">
<img decoding="async"
src="https://github.com/kevin-powell/shoes/blob/master/img/shoe-3.png?raw=true"
alt=""
class="product__image"
/>
<h3 class="product__title">A really nice shoe</h3>
<p class="product__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa quam
perspiciatis facilis beatae laudantium quidem enim sit sequi!
</p>
<a href="" class="btn">Buy now</a>
</article>
</div>
</section>
</main>
</body>
</html>
styles.css
It starts off by importing a custom font from Google Fonts, “Noto Sans JP“, to enhance the website’s typography. It then applies the box-sizing: border-box rule universally so that padding and borders are included in the element’s total width and height. This is very helpful in managing layouts.
Layout and Typography
It styles the body to use this imported font to give cleanliness and consistency of the look. Then, it removes margins to have the layout start at the very edge of the viewport. Finally, line-height is set to 1.6 for readability.
It makes use of max-width: 100%; on images so that they scale down depending on the width of their containing element, while still maintaining their aspect ratio. Margins on elements like headings and paragraphs are reset to zero to make the spacing predictable and consistent.
With this class, .container centers the content and sets a maximum width, letting the layout flex and center on larger screens.
Flexbox and Spacing
The `.split` class uses Flexbox to set up a responsive layout for its child elements so that they wrap and centre with a gap in between. This solution enables presenting content cleanly and structured.
The `.spacing` class applies `margin-top` to direct children, which enables spacing between elements vertically.
Buttons
The .btn class styles buttons with a unique look, adding transitions for hover and focus states. This would provide the button—making the buttons more interactive—with a scaling visual feedback effect by slightly reducing opacity. In this demo, there is also a hero section.
The .hero section is really attention-grabbing, with its large text that’s responsive, too. Tada. It uses a background blend mode to combine an image with a gradient for a strikingly handsome appearance. And the fallback means it’ll have a background even when blend modes aren’t supported.
Featured Section
The .featured section establishes their interactivity with a simple scaling effect when hovered. A ::after pseudo-element creates a circular background for each item, increasing the visual interest in this design. Details are unveiled on hover or focus. A text shadow ensures that it is readable against any type of background.
Product Section
.product section: this has a radial gradient background, which evokes dynamism of view. The title is styled in bold with responsive font sizes and text shadows. On larger screens, the layout changes, and now the text floats around the images; that will further enhance the dynamism and professionalism of the design.
Customization with CSS Variables
Throughout the stylesheet, heavy usage of custom CSS variables is done to accommodate changes in color and design easily. These variables will change for different themes, thus giving the user the ability to quickly update and also maintain consistency of the styling across a site.
This CSS stylesheet will provide a solid base for most up-to-date, responsive web design projects, using Flexbox and CSS variables together with high-end styling techniques that ensure a nice, functional look on most devices and screen sizes. This is combined with custom fonts, responsive design features, and interactive elements to create a dynamic user experience.
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
}
/* layout */
body {
font-family: "Noto Sans JP", sans-serif;
margin: 0;
line-height: 1.6;
}
img {
max-width: 100%;
display: block;
}
h1,
h2,
h3,
p {
margin: 0;
}
section {
padding: 7rem 0;
}
.container {
width: 85%;
max-width: 65rem;
margin: 0 auto;
}
.split {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
}
.split > * {
flex-basis: 30%; /* 100% by default on small screens */
min-width: 15rem;
}
/* target any direct child of spacing */
.spacing > * + * {
margin-top: var(--spacer, 2rem);
}
.btn {
display: inline-block;
text-decoration: none;
color: var(--clr-text, #fff);
font-weight: 700;
background-color: var(--clr-accent, blue);
text-transform: uppercase;
font-size: 1.125rem;
padding: 0.5rem 1.25rem;
border-radius: 0.25rem;
transition: transform 250ms ease-in-out, opacity 250ms linear;
}
.btn:hover,
.btn:focus {
transform: scale(1.1);
opacity: 0.9;
}
/* hero section */
.primary-title {
font-size: 4rem;
font-size: clamp(3rem, calc(5vw + 1rem), 4.5rem); /* responsive font */
line-height: 1;
text-transform: uppercase;
}
.section-title {
text-align: center;
font-size: 3.5rem;
font-size: clamp(2.5rem, calc(5vw + 1rem), 4rem);
line-height: 1;
color: #17353d;
margin-bottom: 5rem;
}
.hero {
text-align: center;
padding: 15rem 0;
color: white;
background: #222; /* fallback if blend mode is not supported */
}
@supports (background-blend-mode: multiply) {
.hero {
background: url(https://github.com/kevin-powell/shoes/blob/master/img/shoe-3.png?raw=true),
radial-gradient(#444, #111);
background-blend-mode: multiply;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
}
}
/* featured section */
.featured {
background: #eee;
}
.featured__item {
display: block;
position: relative;
text-decoration: none;
color: #333;
text-align: center;
line-height: 1.2;
transform: scale(0.85);
transition: transform 250ms ease-in-out;
}
.featured__item:hover,
.featured__item:focus {
transform: scale(1);
}
/* circles */
.featured__item::after {
content: "";
position: absolute;
top: 10%;
left: 10%;
padding: 75% 75% 0 0; /* padding trick to get a circle */
border-radius: 50%;
background: #2193b0;
z-index: -1;
}
.featured__details {
opacity: 0;
transition: opacity 250ms linear;
}
.featured__item:hover .featured__details,
.featured__item:focus .featured__details {
opacity: 1;
text-shadow: 0 0 2rem white; /* to prevent overlapping */
}
.featured__details span {
display: block;
font-weight: 700;
font-size: 2.5rem;
}
/* product section */
.product {
background: radial-gradient(
var(--clr-inner, limegreen),
var(--clr-outer, purple)
);
padding: 3rem;
border-radius: 1rem;
margin-bottom: 5rem;
text-align: center;
}
.product__title {
font-size: clamp(3rem, calc(5vw + 1rem), 5.5rem);
text-transform: uppercase;
line-height: 1;
color: #fff;
text-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.2);
}
.product__image {
margin: -5rem 0 0 0;
}
@media (min-width: 45rem) {
.product {
text-align: left;
margin-bottom: 9rem;
}
.product__title {
margin: 0;
}
.product__image {
float: right;
width: 65%;
shape-outside: url(https://github.com/kevin-powell/shoes/blob/master/img/shoe-1.png?raw=true); /* text will wrap the shoe */
shape-margin: 1rem;
margin: 0 -5rem 0 0;
}
.product.shoe-left .product__image {
float: left;
shape-outside: url(https://github.com/kevin-powell/shoes/blob/master/img/shoe-2.png?raw=true);
margin: 0 0 0 -5em;
shape-margin: 2em;
}
}
/* customize CSS variables */
.hero {
--clr-accent: #faa700;
}
.shoe-red {
--clr-inner: #faa700;
--clr-outer: #e48d00;
--clr-accent: #a1173c;
}
.shoe-white {
--clr-inner: #fce4b3;
--clr-outer: #eac886;
--clr-accent: #2f4858;
}
.shoe-blue {
--clr-inner: #6dd5ed;
--clr-outer: #2193b0;
--clr-accent: #008951;
}