From be7e340b38e941fba1450565a528dbc8582bde85 Mon Sep 17 00:00:00 2001 From: Siddhesh Rajale <113630547+Siddheshuncodes@users.noreply.github.com> Date: Mon, 30 Oct 2023 11:07:41 +0530 Subject: [PATCH 1/2] made some changes in HTML and CSS Improved the Structure of HTML and CSS also made the display book align --- css/index.css | 20 ++++++++++++-------- index.html | 30 +++++++++++++++--------------- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/css/index.css b/css/index.css index a12e0f5..8b7fc38 100644 --- a/css/index.css +++ b/css/index.css @@ -16,23 +16,26 @@ .search input[type="text"] { padding: 10px; - width: 190px; + width: 250px; /* Adjusted width for better visibility */ border-radius: 10px; + border: 1px solid var(--primary-color); /* Added border for better visibility */ } .search button[type="submit"] { padding: 10px 20px; - background-color: #333; + background-color: var(--primary-color); /* Adjusted button color */ color: var(--text-color-light); border: none; cursor: pointer; border-radius: 10px; + margin-left: 10px; /* Added margin for better alignment */ } /* Featured books section styles */ .featured-books { padding: 20px; overflow: hidden; + text-align: center; /* Centered the content */ } .featured-books h2 { @@ -40,14 +43,15 @@ padding: 10px; } -.img1 { - width: 150px; - display: flex; +.img-container { + display: flex; /* Changed class name to better represent its purpose */ + justify-content: space-around; /* Adjusted to evenly distribute the images */ } -.img1 img { - width: 100%; +.img-container img { + width: 100px; /* Adjusted image width for better display */ padding: 10px; - float: left; box-sizing: border-box; + border: 1px solid #ddd; /* Added border for better separation */ + border-radius: 5px; /* Added border radius for a better look */ } diff --git a/index.html b/index.html index 7eeee58..71a62f3 100644 --- a/index.html +++ b/index.html @@ -14,11 +14,11 @@ @@ -31,15 +31,15 @@

Welcome to the E-Library

- +

Featured Books

-
- - - +
+ Book 1 + Book 2 + Book 3
@@ -50,13 +50,13 @@

Featured Books

- \ No newline at end of file + From 995c1097426d11c07ac86b82d0ef71fae49a23f7 Mon Sep 17 00:00:00 2001 From: Siddhesh Rajale <113630547+Siddheshuncodes@users.noreply.github.com> Date: Mon, 30 Oct 2023 12:03:50 +0530 Subject: [PATCH 2/2] Added Book page This page will contain all the books which the readers can read in the future --- css/books.css | 74 +++++++++++++++++++++++++++++++++++++ css/index.css | 22 +++++------ pages/books.html | 96 ++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 181 insertions(+), 11 deletions(-) create mode 100644 css/books.css create mode 100644 pages/books.html diff --git a/css/books.css b/css/books.css new file mode 100644 index 0000000..da3e3d5 --- /dev/null +++ b/css/books.css @@ -0,0 +1,74 @@ +:root { + --primary-color: #aa5040; + --text-color-light: #ededed; +} + +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: var(--text-color-light); + color: #333; + padding-bottom: 60px; +} + +.books-container { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; + width: 100%; + max-width: 1200px; + margin: 0 auto; +} + +.book { + display: flex; + margin: 20px; + padding: 20px; + border: 1px solid var(--primary-color); + border-radius: 5px; + width: 100%; + background-color: #fff; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.book-image { + margin-right: 20px; + flex: 0 0 150px; +} + +.book-image img { + width: 100%; + height: auto; +} + +.book-details { + display: flex; + flex-direction: column; +} + +footer { + background-color: var(--primary-color); + color: var(--text-color-light); + padding: 10px; + text-align: center; + position: fixed; + bottom: 0; + width: 100%; +} + +footer .contact-info, +footer .static-pages { + display: flex; + justify-content: center; +} + +footer .static-pages ul { + padding: 0; +} + +footer .static-pages li { + display: inline; + margin: 0 10px; +} diff --git a/css/index.css b/css/index.css index 8b7fc38..36f0930 100644 --- a/css/index.css +++ b/css/index.css @@ -16,26 +16,26 @@ .search input[type="text"] { padding: 10px; - width: 250px; /* Adjusted width for better visibility */ + width: 250px; border-radius: 10px; - border: 1px solid var(--primary-color); /* Added border for better visibility */ + border: 1px solid var(--primary-color); } .search button[type="submit"] { padding: 10px 20px; - background-color: var(--primary-color); /* Adjusted button color */ + background-color: var(--primary-color); color: var(--text-color-light); border: none; cursor: pointer; border-radius: 10px; - margin-left: 10px; /* Added margin for better alignment */ + margin-left: 10px; } -/* Featured books section styles */ + .featured-books { padding: 20px; overflow: hidden; - text-align: center; /* Centered the content */ + text-align: center; } .featured-books h2 { @@ -44,14 +44,14 @@ } .img-container { - display: flex; /* Changed class name to better represent its purpose */ - justify-content: space-around; /* Adjusted to evenly distribute the images */ + display: flex; + justify-content: space-around; } .img-container img { - width: 100px; /* Adjusted image width for better display */ + width: 100px; padding: 10px; box-sizing: border-box; - border: 1px solid #ddd; /* Added border for better separation */ - border-radius: 5px; /* Added border radius for a better look */ + border: 1px solid #ddd; + border-radius: 5px; } diff --git a/pages/books.html b/pages/books.html new file mode 100644 index 0000000..00c5be2 --- /dev/null +++ b/pages/books.html @@ -0,0 +1,96 @@ + + + + + + + BOOKS + + + + +
+
+
+ Book 1 +
+
+

Harry Potter and the Sorcerer's Stone

+

Written by J.K. Rowling

+

First book in the Harry Potter series.

+
+
+ +
+
+ Book 2 +
+
+

To Kill a Mockingbird

+

Written by Harper Lee

+

A classic novel exploring racial injustice and loss of innocence.

+
+
+ +
+
+ Book 3 +
+
+

The Great Gatsby

+

Written by F. Scott Fitzgerald

+

Exploration of decadence and idealism in the Jazz Age.

+
+
+ +
+
+ Book 4 +
+
+

1984

+

Written by George Orwell

+

A dystopian novel depicting a totalitarian society.

+
+
+ +
+
+ Book 5 +
+
+

Brave New World

+

Written by Aldous Huxley

+

An exploration of a utopian society and its dark underbelly.

+
+
+ +
+
+ Book 6 +
+
+

The Catcher in the Rye

+

Written by J.D. Salinger

+

A classic novel exploring teenage angst and alienation.

+
+
+
+ + + + + +