Skip to content

Commit dcd030d

Browse files
solygambassolygambas
committed
add parallax landing page
1 parent 947b4c9 commit dcd030d

File tree

4 files changed

+291
-0
lines changed

4 files changed

+291
-0
lines changed

‎82-parallax landing page/index.html

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!-- Based on Parallax Landing Page - Rellax.js by Brad Traversy (2020)
2+
see: https://www.youtube.com/watch?v=aAxt0Z7IXIo -->
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
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
12+
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
13+
crossorigin="anonymous"
14+
/>
15+
<link rel="stylesheet" href="style.css" />
16+
<title>Parallax Landing Page</title>
17+
</head>
18+
<body>
19+
<section class="section section-top">
20+
<div class="content rellax" data-rellax-speed="5">
21+
<h1>Community Based Driven Website</h1>
22+
<a href="#" class="btn">Learn More</a>
23+
</div>
24+
</section>
25+
<section class="section section-stream">
26+
<img
27+
class="play rellax"
28+
src="https://image.flaticon.com/icons/svg/4069/4069204.svg"
29+
alt="Play"
30+
data-rellax-speed="0"
31+
data-rellax-xs-speed="-5"
32+
/>
33+
<div class="content rellax" data-rellax-speed="10">
34+
<div>
35+
<h2 class="secondary-text">Stream Everything</h2>
36+
<p>
37+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque
38+
fugit molestiae placeat nesciunt autem et quos sapiente voluptates,
39+
magnam doloribus?
40+
</p>
41+
</div>
42+
<div>
43+
<h2 class="secondary-text">Short is the New Long</h2>
44+
<p>
45+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque
46+
fugit molestiae placeat nesciunt autem et quos sapiente voluptates,
47+
magnam doloribus?
48+
</p>
49+
</div>
50+
</div>
51+
</section>
52+
<section class="section section-grid">
53+
<div class="rellax" data-rellax-speed="1" data-rellax-xs-speed="3">
54+
<i class="fas fa-video fa-3x secondary-text"></i>
55+
<h2>Watch<span class="secondary-text dot">.</span></h2>
56+
<p>
57+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque fugit
58+
molestiae placeat nesciunt autem et quos sapiente voluptates, magnam
59+
doloribus?
60+
</p>
61+
</div>
62+
<div class="rellax" data-rellax-speed="4" data-rellax-xs-speed="3">
63+
<i class="fas fa-users fa-3x secondary-text"></i>
64+
<h2>Share<span class="secondary-text dot">.</span></h2>
65+
<p>
66+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque fugit
67+
molestiae placeat nesciunt autem et quos sapiente voluptates, magnam
68+
doloribus?
69+
</p>
70+
</div>
71+
<div class="rellax" data-rellax-speed="7" data-rellax-xs-speed="3">
72+
<i class="fas fa-book fa-3x secondary-text"></i>
73+
<h2>Learn<span class="secondary-text dot">.</span></h2>
74+
<p>
75+
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque fugit
76+
molestiae placeat nesciunt autem et quos sapiente voluptates, magnam
77+
doloribus?
78+
</p>
79+
</div>
80+
</section>
81+
<footer class="footer">
82+
<ul>
83+
<li><a href="#">Faq</a></li>
84+
<li><a href="#">Terms of Use</a></li>
85+
<li><a href="#">Privacy Notice</a></li>
86+
<li><a href="#">Contact Us</a></li>
87+
<li><a href="#">About Us</a></li>
88+
</ul>
89+
</footer>
90+
91+
<script
92+
src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"
93+
integrity="sha512-f5HTYZYTDZelxS7LEQYv8ppMHTZ6JJWglzeQmr0CVTS70vJgaJiIO15ALqI7bhsracojbXkezUIL+35UXwwGrQ=="
94+
crossorigin="anonymous"
95+
></script>
96+
<script src="script.js"></script>
97+
</body>
98+
</html>

‎82-parallax landing page/script.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
let rellax = new Rellax(".rellax");

‎82-parallax landing page/style.css

