Skip to content

Commit e44f813

Browse files
SaipradyumnagoudSaipradyumnagoud
committed
added How to create a parallax website
1 parent b078e2b commit e44f813

File tree

6 files changed

+131
-0
lines changed

6 files changed

+131
-0
lines changed

‎Web Development/How-To-Create-Parallax-Website/images/section1.jpg

9.21 KB
Loading

‎Web Development/How-To-Create-Parallax-Website/images/section2.jpg

6.31 KB
Loading

‎Web Development/How-To-Create-Parallax-Website/images/section3.jpg

14.9 KB
Loading

‎Web Development/How-To-Create-Parallax-Website/index.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>How-To-Create-Parallax-Website</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<nav>
11+
<ul>
12+
<li><a href="#section1">Section 1</a></li>
13+
<li><a href="#section2">Section 2</a></li>
14+
<li><a href="#section3">Section 3</a></li>
15+
</ul>
16+
</nav>
17+
18+
<section id="section1" class="parallax" style="background-image: url('images/section1.jpg');">
19+
<div class="content">
20+
<h1>Section 1</h1>
21+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt maiores explicabo quos corrupti rem consequuntur animi distinctio dolorem, eaque sequi nulla eius maxime repudiandae perferendis consectetur cupiditate minus quis fugiat!</p>
22+
</div>
23+
</section>
24+
25+
<section id="section2" class="parallax" style="background-image: url('images/section2.jpg');">
26+
<div class="content">
27+
<h1>Section 2</h1>
28+
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Impedit odit temporibus porro atque, eum fugit animi, quasi numquam at ipsum nihil accusamus optio alias aperiam cumque magni fuga quod! Eligendi?</p>
29+
</div>
30+
</section>
31+
32+
<section id="section3" class="parallax" style="background-image: url('images/section3.jpg');">
33+
<div class="content">
34+
<h1>Section 3</h1>
35+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea omnis voluptatum at repellat! Reprehenderit sed optio vel minima vitae, fugit cumque at, quia facilis, provident quo quod corporis. Aperiam, laboriosam?</p>
36+
</div>
37+
</section>
38+
39+
<script src="script.js"></script>
40+
</body>
41+
</html>

‎Web Development/How-To-Create-Parallax-Website/script.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
2+
document.querySelectorAll('nav ul li a').forEach(anchor => {
3+
anchor.addEventListener('click', function(e) {
4+
e.preventDefault();
5+
6+
document.querySelector(this.getAttribute('href')).scrollIntoView({
7+
behavior: 'smooth'
8+
});
9+
});
10+
});

‎Web Development/How-To-Create-Parallax-Website/styles.css

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
/* styles.css */
2+
3+
body, html {
4+
margin: 0;
5+
padding: 0;
6+
font-family: Arial, sans-serif;
7+
overflow-x: hidden;
8+
}
9+
10+
nav {
11+
position: fixed;
12+
top: 0;
13+
width: 100%;
14+
background: rgba(0, 0, 0, 0.7);
15+
z-index: 1000;
16+
}
17+
18+
nav ul {
19+
list-style: none;
20+
margin: 0;
21+
padding: 0;
22+
display: flex;
23+
justify-content: center;
24+
}
25+
26+
nav ul li {
27+
margin: 0 15px;
28+
}
29+
30+
nav ul li a {
31+
text-decoration: none;
32+
color: white;
33+
font-size: 18px;
34+
padding: 15px 20px;
35+
display: block;
36+
}
37+
38+
nav ul li a:hover {
39+
background: rgba(255, 255, 255, 0.3);
40+
}
41+
42+
.parallax {
43+
min-height: 100vh;
44+
background-attachment: fixed;
45+
background-size: cover;
46+
background-position: center;
47+
position: relative;
48+
color: white;
49+
}
50+
51+
.parallax .content {
52+
position: absolute;
53+
top: 50%;
54+
left: 50%;
55+
transform: translate(-50%, -50%);
56+
text-align: center;
57+
}
58+
59+
h1 {
60+
font-size: 48px;
61+
margin: 0;
62+
}
63+
64+
p {
65+
font-size: 24px;
66+
}
67+
68+
@media (max-width: 768px) {
69+
nav ul li a {
70+
font-size: 16px;
71+
}
72+
73+
h1 {
74+
font-size: 36px;
75+
}
76+
77+
p {
78+
font-size: 18px;
79+
}
80+
}

0 commit comments

Comments
 (0)