Skip to content

Commit c10a8f4

Browse files
solygambassolygambas
committed
add parallax
1 parent 8182033 commit c10a8f4

File tree

3 files changed

+80
-8
lines changed

3 files changed

+80
-8
lines changed

‎photo-ninja/index.html

Lines changed: 75 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
<div class="row">
4949
<div class="col s12 l4">
5050
<img
51-
src="https://i.ibb.co/YTgNpZT/portrait-min.jpg"
51+
src="https://images.unsplash.com/photo-1505944270255-72b8c68c6a70?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80"
5252
alt=""
5353
class="responsive-img materialboxed"
5454
/>
@@ -65,7 +65,7 @@ <h2 class="indigo-text text-darken-4">Portraits</h2>
6565
<div class="row">
6666
<div class="col s12 l4 push-l7 offset-l1">
6767
<img
68-
src="https://i.ibb.co/QCR4WFg/city-min.jpg"
68+
src="https://images.unsplash.com/photo-1480714378408-67cf0d13bc1b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=80"
6969
alt=""
7070
class="responsive-img materialboxed"
7171
/>
@@ -82,7 +82,7 @@ <h2 class="indigo-text text-darken-4">Cityscapes</h2>
8282
<div class="row">
8383
<div class="col s12 l4">
8484
<img
85-
src="https://i.ibb.co/wKFkLhJ/nature-min.jpg"
85+
src="https://images.unsplash.com/photo-1569527187472-a319b8999d0f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80"
8686
alt=""
8787
class="responsive-img materialboxed"
8888
/>
@@ -98,13 +98,81 @@ <h2 class="indigo-text text-darken-4">Nature</h2>
9898
</div>
9999
</section>
100100
<!-- parallax -->
101-
101+
<section class="parallax-container">
102+
<div class="parallax">
103+
<img
104+
src="https://images.unsplash.com/photo-1503650923300-dd2f6a007eaf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2400&q=80"
105+
alt=""
106+
class="responsive-img"
107+
/>
108+
</div>
109+
</section>
102110
<!-- services / tabs -->
103-
111+
<section class="container">
112+
<p>
113+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur
114+
possimus, voluptatum, quidem iste doloribus dignissimos quod aliquid
115+
similique laborum soluta veniam optio obcaecati quibusdam ex aut
116+
numquam, ipsa reprehenderit! Laudantium, nisi. Beatae sequi doloribus,
117+
odit rerum quo, illum et adipisci dolorem ipsum nihil, animi sit quidem
118+
esse! Laborum quasi consectetur accusantium deserunt, molestiae error
119+
vero! Veritatis placeat odio et, debitis possimus laudantium ipsa quos
120+
obcaecati dolore cum natus, quasi unde enim aspernatur nemo mollitia,
121+
consectetur beatae odit fugit? Minus accusamus mollitia aperiam enim
122+
labore. Pariatur culpa assumenda, asperiores ab odit nihil! Commodi
123+
pariatur minus facere aspernatur repudiandae dolores sint, culpa
124+
possimus deserunt! Accusantium doloremque perferendis pariatur deserunt
125+
soluta, eaque cupiditate vero eligendi ratione veritatis laborum officia
126+
distinctio omnis asperiores sapiente, placeat cum dolorum optio! Libero
127+
quasi animi veniam nihil. Tenetur hic nihil iusto eos placeat qui
128+
veritatis, dolore explicabo quia ipsam ab optio laudantium, sed
129+
asperiores architecto expedita, numquam adipisci veniam perferendis
130+
pariatur animi accusantium aliquam! Explicabo perferendis, voluptatum
131+
qui nam corporis maxime in ratione laborum optio ut quis delectus?
132+
Dolores mollitia omnis aperiam id voluptas, iusto sit ea ex odio
133+
perferendis ullam eaque soluta, accusantium voluptates facilis impedit
134+
similique at assumenda obcaecati cupiditate nam odit magni totam.
135+
Suscipit, quo.
136+
</p>
137+
</section>
104138
<!-- parallax -->
105-
139+
<section class="parallax-container">
140+
<div class="parallax">
141+
<img
142+
src="https://images.unsplash.com/photo-1444090542259-0af8fa96557e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2400&q=80"
143+
alt=""
144+
class="responsive-img"
145+
/>
146+
</div>
147+
</section>
106148
<!-- contact form -->
107-
149+
<section class="container">
150+
<p>
151+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tenetur
152+
possimus, voluptatum, quidem iste doloribus dignissimos quod aliquid
153+
similique laborum soluta veniam optio obcaecati quibusdam ex aut
154+
numquam, ipsa reprehenderit! Laudantium, nisi. Beatae sequi doloribus,
155+
odit rerum quo, illum et adipisci dolorem ipsum nihil, animi sit quidem
156+
esse! Laborum quasi consectetur accusantium deserunt, molestiae error
157+
vero! Veritatis placeat odio et, debitis possimus laudantium ipsa quos
158+
obcaecati dolore cum natus, quasi unde enim aspernatur nemo mollitia,
159+
consectetur beatae odit fugit? Minus accusamus mollitia aperiam enim
160+
labore. Pariatur culpa assumenda, asperiores ab odit nihil! Commodi
161+
pariatur minus facere aspernatur repudiandae dolores sint, culpa
162+
possimus deserunt! Accusantium doloremque perferendis pariatur deserunt
163+
soluta, eaque cupiditate vero eligendi ratione veritatis laborum officia
164+
distinctio omnis asperiores sapiente, placeat cum dolorum optio! Libero
165+
quasi animi veniam nihil. Tenetur hic nihil iusto eos placeat qui
166+
veritatis, dolore explicabo quia ipsam ab optio laudantium, sed
167+
asperiores architecto expedita, numquam adipisci veniam perferendis
168+
pariatur animi accusantium aliquam! Explicabo perferendis, voluptatum
169+
qui nam corporis maxime in ratione laborum optio ut quis delectus?
170+
Dolores mollitia omnis aperiam id voluptas, iusto sit ea ex odio
171+
perferendis ullam eaque soluta, accusantium voluptates facilis impedit
172+
similique at assumenda obcaecati cupiditate nam odit magni totam.
173+
Suscipit, quo.
174+
</p>
175+
</section>
108176
<!-- footer -->
109177
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
110178
<script src="index.js"></script>

‎photo-ninja/index.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
const sidenav = document.querySelector(".sidenav");
22
const lightboxes = document.querySelectorAll(".materialboxed");
3+
const parallaxes = document.querySelectorAll(".parallax");
34

45
M.Sidenav.init(sidenav);
56
M.Materialbox.init(lightboxes);
7+
M.Parallax.init(parallaxes);

‎photo-ninja/style.css

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
header {
2-
background: url(https://i.ibb.co/TbFxMgn/man-min.jpg) center / cover;
2+
background: url(https://images.unsplash.com/photo-1542940171-c8e6ffb7fc99?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80)
3+
top / cover;
4+
/* background: url(https://i.ibb.co/TbFxMgn/man-min.jpg) top / cover; */
35
min-height: 100vh;
46
}
57

0 commit comments

Comments
 (0)