├── image
    ├── blog-1.jpg
    ├── blog-2.jpg
    ├── blog-3.jpg
    ├── blog-4.jpg
    ├── blog-5.jpg
    ├── book-1.png
    ├── book-2.png
    ├── book-3.png
    ├── book-4.png
    ├── book-5.png
    ├── book-6.png
    ├── book-7.png
    ├── book-8.png
    ├── book-9.png
    ├── book3.png
    ├── book5.png
    ├── book7.png
    ├── pic-1.png
    ├── pic-2.png
    ├── pic-3.png
    ├── pic-4.png
    ├── pic-5.png
    ├── pic-6.png
    ├── stand.png
    ├── banner-bg.jpg
    ├── book-10.png
    ├── deal-img.jpg
    ├── letter-bg.jpg
    ├── worldmap.png
    ├── loader-img.gif
    └── avatar-png-11554021661asazhxmdnu.png
├── js
    └── script.js
├── css
    └── style.css
└── index.html


/image/blog-1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/blog-1.jpg


--------------------------------------------------------------------------------
/image/blog-2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/blog-2.jpg


--------------------------------------------------------------------------------
/image/blog-3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/blog-3.jpg


--------------------------------------------------------------------------------
/image/blog-4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/blog-4.jpg


--------------------------------------------------------------------------------
/image/blog-5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/blog-5.jpg


--------------------------------------------------------------------------------
/image/book-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book-1.png


--------------------------------------------------------------------------------
/image/book-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book-2.png


--------------------------------------------------------------------------------
/image/book-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book-3.png


--------------------------------------------------------------------------------
/image/book-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book-4.png


--------------------------------------------------------------------------------
/image/book-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book-5.png


--------------------------------------------------------------------------------
/image/book-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book-6.png


--------------------------------------------------------------------------------
/image/book-7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book-7.png


--------------------------------------------------------------------------------
/image/book-8.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book-8.png


--------------------------------------------------------------------------------
/image/book-9.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book-9.png


--------------------------------------------------------------------------------
/image/book3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book3.png


--------------------------------------------------------------------------------
/image/book5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book5.png


--------------------------------------------------------------------------------
/image/book7.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book7.png


--------------------------------------------------------------------------------
/image/pic-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/pic-1.png


--------------------------------------------------------------------------------
/image/pic-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/pic-2.png


--------------------------------------------------------------------------------
/image/pic-3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/pic-3.png


--------------------------------------------------------------------------------
/image/pic-4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/pic-4.png


--------------------------------------------------------------------------------
/image/pic-5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/pic-5.png


--------------------------------------------------------------------------------
/image/pic-6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/pic-6.png


--------------------------------------------------------------------------------
/image/stand.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/stand.png


--------------------------------------------------------------------------------
/image/banner-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/banner-bg.jpg


--------------------------------------------------------------------------------
/image/book-10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/book-10.png


--------------------------------------------------------------------------------
/image/deal-img.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/deal-img.jpg


--------------------------------------------------------------------------------
/image/letter-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/letter-bg.jpg


--------------------------------------------------------------------------------
/image/worldmap.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/worldmap.png


--------------------------------------------------------------------------------
/image/loader-img.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/loader-img.gif


--------------------------------------------------------------------------------
/image/avatar-png-11554021661asazhxmdnu.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ABUBAKARTARSUM/BookStore/HEAD/image/avatar-png-11554021661asazhxmdnu.png


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
  1 | searchForm = document.querySelector('.search-form');
  2 | 
  3 | document.querySelector('#search-btn').onclick = () =>{
  4 |   searchForm.classList.toggle('active');
  5 | }
  6 | 
  7 | let loginForm = document.querySelector('.login-form-container');
  8 | 
  9 | document.querySelector('#login-btn').onclick = () =>{
 10 |   loginForm.classList.toggle('active');
 11 | }
 12 | 
 13 | document.querySelector('#close-login-btn').onclick = () =>{
 14 |   loginForm.classList.remove('active');
 15 | }
 16 | 
 17 | window.onscroll = () =>{
 18 | 
 19 |   searchForm.classList.remove('active');
 20 | 
 21 |   if(window.scrollY > 80){
 22 |     document.querySelector('.header .header-2').classList.add('active');
 23 |   }else{
 24 |     document.querySelector('.header .header-2').classList.remove('active');
 25 |   }
 26 | 
 27 | }
 28 | 
 29 | window.onload = () =>{
 30 | 
 31 |   if(window.scrollY > 80){
 32 |     document.querySelector('.header .header-2').classList.add('active');
 33 |   }else{
 34 |     document.querySelector('.header .header-2').classList.remove('active');
 35 |   }
 36 | 
 37 |   fadeOut();
 38 | 
 39 | }
 40 | 
 41 | function loader(){
 42 |   document.querySelector('.loader-container').classList.add('active');
 43 | }
 44 | 
 45 | function fadeOut(){
 46 |   setTimeout(loader, 4000);
 47 | }
 48 | 
 49 | var swiper = new Swiper(".books-slider", {
 50 |   loop:true,
 51 |   centeredSlides: true,
 52 |   autoplay: {
 53 |     delay: 9500,
 54 |     disableOnInteraction: false,
 55 |   },
 56 |   breakpoints: {
 57 |     0: {
 58 |       slidesPerView: 1,
 59 |     },
 60 |     768: {
 61 |       slidesPerView: 2,
 62 |     },
 63 |     1024: {
 64 |       slidesPerView: 3,
 65 |     },
 66 |   },
 67 | });
 68 | 
 69 | var swiper = new Swiper(".featured-slider", {
 70 |   spaceBetween: 10,
 71 |   loop:true,
 72 |   centeredSlides: true,
 73 |   autoplay: {
 74 |     delay: 9500,
 75 |     disableOnInteraction: false,
 76 |   },
 77 |   navigation: {
 78 |     nextEl: ".swiper-button-next",
 79 |     prevEl: ".swiper-button-prev",
 80 |   },
 81 |   breakpoints: {
 82 |     0: {
 83 |       slidesPerView: 1,
 84 |     },
 85 |     450: {
 86 |       slidesPerView: 2,
 87 |     },
 88 |     768: {
 89 |       slidesPerView: 3,
 90 |     },
 91 |     1024: {
 92 |       slidesPerView: 4,
 93 |     },
 94 |   },
 95 | });
 96 | 
 97 | var swiper = new Swiper(".arrivals-slider", {
 98 |   spaceBetween: 10,
 99 |   loop:true,
100 |   centeredSlides: true,
101 |   autoplay: {
102 |     delay: 9500,
103 |     disableOnInteraction: false,
104 |   },
105 |   breakpoints: {
106 |     0: {
107 |       slidesPerView: 1,
108 |     },
109 |     768: {
110 |       slidesPerView: 2,
111 |     },
112 |     1024: {
113 |       slidesPerView: 3,
114 |     },
115 |   },
116 | });
117 | 
118 | var swiper = new Swiper(".reviews-slider", {
119 |   spaceBetween: 10,
120 |   grabCursor:true,
121 |   loop:true,
122 |   centeredSlides: true,
123 |   autoplay: {
124 |     delay: 9500,
125 |     disableOnInteraction: false,
126 |   },
127 |   breakpoints: {
128 |     0: {
129 |       slidesPerView: 1,
130 |     },
131 |     768: {
132 |       slidesPerView: 2,
133 |     },
134 |     1024: {
135 |       slidesPerView: 3,
136 |     },
137 |   },
138 | });
139 | 
140 | var swiper = new Swiper(".blogs-slider", {
141 |   spaceBetween: 10,
142 |   grabCursor:true,
143 |   loop:true,
144 |   centeredSlides: true,
145 |   autoplay: {
146 |     delay: 9500,
147 |     disableOnInteraction: false,
148 |   },
149 |   breakpoints: {
150 |     0: {
151 |       slidesPerView: 1,
152 |     },
153 |     768: {
154 |       slidesPerView: 2,
155 |     },
156 |     1024: {
157 |       slidesPerView: 3,
158 |     },
159 |   },
160 | });


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600&display=swap');
  2 | 
  3 | :root{
  4 |     --green:#27ae60;
  5 |     --dark-color:#219150;
  6 |     --black:#444;
  7 |     --light-color:#666;
  8 |     --border:.1rem solid rgba(0,0,0,.1);
  9 |     --border-hover:.1rem solid var(--black);
 10 |     --box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
 11 | }
 12 | 
 13 | *{
 14 |     font-family: 'Poppins', sans-serif;
 15 |     margin:0; padding:0;
 16 |     box-sizing: border-box;
 17 |     outline: none; border:none;
 18 |     text-decoration: none;
 19 |     text-transform: capitalize;
 20 |     transition:all .2s linear;
 21 |     transition:width none;
 22 | }
 23 | 
 24 | html{
 25 |     font-size: 62.5%;
 26 |     overflow-x: hidden;
 27 |     scroll-padding-top: 5rem;
 28 |     scroll-behavior: smooth;
 29 | }
 30 | html::-webkit-scrollbar{
 31 |     width:1rem;
 32 | }
 33 | 
 34 | html::-webkit-scrollbar-track{
 35 |     background:transparent;
 36 | }
 37 | 
 38 | html::-webkit-scrollbar-thumb{
 39 |     background:var(--black);
 40 | }
 41 | 
 42 | section{
 43 |     padding:5rem 9%;
 44 | }
 45 | 
 46 | .heading{
 47 |     text-align: center;
 48 |     margin-bottom: 2rem;
 49 |     position: relative;
 50 | }
 51 | 
 52 | .heading::before{
 53 |     content: '';
 54 |     position: absolute;
 55 |     top:50%; left:0;
 56 |     transform: translateY(-50%);
 57 |     width: 100%;
 58 |     height:.01rem;
 59 |     background: rgba(0,0,0,.1);
 60 |     z-index: -1;
 61 | }
 62 | 
 63 | .heading span{
 64 |     font-size: 3rem;
 65 |     padding:.5rem 2rem;
 66 |     color:var(--black);
 67 |     background: #fff;
 68 |     border:var(--border);
 69 | }
 70 | 
 71 | .btn{
 72 |     margin-top: 1rem;
 73 |     display:inline-block;
 74 |     padding:.9rem 3rem;
 75 |     border-radius: .5rem;
 76 |     color:#fff;
 77 |     background:var(--green);
 78 |     font-size: 1.7rem;
 79 |     cursor: pointer;
 80 |     font-weight: 500;
 81 | }
 82 | 
 83 | .btn:hover{
 84 |     background:var(--dark-color);
 85 | }
 86 | 
 87 | .header .header-1{
 88 |     background:#fff;
 89 |     padding:1.5rem 9%;
 90 |     display: flex;
 91 |     align-items: center;
 92 |     justify-content: space-between;
 93 | }
 94 | 
 95 | .header .header-1 .logo{
 96 |     font-size: 2.5rem;
 97 |     font-weight: bolder;
 98 |     color:var(--black);
 99 | }
