-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (126 loc) · 5.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCC - Product Landing Page</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<!-- Header & Nav Bar -->
<header id="header">
<nav id="nav-bar">
<div class="logo-container">
<img src="img/BookLogo.jpg"
alt="logo" id="header-img" />
<span class="the-product">Classic Books</span>
</div>
<ul class="nav-links">
<li><a href="#features" class="nav-link" id="features">Features</a></li>
<li><a href="#audio" class="nav-link" id="audio">Free Audio Book</a></li>
<li><a href="#for_sale" class="nav-link" id="for_sale">For Sale</a></li>
</ul>
</nav>
</header>
<!-- Email Newsletter -->
<section id="email-section">
<h2>Beautifully Written Masterpieces</h2>
<form action="https://www.freecodecamp.com/email-submit" id="form">
<input id="email" type="email" required placeholder="Enter your email address" name="email" />
<input type="submit" id="submit" value="GET STARTED" />
</form>
</section>
<!-- Website Features -->
<section id="features">
<div class="feature">
<i class="ri-file-paper-fill ri-4x icon"></i>
<div>
<h2>Premium Materials</h2>
<p>
Our Books use the best paper which is sourced locally. This will
increase the longevity of your purchase.
</p>
</div>
</div>
<div class="feature">
<i class="ri-truck-fill ri-4x icon"></i>
<div>
<h2>1 Day Shipping</h2>
<p>
We make sure you receive your classic book as soon as possible so
that you can start reading immediately. We also provide free returns
if you are not satisfied
</p>
</div>
</div>
<div class="feature">
<i class="ri-book-open-line ri-4x icon"></i>
<div>
<h2>Quality Books Only</h2>
<p>
We make sure to only provide awesome classic books. We guarantee
that the book you buy is one of the top classic books on the market.
</p>
</div>
</div>
</section>
<section id="audio">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/YKAfKprBXQc?si=KTR3cbx07-bFgxdU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
</iframe>
</section>
<!-- Random books for sale -->
<section id="for_sale">
<h2>For Sale</h2>
<div class="product-cards">
<!-- Book 1 -->
<div class="card">
<div class="product-image product1"></div>
<div class="inner-card">
<div class="author">Dale Carnegie</div>
<h1 class="header">How to Win Friends & Influence People</h1>
<p class="content">Dale Carnegie's rock-solid, time-tested advice has carried countless people up the ladder of success in their business Anderson lives.</p>
<div class="flex">
<p class="main-price">$16.12</p>
<p class="old-price">$19.29</p>
</div>
<button class="add">
<p style="margin-left: 5px">Add to Cart</p>
</button>
</div>
</div>
<!-- Book 2 -->
<div class="card">
<div class="product-image product2"></div>
<div class="inner-card">
<div class="author">Robert T. Kiyosaki</div>
<h1 class="header">Rich Dad Poor Dad</h1>
<p class="content">What the rich teach their kids that the poor and middle-class do not.</p>
<div class="flex">
<p class="main-price">$7.68</p>
<p class="old-price">$15.16</p>
</div>
<button class="add">
<p style="margin-left: 5px">Add to Cart</p>
</button>
</div>
</div>
<!-- Book 3 -->
<div class="card">
<div class="product-image product3"></div>
<div class="inner-card">
<div class="author">James Clear</div>
<h1 class="header">Atomic Habits</h1>
<p class="content">A supremely practical and useful book. James Clear distills the most fundamental information about habit formation, so you can accomplish more by focusing on less.</p>
<div class="flex">
<p class="main-price">$11.98</p>
<p class="old-price">$14.99</p>
</div>
<button class="add">
<p style="margin-left: 5px">Add to Cart</p>
</button>
</div>
</div>
</div>
</section>
</body>
</html>