-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (120 loc) · 6.55 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MAQ Quotes</title>
<link rel="stylesheet" href="css-files/mainstyles.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
</head>
<body>
<div class="container1">
<div class="overlay1">
<!-- heading -->
<header>
<div class="logo">MAQ Quotes</div>
<nav class="navbar">
<div class="hamburger" id="hamburger">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<ul class="menu" id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="famousquotes.html">Famous Quotes</a></li>
<li><a href="it.html">Interesting Topics</a></li>
<li><a href="about.html">About me</a></li>
</ul>
</nav>
</header>
<!-- -->
<h1 class="head1"> MAQ </h1><h1 class="head1"> MAQ </h1> <h1 class="head2">Quotes</h1>
<img src="images/—Pngtree—a cube crystal ice cube_5795205.png" alt="cube 1" class="cubes cube1 " id="myImage">
<img src="images/—Pngtree—cartoon cube_4734920.png" alt="cube 2" class="cubes cube2 " id="myImage">
<img src="images/icecube 4.png" alt="cube 3" class="cubes cube3" id="myImage">
<img src="images/—Pngtree—transparent ice cubes and fresh_5746096.png" alt="cube 4" class="cubes cube4" id="myImage">
<img src="images/—Pngtree—a cube crystal ice cube_5795205.png" alt="cube 5" class="cubes cube5 " id="myImage">
<img src="images/—Pngtree—cartoon cube_4734920.png" alt="cube 6" class="cubes cube6 " id="myImage">
<img src="images/—Pngtree—transparent ice cubes_5611265.png" alt="cube 7" class="cubes cube7" id="myImage">
<p class="belowhead">people tend to create good and motivational quotes , <br>
but below are some quotes expressing the harsh reality
</p>
</div>
</div>
<!-- fading sections -->
<div class="container3">
<span class="mid-quote">" People have a heart similar to the ice . <br>
They either melt away or go rigid <br>
depending on the environment. "<br> <p>~MAQ</p> </span>
</div>
<div class="container4">
</div>
<!-- -->
<div class="container2">
<div class="overlay2">
<div class="quotessection active">
<!-- Quotes -->
<div id="quote1" class="quote-box" >
<p> Wake up to reality , for everything you see is already an illusion. </p>
<cite>MAQ ~3/23</cite>
</div>
<div id="quote2" class="quote-box" >
<p> Everything is bounded by something .
<br>
If a man is ready to jump off a cliff , he is bounded
by the fear of living ;
if someone gained a vast sum of wealth , he's bounded by the fear of losing it.
In the end ... fear is what bounds us without us even realizing it . </p>
<cite>MAQ ~4/23</cite>
</div>
<div id="quote3" class="quote-box" >
<p> Every person has a different perspective of the world . Each cruel in its own way .</p>
<cite>MAQ ~8/23</cite>
</div>
<div id="quote4" class="quote-box" >
<p> True maturity is recognizing how much your actions affect you .
<br>
To understand that ur actions could cause consequences is what will result
in a better you . All the ettiquettes and manners revolve around it .
Knowing when do to what and visualising the possible wrong outcomes is what makes a man smart. </p>
<cite>MAQ ~8/23</cite>
</div>
</div>
<div class="quotessection_2">
<!-- Quotes -->
<div id="quote1" class="quote-box" >
<p> Wake up to reality , for everything you see is already an illusion. </p>
<cite>MAQ ~3/23</cite>
</div>
<div id="quote2" class="quote-box" >
<p> Everything is bounded by something .
<br>
If a man is ready to jump off a cliff , he is bounded
by the fear of living ;
if someone gained a vast sum of wealth , he's bounded by the fear of losing it.
In the end ... fear is what bounds us without us even realizing it . </p>
<cite>MAQ ~4/23</cite>
</div>
<div id="quote3" class="quote-box" >
<p> Every person has a different perspective of the world . Each cruel in its own way .</p>
<cite>MAQ ~8/23</cite>
</div>
<div id="quote4" class="quote-box" >
<p> True maturity is recognizing how much your actions affect you .
<br>
To understand that ur actions could cause consequences is what will result
in a better you . All the ettiquettes and manners revolve around it .
Knowing when do to what and visualising the possible wrong outcomes is what makes a man smart. </p>
<cite>MAQ ~8/23</cite>
</div>
</div>
<br> <br> <br> <br> <br>
</div>
</div>
<footer>
<script src="js-files/mainapp.js"></script>
</footer>
</body>
</html>