100 | 
101 | .header .header-1 .logo i{
102 |     color:var(--green);
103 | }
104 | 
105 | .header .header-1 .search-form{
106 |     width:50rem;
107 |     height:5rem;
108 |     border:var(--border);
109 |     overflow: hidden;
110 |     background:#fff;
111 |     display:flex;
112 |     align-items: center;
113 |     border-radius: .5rem;
114 | }
115 | 
116 | .header .header-1 .search-form input{
117 |     font-size: 1.6rem;
118 |     padding:0 1.2rem;
119 |     height:100%;
120 |     width:100%;
121 |     text-transform: none;
122 |     color:var(--black);
123 | }
124 | 
125 | .header .header-1 .search-form label{
126 |     font-size: 2.5rem;
127 |     padding-right: 1.5rem;
128 |     color:var(--black);
129 |     cursor: pointer;
130 | }
131 | 
132 | .header .header-1 .search-form label:hover{
133 |     color:var(--green);
134 | }
135 | 
136 | .header .header-1 .icons div,
137 | .header .header-1 .icons a{
138 |     font-size: 2.5rem;
139 |     margin-left: 1.5rem;
140 |     color:var(--black);
141 |     cursor: pointer;
142 | }
143 | 
144 | .header .header-1 .icons div:hover,
145 | .header .header-1 .icons a:hover{
146 |     color:var(--green);
147 | }
148 | 
149 | #search-btn{
150 |     display: none;
151 | }
152 | 
153 | .header .header-2{
154 |     background:var(--green);
155 | }
156 | 
157 | .header .header-2 .navbar{
158 |     text-align: center;
159 | }
160 | 
161 | .header .header-2 .navbar a{
162 |     color:#fff;
163 |     display: inline-block;
164 |     padding:1.2rem;
165 |     font-size: 1.7rem;
166 | }
167 | 
168 | .header .header-2 .navbar a:hover{
169 |     background:var(--dark-color);
170 | }
171 | 
172 | .header .header-2.active{
173 |     position:fixed;
174 |     top:0; left:0; right:0;
175 |     z-index: 1000;
176 | 
177 | }
178 | 
179 | .bottom-navbar{
180 |     text-align: center;
181 |     background:var(--green);
182 |     position: fixed;
183 |     bottom:0; left:0; right:0;
184 |     z-index: 1000;
185 |     display: none;
186 | }
187 | 
188 | .bottom-navbar a{
189 |     font-size: 2.5rem;
190 |     padding:2rem;
191 |     color:#fff;
192 | }
193 | 
194 | .bottom-navbar a:hover{
195 |     background:var(--dark-color);
196 | }
197 | 
198 | .login-form-container{
199 |     display: flex;
200 |     align-items: center;
201 |     justify-content: center;
202 |     background:rgba(255,255,255,.9);
203 |     position:fixed;
204 |     top:0; right:-105%;
205 |     z-index: 10000;
206 |     height:100%;
207 |     width:100%;
208 | }
209 | 
210 | .login-form-container.active{
211 |     right:0;
212 | }
213 | 
214 | .login-form-container form{
215 |     background:#fff;
216 |     border:var(--border);
217 |     width:40rem;
218 |     padding:2rem;
219 |     box-shadow: var(--box-shadow);
220 |     border-radius: .5rem;
221 |     margin:2rem;
222 | }
223 | 
224 | .login-form-container form h3{
225 |     font-size: 2.5rem;
226 |     text-transform: uppercase;
227 |     color:var(--black);
228 |     text-align: center;
229 | }
230 | 
231 | .login-form-container form span{
232 |     display: block;
233 |     font-size: 1.5rem;
234 |     padding-top: 1rem;
235 | }
236 | 
237 | .login-form-container form .box{
238 |     width: 100%;
239 |     margin:.7rem 0;
240 |     font-size: 1.6rem;
241 |     border:var(--border);
242 |     border-radius: .5rem;
243 |     padding:1rem 1.2rem;
244 |     color:var(--black);
245 |     text-transform: none;
246 | }
247 | 
248 | .login-form-container form .checkbox{
249 |     display:flex;
250 |     align-items: center;
251 |     gap:.5rem;
252 |     padding:1rem 0;
253 | }
254 | 
255 | .login-form-container form .checkbox label{
256 |     font-size: 1.5rem;
257 |     color:var(--light-color);
258 |     cursor: pointer;
259 | }
260 | 
261 | .login-form-container form .btn{
262 |     text-align: center;
263 |     width:100%;
264 |     margin:1.5rem 0;
265 | }
266 | 
267 | .login-form-container form p{
268 |     padding-top: .8rem;
269 |     color:var(--light-color);
270 |     font-size: 1.5rem;
271 | }
272 | 
273 | .login-form-container form p a{
274 |     color:var(--green);
275 |     text-decoration: underline;
276 | }
277 | 
278 | .login-form-container #close-login-btn{
279 |     position: absolute;
280 |     top:1.5rem; right:2.5rem;
281 |     font-size: 5rem;
282 |     color:var(--black);
283 |     cursor: pointer;
284 | }
285 | 
286 | .home{
287 |     background: url(../image/banner-bg.jpg) no-repeat;
288 |     background-size: cover;
289 |     background-position: center;
290 | }
291 | 
292 | .home .row{
293 |     display:flex;
294 |     align-items: center;
295 |     flex-wrap: wrap;
296 |     gap:1.5rem;
297 | }
298 | 
299 | .home .row .content{
300 |     flex:1 1 42rem;
301 | }
302 | 
303 | .home .row .books-slider{
304 |     flex:1 1 42rem;
305 |     text-align: center;
306 |     margin-top: 2rem;
307 | }
308 | 
309 | .home .row .books-slider a img{
310 |     height: 25rem;
311 | }
312 | 
313 | .home .row .books-slider a:hover img{
314 |     transform: scale(.9);
315 | }
316 | 
317 | .home .row .books-slider .stand{
318 |     width:100%;
319 |     margin-top: -2rem;
320 | }
321 | 
322 | .home .row .content h3{
323 |     color:var(--black);
324 |     font-size: 4.5rem;
325 | }
326 | 
327 | .home .row .content p{
328 |     color:var(--light-color);
329 |     font-size: 1.4rem;
330 |     line-height: 2;
331 |     padding:1rem 0;
332 | }
333 | 
334 | .icons-container{
335 |     display: grid;
336 |     grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
337 |     gap:1.5rem;
338 | }
339 | 
340 | .icons-container .icons{
341 |     display: flex;
342 |     align-items: center;
343 |     gap:1.5rem;
344 |     padding:2rem 0;
345 | }
346 | 
347 | .icons-container .icons i{
348 |     font-size: 3.5rem;
349 |     color:var(--green);
350 | }
351 | 
352 | .icons-container .icons h3{
353 |     font-size: 2.2rem;
354 |     color:var(--black);
355 |     padding-bottom: .5rem;
356 | }
357 | 
358 | .icons-container .icons p{
359 |     font-size: 1.4rem;
360 |     color:var(--light-color);
361 | }
362 | 
363 | .featured .featured-slider .box{
364 |     margin:2rem 0;
365 |     position: relative;
366 |     overflow: hidden;
367 |     border:var(--border);
368 |     text-align: center;
369 | }
370 | 
371 | .featured .featured-slider .box:hover{
372 |     border:var(--border-hover);
373 | }
374 | 
375 | .featured .featured-slider .box .image{
376 |     padding:1rem;
377 |     background: linear-gradient(15deg, #eee 30%, #fff 30.1%);
378 | }
379 | 
380 | .featured .featured-slider .box:hover .image{
381 |     transform: translateY(6rem);
382 | }
383 | 
384 | .featured .featured-slider .box .image img{
385 |     height: 25rem;
386 | }
387 | 
388 | .featured .featured-slider .box .icons{
389 |     border-bottom: var(--border-hover);
390 |     position: absolute;
391 |     top:0; left:0; right: 0;
392 |     background: #fff;
393 |     z-index: 1;
394 |     transform: translateY(-105%);
395 | }
396 | 
397 | .featured .featured-slider .box:hover .icons{
398 |     transform: translateY(0%);
399 | }
400 | 
401 | .featured .featured-slider .box .icons a{
402 |     color:var(--black);
403 |     font-size: 2.2rem;
404 |     padding:1.3rem 1.5rem;
405 | }
406 | 
407 | .featured .featured-slider .box .icons a:hover{
408 |     background:var(--green);
409 |     color:#fff;
410 | }
411 | 
412 | .featured .featured-slider .box .content{
413 |     background:#eee;
414 |     padding:1.5rem;
415 | }
416 | 
417 | .featured .featured-slider .box .content h3{
418 |     font-size: 2rem;
419 |     color:var(--black);
420 | }
421 | 
422 | .featured .featured-slider .box .content .price{
423 |     font-size: 2.2rem;
424 |     color:var(--black);
425 |     padding-top: 1rem;
426 | }
427 | 
428 | .featured .featured-slider .box .content .price span{
429 |     font-size: 1.5rem;
430 |     color:var(--light-color);
431 |     text-decoration: line-through;
432 | }
433 | 
434 | .swiper-button-next,
435 | .swiper-button-prev{
436 |     border:var(--border-hover);
437 |     height:4rem;
438 |     width:4rem;
439 |     color:var(--black);
440 |     background: #fff;
441 | }
442 | 
443 | .swiper-button-next::after,
444 | .swiper-button-prev::after{
445 |     font-size: 2rem;
446 | }
447 | 
448 | .swiper-button-next:hover,
449 | .swiper-button-prev:hover{
450 |     background: var(--black);
451 |     color:#fff;
452 | }
453 | 
454 | .newsletter{
455 |     background:url(../image/letter-bg.jpg) no-repeat;
456 |     background-size: cover;
457 |     background-position: center;
458 |     background-attachment: fixed;
459 | }
460 | 
461 | .newsletter form{
462 |     max-width: 45rem;
463 |     margin-left: auto;
464 |     text-align: center;
465 |     padding:5rem 0;
466 | }
467 | 
468 | .newsletter form h3{
469 |     font-size: 2.2rem;
470 |     color:#fff;
471 |     padding-bottom: .7rem;
472 |     font-weight: normal;
473 | }
474 | 
475 | .newsletter form .box{
476 |     width: 100%;
477 |     margin: .7rem 0;
478 |     padding:1rem 1.2rem;
479 |     font-size: 1.6rem;
480 |     color:var(--black);
481 |     border-radius: .5rem;
482 |     text-transform: none;
483 | }
484 | 
485 | .arrivals .arrivals-slider .box{
486 |     display: flex;
487 |     align-items:center;
488 |     gap:1.5rem;
489 |     padding:2rem 1rem;
490 |     border:var(--border);
491 |     margin:1rem 0;
492 | }
493 | 
494 | .arrivals .arrivals-slider .box:hover{
495 |     border:var(--border-hover);
496 | }
497 | 
498 | .arrivals .arrivals-slider .box .image img{
499 |     height:15rem;
500 | }
501 | 
502 | .arrivals .arrivals-slider .box .content h3{
503 |     font-size: 2rem;
504 |     color:var(--black);
505 | }
506 | 
507 | .arrivals .arrivals-slider .box .content .price{
508 |     font-size: 2.2rem;
509 |     color:var(--black);
510 |     padding-bottom: .5rem;
511 | }
512 | 
513 | .arrivals .arrivals-slider .box .content .price span{
514 |     font-size: 1.5rem;
515 |     color:var(--light-color);
516 |     text-decoration: line-through;
517 | }
518 | 
519 | .arrivals .arrivals-slider .box .content .stars i{
520 |     font-size: 1.5rem;
521 |     color:var(--green);
522 | }
523 | 
524 | .deal{
525 |     background:#f3f3f3;
526 |     display: flex;
527 |     align-items: center;
528 |     flex-wrap: wrap;
529 |     gap:1.5rem;
530 | }
531 | 
532 | .deal .content{
533 |     flex:1 1 42rem;
534 | }
535 | 
536 | .deal .image{
537 |     flex:1 1 42rem;
538 | }
539 | 
540 | .deal .image img{
541 |     width: 100%;
542 | }
543 | 
544 | .deal .content h3{
545 |     color:var(--green);
546 |     font-size: 2.5rem;
547 |     padding-bottom: .5rem;
548 | }
549 | 
550 | .deal .content h1{
551 |     color:var(--black);
552 |     font-size: 4rem;
553 | }
554 | 
555 | .deal .content p{
556 |     padding:1rem 0;
557 |     color:var(--light-color);
558 |     font-size: 1.4rem;
559 |     line-height: 2;
560 | }
561 | 
562 | .reviews .reviews-slider .box{
563 |     border:var(--border);
564 |     padding:2rem;
565 |     text-align: center;
566 |     margin:2rem 0;
567 | }
568 | 
569 | .reviews .reviews-slider .box:hover{
570 |     border:var(--border-hover);
571 | }
572 | 
573 | .reviews .reviews-slider .box img{
574 |     height:7rem;
575 |     width:7rem;
576 |     border-radius: 50%;
577 |     object-fit: cover;
578 | }
579 | 
580 | .reviews .reviews-slider .box h3{
581 |     color:var(--black);
582 |     font-size: 2.2rem;
583 |     padding:.5rem 0;
584 | }
585 | 
586 | .reviews .reviews-slider .box p{
587 |     color:var(--light-color);
588 |     font-size: 1.4rem;
589 |     padding:1rem 0;
590 |     line-height: 2;
591 | }
592 | 
593 | .reviews .reviews-slider .box .stars{
594 |     padding-top: .5rem;
595 | }
596 | 
597 | .reviews .reviews-slider .box .stars i{
598 |     font-size: 1.7rem;
599 |     color:var(--green);
600 | }
601 | 
602 | .blogs .blogs-slider .box{
603 |     margin:2rem 0;
604 |     border:var(--border);
605 | }
606 | 
607 | .blogs .blogs-slider .box:hover{
608 |     border:var(--border-hover);
609 | }
610 | 
611 | .blogs .blogs-slider .box .image{
612 |     height: 25rem;
613 |     width: 100%;
614 |     overflow: hidden;
615 | }
616 | 
617 | .blogs .blogs-slider .box .image img{
618 |     height: 100%;
619 |     width: 100%;
620 |     object-fit: cover;
621 | }
622 | 
623 | .blogs .blogs-slider .box:hover .image img{
624 |     transform: scale(1.1);
625 | }
626 | 
627 | .blogs .blogs-slider .box .content{
628 |     padding:1.5rem;
629 | }
630 | 
631 | .blogs .blogs-slider .box .content h3{
632 |     font-size: 2.2rem;
633 |     color:var(--black);
634 | }
635 | 
636 | .blogs .blogs-slider .box .content p{
637 |     font-size: 1.4rem;
638 |     color:var(--light-color);
639 |     padding:1rem 0;
640 |     line-height: 2;
641 | }
642 | 
643 | .footer .box-container{
644 |     display: grid;
645 |     grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
646 |     gap:1.5rem;
647 | }
648 | 
649 | .footer .box-container .box h3{
650 |     font-size: 2.2rem;
651 |     color:var(--black);
652 |     padding:1rem 0;
653 | }
654 | 
655 | .footer .box-container .box a{
656 |     display: block;
657 |     font-size: 1.4rem;
658 |     color:var(--light-color);
659 |     padding:1rem 0;
660 | }
661 | 
662 | .footer .box-container .box a i{
663 |     color:var(--green);
664 |     padding-right: .5rem;
665 | }
666 | 
667 | .footer .box-container .box a:hover i{
668 |     padding-right: 2rem;
669 | }
670 | 
671 | .footer .box-container .box .map{
672 |     width:100%;
673 | }
674 | 
675 | .footer .share{
676 |     padding:1rem 0;
677 |     text-align: center;
678 | }
679 | 
680 | .footer .share a{
681 |     height: 5rem;
682 |     width: 5rem;
683 |     line-height: 5rem;
684 |     font-size: 2rem;
685 |     color:#fff;
686 |     background:var(--green);
687 |     margin:0 .3rem;
688 |     border-radius: 50%; 
689 | }
690 | 
691 | .footer .share a:hover{
692 |     background:var(--black);
693 | }
694 | 
695 | .footer .credit{
696 |     border-top: var(--border);
697 |     margin-top: 2rem;
698 |     padding:0 1rem;
699 |     padding-top: 2.5rem;
700 |     font-size: 2rem;
701 |     color:var(--light-color);
702 |     text-align: center;
703 | }
704 | 
705 | .footer .credit span{
706 |     color:var(--green);
707 | }
708 | 
709 | .loader-container{
710 |     position: fixed;
711 |     top:0; left: 0;
712 |     height:100%;
713 |     width: 100%;
714 |     z-index: 10000;
715 |     background:#f7f7f7;
716 |     display: flex;
717 |     align-items: center;
718 |     justify-content: center;
719 | }
720 | 
721 | .loader-container.active{
722 |     display: none;
723 | }
724 | 
725 | .loader-container img{
726 |     height:10rem;
727 | }
728 | 
729 | 
730 | 
731 | 
732 | 
733 | 
734 | 
735 | 
736 | 
737 | 
738 | /* media queries  */
739 | 
740 | @media (max-width:991px){
741 | 
742 |     html{
743 |         font-size: 55%;
744 |     }
745 | 
746 |     .header .header-1{
747 |         padding:2rem;
748 |     }
749 | 
750 |     section{
751 |         padding:3rem 2rem;
752 |     }
753 | 
754 | }
755 | 
756 | @media (max-width:768px){
757 | 
758 |     html{
759 |         scroll-padding-top: 0;
760 |     }
761 | 
762 |     body{
763 |         padding-bottom: 6rem;
764 |     }
765 | 
766 |     .header .header-2{
767 |         display:none;
768 |     }
769 | 
770 |     .bottom-navbar{
771 |         display: block;
772 |     }
773 | 
774 |     #search-btn{
775 |         display: inline-block;
776 |     }
777 | 
778 |     .header .header-1{
779 |         box-shadow: var(--box-shadow);
780 |         position: relative;
781 |     }
782 | 
783 |     .header .header-1 .search-form{
784 |         position:absolute;
785 |         top:-115%; right:2rem;
786 |         width: 90%;
787 |         box-shadow: var(--box-shadow);
788 |     }
789 | 
790 |     .header .header-1 .search-form.active{
791 |         top:115%;
792 |     }
793 | 
794 |     .home .row .content{
795 |         text-align: center;
796 |     }
797 | 
798 |     .home .row .content h3{
799 |         font-size: 3.5rem;
800 |     }
801 | 
802 |     .newsletter{
803 |         background-position: right;
804 |     }
805 | 
806 |     .newsletter form{
807 |         margin-left:0;
808 |         max-width: 100%;
809 |     }
810 | 
811 | }
812 | 
813 | @media (max-width:450px){
814 | 
815 |     html{
816 |         font-size: 50%;
817 |     }
818 | 
819 | }


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 |     <title>Book Store Website</title>
  8 | 
  9 |     <link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css" />
 10 | 
 11 |     <!-- font awesome cdn link  -->
 12 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 13 | 
 14 |     <!-- custom css file link  -->
 15 |     <link rel="stylesheet" href="css/style.css">
 16 | 
 17 | </head>
 18 | <body>
 19 |     
 20 | <!-- header section starts  -->
 21 | 
 22 | <header class="header">
 23 | 
 24 |     <div class="header-1">
 25 | 
 26 |         <a href="#" class="logo"> <i class="fas fa-book"></i> bookly </a>
 27 | 
 28 |         <form action="" class="search-form">
 29 |             <input type="search" name="" placeholder="search here..." id="search-box">
 30 |             <label for="search-box" class="fas fa-search"></label>
 31 |         </form>
 32 | 
 33 |         <div class="icons">
 34 |             <div id="search-btn" class="fas fa-search"></div>
 35 |             <a href="#" class="fas fa-heart"></a>
 36 |             <a href="#" class="fas fa-shopping-cart"></a>
 37 |             <div id="login-btn" class="fas fa-user"></div>
 38 |         </div>
 39 | 
 40 |     </div>
 41 | 
 42 |     <div class="header-2">
 43 |         <nav class="navbar">
 44 |             <a href="#home">home</a>
 45 |             <a href="#featured">featured</a>
 46 |             <a href="#arrivals">arrivals</a>
 47 |             <a href="#reviews">reviews</a>
 48 |             <a href="#blogs">blogs</a>
 49 |         </nav>
 50 |     </div>
 51 | 
 52 | </header>
 53 | 
 54 | <!-- header section ends -->
 55 | 
 56 | <!-- bottom navbar  -->
 57 | 
 58 | <nav class="bottom-navbar">
 59 |     <a href="#home" class="fas fa-home"></a>
 60 |     <a href="#featured" class="fas fa-list"></a>
 61 |     <a href="#arrivals" class="fas fa-tags"></a>
 62 |     <a href="#reviews" class="fas fa-comments"></a>
 63 |     <a href="#blogs" class="fas fa-blog"></a>
 64 | </nav>
 65 | 
 66 | <!-- login form  -->
 67 | 
 68 | <div class="login-form-container">
 69 | 
 70 |     <div id="close-login-btn" class="fas fa-times"></div>
 71 | 
 72 |     <form action="">
 73 |         <h3>sign in</h3>
 74 |         <span>username</span>
 75 |         <input type="email" name="" class="box" placeholder="enter your email" id="">
 76 |         <span>password</span>
 77 |         <input type="password" name="" class="box" placeholder="enter your password" id="">
 78 |         <div class="checkbox">
 79 |             <input type="checkbox" name="" id="remember-me">
 80 |             <label for="remember-me"> remember me</label>
 81 |         </div>
 82 |         <input type="submit" value="sign in" class="btn">
 83 |         <p>forget password ? <a href="#">click here</a></p>
 84 |         <p>don't have an account ? <a href="#">create one</a></p>
 85 |     </form>
 86 | 
 87 | </div>
 88 | 
 89 | <!-- home section starts  -->
 90 | 
 91 | <section class="home" id="home">
 92 | 
 93 |     <div class="row">
 94 | 
 95 |         <div class="content">
 96 |             <h3>upto 75% off</h3>
 97 |             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam deserunt nostrum accusamus. Nam alias sit necessitatibus, aliquid ex minima at!</p>
 98 |             <a href="#" class="btn">shop now</a>
 99 |         </div>
