Hello coders, In this project you can learn about the Parallax site it is a beginner-friendly Project If you’re a Beginner in a Development career it is a must and practical project for you.
Here I provide this in a simple way and easy to learn, Let’s Get into it!
HTML
HTML is the skeleton for a parallax site, this HTML code includes the Title, headings, Paragraphs, and 3 images. Here I link the external styles sheet named styles.css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax Website</title>
<link rel="stylesheet" href="styes.css" />
</head>
<body>
<div class="wrapper">
<!-- first image section -->
<div class="section-1">
<h1 class="txt-1">Codewithimraan</h1>
</div>
<!-- first text section -->
<div class="scetion-2 content">
<h1 class="heading-2">Who is imran</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde
dignissimos atque, aut eius deserunt reprehenderit eveniet, distinctio
nisi, Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quibusdam perspiciatis error commodi ab odio voluptas tempora pariatur
necessitatibus molestias unde.<strong>iusto alias voluptatum </strong
>perferendis sequi harum et itaque. Delectus ipsa eum numquam? Itaque
architecto mollitia, accusantium pariatur molestias voluptatem atque
repudiandae voluptatibus! At consequatur commodi rerum accusamus
aliquid? Atque laudantium doloremque repellat.
</p>
</div>
<!-- second image section -->
<div class="section-3">
<h1 class="txt-2">Skills</h1>
</div>
<!-- second text section -->
<div class="scetion-4 content sec">
<h1 class="heading-3">Im Good At</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde
dignissimos atque, aut eius deserunt reprehenderit eveniet, distinctio
nisi, Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quibusdam perspiciatis error commodi ab odio voluptas tempora pariatur
necessitatibus molestias unde.<strong>iusto alias voluptatum </strong
>perferendis sequi harum et itaque. Delectus ipsa eum numquam? Itaque
architecto mollitia, accusantium pariatur molestias voluptatem atque
repudiandae voluptatibus! At consequatur commodi rerum accusamus
aliquid? Atque laudantium doloremque repellat.
</p>
</div>
<!-- third image section -->
<div class="section-5">
<h1 class="txt-3">Pojects</h1>
</div>
<!-- third text section -->
<div class="scetion-6 content sec">
<h1 class="heading-4">My Porjects</h1>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde
dignissimos atque, aut eius deserunt reprehenderit eveniet, distinctio
nisi, Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quibusdam perspiciatis error commodi ab odio voluptas tempora pariatur
necessitatibus molestias unde.<strong>iusto alias voluptatum </strong
>perferendis sequi harum et itaque. Delectus ipsa eum numquam? Itaque
architecto mollitia, accusantium pariatur molestias voluptatem atque
repudiandae voluptatibus! At consequatur commodi rerum accusamus
aliquid? Atque laudantium doloremque repellat.
</p>
</div>
</div>
</body>
</html>
CSS
Here I provided CSS code, This is an interesting part for you to learn. You can learn like positioning, Gradients, and other background properties. here is yours code
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
height: 100vh;
width: 100%;
overflow-x: hidden;
background: linear-gradient(
to bottom,
rgb(250, 250, 250),
rgb(129, 207, 231)
);
}
.content {
width: 1000px;
margin: 0 auto;
}
/* first image section */
.section-1 {
background: url(laptop.avif);
height: 550px;
width: 100%;
background-position: center;
background-attachment: fixed;
object-fit: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.txt-1 {
height: 50px;
width: 350px;
text-transform: uppercase;
text-align: center;
color: white;
position: absolute;
background-color: red;
border: 5px solid white;
border-radius: 20px;
box-shadow: 0px 0px 3px 2px black;
}
/* first text section */
.heading-2 {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 40px;
color: red;
filter: drop-shadow(2px 2px 2px white);
text-transform: uppercase;
padding: 20px 0;
}
p {
font-size: 25px;
font-family: cursive;
line-height: 1.3em;
padding: 30px 0;
}
/* second image section */
.section-3 {
background: url(coders.jpg);
height: 550px;
width: 100%;
background-position: center;
background-attachment: fixed;
object-fit: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.txt-2 {
height: 50px;
width: 300px;
text-align: center;
color: black;
position: absolute;
background-color: yellow;
border: 5px solid white;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;
}
/* second text section */
.heading-3 {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 40px;
color: yellow;
filter: drop-shadow(2px 2px 2px black);
text-transform: uppercase;
padding: 20px 0;
}
/* third image section */
.section-5 {
background: url(coderss\ 2.jpg);
height: 550px;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
object-fit: cover;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.txt-3 {
height: 50px;
width: 300px;
text-align: center;
color: black;
position: absolute;
background-color: springgreen;
border: 5px solid white;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
/* third text section */
.heading-4 {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 40px;
color: springgreen;
filter: drop-shadow(2px 2px 2px black);
text-transform: uppercase;
padding: 20px 0;
}
Following these steps, you can create a visually appealing parallax site that enhances user experience through engaging scrolling effects using only HTML and CSS.
NOTE:-
Experiment with different background images and CSS properties to perfect your design. Happy coding, and enjoy the creativity of building your parallax website!
If you’re facing any problems with your code – Feel free to download my Source code file Happy Coding Mates
I’m a Full-Stack web developer (Freelancer). I’ve a great knowledge of anything related to HTML, CSS, JS, React, Node.js, MongoDB
