-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (184 loc) · 6.85 KB
/
index.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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Stride Website</title>
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Press+Start+2P" rel="stylesheet" />
</head>
<body>
<div class="first">
<div class="navbar">
<div class="navbar__logoText">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-layers-half"
viewbox="0 0 16 16">
<path
d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z" />
</svg>
<h4>Stride</h4>
</div>
<div class="navbar__links">
<a class="navbar__link" href="/">About</a>
<a class="navbar__link" href="/">Image</a>
</div>
</div>
<img src="./img/img/interior11.jpg" />
<div class="first__overlayText">
<h2>
Sell more useless <br />
stuff faster!
</h2>
<p>
To be honest, this is just a stupid placeholder text. We don´t know
how to sell <br />
anything, not even lesser or slower as you.
</p>
<button>Get started free</button>
</div>
</div>
<div class="second">
<h4>
Okay, there are three really good reasons for us. <br />
There are no more than three, but we think three is <br />
a reasonable good number of good stuff.
</h4>
<div class="second__texts">
<div class="second__textsFirst">
<p>01.</p>
<div class="bordertop">
<h4>
We rented this fancy startup office in an old factory building.
</h4>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
culpa, voluptatibus ex itaque, sapiente a consequatur inventore
beatae, ipsam debitis omnis consequuntur iste asperiores.
Similique quisquam debitis corrupti deserunt, dolor.
</p>
</div>
</div>
<div class="second__textsSecond">
<p>02.</p>
<div class="bordertop">
<h4>
We don´t know exactly what we are doing. But thats good because we
can´t break something intentionally.
</h4>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
culpa, voluptatibus ex itaque, sapiente a consequatur inventore
beatae, ipsam debitis omnis consequuntur iste asperiores.
Similique quisquam debitis corrupti deserunt, dolor.
</p>
</div>
</div>
<div class="second__textsThird">
<p>03.</p>
<div class="bordertop">
<h4>
There is no real number three reason. So please read again number
one and two.
</h4>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus
culpa, voluptatibus ex itaque, sapiente a consequatur inventore
beatae, ipsam debitis omnis consequuntur iste asperiores.
Similique quisquam debitis corrupti deserunt, dolor.
</p>
</div>
</div>
</div>
</div>
<div id="third">
<div class="third__main">
<div class="third__images">
<img class="third__image1" src="./img/img/people15.jpg" />
<br />
<img class="third__image2" src="./img/img/interior42.jpg" />
<img class="third__image3" src="./img/img/people4.jpg" />
</div>
<div class="third__quote">
<h4>
We did some interesting stuff in <br />
our field of work. For example we <br />
collect a lot of these free photos <br />
and use them on our website.
</h4>
<p>
Donec id elit non mi porta gravida <br />
at eget metus. Fusce dapibus, tellus <br />ac cursus commodo, tortor
mauris condimentum nibh, <br />
ut fermentum massa justo sit amet risus.
</p>
</div>
</div>
</div>
<div class="fifth">
<div class="fifth__text">
<h3>Our magic numbers</h3>
</div>
<div class="fifth__stats">
<h3>
There are some important numbers for us. They are just numbers without
any meaning, but we just love them.
</h3>
<div class="fifth__statsNumbers">
<div class="fifth__statsNumbers1">
<h2>42%</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui.
</p>
</div>
<div class="fifth__statsNumbers2">
<h2>+300</h2>
<p>
Donec id elit non mi porta gravida at eget metus. Fusce dapibus,
tellus ac cursus commodo, tortor mauris condimentum nibh, ut
fermentum massa justo sit amet risus. Etiam porta sem malesuada
magna mollis euismod. Donec sed odio dui.
</p>
</div>
</div>
</div>
</div>
<div class="fourth">
<div class="fourth__images">
<img id="fourth__image1" src="./img/img/interior37.jpg" />
<img id="fourth__image2" src="./img/img/people1.jpg" />
<img id="fourth__image3" src="./img/img/people2.jpg" />
<img id="fourth__image4" src="./img/img/interior29.jpg" />
</div>
</div>
<div class="sixth">
<div class="sixth__text">
<h3>What our clients say</h3>
</div>
<div class="sixth__quote">
<h3>
“I´am the CEO of this company. So maybe you think "he will tell us
something super awesome about it only". But no. Its a really strange
place to work with creepy people all around. They do some computer
stuff I don´t understand. But I wear expensive Glasses and a Patagonia
Hoodie. So I´am fine with it.”
</h3>
</div>
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.documentElement.scrollTop > 2300) {
document.getElementById("fourth__image1").className = "fourth__image1Animate";
document.getElementById("fourth__image2").className = "fourth__image2Animate";
document.getElementById("fourth__image3").className = "fourth__image3Animate";
document.getElementById("fourth__image4").className = "fourth__image4Animate";
}
if (document.documentElement.scrollTop > 700) {
document.getElementById("third").className = "thirdAnimate";
}
}
</script>
</body>
</html>