100 | 
101 |         <div class="swiper books-slider">
102 |             <div class="swiper-wrapper">
103 |                 <a href="#" class="swiper-slide"><img src="image/book-1.png" alt=""></a>
104 |                 <a href="#" class="swiper-slide"><img src="image/book-2.png" alt=""></a>
105 |                 <a href="#" class="swiper-slide"><img src="image/book-3.png" alt=""></a>
106 |                 <a href="#" class="swiper-slide"><img src="image/book-4.png" alt=""></a>
107 |                 <a href="#" class="swiper-slide"><img src="image/book-5.png" alt=""></a>
108 |                 <a href="#" class="swiper-slide"><img src="image/book-6.png" alt=""></a>
109 |             </div>
110 |             <img src="image/stand.png" class="stand" alt="">
111 |         </div>
112 | 
113 |     </div>
114 | 
115 | </section>
116 | 
117 | <!-- home section ense  -->
118 | 
119 | <!-- icons section starts  -->
120 | 
121 | <section class="icons-container">
122 | 
123 |     <div class="icons">
124 |         <i class="fas fa-shipping-fast"></i>
125 |         <div class="content">
126 |             <h3>free shipping</h3>
127 |             <p>order over $100</p>
128 |         </div>
129 |     </div>
130 | 
131 |     <div class="icons">
132 |         <i class="fas fa-lock"></i>
133 |         <div class="content">
134 |             <h3>secure payment</h3>
135 |             <p>100 secure payment</p>
136 |         </div>
137 |     </div>
138 | 
139 |     <div class="icons">
140 |         <i class="fas fa-redo-alt"></i>
141 |         <div class="content">
142 |             <h3>easy returns</h3>
143 |             <p>10 days returns</p>
144 |         </div>
145 |     </div>
146 | 
147 |     <div class="icons">
148 |         <i class="fas fa-headset"></i>
149 |         <div class="content">
150 |             <h3>24/7 support</h3>
151 |             <p>call us anytime</p>
152 |         </div>
153 |     </div>
154 | 
155 | </section>
156 | 
157 | <!-- icons section ends -->
158 | 
159 | <!-- featured section starts  -->
160 | 
161 | <section class="featured" id="featured">
162 | 
163 |     <h1 class="heading"> <span>featured books</span> </h1>
164 | 
165 |     <div class="swiper featured-slider">
166 | 
167 |         <div class="swiper-wrapper">
168 | 
169 |             <div class="swiper-slide box">
170 |                 <div class="icons">
171 |                     <a href="#" class="fas fa-search"></a>
172 |                     <a href="#" class="fas fa-heart"></a>
173 |                     <a href="#" class="fas fa-eye"></a>
174 |                 </div>
175 |                 <div class="image">
176 |                     <img src="image/book-1.png" alt="">
177 |                 </div>
178 |                 <div class="content">
179 |                     <h3>featured books</h3>
180 |                     <div class="price">$15.99 <span>$20.99</span></div>
181 |                     <a href="#" class="btn">add to cart</a>
182 |                 </div>
183 |             </div>
184 | 
185 |             <div class="swiper-slide box">
186 |                 <div class="icons">
187 |                     <a href="#" class="fas fa-search"></a>
188 |                     <a href="#" class="fas fa-heart"></a>
189 |                     <a href="#" class="fas fa-eye"></a>
190 |                 </div>
191 |                 <div class="image">
192 |                     <img src="image/book-2.png" alt="">
193 |                 </div>
194 |                 <div class="content">
195 |                     <h3>featured books</h3>
196 |                     <div class="price">$15.99 <span>$20.99</span></div>
197 |                     <a href="#" class="btn">add to cart</a>
198 |                 </div>
199 |             </div>
200 | 
201 |             <div class="swiper-slide box">
202 |                 <div class="icons">
203 |                     <a href="#" class="fas fa-search"></a>
204 |                     <a href="#" class="fas fa-heart"></a>
205 |                     <a href="#" class="fas fa-eye"></a>
206 |                 </div>
207 |                 <div class="image">
208 |                     <img src="image/book-3.png" alt="">
209 |                 </div>
210 |                 <div class="content">
211 |                     <h3>featured books</h3>
212 |                     <div class="price">$15.99 <span>$20.99</span></div>
213 |                     <a href="#" class="btn">add to cart</a>
214 |                 </div>
215 |             </div>
216 | 
217 |             <div class="swiper-slide box">
218 |                 <div class="icons">
219 |                     <a href="#" class="fas fa-search"></a>
220 |                     <a href="#" class="fas fa-heart"></a>
221 |                     <a href="#" class="fas fa-eye"></a>
222 |                 </div>
223 |                 <div class="image">
224 |                     <img src="image/book-4.png" alt="">
225 |                 </div>
226 |                 <div class="content">
227 |                     <h3>featured books</h3>
228 |                     <div class="price">$15.99 <span>$20.99</span></div>
229 |                     <a href="#" class="btn">add to cart</a>
230 |                 </div>
231 |             </div>
232 | 
233 |             <div class="swiper-slide box">
234 |                 <div class="icons">
235 |                     <a href="#" class="fas fa-search"></a>
236 |                     <a href="#" class="fas fa-heart"></a>
237 |                     <a href="#" class="fas fa-eye"></a>
238 |                 </div>
239 |                 <div class="image">
240 |                     <img src="image/book-5.png" alt="">
241 |                 </div>
242 |                 <div class="content">
243 |                     <h3>featured books</h3>
244 |                     <div class="price">$15.99 <span>$20.99</span></div>
245 |                     <a href="#" class="btn">add to cart</a>
246 |                 </div>
247 |             </div>
248 | 
249 |             <div class="swiper-slide box">
250 |                 <div class="icons">
251 |                     <a href="#" class="fas fa-search"></a>
252 |                     <a href="#" class="fas fa-heart"></a>
253 |                     <a href="#" class="fas fa-eye"></a>
254 |                 </div>
255 |                 <div class="image">
256 |                     <img src="image/book-6.png" alt="">
257 |                 </div>
258 |                 <div class="content">
259 |                     <h3>featured books</h3>
260 |                     <div class="price">$15.99 <span>$20.99</span></div>
261 |                     <a href="#" class="btn">add to cart</a>
262 |                 </div>
263 |             </div>
264 | 
265 |             <div class="swiper-slide box">
266 |                 <div class="icons">
267 |                     <a href="#" class="fas fa-search"></a>
268 |                     <a href="#" class="fas fa-heart"></a>
269 |                     <a href="#" class="fas fa-eye"></a>
270 |                 </div>
271 |                 <div class="image">
272 |                     <img src="image/book-7.png" alt="">
273 |                 </div>
274 |                 <div class="content">
275 |                     <h3>featured books</h3>
276 |                     <div class="price">$15.99 <span>$20.99</span></div>
277 |                     <a href="#" class="btn">add to cart</a>
278 |                 </div>
279 |             </div>
280 | 
281 |             <div class="swiper-slide box">
282 |                 <div class="icons">
283 |                     <a href="#" class="fas fa-search"></a>
284 |                     <a href="#" class="fas fa-heart"></a>
285 |                     <a href="#" class="fas fa-eye"></a>
286 |                 </div>
287 |                 <div class="image">
288 |                     <img src="image/book-8.png" alt="">
289 |                 </div>
290 |                 <div class="content">
291 |                     <h3>featured books</h3>
292 |                     <div class="price">$15.99 <span>$20.99</span></div>
293 |                     <a href="#" class="btn">add to cart</a>
294 |                 </div>
295 |             </div>
296 | 
297 |             <div class="swiper-slide box">
298 |                 <div class="icons">
299 |                     <a href="#" class="fas fa-search"></a>
300 |                     <a href="#" class="fas fa-heart"></a>
301 |                     <a href="#" class="fas fa-eye"></a>
302 |                 </div>
303 |                 <div class="image">
304 |                     <img src="image/book-9.png" alt="">
305 |                 </div>
306 |                 <div class="content">
307 |                     <h3>featured books</h3>
308 |                     <div class="price">$15.99 <span>$20.99</span></div>
309 |                     <a href="#" class="btn">add to cart</a>
310 |                 </div>
311 |             </div>
312 | 
313 |             <div class="swiper-slide box">
314 |                 <div class="icons">
315 |                     <a href="#" class="fas fa-search"></a>
316 |                     <a href="#" class="fas fa-heart"></a>
317 |                     <a href="#" class="fas fa-eye"></a>
318 |                 </div>
319 |                 <div class="image">
320 |                     <img src="image/book-10.png" alt="">
321 |                 </div>
322 |                 <div class="content">
323 |                     <h3>featured books</h3>
324 |                     <div class="price">$15.99 <span>$20.99</span></div>
325 |                     <a href="#" class="btn">add to cart</a>
326 |                 </div>
327 |             </div>
328 | 
329 |         </div>
330 | 
331 |         <div class="swiper-button-next"></div>
332 |         <div class="swiper-button-prev"></div>
333 | 
334 |     </div>
335 | 
336 | </section>
337 | 
338 | <!-- featured section ends -->
339 | 
340 | <!-- newsletter section starts -->
341 | 
342 | <section class="newsletter">
343 | 
344 |     <form action="">
345 |         <h3>subscribe for latest updates</h3>
346 |         <input type="email" name="" placeholder="enter your email" id="" class="box">
347 |         <input type="submit" value="subscribe" class="btn">
348 |     </form>
349 | 
350 | </section>
351 | 
352 | <!-- newsletter section ends -->
353 | 
354 | <!-- arrivals section starts  -->
355 | 
356 | <section class="arrivals" id="arrivals">
357 | 
358 |     <h1 class="heading"> <span>new arrivals</span> </h1>
359 | 
360 |     <div class="swiper arrivals-slider">
361 | 
362 |         <div class="swiper-wrapper">
363 | 
364 |             <a href="#" class="swiper-slide box">
365 |                 <div class="image">
366 |                     <img src="image/book-1.png" alt="">
367 |                 </div>
368 |                 <div class="content">
369 |                     <h3>new arrivals</h3>
370 |                     <div class="price">$15.99 <span>$20.99</span></div>
371 |                     <div class="stars">
372 |                         <i class="fas fa-star"></i>
373 |                         <i class="fas fa-star"></i>
374 |                         <i class="fas fa-star"></i>
375 |                         <i class="fas fa-star"></i>
376 |                         <i class="fas fa-star-half-alt"></i>
377 |                     </div>
378 |                 </div>
379 |             </a>
380 | 
381 |             <a href="#" class="swiper-slide box">
382 |                 <div class="image">
383 |                     <img src="image/book-2.png" alt="">
384 |                 </div>
385 |                 <div class="content">
386 |                     <h3>new arrivals</h3>
387 |                     <div class="price">$15.99 <span>$20.99</span></div>
388 |                     <div class="stars">
389 |                         <i class="fas fa-star"></i>
390 |                         <i class="fas fa-star"></i>
391 |                         <i class="fas fa-star"></i>
392 |                         <i class="fas fa-star"></i>
393 |                         <i class="fas fa-star-half-alt"></i>
394 |                     </div>
395 |                 </div>
396 |             </a>
397 | 
398 |             <a href="#" class="swiper-slide box">
399 |                 <div class="image">
400 |                     <img src="image/book-3.png" alt="">
401 |                 </div>
402 |                 <div class="content">
403 |                     <h3>new arrivals</h3>
404 |                     <div class="price">$15.99 <span>$20.99</span></div>
405 |                     <div class="stars">
406 |                         <i class="fas fa-star"></i>
407 |                         <i class="fas fa-star"></i>
408 |                         <i class="fas fa-star"></i>
409 |                         <i class="fas fa-star"></i>
410 |                         <i class="fas fa-star-half-alt"></i>
411 |                     </div>
412 |                 </div>
413 |             </a>
414 | 
415 |             <a href="#" class="swiper-slide box">
416 |                 <div class="image">
417 |                     <img src="image/book-4.png" alt="">
418 |                 </div>
419 |                 <div class="content">
420 |                     <h3>new arrivals</h3>
421 |                     <div class="price">$15.99 <span>$20.99</span></div>
422 |                     <div class="stars">
423 |                         <i class="fas fa-star"></i>
424 |                         <i class="fas fa-star"></i>
425 |                         <i class="fas fa-star"></i>
426 |                         <i class="fas fa-star"></i>
427 |                         <i class="fas fa-star-half-alt"></i>
428 |                     </div>
429 |                 </div>
430 |             </a>
431 | 
432 |             <a href="#" class="swiper-slide box">
433 |                 <div class="image">
434 |                     <img src="image/book-5.png" alt="">
435 |                 </div>
436 |                 <div class="content">
437 |                     <h3>new arrivals</h3>
438 |                     <div class="price">$15.99 <span>$20.99</span></div>
439 |                     <div class="stars">
440 |                         <i class="fas fa-star"></i>
441 |                         <i class="fas fa-star"></i>
442 |                         <i class="fas fa-star"></i>
443 |                         <i class="fas fa-star"></i>
444 |                         <i class="fas fa-star-half-alt"></i>
445 |                     </div>
446 |                 </div>
447 |             </a>
448 | 
449 |         </div>
450 | 
451 |     </div>
452 | 
453 |     <div class="swiper arrivals-slider">
454 | 
455 |         <div class="swiper-wrapper">
456 | 
457 |             <a href="#" class="swiper-slide box">
458 |                 <div class="image">
459 |                     <img src="image/book-6.png" alt="">
460 |                 </div>
461 |                 <div class="content">
462 |                     <h3>new arrivals</h3>
463 |                     <div class="price">$15.99 <span>$20.99</span></div>
464 |                     <div class="stars">
465 |                         <i class="fas fa-star"></i>
466 |                         <i class="fas fa-star"></i>
467 |                         <i class="fas fa-star"></i>
468 |                         <i class="fas fa-star"></i>
469 |                         <i class="fas fa-star-half-alt"></i>
470 |                     </div>
471 |                 </div>
472 |             </a>
473 | 
474 |             <a href="#" class="swiper-slide box">
475 |                 <div class="image">
476 |                     <img src="image/book-7.png" alt="">
477 |                 </div>
478 |                 <div class="content">
479 |                     <h3>new arrivals</h3>
480 |                     <div class="price">$15.99 <span>$20.99</span></div>
481 |                     <div class="stars">
482 |                         <i class="fas fa-star"></i>
483 |                         <i class="fas fa-star"></i>
484 |                         <i class="fas fa-star"></i>
485 |                         <i class="fas fa-star"></i>
486 |                         <i class="fas fa-star-half-alt"></i>
487 |                     </div>
488 |                 </div>
489 |             </a>
490 | 
491 |             <a href="#" class="swiper-slide box">
492 |                 <div class="image">
493 |                     <img src="image/book-8.png" alt="">
494 |                 </div>
495 |                 <div class="content">
496 |                     <h3>new arrivals</h3>
497 |                     <div class="price">$15.99 <span>$20.99</span></div>
498 |                     <div class="stars">
499 |                         <i class="fas fa-star"></i>
500 |                         <i class="fas fa-star"></i>
501 |                         <i class="fas fa-star"></i>
502 |                         <i class="fas fa-star"></i>
503 |                         <i class="fas fa-star-half-alt"></i>
504 |                     </div>
505 |                 </div>
506 |             </a>
507 | 
508 |             <a href="#" class="swiper-slide box">
509 |                 <div class="image">
510 |                     <img src="image/book-9.png" alt="">
511 |                 </div>
512 |                 <div class="content">
513 |                     <h3>new arrivals</h3>
514 |                     <div class="price">$15.99 <span>$20.99</span></div>
515 |                     <div class="stars">
516 |                         <i class="fas fa-star"></i>
517 |                         <i class="fas fa-star"></i>
518 |                         <i class="fas fa-star"></i>
519 |                         <i class="fas fa-star"></i>
520 |                         <i class="fas fa-star-half-alt"></i>
521 |                     </div>
522 |                 </div>
523 |             </a>
524 | 
525 |             <a href="#" class="swiper-slide box">
526 |                 <div class="image">
527 |                     <img src="image/book-10.png" alt="">
528 |                 </div>
529 |                 <div class="content">
530 |                     <h3>new arrivals</h3>
531 |                     <div class="price">$15.99 <span>$20.99</span></div>
532 |                     <div class="stars">
533 |                         <i class="fas fa-star"></i>
534 |                         <i class="fas fa-star"></i>
535 |                         <i class="fas fa-star"></i>
536 |                         <i class="fas fa-star"></i>
537 |                         <i class="fas fa-star-half-alt"></i>
538 |                     </div>
539 |                 </div>
540 |             </a>
541 | 
542 |         </div>
543 | 
544 |     </div>
545 | 
546 | </section>
547 | 
548 | <!-- arrivals section ends -->
549 | 
550 | <!-- deal section starts  -->
551 | 
552 | <section class="deal">
553 | 
554 |     <div class="content">
555 |         <h3>deal of the day</h3>
556 |         <h1>upto 50% off</h1>
557 |         <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Unde perspiciatis in atque dolore tempora quaerat at fuga dolorum natus velit.</p>
558 |         <a href="#" class="btn">shop now</a>
559 |     </div>
560 | 
561 |     <div class="image">
562 |         <img src="image/deal-img.jpg" alt="">
563 |     </div>
564 | 
565 | </section>
566 | 
567 | <!-- deal section ends -->
568 | 
569 | <!-- reviews section starts  -->
570 | 
571 | <section class="reviews" id="reviews">
572 | 
573 |     <h1 class="heading"> <span>client's reviews</span> </h1>
574 | 
575 |     <div class="swiper reviews-slider">
576 | 
577 |         <div class="swiper-wrapper">
578 | 
579 |             <div class="swiper-slide box">
580 |                 <img src="image/avatar-png-11554021661asazhxmdnu.png" alt="">
581 |                 <h3>john deo</h3>
582 |                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p>
583 |                 <div class="stars">
584 |                     <i class="fas fa-star"></i>
585 |                     <i class="fas fa-star"></i>
586 |                     <i class="fas fa-star"></i>
587 |                     <i class="fas fa-star"></i>
588 |                     <i class="fas fa-star-half-alt"></i>
589 |                 </div>
590 |             </div>
591 | 
592 |             <div class="swiper-slide box">
593 |                 <img src="image/avatar-png-11554021661asazhxmdnu.png" alt="">
594 |                 <h3>john deo</h3>
595 |                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p>
596 |                 <div class="stars">
597 |                     <i class="fas fa-star"></i>
598 |                     <i class="fas fa-star"></i>
599 |                     <i class="fas fa-star"></i>
600 |                     <i class="fas fa-star"></i>
601 |                     <i class="fas fa-star-half-alt"></i>
602 |                 </div>
603 |             </div>
604 | 
605 |             <div class="swiper-slide box">
606 |                 <img src="image/avatar-png-11554021661asazhxmdnu.png" alt="">
607 |                 <h3>john deo</h3>
608 |                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p>
609 |                 <div class="stars">
610 |                     <i class="fas fa-star"></i>
611 |                     <i class="fas fa-star"></i>
612 |                     <i class="fas fa-star"></i>
613 |                     <i class="fas fa-star"></i>
614 |                     <i class="fas fa-star-half-alt"></i>
615 |                 </div>
616 |             </div>
617 |             <div class="swiper-slide box">
618 |                 <img src="image/avatar-png-11554021661asazhxmdnu.png" alt="">
619 |                 <h3>john deo</h3>
620 |                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p>
621 |                 <div class="stars">
622 |                     <i class="fas fa-star"></i>
623 |                     <i class="fas fa-star"></i>
624 |                     <i class="fas fa-star"></i>
625 |                     <i class="fas fa-star"></i>
626 |                     <i class="fas fa-star-half-alt"></i>
627 |                 </div>
628 |             </div>
629 | 
630 |             <div class="swiper-slide box">
631 |                 <img src="image/avatar-png-11554021661asazhxmdnu.png" alt="">
632 |                 <h3>john deo</h3>
633 |                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p>
634 |                 <div class="stars">
635 |                     <i class="fas fa-star"></i>
636 |                     <i class="fas fa-star"></i>
637 |                     <i class="fas fa-star"></i>
638 |                     <i class="fas fa-star"></i>
639 |                     <i class="fas fa-star-half-alt"></i>
640 |                 </div>
641 |             </div>
642 | 
643 |             <div class="swiper-slide box">
644 |                 <img src="image/avatar-png-11554021661asazhxmdnu.png" alt="">
645 |                 <h3>john deo</h3>
646 |                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur nihil ipsa placeat. Aperiam at sint, eos ex similique facere hic.</p>
647 |                 <div class="stars">
648 |                     <i class="fas fa-star"></i>
649 |                     <i class="fas fa-star"></i>
650 |                     <i class="fas fa-star"></i>
651 |                     <i class="fas fa-star"></i>
652 |                     <i class="fas fa-star-half-alt"></i>
653 |                 </div>
654 |             </div>
655 | 
656 |         </div>
657 | 
658 |     </div>
659 |     
660 | </section>
661 | 
662 | <!-- reviews section ends -->
663 | 
664 | <!-- blogs section starts  -->
665 | 
666 | <section class="blogs" id="blogs">
667 | 
668 |     <h1 class="heading"> <span>our blogs</span> </h1>
669 | 
670 |     <div class="swiper blogs-slider">
671 | 
672 |         <div class="swiper-wrapper">
673 | 
674 |             <div class="swiper-slide box">
675 |                 <div class="image">
676 |                     <img src="image/blog-1.jpg" alt="">
677 |                 </div>
678 |                 <div class="content">
679 |                     <h3>blog title goes here</h3>
680 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, odio.</p>
681 |                     <a href="#" class="btn">read more</a>
682 |                 </div>
683 |             </div>
684 | 
685 |             <div class="swiper-slide box">
686 |                 <div class="image">
687 |                     <img src="image/blog-2.jpg" alt="">
688 |                 </div>
689 |                 <div class="content">
690 |                     <h3>blog title goes here</h3>
691 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, odio.</p>
692 |                     <a href="#" class="btn">read more</a>
693 |                 </div>
694 |             </div>
695 | 
696 |             <div class="swiper-slide box">
697 |                 <div class="image">
698 |                     <img src="image/blog-3.jpg" alt="">
699 |                 </div>
700 |                 <div class="content">
701 |                     <h3>blog title goes here</h3>
702 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, odio.</p>
703 |                     <a href="#" class="btn">read more</a>
704 |                 </div>
705 |             </div>
706 | 
707 |             <div class="swiper-slide box">
708 |                 <div class="image">
709 |                     <img src="image/blog-4.jpg" alt="">
710 |                 </div>
711 |                 <div class="content">
712 |                     <h3>blog title goes here</h3>
713 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, odio.</p>
714 |                     <a href="#" class="btn">read more</a>
715 |                 </div>
716 |             </div>
717 | 
718 |             <div class="swiper-slide box">
719 |                 <div class="image">
720 |                     <img src="image/blog-5.jpg" alt="">
721 |                 </div>
722 |                 <div class="content">
723 |                     <h3>blog title goes here</h3>
724 |                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, odio.</p>
725 |                     <a href="#" class="btn">read more</a>
726 |                 </div>
727 |             </div>
728 | 
729 |         </div>
730 | 
731 |     </div>
732 | 
733 | </section>
734 | 
735 | <!-- blogs section ends -->
736 | 
737 | <!-- footer section starts  -->
738 | 
739 | <section class="footer">
740 | 
741 |     <div class="box-container">
742 | 
743 |         <div class="box">
744 |             <h3>our locations</h3>
745 |             <a href="#"> <i class="fas fa-map-marker-alt"></i> Saudi Arabia </a>
746 |             <a href="#"> <i class="fas fa-map-marker-alt"></i> Indonesia </a>
747 |             <a href="#"> <i class="fas fa-map-marker-alt"></i> France </a>
748 |             <a href="#"> <i class="fas fa-map-marker-alt"></i> Japan </a>
749 |             <a href="#"> <i class="fas fa-map-marker-alt"></i> Korea</a>
750 |             <a href="#"> <i class="fas fa-map-marker-alt"></i> Europa </a>
751 |         </div>
752 | 
753 |         <div class="box">
754 |             <h3>quick links</h3>
755 |             <a href="#"> <i class="fas fa-arrow-right"></i> home </a>
756 |             <a href="#"> <i class="fas fa-arrow-right"></i> featured </a>
757 |             <a href="#"> <i class="fas fa-arrow-right"></i> arrivals </a>
758 |             <a href="#"> <i class="fas fa-arrow-right"></i> reviews </a>
759 |             <a href="#"> <i class="fas fa-arrow-right"></i> blogs </a>
760 |         </div>
761 | 
762 |         <div class="box">
763 |             <h3>extra links</h3>
764 |             <a href="#"> <i class="fas fa-arrow-right"></i> account info </a>
765 |             <a href="#"> <i class="fas fa-arrow-right"></i> ordered items </a>
766 |             <a href="#"> <i class="fas fa-arrow-right"></i> privacy policy </a>
767 |             <a href="#"> <i class="fas fa-arrow-right"></i> payment method </a>
768 |             <a href="#"> <i class="fas fa-arrow-right"></i> our serivces </a>
769 |         </div>
770 | 
771 |         <div class="box">
772 |             <h3>contact info</h3>
773 |             <a href="#"> <i class="fas fa-phone"></i> +123-456-7890 </a>
774 |             <a href="#"> <i class="fas fa-phone"></i> +111-222-3333 </a>
775 |             <a href="#"> <i class="fas fa-envelope"></i> abubakartarsum@gmail.com </a>
776 |             <img src="image/worldmap.png" class="map" alt="">
777 |         </div>
778 |         
779 |     </div>
780 | 
781 |     <div class="share">
782 |         <a href="#" class="fab fa-facebook-f"></a>
783 |         <a href="#" class="fab fa-twitter"></a>
784 |         <a href="#" class="fab fa-instagram"></a>
785 |         <a href="#" class="fab fa-linkedin"></a>
786 |         <a href="#" class="fab fa-pinterest"></a>
787 |     </div>
788 | 
789 |     <div class="credit"> created by <span>BakriDev</span> | all rights reserved! </div>
790 | 
791 | </section>
792 | 
793 | <!-- footer section ends -->
794 | 
795 | <!-- loader  -->
796 | 
797 | <div class="loader-container">
798 |     <img src="image/loader-img.gif" alt="">
799 | </div>
800 | 
801 | <script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
802 | <!-- custom js file link  -->
803 | <script src="js/script.js"></script>
804 | 
805 | </body>
806 | </html>


--------------------------------------------------------------------------------