-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
107 lines (102 loc) · 7.11 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
<!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">
<link href="css/style.css" rel="stylesheet"/>
<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=PT+Serif:wght@400;700&display=swap" rel="stylesheet">
<title>BookShop | Home</title>
</head>
<body>
<header class="header-main">
<h2 class="header-main__title">BookShop</h2>
<nav class="header-main__nav">
<a href="" class="header-main__link">Home</a>
<a href="" class="header-main__link">Shop</a>
<a href="" class="header-main__link">Contact</a>
</nav>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="header-main__icon" id="open-mobile-menu">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</header>
<section class="mobile-menu hidden" id="mobile-menu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="mobile-menu__close" id="close">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
<nav class="mobile-menu__nav">
<a href="" class="mobile-menu__link">Home</a>
<a href="" class="mobile-menu__link">Shop</a>
<a href="" class="mobile-menu__link">Contact</a>
</nav>
</section>
<main class="main-home">
<div class="main-home__info">
<h2 class="main-home__title">Start your adventure Reading!</h2>
<a class="main-home__btn" href="">start now!</a>
</div>
<img class="main-home__img" src="images/reading_book.png" alt="Reading Book"/>
</main>
<section class="benefits">
<div class="benefits__card">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="benefits__icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
</svg>
<h2 class="benefits__title">Fast Delivery</h2>
<p class="benefits__description">We deliver as soon as possible</p>
</div>
<div class="benefits__card">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="benefits__icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
</svg>
<h2 class="benefits__title">Digital Product</h2>
<p class="benefits__description">When purchasing you acquire the physical and digital version of the product</p>
</div>
<div class="benefits__card">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="benefits__icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" />
</svg>
<h2 class="benefits__title">Rating</h2>
<p class="benefits__description">discover the best books based on your rating</p>
</div>
</section>
<section class="reading">
<div class="reading__info">
<h2 class="reading__title">Why reading is important?</h2>
<p class="reading__description">Why is reading good for you? Reading is good for you because it improves your focus, memory, empathy, and communication skills. It can reduce stress, improve your mental health, and help you live longer. Reading also allows you to learn new things to help you succeed in your work and relationships.</p>
</div>
<img class="reading__img" src="images/reading_book2.jpg" alt="Reading Book"/>
</section>
<section class="main-books">
<h1 class="main-books__title">Best selling books</h1>
<article class="main-books__more-selling">
<figure class="main-books__book-card">
<img src="images/clean-code.png" class="main-books__book-card-img" alt="Clean Code Book"/>
<div class="main-books__book-card-info">
<h2 class="main-books__book-card-title">Clean Code: A Handbook of Agile Software Craftsmanship</h2>
<p class="main-books__book-card-description">Even bad code can function. But if code isn't clean, it can bring a development organization to its knees... <a href="" class="main-books__link">See more</a></p>
<a href="" class="main-books__book-card-btn">Visit Book Page</a>
</div>
</figure>
<figure class="main-books__book-card">
<img src="images/codebook.png" class="main-books__book-card-img" alt="Clean Code Book"/>
<div class="main-books__book-card-info">
<h2 class="main-books__book-card-title">Refactoring: Improving the Design of Existing Code</h2>
<p class="main-books__book-card-description">Refactoring improves the design of existing code and enhances software maintainability, as well as making existing code easier to understand... <a href="" class="main-books__link">See more</a></p>
<a href="" class="main-books__book-card-btn">Visit Book Page</a>
</div>
</figure>
</article>
</section>
<footer class="footer">
<p class="footer__description">© All rights reserved</p>
<div class="footer__contact">
<a href="https://www.instagram.com/caueghezzi/" target="_blank"><img class="footer__icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/2048px-Instagram_logo_2016.svg.png" alt="Instagram Image"/></a>
<a href="https://github.com/Hu4ng7" target="_blank"><img class="footer__icon" src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="Instagram Image"/></a>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>