-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #26 from Siddheshuncodes/main
Add books.html
- Loading branch information
Showing
4 changed files
with
198 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>BOOKS</title> | ||
| <link rel="stylesheet" href="/css/books.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="books-container"> | ||
| <div class="book"> | ||
| <div class="book-image"> | ||
| <img src="./images/book1.jpg" alt="Book 1"> | ||
| </div> | ||
| <div class="book-details"> | ||
| <h3>Harry Potter and the Sorcerer's Stone</h3> | ||
| <p>Written by J.K. Rowling</p> | ||
| <p>First book in the Harry Potter series.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="book"> | ||
| <div class="book-image"> | ||
| <img src="./images/book2.jpg" alt="Book 2"> | ||
| </div> | ||
| <div class="book-details"> | ||
| <h3>To Kill a Mockingbird</h3> | ||
| <p>Written by Harper Lee</p> | ||
| <p>A classic novel exploring racial injustice and loss of innocence.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="book"> | ||
| <div class="book-image"> | ||
| <img src="./images/book3.jpg" alt="Book 3"> | ||
| </div> | ||
| <div class="book-details"> | ||
| <h3>The Great Gatsby</h3> | ||
| <p>Written by F. Scott Fitzgerald</p> | ||
| <p>Exploration of decadence and idealism in the Jazz Age.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="book"> | ||
| <div class="book-image"> | ||
| <img src="./images/book4.jpg" alt="Book 4"> | ||
| </div> | ||
| <div class="book-details"> | ||
| <h3>1984</h3> | ||
| <p>Written by George Orwell</p> | ||
| <p>A dystopian novel depicting a totalitarian society.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="book"> | ||
| <div class="book-image"> | ||
| <img src="./images/book5.jpg" alt="Book 5"> | ||
| </div> | ||
| <div class="book-details"> | ||
| <h3>Brave New World</h3> | ||
| <p>Written by Aldous Huxley</p> | ||
| <p>An exploration of a utopian society and its dark underbelly.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="book"> | ||
| <div class="book-image"> | ||
| <img src="./images/book6.jpg" alt="Book 6"> | ||
| </div> | ||
| <div class="book-details"> | ||
| <h3>The Catcher in the Rye</h3> | ||
| <p>Written by J.D. Salinger</p> | ||
| <p>A classic novel exploring teenage angst and alienation.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <footer> | ||
| <div class="contact-info"> | ||
| <p>Contact information</p> | ||
| </div> | ||
| <div class="static-pages"> | ||
| <ul> | ||
| <li><a href="./pages/about-us.html">About Us</a></li> | ||
| <li><a href="./pages/contact.html">Contact Us</a></li> | ||
| <li><a href="./pages/privacy.html">Privacy Policy</a></li> | ||
| <li><a href="./pages/terms.html">Terms of Service</a></li> | ||
| </ul> | ||
| </div> | ||
| </footer> | ||
|
|
||
| </body> | ||
|
|
||
| </html> |