-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (141 loc) · 6.68 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
<!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>Guitar House</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/media.css">
<link href="https://fonts.googleapis.com/css2?family=Berkshire+Swash&family=Montserrat:wght@500&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/88b18bb1d4.js" crossorigin="anonymous"></script>
</head>
<body>
<!------------------------------------- PRELOADER ------------------------------------->
<div class="preloader">
<div class="preloader-container">
<span class="preloader-text">LOADING</span>
<span class="preloader-circle"></span>
</div>
</div>
<!------------------------------------- NAVIGATION ------------------------------------->
<nav>
<div class="nav-container section-center">
<div class="nav-heading">
<div class="logo">
<img src="images/logo.svg" alt="logo">
<div>Guitar House</div>
</div>
<button class="nav-menu-toggle-btn">
<span class="btn-line-1"></span>
<span class="btn-line-2"></span>
<span class="btn-line-3"></span>
</button>
</div>
<ul class="nav-menu">
<li><a href="#home" class="scroll-link">Home</a></li>
<li><a href="#guitars" class="scroll-link">Products</a></li>
<li><a href="#about" class="scroll-link">About</a></li>
</ul>
<div class="cart-btn-wrapper">
<button class="cart-btn">
<i class="fas fa-cart-plus"></i>
</button>
<span class="cart-items-count">0</span>
</div>
</div>
</nav>
<!------------------------------------- HEADER ------------------------------------->
<header id="home">
<div class="intro">
<h1>Guitar Collection</h1>
<p>You will like with us</p>
<a href="#guitars" class="scroll-link">Show now</a>
</div>
</header>
<!------------------------------------- SECTION - PRODUCTS ------------------------------------->
<section id="guitars" class="section">
<h2><span class="underline">Our Guitars</span></h2>
<div class="filter-btns"></div>
<div class="products-container section-center"></div>
</section>
<!------------------------------------- SECTION - ABOUT ------------------------------------->
<section id="about" class="section">
<h2><span class="underline">About us</h2>
<div class="section-center">
<blockquote class="blockquote">
<p>
<span><i class="fas fa-quote-left"></i></span> Sometimes the best thing you can do with a guitar is just stare at it..."
</p>
</blockquote>
<div class="slider">
<img src="images/slider/slide-1.jpg" alt="guitar-house" class="slide">
<img src="images/slider/slide-2.jpg" alt="guitar-player" class="slide">
<img src="images/slider/slide-3.jpg" alt="guitar-girl" class="slide">
<img src="images/slider/slide-4.jpg" alt="guitar-girl" class="slide">
<img src="images/slider/slide-5.jpg" alt="restringing" class="slide">
<div class="slider-btns">
<button class="left-slider-btn">
<i class="fas fa-chevron-left"></i>
</button>
<button class="right-slider-btn">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div>
<p class="text-content">
We are a small boutique store that provides a rich collection of acoustic instruments. Among our guitars there are quite rare and vintage instruments. There are also more common models that you can find in other guitar stores. You can come, see our collection, play any instruments that you like, and of course buy them if you want.
</p>
<p class="text-content">
All our instruments are in excellent condition. We constantly serve them and keep them clean and tidy. We have no bad non-playable instruments and you will immediately see this. Therefore, we are waiting for you at our store and we guarantee that you will be satisfied.
</p>
<p class="text-content">
To find out more information about us and ask questions, you can write to us on our email:<br> <span>zmagar91@gmail.com</span>
</p>
<!--ANIMATION-->
<div class="circles">
<span class="circle"></span>
<span class="circle"></span>
<span class="circle"></span>
</div>
<!--END OF ANIMATION-->
</div>
</section>
<!------------------------------------- SINGLE PRODUCT ------------------------------------->
<div class="single-product-overlay">
<div class="single-product"></div>
</div>
<!------------------------------------- CART -------------------------------------->
<div class="cart-overlay">
<div class="cart">
<button class="close-cart-btn">
<i class="fas fa-times"></i>
</button>
<h3>Your cart</h3>
<div class="cart-items"></div>
<div class="cart-footer">
<h3>Total: <span class="cart-total"></span></h3>
<button class="clear-cart-btn">Clear cart</button>
</div>
</div>
</div>
<!------------------------------------- FOOTER ------------------------------------->
<footer class="footer">
<div class="section-center">
<div class="logo">
<img src="images/logo.svg" alt="logo">
<div>Guitar House</div>
</div>
<div class="straight-line"></div>
<p class="copyright">
© <span class="date"></span> Drazhin Ustin Project<br>
Email: zmagar91@qmail.com<br>
All rights are reserved
</p>
</div>
</footer>
<!------------------------------------- SCRIPT ------------------------------------->
<script src="https://cdn.jsdelivr.net/npm/contentful@latest/dist/contentful.browser.min.js"></script>
<script type="module" src="js/app.js"></script>
</body>
</html>