-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
179 lines (163 loc) · 8.66 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
<!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, minimum-scale=1">
<meta name="description" content="Responsive Parallax Scrolling Webiste inspired by Sailor Moon">
<title>Responsive Parallax Scrolling Webiste</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="mobile-tablet.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/536ff07e99.js" crossorigin="anonymous"></script>
</head>
<body>
<header class="head">
<a href="#" class="head-logo">Moon Kingdom</a>
<div class="toggle"></div>
<ul class="navigation">
<li><a href="#" class="home active">Home</a></li>
<li><a href="#about" class="btn-menu">About</a></li>
<li><a href="#blog" class="btn-menu">Blog</a></li>
<li><a href="#contact" class="btn-menu">Contact</a></li>
<li><a href="#footer" class="btn-menu">Socials</a></li>
</ul>
</header>
<div class="main">
<img src="img/stars.png" alt="background with stars" class="stars">
<img src="img/base.png" alt="base ground" class="base">
<img src="img/mountainleft.png" alt="mountain" class="mountain-left">
<img src="img/mountainright.png" alt="mountain" class="mountain-right">
<img src="img/moon.png" alt="moon" class="moon">
<img src="img/planet1.png" alt="planet" class="planet1">
<img src="img/planet2.png" alt="planet" class="planet2">
<img src="img/crystal1.png" alt="crystal" class="crystal2">
<img src="img/crystal2.png" alt="crystal" class="crystal1">
<img src="img/usagi.png" alt="sailor moon silhouette" class="usagi">
</div>
<section class="about" id="about">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Id laboriosam iure minus, iusto facere explicabo rem
modi
qui fuga sint maxime porro exercitationem recusandae velit! Consequuntur corporis temporibus eius quisquam!
Iure accusamus sint, aspernatur rem cum est quo exercitationem ipsam nostrum nihil nobis velit sunt id. Eum
consequatur provident temporibus vel soluta illum commodi aspernatur, blanditiis possimus, quaerat consequuntur
exercitationem.
Delectus rerum optio aperiam nemo nulla unde deserunt eius itaque minus officiis dolorum sed assumenda sit, fuga
molestias harum cumque id non et ducimus laboriosam? Doloremque atque exercitationem rerum dolor?
Pariatur consequuntur mollitia dolores fugit vitae beatae illo. Totam inventore, odio harum dolorum doloremque
ducimus explicabo, saepe hic ea error itaque veritatis nemo cupiditate sequi blanditiis et commodi, nesciunt
ipsum.
Exercitationem, vero. Sit doloribus molestias illo ipsam dolor voluptate iure vitae! Voluptatem harum inventore
blanditiis nemo soluta itaque autem possimus earum deleniti cum fugit, mollitia quia eaque praesentium! Earum,
cupiditate.
Distinctio, nesciunt! Sequi nobis quo deleniti sit aliquid consequatur iusto blanditiis nostrum, adipisci odio
placeat. Cupiditate alias nobis, reprehenderit, sed quisquam placeat repellat illum tempore, excepturi odio
delectus. Itaque, voluptatem.
Incidunt, ut, id officiis quas iure quia delectus, fuga in inventore veritatis corrupti architecto. Distinctio
minima laboriosam magnam excepturi aut nam, molestias, velit inventore, ea atque esse! Veniam, neque ipsam.
Debitis neque molestias, minima enim dolorem quaerat tempore fugiat architecto deserunt aspernatur eius facere,
cum,
natus autem ut animi voluptatibus distinctio. Recusandae id aspernatur, incidunt quas animi impedit eligendi
eaque?
Dolorem molestias veritatis reprehenderit animi enim doloremque alias nisi expedita harum eius, cupiditate
mollitia,
dolore quo similique a pariatur sed ut repudiandae eligendi laboriosam fuga libero, sunt tempore. Maiores, animi?
Natus ex impedit a veniam excepturi eveniet, soluta nam alias id vitae similique tempora nulla aspernatur pariatur
quod quo assumenda, cupiditate doloribus sint consequuntur. Perspiciatis harum aperiam iste repellendus eius.
Error dolorem, cupiditate deleniti, ullam voluptatibus facere voluptate exercitationem excepturi quam, ratione
atque
nemo sunt dolore harum recusandae? Ea saepe id laboriosam necessitatibus vero modi provident dolorem
exercitationem
quasi fugiat?
Delectus rerum optio aperiam nemo nulla unde deserunt eius itaque minus officiis dolorum sed assumenda sit, fuga
molestias harum cumque id non et ducimus laboriosam? Doloremque atque exercitationem rerum dolor?
Pariatur consequuntur mollitia dolores fugit vitae beatae illo. Totam inventore, odio harum dolorum doloremque
ducimus explicabo, saepe hic ea error itaque veritatis nemo cupiditate sequi blanditiis et commodi, nesciunt
ipsum.
</p>
</section>
<div class="container-bg">
<div class="bg first"></div>
</div>
<section class="blog" id="blog">
<h2>Blog</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam tenetur nostrum perspiciatis aut nulla, nemo, id
expedita repellat porro inventore aliquid distinctio architecto quo. Molestias sed ut exercitationem voluptate
odit!
Quos, iusto, id hic consequatur neque quod porro aut natus ducimus dolorem optio ea accusantium animi non vel
inventore pariatur ratione quis. Nulla maiores, eos iure molestiae explicabo quam cupiditate!
Vero, deleniti, dolorem blanditiis inventore eligendi, consequuntur illo ullam dignissimos impedit molestias
sapiente voluptatibus totam id assumenda delectus ipsa neque numquam commodi nostrum obcaecati exercitationem eius
at! Sint, cupiditate voluptate!
Rerum dolorum cupiditate iste minima aliquid neque sed corporis assumenda, ut dolores quo nisi excepturi
aspernatur
possimus nostrum ea dolore voluptate quos eaque aperiam veniam asperiores recusandae. Itaque, repellendus ipsum!
Officia corrupti est harum eligendi illo, voluptas quos pariatur consequatur animi rerum laborum accusantium
accusamus inventore aperiam, ipsa sapiente dolores obcaecati dicta voluptatum provident quibusdam, ducimus
excepturi
maiores cumque. Aliquam.
Assumenda vero culpa alias saepe adipisci modi molestiae ab at ipsum nostrum rem perspiciatis cumque
exercitationem
facere perferendis error quam nesciunt nihil, eum placeat temporibus necessitatibus consequatur! Eius, suscipit
aliquam.
</p>
<div class="cards">
<div class="card img1"></div>
<div class="card img2"></div>
<div class="card img3"></div>
</div>
</section>
<div class="container-bg">
<div class="bg second"></div>
</div>
<section class="contact" id="contact">
<h2>Contact</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam tenetur nostrum perspiciatis aut nulla, nemo, id
expedita repellat porro inventore aliquid distinctio architecto quo. Molestias sed ut exercitationem voluptate
odit!
</p>
<div class="contact-card">
<h3 class="contact-header">Contact</h3>
<form action="#" class="contact-form">
<input type="email" placeholder="Email">
<textarea placeholder="Message" type="text"></textarea>
<button type="submit" form="contact-form" value="Send">SEND</button>
</form>
</div>
</section>
<div class="container-bg">
<div class="bg third">
<div class="background-glass">
<h1 class="glass-title">Crystal Moon</h1>
</div>
</div>
</div>
<div class="footer" id="footer">
<div class="footer-socials">
<a href="#" class="btn-social" title="Sprawdź na instagramie!">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="btn-social" title="Sprawdź na facebooku!">
<i class="fa-brands fa-facebook"></i>
</a>
<a href="https://www.youtube.com/watch?v=7P3Ji5TieLI&ab_channel=Akasha" class="btn-social"
title="Sprawdź na youtubie!">
<i class="fa-brands fa-youtube"></i>
</a>
</div>
<p class="copyright">© Moon Kingdom made with 🌙 by <a class="github"
href="https://github.com/xAkashax?tab=projects"> xAkashax</a>
</p>
</div>
<div class="scroll-up">
<a href="#" class="arrow" aria-label="scroll to top">
<i class="fa fa-angle-up"></i>
</a>
</div>
<script src="app.js"></script>
</body>
</html>