Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Parallax Website" project using HTML & CSS.
Preview
In the above video, you’ve seen the preview of the "Parallax Website" project and I hope you are now able to create this type of project. If not, I have provided all the HTML & CSS code below.
Parallax Website [Source Code]
To get the following HTML & CSS code for the Parallax Website project. You need to create two files one is an HTML file, and the second one is a CSS file. After completing these two files, you can copy-paste the codes on your document.
Remember, you’ve to create a file with a .html extension for HTML code and a .css extension for CSS code.
You can also download all source code files from the given download button.
HTML
<!DOCTYPE html>
<html lang="en">
<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>Parallax Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="imageSection1">
<p class="text">Majestic Peaks</p>
</section>
<section class="sectionLight">
<h2>About Us</h2>
<p>Welcome to our mountain paradise! At our website, we are passionate about sharing the awe-inspiring beauty of
the mountains with the world. Our team of experienced hikers, photographers, and nature enthusiasts is
dedicated to capturing the essence of these majestic peaks. Through our stunning imagery and engaging
stories, we aim to inspire a love for nature and encourage others to explore the wilderness. Join us as we
embark on thrilling adventures, discover hidden trails, and witness breathtaking sunsets. Come, immerse
yourself in the serenity of the mountains and let their majestic charm captivate your soul.</p>
</section>
<section class="imageSection2">
<p class="text">Tranquil Valleys</p>
</section>
<section class="sectionDark">
<h2>Explore the Wilderness</h2>
<p>Are you ready to embark on an unforgettable journey through the untamed wilderness? Our website is your
ultimate guide to exploring the mountains. Discover an array of trails suited for every level of expertise,
from leisurely strolls to challenging hikes. Dive into detailed trail descriptions, including difficulty
levels, scenic highlights, and insider tips. Immerse yourself in the rich flora and fauna that call these
mountains home. Learn about local wildlife, conservation efforts, and the importance of preserving these
pristine landscapes. Get ready to create memories that will last a lifetime as you venture into the heart of
nature.</p>
</section>
<section class="imageSection3">
<p class="text">Enchanting Sunsets</p>
</section>
<section class="sectionLight">
<h2>Contact Us</h2>
<p>We would love to hear from you! Whether you have questions, feedback, or simply want to share your own
mountain experiences, we're here to connect with fellow mountain enthusiasts. Reach out to us through our
contact form or drop us an email at xyz@gmail.com. We value your input and are constantly striving to
improve our website and provide the best possible resources for all visitors. Don't hesitate to get in touch
- let's exchange stories, share our love for the mountains, and together, celebrate the beauty of these
incredible natural wonders.</p>
</section>
<section class="imageSection1">
<p class="text">Adventurous Trails</p>
</section>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html,
body {
height: 100%;
color: black;
}
.imageSection1 {
background-image: url(images/image1.png);
min-height: 100%;
}
.imageSection2 {
background-image: url(images/image2.png);
min-height: 400px;
}
.imageSection3 {
background-image: url(images/image3.png);
min-height: 400px;
}
.imageSection1,
.imageSection2,
.imageSection3 {
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.text {
font-size: 40px;
padding: 20px 40px;
letter-spacing: 6px;
text-transform: uppercase;
color: white;
border-radius: 10px;
background-color: black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.sectionLight {
background-color: white;
color: black;
}
.sectionDark {
background-color: black;
color: white;
}
.sectionLight,
.sectionDark {
padding: 50px 200px;
text-align: center;
}
.sectionLight h2,
.sectionDark h2 {
margin-bottom: 10px;
font-size: 30px;
}
.sectionLight p,
.sectionDark p {
line-height: 40px;
font-size: 18px;
}
Generating Download Link...