-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathparallaxTL.html
158 lines (135 loc) · 7.06 KB
/
parallaxTL.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html>
<head>
<title>Parallax, Timo's Bootstrap project - TL</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/laakkonen.css" rel="stylesheet">
<link href="css/parallax.css" rel="stylesheet">
<meta name="author" content="Timo Laakkonen">
</head>
<body class='mt-2 mb-2 ms-2 me-2'>
<main class="container-fluid" style='padding: 0px;'>
<header class='row' style="margin:0px">
<div class='mt-3'>
<h1>Timo's Bootstrap project</h1>
</div>
<div class='ps-1 pe-1'>
<nav class=" navbar navbar-dark navbar-expand-md mb-1 mt-1">
<button class="navbar-toggler ms-1" data-bs-toggle="collapse" data-bs-target="#navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse ms-1" id="navbar">
<ul class="navbar-nav">
<li class="nav-item"><a href="index.html" class="nav-link">My city</a></li>
<li class="nav-item"><a href="touristsTL.html" class="nav-link">Tourists</a></li>
<li class="nav-item"><a href="imagesTL.html" class="nav-link">Images</a></li>
<li class="nav-item"><a href="parallaxTL.html" class="nav-link active">Parallax</a></li>
<li class="nav-item"><a href="QuizTL.html" class="nav-link">Quiz</a></li>
<li class="nav-item"><a href="BMI.html" class="nav-link">BMI</a></li>
</ul>
</div>
</nav>
</div>
</header>
<section class='row mt-2'>
<div class=" col-12 myParallax">
<div id='bgimg-1' class="parallax">
<div class='caption'>
<span class='border'>Lorem ipsum dolor sit amet</span>
</div>
</div>
<div class='text'>
<h3>Lorem ipsum dolor sit amet</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu venenatis enim. Maecenas sagittis
arcu a odio finibus tempus. Mauris eleifend enim quis magna blandit, eget maximus metus accumsan.
Curabitur
ultrices eros in odio congue venenatis. Etiam eget nulla id diam semper feugiat. Cras luctus, velit vel
lacinia cursus, nunc nunc commodo neque, vel semper arcu sem et lectus. Integer tristique, nisi vel tempor
euismod, sapien odio volutpat felis, et fringilla urna risus et quam.
</p>
</div>
<div id='bgimg-2' class='parallax'>
<div class='caption'>
<span class='border'>Nulla condimentum nulla id ex placerat posuere</span>
</div>
</div>
<div class='text'>
<h3>Nulla condimentum nulla id ex placerat posuere</h3>
<p>
Nulla condimentum nulla id ex placerat posuere. Nam elit libero, dictum at sollicitudin vitae, rutrum nec
dolor. Aliquam vitae ipsum ornare, elementum odio a, rhoncus arcu. Etiam pulvinar fermentum augue, ut
volutpat mi faucibus sit amet. Pellentesque pulvinar ex non neque mollis, vel posuere dolor aliquam. Nulla
sodales blandit arcu ut aliquet. Pellentesque gravida feugiat massa. Praesent ac tellus sollicitudin,
rutrum
ex egestas, finibus est.
</p>
</div>
<div id='bgimg-3' class='parallax'>
<div class='caption'>
<span class='border'>Aliquam erat volutpat</span> </div>
</div>
<div class='text'>
<h3>Aliquam erat volutpat</h3>
<p>
Aliquam erat volutpat. Sed congue, urna vitae tempus rhoncus, tellus felis dapibus dolor, vitae eleifend
enim purus eu dolor. Donec eu massa in dolor ornare imperdiet eu non velit. Duis eleifend felis a auctor
fringilla. Maecenas dapibus faucibus magna nec pulvinar. Praesent ex ipsum, consequat non massa et,
venenatis mattis elit. Vestibulum id lacinia turpis. Pellentesque malesuada dolor ac justo pharetra
eleifend. Etiam fringilla imperdiet blandit. In vehicula dignissim erat sed sodales.
</p>
</div>
<div id='bgimg-4' class='parallax'>
<div class='caption'>
<span class='border'>Donec sollicitudin suscipit massa feugiat placerat</span>
</div>
</div>
<div class='text'>
<h3>Donec sollicitudin suscipit massa feugiat placerat</h3>
<p>
Donec sollicitudin suscipit massa feugiat placerat. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Nam elementum commodo odio. Ut molestie, velit eu elementum tristique, libero lorem porttitor diam,
sed aliquam felis augue eget sem. Aliquam ut nisi a lacus commodo ultricies id nec felis. Nunc rhoncus,
tortor vitae posuere molestie, sem diam dapibus mi, ut dictum lacus odio feugiat ligula. Vestibulum tempor
enim at imperdiet imperdiet. Nullam in libero sagittis, laoreet libero et, dapibus velit.
</p>
</div>
<div id='bgimg-5' class='parallax'>
<div class='caption'>
<span class='border'>Maecenas mollis placerat arcu</span>
</div>
</div>
<div class='text'>
<h3>Maecenas mollis placerat arcu</h3>
<p>
Maecenas mollis placerat arcu. Pellentesque bibendum fermentum neque, nec efficitur leo porta eget.
Vestibulum elementum sem rhoncus consequat convallis. Fusce neque sapien, hendrerit in augue ac, pulvinar
sollicitudin leo. Mauris augue ipsum, ullamcorper sed gravida ut, vehicula sodales odio. Etiam eleifend,
erat ac ultricies sodales, tortor orci commodo mi, id pulvinar metus mauris sit amet velit. Praesent enim
odio, cursus non porttitor a, molestie eu eros. Phasellus vitae nulla sit amet leo interdum dapibus.
Nullam eu cursus velit.
</p>
</div>
<footer class='row wide text-center mt-1' style="margin:0px">
<div class='col-md-6 text-md-start'>
<p>Timo Laakkonen<br>2021 </p>
</div>
<div class='col-md-6 text-md-end'>
<p>Bootstrap and jQuery</p>
</div>
</footer>
</div>
</section>
</main>
<!-- some Bootstrap components need popper.js library -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous">
</script>
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous">
</script>
</body>
</html>