-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathparallax.html
113 lines (113 loc) · 5.11 KB
/
parallax.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0 " />
<style>
body,html{
margin: 0;
width:100%;
height:100vh;
font-family: sans-serif;
font-weight: 400;
font-size: 20px;
}
.img{
position: relative;
opacity: 0.70;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.img1{
background-image: url('img1.jpg');
min-height: 100%;
}
.img2{
background-image: url('img2.jpeg');
min-height: 400px;
}
.img3{
background-image: url('img3.jpeg');
min-height: 400px;
}
.section{
text-align: center;
padding: 50px 80px;
background: #B8C1C8;
}
.ptext{
position: absolute;
text-align: center;
width: 100%;
top: 50%;
font-size: 3em;
letter-spacing: 8px;
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="img img1">
<div class="ptext">
<span class="para">
Parallax
</span>
</div>
</div>
<section class="section">
<h2>Section one</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusamus similique magni aperiam minima non suscipit a.
Ipsam accusamus error ex suscipit debitis nesciunt cupiditate, fuga ea deserunt soluta vitae rem, officia laudantium nulla
consequatur incidunt non culpa voluptatem aliquam omnis odit? Tempora corrupti commodi atque! Cupiditate voluptatum ut ratione
laboriosam ab veniam porro nihil, voluptates veritatis, earum aliquam aperiam esse incidunt nisi quis architecto tempore
voluptatibus sed dicta ad facere minus expedita quae voluptatem. Iusto, tempora consequuntur! Officia asperiores quae ab
facere commodi fugit aspernatur dolores autem architecto corporis aliquid, perspiciatis animi sequi labore ratione dolore
adipisci? Animi deleniti maiores nihil, exercitationem repellendus dolorem quos minima tempore ratione a cupiditate nulla
illo odio libero. Et sit, recusandae tempora, ut totam quo dolorem consectetur aliquam expedita dolores provident vel?
Deleniti accusamus doloremque quae doloribus et, laborum laboriosam architecto necessitatibus unde temporibus illo, nam,
quidem nemo aspernatur mollitia. Fuga, quo sit?
</p>
</section>
<div class="img img2">
<div class="ptext" >
<span class="para">
wonderful building
</span>
</div>
</div>
<section class="section">
<h2>Section two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusamus similique magni aperiam minima non suscipit a.
Ipsam accusamus error ex suscipit debitis nesciunt cupiditate, fuga ea deserunt soluta vitae rem, officia laudantium nulla
consequatur incidunt non culpa voluptatem aliquam omnis odit? Tempora corrupti commodi atque! Cupiditate voluptatum ut ratione
laboriosam ab veniam porro nihil, voluptates veritatis, earum aliquam aperiam esse incidunt nisi quis architecto tempore
voluptatibus sed dicta ad facere minus expedita quae voluptatem. Iusto, tempora consequuntur! Officia asperiores quae ab
facere commodi fugit aspernatur dolores autem architecto corporis aliquid, perspiciatis animi sequi labore ratione dolore
adipisci? Animi deleniti maiores nihil.
</p>
</section>
<div class="img img3">
<div class="ptext">
<span class="para">
colorful areas
</span>
</div>
</div>
<section class="section">
<h2>Section three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor accusamus similique magni aperiam minima non suscipit a.
Ipsam accusamus error ex suscipit debitis nesciunt cupiditate, fuga ea deserunt soluta vitae rem, officia laudantium nulla
consequatur incidunt non culpa voluptatem aliquam omnis odit? Tempora corrupti commodi atque! Cupiditate voluptatum ut ratione
laboriosam ab veniam porro nihil.
</p>
</section>
<div class="img img1">
<div class="ptext">
<span class="para">
Parallax
</span>
</div>
</div>
</body>
</html>