Uaman · NazariyRomanyuk · Jun 17, 2025 · Jun 19, 2025 · Jun 22, 2025 · Jun 22, 2025
diff --git a/books.json b/books.json
@@ -0,0 +1,91 @@
+[
+    {
+        "title": "The Great Gatsby",
+        "author": "F. Scott Fitzgerald",
+        "image": "images/gatsby.png",
+        "genre": "Tragedy",
+        "year":  1925,
+        "language": "English"
+    },
+    {
+        "title": "To Kill a Mockingbird",
+        "author": "Harper Lee",
+        "image": "images/to-kill-a-mockingbird.png",
+        "genre": "Southern Gothic",
+        "year": 1960,
+        "language": "English"
+    },
+    {
+        "title": "1984",
+        "author": "George Orwell",
+        "image": "images/1984.png",
+        "genre": "Dystopian",
+        "year": 1949,
+        "language": "English"
+    },
+    {
+        "title": "Moby Dick",
+        "author": "Herman Melville",
+        "image": "images/moby-dick.png",
+        "genre": "Adventure",
+        "year": 1851,
+        "language": "English"
+    },
+    {
+        "title": "The Catcher in the Rye",
+        "author": "J.D. Salinger",
+        "image": "images/catcher.png",
+        "genre": "Realistic",
+        "year": 1951,
+        "language": "English"
+    },
+    {
+        "title": "Pride and Prejudice",
+        "author": "Jane Austen",
+        "image": "images/pride-and-prejudice.png",
+        "genre": "Classic Regency",
+        "year": 1813,
+        "language": "English"
+    },
+    {
+        "title": "Hiroshima",
+        "author": "John Hersey",
+        "image": "images/hiroshima.jpg",
+        "genre": "Historic",
+        "year": 1946,
+        "language": "English"
+    },
+    {
+        "title": "The Hobbit",
+        "author": "J.R.R. Tolkien",
+        "image": "images/hobbit.png",
+        "genre": "Fantasy",
+        "year": 1937,
+        "language": "English"
+    },
+    {
+        "title": "Fahrenheit 451",
+        "author": "Ray Bradbury",
+        "image": "images/fahrenheit.png",
+        "genre": "Science Fiction",
+        "year": 1953,
+        "language": "English"
+    },
+    {
+        "title": "Енеїда",
+        "author": "Іван Котляревський",
+        "image": "images/eneyida.jpeg",
+        "genre": "Burlesque",
+        "year": 1798,
+        "language": "Українська"
+    },
+    {
+        "title": "Кайдашева Сім'я",
+        "author": "Іван Нечуй-Левицький",
+        "image": "images/kaydasheva-simya.jpg",
+        "genre": "Social",
+        "year": 1879,
+        "language": "Українська"
+    }
+
+]
diff --git a/favorites.html b/favorites.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Online Book Library</title>
+    <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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./style/style.css">
+    <script src="./src/main.js" defer></script>
+</head>
+
+<body>
+    <div class="container">
+        <header class="header mobile-or-normal-display">
+            <h1 class="header-title mobile-display">Online Library</h1>
+            <h1 class="header-title normal-display">ONLINE LIBRARY</h1>
+            <div class="header-actions">
+                <button class="filter-button">Filter</button>
+                <button class="sort-button">Sort</button>
+            </div>
+        </header>
+
+        <header class="header desktop-display">
+            <h1 class="header-title">Online Book Library</h1>
+            <div class="desktop-button-container">
+                <button class="back-to-main-button" onclick="window.location.href='index.html'">Back to main</button>
+                <button class="sign-in-button">Sign In</button>
+            </div>
+        </header>
+
+
+        <main class="main-layout">
+            <aside class="filter-panel desktop-display">
+                <h2>Filter</h2>
+                <section class="filter-group" id="genre-section">
+                    <h3>Genre</h3>
+                </section>
+                <section class="filter-group" id="author-section">
+                    <h3>Author</h3>
+                    <input class="author-field" type="text" name="author" placeholder="Enter author">
+                </section>
+                <section class="filter-group" id="year-section">
+                    <h3>Year</h3>
+                </section>
+                <section class="filter-group" id="language-section">
+                    <h3>Language</h3>
+                </section>
+            </aside>
+            <section class="featured-books">
+                <div class="mobile-normal-featured-header mobile-or-normal-display">
+                    <h2 class="featured-heading mobile-display">Favorite Books</h2>
+                    <h2 class="featured-heading normal-display">Favorites</h2>
+                    <button class="back-to-main-button" onclick="window.location.href='index.html'">Back to main</button>
+                </div>
+
+                <div class="featured-header desktop-display">
+                    <h2 class="featured-heading">Favorites</h2>
+
+                    <select class="dropdown" name="sort-options" id="sort-options">
+                        <option value="default">Sort by:</option>
+                        <option value="date-newest">Newest</option>
+                        <option value="date-oldest">Oldest</option>
+                        <option value="genre">Genre</option>
+                    </select>
+                </div>
+
+                <div class="books" id="book-list"></div>
+            </section>
+        </main>
+    </div>    
+    <div class="modal-overlay hidden" id="modal-overlay">
+    <div class="modal" id="book-modal">
+        <button class="modal-close" id="modal-close">✖</button>
+        <div class="modal-content" id="modal-content"></div>
+    </div>
+    </div>
+</body>
+</html>
diff --git a/images/1984.png b/images/1984.png
diff --git a/images/arrow.svg b/images/arrow.svg
diff --git a/images/catcher.png b/images/catcher.png
diff --git a/images/eneyida.jpeg b/images/eneyida.jpeg
diff --git a/images/fahrenheit.png b/images/fahrenheit.png
diff --git a/images/gatsby.png b/images/gatsby.png
diff --git a/images/hiroshima.jpg b/images/hiroshima.jpg
diff --git a/images/hobbit.png b/images/hobbit.png
diff --git a/images/kaydasheva-simya.jpg b/images/kaydasheva-simya.jpg
diff --git a/images/moby-dick.png b/images/moby-dick.png
diff --git a/images/pride-and-prejudice.png b/images/pride-and-prejudice.png
diff --git a/images/sapiens.png b/images/sapiens.png
diff --git a/images/to-kill-a-mockingbird.png b/images/to-kill-a-mockingbird.png
diff --git a/index.html b/index.html
@@ -3,11 +3,83 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Simple HTML Page</title>
+    <title>Online Book Library</title>
+    <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=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="./style/style.css">
     <script src="./src/main.js" defer></script>
 </head>
