-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
217 lines (210 loc) · 7.61 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
209
210
211
212
213
214
215
216
217
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Magic Shop Website MagX" />
<link rel="manifest" href="manifest.json" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
/>
<link rel="stylesheet" href="utils.css" />
<link rel="stylesheet" href="style.css" />
<title>MagX</title>
</head>
<body>
<!-- Navbar -->
<div class="navbar">
<div class="container flex">
<h1 class="logo text-light">MagX</h1>
<nav>
<ul>
<li><a class="text-light" href="#">Home</a></li>
<li>
<a class="text-light" href="#aboutSection">About Us</a>
</li>
<li>
<a class="text-light" href="#productSection">Products</a>
</li>
<li>
<a class="text-light" href="#contactSection">Contact</a>
</li>
</ul>
</nav>
</div>
</div>
<!-- hero section -->
<section class="hero">
<div class="container">
<div class="grid">
<div class="flex" data-aos="zoom-in">
<h1 class="text-primary">Feel the Magic</h1>
<p class="text-light">
Welcome to the MagX shop. We are the biggest supplier for magic
clothing and utilities.
</p>
<a class="btn" href="#aboutSection">
Learn more
<span><i class="fas fa-arrow-circle-down"></i></span>
</a>
</div>
</div>
</div>
</section>
<!-- about us -->
<section class="about" id="aboutSection">
<div class="container grid" style="overflow: hidden">
<!-- left element -->
<div class="element" data-aos="fade-right">
<h2 class="text-primary">About Us</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga quos
illum ad accusantium laudantium cum eaque nemo, eligendi maiores,
impedit placeat excepturi consectetur, voluptates dolorum! In porro
eveniet nulla, facilis blanditiis quisquam architecto modi minima
maiores alias eos, atque veritatis accusantium dolores quibusdam
nostrum! Laborum, quibusdam iure. Illo, officia sapiente?
</p>
<div class="about-list flex">
<div class="about-icons flex">
<i class="fas fa-hat-wizard fa-2x"></i>
<i class="fas fa-dice fa-2x"></i>
<i class="fas fa-magic fa-2x"></i>
</div>
<div class="about-icons-text text-primary">
<h3>The best magic clothing for young and old magicians</h3>
<h3>The best magic supplies, for small and big shows</h3>
<h3>Modern and old tricks</h3>
</div>
</div>
</div>
<!-- right element -->
<div class="element" data-aos="fade-left">
<img src="assets/t2.jpg" alt="" />
</div>
</div>
</section>
<!-- team section -->
<section class="team" id="teamSection">
<div class="container" style="overflow: hidden">
<h2 class="text-primary">Meet our team</h2>
<div class="grid grid-3">
<div class="hat-item">
<div class="hat"></div>
<div class="under">
<img src="assets/photo2.jpg" alt="hat" />
<h4 class="text-primary under-text">CEO, Jenna Bonne</h4>
</div>
</div>
<div class="hat-item">
<div class="hat"></div>
<div class="under">
<img src="assets/photo3.jpg" alt="hat" />
<h4 class="text-primary under-text">Salesmanager, Katy F</h4>
</div>
</div>
<div class="hat-item">
<div class="hat"></div>
<div class="under">
<img src="assets/photo.jpg" alt="hat" />
<h4 class="text-primary under-text">Magicman, John Doe</h4>
</div>
</div>
</div>
</div>
</section>
<!-- product section -->
<section class="products" id="productSection">
<div class="container">
<h2 class="text-primary">Our Products</h2>
<div class="cards grid">
<div class="card" data-aos="flip-left">
<img src="assets/marked.jpg" alt="" />
<h3>Marked carddeck</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h4>$49,99</h4>
</div>
<div class="card" data-aos="flip-right">
<img src="assets/book.jpg" alt="" />
<h3>Ancient magic book</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h4>$99,99</h4>
</div>
<div class="card" data-aos="flip-left">
<img src="assets/coin.jpg" alt="" />
<h3>Magic coins</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h4>$39,99</h4>
</div>
<div class="card" data-aos="flip-right">
<img src="assets/nimbus.png" alt="" />
<h3>Nimbus 2000</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h4>$999,99</h4>
</div>
</div>
<button class="btn">Download full catalogue</button>
</div>
</section>
<!-- contact section -->
<section class="contact" id="contactSection">
<div class="container flex">
<h1 class="text-primary">Contact Us</h1>
<div class="card" data-aos="flip-up">
<div class="flex">
<label for="name">Full name:</label>
<input type="text" id="name" />
<label for="mail">E-mail:</label>
<input type="email" id="mail" />
<label for="message">Your message:</label>
<textarea id="message"></textarea>
<button class="btn">Send message</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container flex">
<div>
<h1 class="text-light">MagX</h1>
<p class="text-light">Copyright © 2021</p>
</div>
<nav>
<ul>
<li><a class="text-light" href="#">Home</a></li>
<li><a class="text-light" href="#aboutSection">About Us</a></li>
<li><a class="text-light" href="#productSection">Products</a></li>
<li><a class="text-light" href="#contactSection">Contact</a></li>
</ul>
</nav>
<div class="social">
<a href="#"><i class="fab fa-facebook fa-2x text-light"></i></a>
<a href="#"><i class="fab fa-instagram fa-2x text-light"></i></a>
<a href="#"><i class="fab fa-twitter fa-2x text-light"></i></a>
<div class="designer flex">
<h4 class="text-light">Design by RomanJ55</h4>
<a href="https://github.com/RomanJ55"
><i class="fab fa-github text-light"></i
></a>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<script>
AOS.init({
delay: 200,
duration: 1000,
once: false,
});
</script>
</body>
</html>