index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Parallax Scrolling Website</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!--containerOne start-->
<div class="container">
<h1>Explore the Untouched Wilderness</h1>
<p>
Dive into a world where nature thrives in its purest form. Our untouched
wilderness offers a sanctuary away from the hustle and bustle of
everyday life. Wander through lush forests, gaze upon majestic
mountains, and find peace by tranquil streams. Whether you're an avid
adventurer or a casual nature lover, this is your invitation to
reconnect with the earth and discover the hidden gems that await in the
wild. Embrace the journey and let the untamed beauty of nature inspire
your soul.
</p>
<a href="#">See the Wonders</a>
</div>
<!--containerOne end-->
<!--container two start-->
<div class="blank">
<p class="about-text">
We are passionate about bringing the beauty and serenity of untouched
wilderness to you. Our mission is to inspire a deep appreciation for the
natural world and encourage sustainable exploration. We believe that
nature has the power to rejuvenate the spirit and foster a sense of
wonder and adventure.
</p>
</div>
<!--container two end-->
<!--container three start-->
<div class="container three"></div>
<!--container three end-->
<!--container four start-->
<div class="blank">
<p class="about-text">
We are passionate about bringing the beauty and serenity of untouched
wilderness to you. Our mission is to inspire a deep appreciation for the
natural world and encourage sustainable exploration. We believe that
nature has the power to rejuvenate the spirit and foster a sense of
wonder and adventure.
</p>
</div>
<!--container four end-->
<div class="container second">
<div class="item">
<div class="img img-first"></div>
<div class="card">
<h3>Rock climbing</h3>
<p class="card-text">
Rock climbing is an exhilarating sport that challenges both the mind
and body. It involves scaling natural rock formations or artificial
rock walls, requiring strength, and mental fortitude.
Whether you're navigating rugged cliffs or indoor climbing gyms, the
thrill of reaching the summit is unmatched.
</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="item">
<div class="img img-second"></div>
<div class="card">
<h3>Caving</h3>
<p class="card-text">
Caving, also known as spelunking, is the exploration of underground
caves and tunnels. This adventurous activity takes you into the
mysterious world beneath the earth's surface, where you'll encounter
breathtaking rock formations, subterranean rivers, and ancient
geological wonders.
</p>
<a href="#">Learn more</a>
</div>
</div>
<div class="item">
<div class="img img-third"></div>
<div class="card">
<h3>Parachuting</h3>
<p class="card-text">
Parachuting, also known as skydiving, is the ultimate adrenaline
rush that lets you soar through the skies and experience the world
from a breathtaking vantage point. Jumping from an aircraft, you
freefall at exhilarating speeds before deploying your parachute and
gliding gracefully to the ground.
</p>
<a href="#">Learn more</a>
</div>
</div>
</div>
<div class="blank">
<p class="about-text">
We are passionate about bringing the beauty and serenity of untouched
wilderness to you. Our mission is to inspire a deep appreciation for the
natural world and encourage sustainable exploration. We believe that
nature has the power to rejuvenate the spirit and foster a sense of
wonder and adventure.
</p>
</div>
<div class="container">
<p>
Stay updated with our latest adventures and discoveries. Follow us on
social media and subscribe to our newsletter for exclusive content and
tips on exploring the wilderness.
</p>
<a href="#">Learn more</a>
</div>
</body>
</html>
style.css
*{
padding: 0;
margin: 0;
font-family: 'Times New Roman', Times, serif;
box-sizing: border-box;
}
:root{
--color: #333;
}
.container {
text-align: center;
color: var(--color);
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-image: url(Images/1p.jpg);
background-size: cover;
background-position: center;
background-attachment: fixed;
}
h1 {
font-weight: 700;
font-size: 3rem;
}
p {
max-width: 82ch;
line-height: 1.5;
padding: 1.5em;
font-size: 1.5rem;
color: white;
}
a {
display: inline-block;
padding: 1em 3.5em;
background-color: var(--color);
color: white;
text-decoration: none;
text-transform: uppercase;
border-radius: 0.3em;
font-weight: 700;
letter-spacing: .5px;
font-size: .875rem;
}
.blank{
width: 100%;
min-height: 30vh;
background-image: linear-gradient(to right, rgba(3, 60, 15) , rgba(4, 27, 16));
}
.about-text{
max-width: 500ch;
line-height: 2.2;
padding: 1.5em;
font-size: 1.2rem;
color:white;
text-align: center;
}
.three{
background-image: url(Images/2p.png);
background-attachment: fixed;
height: 400px;
}
.second {
background-image:url(Images/3p.jpg);
background-attachment: fixed;
height: 1200px;
}
h3 {
font-weight: 700;
font-size: 1.6rem;
margin-top: 1em;
}
.card > a {
margin-bottom: 2em;
}
.card-text{
color: black;
max-width: 82ch;
line-height: 1.5;
padding: 1.5em;
font-size: 1.5rem;
}
.item {
display: flex;
max-width: 320px;
background-color: white;;
flex-direction: column;
align-items: center;
border-radius: .5em;
-webkit-box-shadow: 0px 29px 38px -15px rgba(0,0,0,0.43);
-moz-box-shadow: 0px 29px 38px -15px rgba(0,0,0,0.43);
box-shadow: 0px 29px 38px -15px rgba(0,0,0,0.43);
}
.img {
width: 90%;
height: 200px;
background-color: lightgrey;
background-size: cover;
background-position: center;
margin-top: 20px;
border-radius: .3em;;
}
.img-first {
background-image: url(https://images.unsplash.com/photo-1522163182402-834f871fd851?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1606&q=80);
}
.img-second {
background-image: url(https://images.unsplash.com/photo-1628746404106-4d3843b231b3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8Y2F2aW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=900&q=60);
}
.img-third {
background-image: url(https://images.unsplash.com/photo-1632853073412-782bf0279d65?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80);
}
.second {
flex-direction: row;
gap: 1.6em;
}
Comments
Post a Comment