Make A Simple Shoes Website using HTML and CSS | Free Source Code
Hello, friends today in this blog I will teach you how to Create A Website in HTML and CSS Only. Earlier I have shared a blog about a Complete Personal Portfolio Website using HTML CSS & JavaScript and now I’m going to create a simple website.
How can I make my website attractive?
To make a website beautiful and attractive you need to follow the following steps:
- Take simple colors for your website.
- Use a maximum of 3 to 4 color
- Make Website Responsive (Fite in any screen sizes devices)
- Try To use the same sizes and font family for text.
- Keep essential navigation links inside the navigation bar
If you are feeling difficulty with what I’m saying then you can watch the full video tutorial of this program [Create A Website Design], which I have given below
Watch Full Tutorial :-
Step 1: Set Up Your HTML Structure:
Begin by creating a new HTML file. You can use any code editor, such as Visual Studio Code or Sublime Text, to write your code. Here's a basic HTML structure to start with:
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" href="style.css">
<title>Shoes Website</title>
</head>
<body>
<nav>
<div class="nav-container">
<div class="logo">
<img src="logo.png" alt="">
</div>
<div class="other">
<div class="links">
<div class="link" data-aos="fade-up" data-aos-duration="1000"><a href="">Home</a></div>
<div class="link" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="100"><a href="">Shop</a></div>
<div class="link" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"><a href="">Sale</a></div>
<div class="link" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="300"><a href="">Contact</a></div>
</div>
<div class="icons">
<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="400"><i class="fa-solid fa-magnifying-glass"></i></div>
<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="500"><i class="fa-solid fa-bag-shopping"></i></div>
<div data-aos="fade-up" data-aos-duration="1000" data-aos-delay="600"><i class="fa-solid fa-bars hamburg" onclick="hamburg()"></i></div>
</div>
</div>
</div>
<div class="dropdown">
<div class="links">
<div class="link"><a href="">Home</a></div>
<div class="link"><a href="">Shop</a></div>
<div class="link"><a href="">Sale</a></div>
<div class="link"><a href="">Contact</a></div>
<i class="fa-solid fa-xmark cancel" onclick="cancel()"></i>
</div>
</div>
</nav>
<section>
<div class="image" data-aos="zoom-in-right" data-aos-duration="2000">
<img src="main.png" alt="">
</div>
<div class="content">
<h2 data-aos="fade-right" data-aos-duration="1200" data-aos-delay="700">Nike</h2>
<h1 data-aos="zoom-in" data-aos-duration="1200" data-aos-delay="900">Air Max <span>2090</span></h1>
<hr class="fir-line" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="1000">
<hr class="sec-line" data-aos="fade-right" data-aos-duration="1000" data-aos-delay="1100">
<p data-aos="zoom-out" data-aos-duration="1200" data-aos-delay="1200">Bring the past into the future with the Nike Air Max 2090, a bold look inspired by the DNA of th eiconic Air Max 90. Brand-new NIke Air cushioning underfood adds unparalleled comfort while transparent mesh and vibrantly coloured details on teh upper are blended with timeless OG features for an edgy, modernised look.</p>
<div class="btn" data-aos="fade-right" data-aos-duration="1200" data-aos-delay="1300"><button>Know More</button></div>
<div class="other-shoes">
<div class="shoes" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="1500">
<img src="main.png" alt="">
<label for="">Jordan Max 200</label>
</div>
<div class="shoes" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="1600">
<img src="shoes1.png" alt="">
<label for="">Jordan Air Zoom Super Rep</label>
</div>
<div class="shoes" data-aos="fade-up" data-aos-duration="1200" data-aos-delay="1700">
<img src="shoes2.png" alt="">
<label for="">Jordan Max Super Rep</label>
</div>
</div>
</div>
</section>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({offset:1});
</script>
<script>
function hamburg(){
const navbar = document.querySelector(".dropdown");
navbar.style.transform = "translateY(0px)"
}
function cancel(){
const navbar = document.querySelector(".dropdown");
navbar.style.transform = "translateY(-500px)"
}
</script>
</body>
</html>
Step 2: Create a Stylesheet (CSS):
Now, create a CSS file (style.css) to style your login page. You can customize it to match Instagram's visual aesthetics. Below are some basic CSS styles to get you started:
*{
padding: 0;
margin: 0;
font-family: sans-serif;
box-sizing: border-box;
}
body{
width: 100%;
height: 100vh;
background-image: url(background.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
nav{
width: 100%;
height: 10vh;
}
.nav-container{
padding: 0 5%;
width: 100%;
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
nav .logo img{
width: 100px;
height: 100%;
display: flex;
align-items: center;
}
nav .other,
.nav-container .links,
.icons{
display: flex;
}
.nav-container .links a,
.icons div i{
cursor: pointer;
font-size: 1.3rem;
margin: 0 20px;
}
.nav-container .links a{
margin: 0 25px;
font-weight: 500;
color: black;
text-decoration: none;
transition: 0.2s linear;
}
.nav-container .links a:hover{
color: #fe6278;
}
.dropdown{
width: 100%;
height: auto;
transform: translateY(-500px);
position: absolute;
top: 0;
backdrop-filter: brightness(40%) blur(5px);
transition: transform 0.3s linear;
}
.dropdown .links{
width: 100%;
display: flex;
text-align: center;
flex-direction: column;
}
.dropdown .links .link{
padding: 15px 0;
transition: 0.2s linear;
}
.dropdown .links .link a {
color: white;
text-decoration: none;
}
.dropdown .links .link:hover{
background-color: #fe6278;
}
.dropdown .cancel{
font-size: 2rem;
color: white;
position: absolute;
top: 10px;
right: 15px;
transition: 0.2s linear;
}
.dropdown .cancel:hover{
transform: rotate(90deg);
}
/* Section Start */
section{
width: 100%;
min-height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
section .image{
max-width: 700px;
}
.image img{
width: 100%;
}
.content{
width: 40%;
margin-left: 50px;
}
.content h2{
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
color: #fe6278;
}
.content h1{
font-size: clamp(3rem, 6vw, 6rem);
font-weight: 700;
}
.content h1 span{
color: #fe6278;
}
.content hr{
height: 5px;
background-color: #fe6278;
border: none;
border-radius: 5px;
}
.content .fir-line{
width: 10%;
}
.content .sec-line{
width: 7%;
margin-top: 5px;
}
.content p{
margin-top: 15px;
}
.content .btn{
margin: 20px 0;
width: 100%;
display: flex;
justify-content: end;
align-items: center;
}
.content .btn button{
width: 25%;
height: 5vh;
font-size: 100%;
font-weight: 600;
color: white;
background-color: #fe6278;
border-radius: 40px;
border: none;
outline: none;
transition: 0.2s linear;
}
.content .btn button:hover{
box-shadow: 0 0 10px 5px #fe6278;
}
.content .other-shoes{
margin: 0 15%;
width: 70%;
display: flex;
justify-content: space-around;
}
.content .other-shoes .shoes{
display: flex;
margin-top: 30px;
border-radius: 10px;
flex-direction: column;
width:25%;
box-shadow: 0 0 10px black;
}
.content .other-shoes .shoes img{
width: 100px;
margin-top: -40px 0 10px 0;
transition: 0.2s linear;
}
.shoes img:hover{
scale: 1.2;
}
.other-shoes .shoes label{
text-align: center;
margin: 10px 0;
}
@media (max-width:884px){
body{
background-image: url(bg2.png);
}
.nav-container .logo img{
filter: drop-shadow(0 0 10px black);
}
section{
margin-top: 0;
display: flex;
flex-direction: column;
}
.content{
width: 95%;
margin-left: 0;
}
.image{
width: 100%;
display: flex;
justify-content: center;
}
.content .other-shoes{
min-height: 21vh;
margin-top: 15px 10%;
}
.other-shoes .shoes{
display: flex;
justify-content: center;
align-items: center;
}
}
@media (max-width:440px){
.nav-container .links{
display: none;
}
.image img{
width: 65%;
}
.content .other-shoes{
width: 100%;
margin:15px 0 ;
}
}
.png)
.png)
Please give the link of images.
ReplyDeletethats really osm brother thanks foe help us
ReplyDeletewonder why yall pay when he forgot litterally forgot that it was on his github : https://github.com/ritesh-0309/landing_pages
ReplyDeleteFull code send
ReplyDeletepro coder i just want to say that there is no image for this with me so when making the website you should share the image so we would be able to make this kind of website thankyou
ReplyDelete