-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (129 loc) · 5.42 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>All About Books</title>
<link rel="stylesheet" href="styles.css">
<script>
function showAlert() {
alert("Hey! Thank you for visiting my site! ❤️");
}
</script>
</head>
<body>
<div class="container">
<header class="header">
<h1>Welcome to All About Books</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="reviews.html">Book Reviews</a></li>
<li><a href="learnmore.html">About Me</a></li>
<li><a href="materialize.html">Book News</a></li>
<li><a href="jquery.html">Book recomendation - Extras</a></li>
<li><a href="bootstrap.html">Fantasy</a></li>
</ul>
</nav>
<p>This site is everything books! Starting with what I have read, reviewed, TBR, ratings, favorite authors, and a little about me.</p>
</header>
<section>
<h2>Favorite/Most Read Genres</h2>
<p class="bold italic">Books are a big part of my world and as I like to say, "A book a day keeps reality away!"</p>
<p>Top genres:</p>
<ul>
<li>Fantasy</li>
<li>Romance</li>
<li>Mystery</li>
<li>Romantasy</li>
<li>Thriller</li>
</ul>
</section>
<section>
<h2>My ALL-TIME Favorite Series</h2>
<p><span class="underline">Throne of Glass by Sarah J. Maas</span> is an eight-book saga that takes you through a world long since burned to ash, where there lived a girl who loved her kingdom very much. In this series, you'll follow the life of:</p>
<ol>
<li>Celaena Sardothien, the assassin.</li>
<li>Lillian Gordaina, the wannabe King's Champion.</li>
<li>Aelin Ashryver Galathynius, the Lost Heir of Terrasen.</li>
</ol>
</section>
<section>
<h2>My missing cat A.K.A Milo along with a book I read over a year ago!</h2>
<img src="image/IMG_3403.jpeg" alt="Cover of a book and Milo" style="max-width: 50%; height: auto;" />
<p>This book was a good romcom, but I mainly added this for the aesthetic of my two favorite things! Cats and Books!</p>
</section>
<aside>
<h2>Latest Reads</h2>
<table>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
</tr>
<tr>
<td>City of Gods and Monsters</td>
<td>Kayla Edwards</td>
<td>Romantasy and Thriller</td>
</tr>
<tr>
<td>City of Souls and Sinners (Book 2)</td>
<td>Kayla Edwards</td>
<td>Romantasy and Thriller</td>
</tr>
<tr>
<td>Heart of the Everflame (Book 3 of the Kindred Curse Series)</td>
<td>Penn Cole</td>
<td>Romantasy & War</td>
</tr>
</table>
</aside>
<!-- TBR Slideshow Section -->
<section>
<h2>Books on My TBR</h2>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="image/Screenshot 2024-10-14 at 7.42.06 PM.png" alt="Divine Rivals by Rebecca Ross" style="width:100%">
<div class="text">Divine Rivals by Rebecca Ross</div>
</div>
<div class="mySlides fade">
<img src="image/Screenshot 2024-10-14 at 7.42.52 PM.png" alt="Thrum by Meg Smitherman" style="width:100%">
<div class="text">Thrum by Meg Smitherman</div>
</div>
<div class="mySlides fade">
<img src="image/Screenshot 2024-10-14 at 7.41.41 PM.png" alt="Quicksilver by Callie Hart" style="width:100%">
<div class="text">Quicksilver by Callie Hart</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
</section>
<button onclick="showAlert()">Click me!</button>
<footer>
<p>© 2024 All About Books | Contact: Vayoc@miamioh.edu</p>
</footer>
</div>
<!-- JavaScript for slideshow -->
<script>
let slideIndex = 0;
showSlides();
function showSlides() {
let i;
const slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex - 1].style.display = "block";
setTimeout(showSlides, 3000);
}
function plusSlides(n) {
slideIndex += n;
if (slideIndex > slides.length) {slideIndex = 1}
if (slideIndex < 1) {slideIndex = slides.length}
showSlides();
}
</script>
</body>
</html>