-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbookDescription.html
152 lines (145 loc) · 12.6 KB
/
bookDescription.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Description</title>
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="CSS/style.css">
</head>
<body class="bg-[#EEFAFF] bg-background-texture bg-repeat">
<!-- navbar -->
<div id="main-navbar-placeholder" class="sticky top-0 z-50"></div>
<div id="sec-navbar-placeholder" class=""></div>
<script>
fetch('main-navbar.html')
.then(response => response.text())
.then(data => {
document.getElementById('main-navbar-placeholder').innerHTML = data;
});
fetch('sec-navbar.html')
.then(response => response.text())
.then(data => {
document.getElementById('sec-navbar-placeholder').innerHTML = data;
});
</script>
<main>
<div class="w-[644px] h-[292px] relative">
<div class="w-[550px] left-0 top-0 absolute text-black text-5xl font-normal font-['Otomanopee One']">Harry Potter: GOBLET of FIRE</div>
<div class="w-[550px] h-[43px] left-0 top-[170px] absolute text-black text-2xl font-normal font-['Otomanopee One']">J.K. ROWLING</div>
<div class="w-[644px] h-[66px] left-0 top-[226px] absolute text-black text-2xl font-normal font-['Nunito Sans']">Harry Potter and the Philosopher's Stone first hit shelves in the United Kingdom on June 26, 1997.</div>
</div>
<img class="w-[293px] h-[440px] shadow" src="https://via.placeholder.com/293x440" />
<div class="w-[1136px] h-[2139px] relative">
<div class="w-[1136px] h-[2139px] left-0 top-0 absolute bg-white shadow"></div>
<div class="w-[948px] h-[1860px] left-[94px] top-[237px] absolute">
<div class="w-[365px] h-[72px] left-[583px] top-[133px] absolute">
<div class="left-0 top-0 absolute text-center text-black text-2xl font-semibold font-['Oswald'] tracking-widest">Language</div>
<div class="w-[365px] left-0 top-[46px] absolute text-black text-xl font-normal font-['DM Sans']">Standard English (USA & UK)</div>
</div>
<div class="w-[365px] h-[72px] left-[583px] top-[240px] absolute">
<div class="left-0 top-0 absolute text-center text-black text-2xl font-semibold font-['Oswald'] tracking-widest">ISBN</div>
<div class="w-[365px] left-0 top-[46px] absolute text-black text-xl font-normal font-['DM Sans']">65161541651245</div>
</div>
<div class="w-[365px] h-[98px] left-[581px] top-0 absolute">
<div class="left-[2px] top-0 absolute text-center text-black text-2xl font-semibold font-['Oswald'] tracking-widest">Publisher</div>
<div class="w-[365px] left-0 top-[46px] absolute text-black text-xl font-normal font-['DM Sans']">Random Publisher<br/>June 2021</div>
</div>
<div class="w-[458px] h-[228px] left-[3px] top-0 absolute">
<div class="left-0 top-0 absolute text-center text-black text-2xl font-semibold font-['Oswald'] tracking-widest">Description</div>
<div class="w-[458px] left-0 top-[46px] absolute text-black text-xl font-normal font-['DM Sans']">Featuring vivid descriptions and an imaginative story line, it followed the adventures of the unlikely hero Harry Potter, a lonely orphan who discovers that he is actually a wizard and enrolls in the Hogwarts School of Witchcraft and Wizardry. The book received numerous awards, including the British Book Award.</div>
</div>
<div class="w-[458px] h-[566px] left-0 top-[263px] absolute">
<div class="left-0 top-0 absolute text-center text-black text-2xl font-semibold font-['Oswald'] tracking-widest">About the Author</div>
<div class="w-[458px] left-0 top-[46px] absolute text-black text-xl font-normal font-['DM Sans']">Sapphire is the author of the New York Times bestselling novel The Kid. She is also the author two books of poetry, American Dreams and Black Wings & Blind Angels. Her novel Push spent thirteen weeks in the number one position on the New York Times Bestseller List and was nominated for an NAACP Image Award in the category of Outstanding Literary Fiction. In 2009 Push was made into the Academy Award winning movie 'Precious' described by Rolling Stone Magazine as the Best Picture of 2009.
Sapphire's poetry and prose has been published in numerous journals and magazines including The New Yorker, Black Scholar, PN Review, Spin, and BOMB. Sapphire's work has been translated into fourteen languages and adapted for stage in North America, Europe and Africa.</div>
</div>
<div class="w-[946px] h-[996px] left-0 top-[864px] absolute">
<div class="left-0 top-0 absolute text-center text-black text-2xl font-semibold font-['Oswald'] tracking-widest">Rating & Reviews</div>
<div class="w-[946px] h-[225px] left-0 top-[51px] absolute">
<div class="w-[946px] h-[225px] left-0 top-0 absolute bg-[#e8e8e8] rounded-[25px]"></div>
<img class="w-[69.88px] h-[69.88px] left-[21.41px] top-[19.88px] absolute rounded-full" src="https://via.placeholder.com/70x70" />
<div class="left-[105.59px] top-[42.12px] absolute text-black text-[19.06px] font-normal font-['Nunito Sans']">Person Name</div>
<div class="left-[21.24px] top-[193px] absolute text-black/40 text-sm font-normal font-['Nunito Sans']">18 Likes</div>
<div class="w-[880px] h-[74px] left-[21px] top-[102px] absolute text-black text-[19.06px] font-normal font-['DM Sans'] leading-normal">Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever.</div>
<div class="w-[170px] h-7 left-[731px] top-[47px] absolute rounded-[25px]"></div>
</div>
<div class="w-[946px] h-[225px] left-0 top-[291px] absolute">
<div class="w-[946px] h-[225px] left-0 top-0 absolute bg-[#e8e8e8] rounded-[25px]"></div>
<img class="w-[69.88px] h-[69.88px] left-[21.41px] top-[19.88px] absolute rounded-full" src="https://via.placeholder.com/70x70" />
<div class="left-[105.59px] top-[42.12px] absolute text-black text-[19.06px] font-normal font-['Nunito Sans']">Person Name</div>
<div class="left-[21.24px] top-[193px] absolute text-black/40 text-sm font-normal font-['Nunito Sans']">18 Likes</div>
<div class="w-[880px] h-[74px] left-[21px] top-[102px] absolute text-black text-[19.06px] font-normal font-['DM Sans'] leading-normal">Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever.</div>
<div class="w-[170px] h-7 left-[731px] top-[47px] absolute rounded-[25px]"></div>
</div>
<div class="w-[946px] h-[225px] left-0 top-[531px] absolute">
<div class="w-[946px] h-[225px] left-0 top-0 absolute bg-[#e8e8e8] rounded-[25px]"></div>
<img class="w-[69.88px] h-[69.88px] left-[21.41px] top-[19.88px] absolute rounded-full" src="https://via.placeholder.com/70x70" />
<div class="left-[105.59px] top-[42.12px] absolute text-black text-[19.06px] font-normal font-['Nunito Sans']">Person Name</div>
<div class="left-[21.24px] top-[193px] absolute text-black/40 text-sm font-normal font-['Nunito Sans']">18 Likes</div>
<div class="w-[880px] h-[74px] left-[21px] top-[102px] absolute text-black text-[19.06px] font-normal font-['DM Sans'] leading-normal">Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever.</div>
<div class="w-[170px] h-7 left-[731px] top-[47px] absolute rounded-[25px]"></div>
</div>
<div class="w-[946px] h-[225px] left-0 top-[771px] absolute">
<div class="w-[946px] h-[225px] left-0 top-0 absolute bg-[#e8e8e8] rounded-[25px]"></div>
<img class="w-[69.88px] h-[69.88px] left-[21.41px] top-[19.88px] absolute rounded-full" src="https://via.placeholder.com/70x70" />
<div class="left-[105.59px] top-[42.12px] absolute text-black text-[19.06px] font-normal font-['Nunito Sans']">Person Name</div>
<div class="left-[21.24px] top-[193px] absolute text-black/40 text-sm font-normal font-['Nunito Sans']">18 Likes</div>
<div class="w-[880px] h-[74px] left-[21px] top-[102px] absolute text-black text-[19.06px] font-normal font-['DM Sans'] leading-normal">Lorem Ipsum is simply dummy text of the printing and typesetting industryLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever.</div>
<div class="w-[170px] h-7 left-[731px] top-[47px] absolute rounded-[25px]"></div>
</div>
</div>
</div>
<div class="w-[133px] h-[59px] left-[970px] top-[82px] absolute">
<div class="w-[59px] h-[59px] left-[74px] top-0 absolute">
<div class="w-[59px] h-[59px] left-0 top-0 absolute bg-[#d9d9d9] rounded-full"></div>
<div class="w-[45px] h-[45px] left-[7px] top-[7px] absolute"></div>
</div>
<div class="w-[59px] h-[59px] left-0 top-0 absolute">
<div class="w-[59px] h-[59px] left-0 top-0 absolute bg-[#d9d9d9] rounded-full"></div>
<div class="w-[39px] h-10 left-[10px] top-[10px] absolute"></div>
</div>
</div>
<div class="w-56 h-10 left-[879px] top-[21px] absolute">
<div class="w-56 h-10 left-0 top-0 absolute rounded-[25px]"></div>
</div>
<div class="w-[444px] h-20 left-[415px] top-[71px] absolute">
<div class="w-[122px] h-20 left-0 top-0 absolute">
<div class="w-[122px] h-20 left-0 top-0 absolute rounded-[10px] border-2 border-[#b97b3b]"></div>
<div class="w-[97.57px] h-[75.27px] left-[12px] top-[2px] absolute">
<div class="w-[97.57px] h-[27.40px] left-0 top-[32.88px] absolute text-center text-[#b97b3b] text-xl font-bold font-['Oswald'] tracking-widest">E-BOOK</div>
<div class="left-[18px] top-[60.27px] absolute text-center text-black text-[10px] font-normal font-['Oswald'] tracking-wide">*FOR 45 DAYS</div>
<div class="w-[57px] h-[32.88px] left-[20px] top-0 absolute">
<div class="w-[27px] h-[32.88px] left-[30px] top-0 absolute text-black text-[22px] font-bold font-['Nunito Sans']">10</div>
<div class="w-[25px] h-[27.40px] left-0 top-[3.29px] absolute">
</div>
</div>
</div>
</div>
<div class="w-[122px] h-20 left-[147px] top-0 absolute">
<div class="w-[122px] h-20 left-0 top-0 absolute rounded-[10px] border-2 border-[#b67bbc]"></div>
<div class="w-[97.57px] h-[70px] left-[12px] top-[5px] absolute">
<div class="w-[97.57px] h-[25px] left-0 top-[30px] absolute text-center text-[#b67bbc] text-xl font-bold font-['Oswald'] tracking-widest">RENT</div>
<div class="left-[18px] top-[55px] absolute text-center text-black text-[10px] font-normal font-['Oswald'] tracking-wide">*FOR 15 DAYS</div>
<div class="w-[57px] h-[30px] left-[20px] top-0 absolute">
<div class="left-[30px] top-0 absolute text-black text-[22px] font-bold font-['Nunito Sans']">25</div>
<div class="w-[25.07px] h-[25px] left-0 top-[3px] absolute">
</div>
</div>
</div>
</div>
<div class="w-[150px] h-20 left-[294px] top-0 absolute">
<div class="w-[150px] h-20 left-0 top-0 absolute rounded-[10px] border-2 border-[#0e8026]"></div>
<div class="w-[103px] h-[62.47px] left-[24px] top-[9px] absolute">
<div class="w-[103px] h-[32.88px] left-0 top-[29.59px] absolute text-center text-[#0e8026] text-xl font-bold font-['Oswald'] tracking-widest">PURCHASE</div>
<div class="w-[83px] h-[32.88px] left-[10px] top-0 absolute">
<div class="w-[53px] h-[32.88px] left-[30px] top-0 absolute text-black text-[22px] font-bold font-['Nunito Sans']">1000</div>
<div class="w-[25px] h-[27.40px] left-0 top-[3.29px] absolute">
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>