Skip to content

Commit 368227b

Browse files
solygambassolygambas
committedJun 20, 2021
add parallax html and css
1 parent 54e9ae9 commit 368227b

File tree

4 files changed

+127
-0
lines changed

4 files changed

+127
-0
lines changed
 

‎99-parallax website/index.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!-- Build Parallax Website With HTML CSS & Javascript by Simo Edwin - Dev Ed (2021)
2+
see: https://www.youtube.com/watch?v=Nt70Ld0dJCM -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Parallax Website</title>
11+
</head>
12+
<body>
13+
<section>
14+
<nav>
15+
<h4>yayavar</h4>
16+
<a class="button">Sign Up</a>
17+
</nav>
18+
<div class="container">
19+
<h2 class="main-title">Explore.</h2>
20+
<img
21+
src="https://i.ibb.co/dK5zQgY/background.png"
22+
class="background"
23+
alt=""
24+
/>
25+
<img src="https://i.ibb.co/gwtNKDz/man.png" class="man" alt="" />
26+
<img
27+
src="https://i.ibb.co/XJrwv0M/foreground.png"
28+
class="foreground"
29+
alt=""
30+
/>
31+
</div>
32+
<div class="content">
33+
<div class="content-images">
34+
<div>
35+
<img src="https://i.ibb.co/w4N157P/haridwar.jpg" alt="" />
36+
<h4>Haridwar</h4>
37+
<h3>India</h3>
38+
</div>
39+
<div>
40+
<img src="https://i.ibb.co/v4yCXYS/rishikesh.jpg" alt="" />
41+
<h4>Rishikesh</h4>
42+
<h3>India</h3>
43+
</div>
44+
</div>
45+
<p class="text">
46+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere neque
47+
consequuntur a nisi, illo quia cupiditate fuga et eos minima
48+
voluptatum cum dolorum quas repellat eaque beatae vitae veritatis
49+
quae.
50+
</p>
51+
<p class="text">
52+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facere neque
53+
consequuntur a nisi, illo quia cupiditate fuga et eos minima
54+
voluptatum cum dolorum quas repellat eaque beatae vitae veritatis
55+
quae.
56+
</p>
57+
</div>
58+
</section>
59+
<script
60+
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"
61+
integrity="sha512-cdV6j5t5o24hkSciVrb8Ki6FveC2SgwGfLE31+ZQRHAeSRxYhAQskLkq3dLm8ZcWe1N3vBOEYmmbhzf7NTtFFQ=="
62+
crossorigin="anonymous"
63+
></script>
64+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
65+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/animation.gsap.js"></script>
66+
<script src="script.js"></script>
67+
</body>
68+
</html>

‎99-parallax website/script.js

Whitespace-only changes.

‎99-parallax website/style.css

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
color: #fff;
8+
font-family: "Poppins", sans-serif;
9+
}
10+
11+
nav {
12+
position: absolute;
13+
width: 100%;
14+
display: flex;
15+
padding: 3rem 10rem;
16+
justify-content: space-between;
17+
}
18+
19+
.container {
20+
height: 100vh;
21+
}
22+
23+
.container img {
24+
width: 100%;
25+
position: absolute;
26+
height: 110vh;
27+
object-fit: cover;
28+
z-index: -1;
29+
}
30+
31+
.main-title {
32+
position: absolute;
33+
top: 30%;
34+
left: 50%;
35+
font-size: 6rem;
36+
transform: translate(-50%, -30%);
37+
}
38+
39+
.content {
40+
width: 100%;
41+
background-color: rgb(24, 24, 24);
42+
min-height: 100vh;
43+
z-index: 2;
44+
position: absolute;
45+
}
46+
47+
.content-images {
48+
display: flex;
49+
justify-content: space-around;
50+
align-items: center;
51+
min-height: 60vh;
52+
text-align: center;
53+
}
54+
55+
.text {
56+
padding: 2rem 20rem;
57+
font-size: 1.1rem;
58+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@
104104
| 96 | [Cloud Hosting Service](https://github.com/solygambas/html-css-fifty-projects/tree/master/96-cloud%20hosting%20service) | [Live Demo](https://codepen.io/solygambas/full/oNBrXYr) |
105105
| 97 | [Terminal Style Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/97-terminal%20style%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/BaWvXLG) |
106106
| 98 | [Magazine Layout](https://github.com/solygambas/html-css-fifty-projects/tree/master/98-magazine%20layout) | [Live Demo](https://codepen.io/solygambas/full/OJpGMyj) |
107+
| 99 | [Parallax Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/99-parallax%20website) | [Live Demo](#) |
107108

108109
This repository is mostly based on 2 courses by Brad Traversy (2020):
109110

0 commit comments

Comments
 (0)