Welcome to My Parallax Website
Experience the magic of modern web design with our stunning parallax scrolling website. Crafted meticulously using HTML and CSS, this site offers a dynamic and immersive browsing experience. As you scroll, watch the background and foreground elements move at different speeds, creating a captivating 3D effect that adds depth and engagement.
Features:
Experience the magic of modern web design with our stunning parallax scrolling website. Crafted meticulously using HTML and CSS, this site offers a dynamic and immersive browsing experience. As you scroll, watch the background and foreground elements move at different speeds, creating a captivating 3D effect that adds depth and engagement.
Features:
Responsive Design: Enjoy seamless viewing on any device, from desktops to mobile phones.
Smooth Scrolling: Experience fluid transitions and animations that enhance user interaction.
Interactive Elements: Engage with interactive sections that bring content to life.
Optimized Performance: Fast loading times ensure a smooth and enjoyable user experience.
Whether you’re here to explore our projects, read insightful blog posts, or simply enjoy the visual aesthetics, our parallax website promises an unforgettable journey. Dive in and discover the future of web design!
Smooth Scrolling: Experience fluid transitions and animations that enhance user interaction.
Interactive Elements: Engage with interactive sections that bring content to life.
Optimized Performance: Fast loading times ensure a smooth and enjoyable user experience.
Whether you’re here to explore our projects, read insightful blog posts, or simply enjoy the visual aesthetics, our parallax website promises an unforgettable journey. Dive in and discover the future of web design!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallex Website </title>
<link rel="stylesheet" href="css parallex.css">
</head>
<body>
<section class="pimg1">
<div class="ptext">
<span class="textbg">
Parallex Website
</span>
</div>
</section>
<section class="section-light">
<h2>Section One</h2>
<p>Lorem200</p>
</section>
<section class="pimg2">
<div class="ptext">
<span class="textbg">Explore Nature</span>
</section>
<section class="section-dark">
<h2>Section Two</h2>
<p>Lorem200</p>
</section>
<section class="pimg3">
<div class="ptext">
<span class="textbg">Look Deep into Nature</span>
</section>
<section class="section-deep">
<h2>Section Three</h2>
<p>Lorem200</p>
</section>
</body>
</html>
CSS
html,body{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato",sans-serif;
font-weight: weight 400;
line-height: 1.8em;
color: #666;
}
.pimg1{
background-image: url(images/image1.png);
min-height:100%;
Position: relative; /*Taki position ko control kar sake*/
background-position:center;
background-size: cover;
background-repeat:no-repeat;
}
.pimg2{
background-image: url(images/image2.png);
min-height:400px
}
.pimg3{
background-image: url(images/image3.png);
min-height:400px;
}
.pimg1,.pimg2,.pimg3{
Position: relative; /*Taki position ko control kar sake*/
background-position:center;
background-size: cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
.ptext{
position: absolute;
top:50%;
width:100%;
text-align: center;
color:white;
font-size: 27px;
letter-spacing:8px;
text-transform:Uppercase;
}
.textbg{
background:#313534;
padding:20px;
}
.section-light{
padding:50px 80px;
text-align:center;
background-color: lightblue;
color:grey;
}
.section-dark{
padding:50px 80px;
text-align:center;
background-color: lightblue;
color:rgb(174, 115, 5);
}
Comments
Post a Comment