Merge pull request #2 from Miami-University-ETBD/added-materialize.html

Added materialize.html
Miami-University-ETBD · Oct 28, 2024 · 17ae3a2 · 17ae3a2
2 parents ca6209d + d7444f9
commit 17ae3a2
Show file tree

Hide file tree

Showing 21 changed files with 573 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git a/docs b/docs
diff --git a/image/IMG_3403.jpeg b/image/IMG_3403.jpeg
diff --git a/image/IMG_6102.jpeg b/image/IMG_6102.jpeg
diff --git a/image/IMG_6435.jpeg b/image/IMG_6435.jpeg
diff --git a/image/IMG_6472.jpeg b/image/IMG_6472.jpeg
diff --git a/image/IMG_6473.jpeg b/image/IMG_6473.jpeg
diff --git a/image/IMG_6714.JPG b/image/IMG_6714.JPG
diff --git a/image/Screenshot 2024-10-14 at 7.41.41 PM.png b/image/Screenshot 2024-10-14 at 7.41.41 PM.png
diff --git a/image/Screenshot 2024-10-14 at 7.42.06 PM.png b/image/Screenshot 2024-10-14 at 7.42.06 PM.png
diff --git a/image/Screenshot 2024-10-14 at 7.42.52 PM.png b/image/Screenshot 2024-10-14 at 7.42.52 PM.png
diff --git a/image/Spectacular.png b/image/Spectacular.png
diff --git a/image/heri.png b/image/heri.png
diff --git a/image/marcus.png b/image/marcus.png
diff --git a/image/weddingwitch.png b/image/weddingwitch.png
diff --git a/index.html b/index.html
@@ -0,0 +1,141 @@
+<!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>
+                </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)">&#10094;</a>
+                <a class="next" onclick="plusSlides(1)">&#10095;</a>
+            </div>
+        </section>
+
+        <button onclick="showAlert()">Click me!</button>
+
+        <footer>
+            <p>&copy; 2024 All About Books | Contact: [email protected]</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>
diff --git a/learnmore.html b/learnmore.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Learn More About Me</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+    <header>
+        <h1>Welcome to All About Books</h1>
+        <p>This site will show everything about books! Starting with what I have read, reviewed, TBR, ratings, favorite authors, and more.</p>
+        <nav>
+            <ul>
+                <li><a href="index.html">Home</a></li>
+                <li><a href="reviews.html">Book Reviews</a></li>
+                <li><a href="learnmore.html">Learn More About Me</a></li>
+                <li><a href="materialize.html">Book News</a></li>
+
+            </ul>
+        </nav>
+    </header>
+
+    <section>
+        <h2>About Me</h2>
+        <p>At 20, I find myself with a passion for design and technology, currently pursuing a degree in 
+            emerging technology and business in design. My favorite pastime is using my creativity which shines 
+            through my love for redecorating my room and hanging out with my friends. Throughout the week you can 
+            find me serving at Perkins, A bakery and restaurant along with being at school the other days. In my 
+            downtime, I enjoy cozying up with a good book and an iced coffee, all while being accompanied by my beloved 
+            Bengal Tiger cat, Tittin. When the weather permits, I trade books for snowboarding, embracing the thrill of the 
+            slopes as a perfect complement to my busy life. </p>
+    </section>
+
+    <section>
+        <h2>Meet My Cat</h2>
+        <img src="image/IMG_6472.jpeg" alt="My cat" style="max-width: 60%; height: auto;" />
+        <p>This is my cat, who loves to curl up next to me while I read.</p>
+    </section>
+
+    <section>
+        <h2>Some of My Favorite Books</h2>
+        <ul>
+            <li>Throne of Glass by Sarah J. Maas</li>
+            <li>The Kindred Curse series by Penn Cole</li>
+            <li>Fourth Wing by Rebecca Roberts</li>
+            <li>Percy Jackson by Rick Riordan</li>
+        </ul>
+    </section>
+
+    <footer>
+        <p>&copy; 2024 All About Books | Contact: [email protected]</p>
+    </footer>
+</body>
+</html>
diff --git a/materialize.html b/materialize.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+   <meta charset="UTF-8">
+   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+   <title>Books, Books, & Books - Book Edition</title>
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
+   <style>
+       body {
+           background-color: #ede7f6;
+           font-family: Arial, sans-serif;
+       }
+       .header-bg {
+           background-color: #5e35b1;
+       }
+       .section-bg {
+           background-color: #d1c4e9;
+       }
+       h4, .media-container h5 {
+           color: #512da8;
+       }
+       .blockquote {
+           color: #7e57c2;
+           font-style: italic;
+       }
+       .circle-img {
+           width: 100%;
+           border-radius: 50%;
+           box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
+       }
+   </style>
+</head>
+<body>
+
+   <nav class="header-bg">
+       <div class="nav-wrapper">
+           <ul>
+               <li><a href="index.html">Home</a></li>
+               <li><a href="reviews.html">Book Recommendations</a></li>
+               <li><a href="learnmore.html">About me</a></li>
+               <li><a href="materialize.html">Book News!</a></li>
+           </ul>
+       </div>
+   </nav>
+
+   <div class="section header-bg center-align">
+       <h1 class="white-text">Whats new in Literature</h1>
+       <p class="white-text">Discover Your Next Favorite Book, Author and more.</p>
+   </div>
+
+   <div class="container section section-bg">
+    <div class="row">
+        <div class="col s12 m6">
+            <img src="image/marcus.png" alt="Reading Corner" class="responsive-img circle-img" style="width: 100px; height: auto;">
+            <blockquote>“A room without books is like a body without a soul.” – Marcus Tullius Cicero</blockquote>
+        </div>
+
+           <div class="col s12 m6">
+               <h4>Whats new in the book world </h4>
+               <p>This page is to keep up with the latest and trendiest news in the book world!
+                Starting with the beloved book serious, known for breaking records and beautifuly written characters 
+                (I Love you Xadion) FOURTH WING!!! Book 1 of the Empyrean series written by the one and only Rebbeca Yarros. 
+               </p>
+           </div>
+       </div>
+   </div>
+
+   <!-- Featured Book Video -->
+   <div class="container section">
+       <div class="row">
+           <div class="col s12 m6">
+               <h4>Interview with the Author of Fourth Wing! Meet Rebecca Yarros</h4>
+               <p>Watch Rebbeca Talk about her next book for one the most popular book series to date!</p>
+            </div>
+            <div class="col s12 m6">
+                <div class="video-container">
+                    <iframe width="560" height="315" src="https://www.youtube.com/embed/S_Lm56IVaNw" frameborder="0" allowfullscreen></iframe>
+                </div>
+           </div>
+       </div>
+   </div>
+
+<!-- Circular Book Image -->
+<div class="container section section-bg">
+    <h4 class="center-align">The Latest Book Drops for October</h4>
+    <div class="row">
+        <div class="col s4">
+            <img src="image/Spectacular.png" alt="Spectacular Book Cover" class="responsive-img circle">
+            <blockquote class="center-align">Spectacular (Caraval, #3.5) by Stephanie Garber</blockquote>
+        </div>
+        <div class="col s4">
+            <img src="image/heri.png" alt="Heir Book Cover" class="responsive-img circle">
+            <blockquote class="center-align">Heir (Heir Duology, #1) By Sabaa Tahir</blockquote>
+        </div>
+        <div class="col s4">
+            <img src="image/weddingwitch.png" alt="The Wedding Witch Book Cover" class="responsive-img circle">
+            <blockquote class="center-align">The Wedding Witch (The Ex Hex, #3) By Erin Sterling</blockquote>
+        </div>
+    </div>
+</div>
+
+
+
+   <footer class="page-footer header-bg">
+       <div class="container">
+           <div class="row">
+               <div class="col s12 center-align">
+                   <p class="white-text">&copy; 2024 Literary News. All rights reserved.</p>
+               </div>
+           </div>
+       </div>
+   </footer>
+
+   <!-- Materialize JS -->
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
+   <script>
+       document.addEventListener('DOMContentLoaded', function() {
+           var elems = document.querySelectorAll('.materialboxed');
+           var instances = M.Materialbox.init(elems);
+       });
+   </script>
+</body>
+</html>