+
 <body>
+    <div class="container">
+        <header class="header mobile-or-normal-display">
+            <h1 class="header-title mobile-display">Online Library</h1>
+            <h1 class="header-title normal-display">ONLINE LIBRARY</h1>
+            <div class="header-actions">
+                <button class="filter-button">Filter</button>
+                <select class="sort-button dropdown">
+                    <option value="default">Sort</option>
+                    <option value="date-newest">Newest</option>
+                    <option value="date-oldest">Oldest</option>
+                    <option value="genre">Genre</option>
+                </select>
+            </div>
+        </header>
+
+        <header class="header desktop-display">
+            <h1 class="header-title">Online Book Library</h1>
+            <div class="desktop-button-container">
+                <button class="favorites-page-button" onclick="window.location.href='favorites.html'">Favorites</button>
+                <button class="sign-in-button">Sign In</button>
+            </div>
+
+        </header>
+
+
+        <main class="main-layout">
+            <aside class="filter-panel desktop-display">
+                <h2>Filter</h2>
+                <section class="filter-group" id="genre-section">
+                    <h3>Genre</h3>
+                </section>
+                <section class="filter-group" id="author-section">
+                    <h3>Author</h3>
+                    <input class="author-field" type="text" name="author" placeholder="Enter author">
+                </section>
+                <section class="filter-group" id="year-section">
+                    <h3>Year</h3>
+                </section>
+                <section class="filter-group" id="language-section">
+                    <h3>Language</h3>
+                </section>
+            </aside>
+            <section class="featured-books">
+                <div class="mobile-normal-featured-header mobile-or-normal-display">
+                    <h2 class="featured-heading mobile-display">Featured Books</h2>
+                    <h2 class="featured-heading normal-display">Featured</h2>
+                    <button class="favorites-page-button" onclick="window.location.href='favorites.html'">Favorites</button>
+                </div>
+                <div class="featured-header desktop-display">
+                    <h2 class="featured-heading">Featured</h2>
 
+                    <select class="dropdown" name="sort-options" id="sort-options">
+                        <option value="default">Sort by:</option>
+                        <option value="date-newest">Newest</option>
+                        <option value="date-oldest">Oldest</option>
+                        <option value="genre">Genre</option>
+                    </select>
+                </div>
+
+                <div class="books" id="book-list"></div>
+            </section>
+        </main>
+    </div>    
+    <div class="modal-overlay hidden" id="modal-overlay">
+        <div class="modal" id="book-modal">
+        <button class="modal-close" id="modal-close">✖</button>
+        <div class="modal-content" id="modal-content"></div>
+    </div>
+</div>
 </body>
 </html>