+191
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Nixie+One&display=swap");
2+
3+
:root {
4+
--primary-color: #2d2254;
5+
--secondary--color: #f5c42f;
6+
--text-color: #c5bbec;
7+
}
8+
9+
* {
10+
box-sizing: border-box;
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
body {
16+
font-family: "Nixie One", cursive;
17+
background-color: var(--primary-color);
18+
color: #fff;
19+
font-size: 1.125rem;
20+
line-height: 1.6;
21+
}
22+
23+
h1,
24+
h2,
25+
h3,
26+
p {
27+
margin-bottom: 0.625rem;
28+
}
29+
30+
a {
31+
text-decoration: none;
32+
color: #fff;
33+
}
34+
35+
ul {
36+
list-style: none;
37+
}
38+
39+
.btn {
40+
display: inline-block;
41+
border: 0;
42+
background-color: var(--secondary--color);
43+
color: #fff;
44+
border-radius: 20px;
45+
padding: 0.5rem 2rem;
46+
text-transform: uppercase;
47+
font-weight: bold;
48+
font-size: 1rem;
49+
margin-top: 10px;
50+
}
51+
52+
.btn:hover {
53+
transform: scale(0.98);
54+
}
55+
56+
.primary-text {
57+
color: var(--primary-color);
58+
}
59+
60+
.secondary-text {
61+
color: var(--secondary--color);
62+
}
63+
64+
.section {
65+
position: relative;
66+
padding: 0 20px;
67+
}
68+
69+
.section-top {
70+
min-height: 200px;
71+
padding-top: 20px;
72+
background: url("https://i.ibb.co/PhVR2Vh/bg1.png") no-repeat center
73+
center/cover;
74+
}
75+
76+
.section-top .content {
77+
text-align: center;
78+
}
79+
80+
.section-top .content h1 {
81+
font-size: 45px;
82+
}
83+
84+
.section-top .content,
85+
.section-stream .play,
86+
.section-stream .content {
87+
position: static;
88+
width: 100%;
89+
}
90+
91+
.section-stream {
92+
min-height: 400px;
93+
background: url("https://i.ibb.co/bsX6RV0/bg2.png") no-repeat center
94+
center/cover;
95+
}
96+
97+
.section-stream h2 {
98+
font-size: 35px;
99+
}
100+
101+
.section-stream .play {
102+
width: 50%;
103+
display: block;
104+
margin: 30px auto;
105+
opacity: 0.5;
106+
}
107+
108+
.section-stream .content > div,
109+
.section-grid > div {
110+
background: rgba(255, 255, 255, 0.1);
111+
padding: 20px;
112+
margin-bottom: 20px;
113+
border-radius: 10px;
114+
}
115+
116+
.section-grid {
117+
display: block;
118+
margin-top: 0;
119+
text-align: center;
120+
}
121+
122+
.section-grid p {
123+
color: var(--text-color);
124+
}
125+
126+
.section-grid .dot {
127+
font-size: 40px;
128+
padding-left: 2px;
129+
}
130+
131+
.footer {
132+
border-top: var(--text-color) 1px solid;
133+
padding: 30px;
134+
margin-top: 20px;
135+
}
136+
137+
.footer ul {
138+
display: block;
139+
text-align: center;
140+
}
141+
142+
@media (min-width: 768px) {
143+
.section-top {
144+
min-height: 500px;
145+
padding-top: 0;
146+
}
147+
148+
.section-top .content {
149+
position: absolute;
150+
top: 100px;
151+
right: 20px;
152+
width: 55%;
153+
}
154+
155+
.section-top .content h1 {
156+
font-size: 70px;
157+
text-align: left;
158+
line-height: 1.3;
159+
}
160+
161+
.section-stream {
162+
min-height: 700px;
163+
}
164+
165+
.section-stream .play {
166+
width: 27%;
167+
position: absolute;
168+
top: 100px;
169+
left: 50px;
170+
opacity: 1;
171+
}
172+
173+
.section-stream .content {
174+
position: absolute;
175+
width: 50%;
176+
top: 130px;
177+
right: 70px;
178+
}
179+
180+
.section-grid {
181+
display: grid;
182+
grid-template-columns: repeat(3, 1fr);
183+
grid-gap: 30px;
184+
}
185+
186+
.footer ul {
187+
display: flex;
188+
align-items: center;
189+
justify-content: space-around;
190+
}
191+
}

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
| 79 | [Creative Agency Website](https://github.com/solygambas/html-css-fifty-projects/tree/master/79-creative%20agency%20website) | [Live Demo](https://codepen.io/solygambas/full/LYbKoRj) |
8888
| 80 | [Health Dashboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/80-health%20dashboard) | [Live Demo](https://codepen.io/solygambas/full/XWNvEKz) |
8989
| 81 | [Animated SVG](https://github.com/solygambas/html-css-fifty-projects/tree/master/81-animated%20SVG) | [Live Demo](https://codepen.io/solygambas/full/vYyoVWR) |
90+
| 82 | [Parallax Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/82-parallax%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/ExZxxRo) |
9091

9192
This repository is mostly based on 2 courses by Brad Traversy (2020):
9293

0 commit comments

Comments
 (0)