diff --git a/images/1984.png b/images/1984.png new file mode 100644 index 0000000..1696ad6 Binary files /dev/null and b/images/1984.png differ diff --git a/images/arrow.svg b/images/arrow.svg new file mode 100644 index 0000000..eaa659d --- /dev/null +++ b/images/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/catcher.png b/images/catcher.png new file mode 100644 index 0000000..db61ded Binary files /dev/null and b/images/catcher.png differ diff --git a/images/fahrenheit.png b/images/fahrenheit.png new file mode 100644 index 0000000..3f2a3ae Binary files /dev/null and b/images/fahrenheit.png differ diff --git a/images/gatsby.png b/images/gatsby.png new file mode 100644 index 0000000..a9e09bd Binary files /dev/null and b/images/gatsby.png differ diff --git a/images/hobbit.png b/images/hobbit.png new file mode 100644 index 0000000..7d2d083 Binary files /dev/null and b/images/hobbit.png differ diff --git a/images/moby-dick.png b/images/moby-dick.png new file mode 100644 index 0000000..83db099 Binary files /dev/null and b/images/moby-dick.png differ diff --git a/images/pride-and-prejudice.png b/images/pride-and-prejudice.png new file mode 100644 index 0000000..15867d2 Binary files /dev/null and b/images/pride-and-prejudice.png differ diff --git a/images/sapiens.png b/images/sapiens.png new file mode 100644 index 0000000..cd8f60f Binary files /dev/null and b/images/sapiens.png differ diff --git a/images/to-kill-a-mockingbird.png b/images/to-kill-a-mockingbird.png new file mode 100644 index 0000000..10eb060 Binary files /dev/null and b/images/to-kill-a-mockingbird.png differ diff --git a/index.html b/index.html index 09c6dc0..433d806 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,137 @@ - Simple HTML Page + Online Book Library + + + +
+
+

Online Library

+

ONLINE LIBRARY

+
+ + +
+
+ +
+

Online Book Library

+ +
+ + +
+ +
+

Featured Books

+

Featured

+
+

Featured

+ + +
+ +
+
+ The Great Gatsby + +

The Great Gatsby

+

F. Scott Fitzgerald

+ +
+
+ To Kill a Mockingbird + + +

To Kill a Mockingbird

+

Harper Lee

+ + +
+
+ 1984 + +

1984

+

George Orwell

+ + +
+
+ Moby Dick + +

Moby Dick

+

Herman Melville

+ +
+
+ The Catcher in the Rye + +

The Catcher in the Rye

+

J.D. Salinger

+ +
+
+ Pride and Prejudice + +

Pride and Prejudice

+

Jane Austen

+ +
+
+ Sapiens + +

Sapiens

+

Yuval Noah Harari

+ +
+
+ The Hobbit + +

The Hobbit

+

J.R.R. Tolkien

+ +
+
+ Fahrenheit 451 + +

Fahrenheit 451

+

Ray Bradbury

+ +
+
+
+
+
\ No newline at end of file diff --git a/style/style.css b/style/style.css index e69de29..2f394ac 100644 --- a/style/style.css +++ b/style/style.css @@ -0,0 +1,340 @@ +body { + font-family: "Inter", sans-serif; + margin: 0; +} +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 1rem 1rem 1.5rem; + border-bottom: 2px solid lightgray; +} +.header-title { + font-weight: 600; +} +.header-actions { + display: flex; + justify-content: space-between; + align-items: center; + min-width: 28%; + margin-right: 9%; + padding-left: 5%; +} +.filter-button, .sort-button { + background-color: white; + border-radius: 0.4rem; + padding-left: 12%; + padding-right: 12%; + padding-top: 8%; + padding-bottom: 8%; + margin-right: 8%; + font-size: 1.1rem; + font-family: 'Inter', sans-serif; + border: 1px solid #8c8c8c; +} +.featured-books { + padding-left: 1.5rem; +} +.featured-heading { + font-size: 1.9rem; + font-weight: 600; + + margin-bottom: 6%; +} +.book-card { + display: flex; + align-items: center; + padding-bottom: 1.5rem; +} +.book-info { + margin-left: 5%; + margin-bottom: 9%; +} +.title { + font-size: 1.4rem; + font-weight: 600; +} +.author { + font-size: 1.2rem; + margin-top: -7%; +} +.cover { + max-width: 150px; + border-radius: 0.5rem; +} +.mobile-display { + display: auto; +} +.mobile-or-normal-display { + display: auto; +} +.normal-display { + display: none; +} +.desktop-display { + display: none; +} +@media (min-width: 431px) { + body { + background-color: #f8f6f2; + margin: 0 + + } + .container { + background-color: white; + max-width: 80%; + margin-left: auto; + margin-right: auto; + margin-top: 10%; + margin-bottom: 10%; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.05); + border-radius: 0.75rem; + border: 1px solid #e4e1de; + } + .header-title { + font-size: 1.4rem; + } + .header-actions { + margin-right: 0%; + padding-left: 0%; + } + .header { + border-bottom: 1px solid #e0deda; + margin-left: 1.5rem; + margin-right: 1.5rem; + padding-left: 0; + padding-right: 0; + } + .sort-button, .filter-button { + border: none; + padding-left: 0; + padding-right: 0; + } + .sort-button { + margin-right: 0; + } + .sort-button::after { + content: "⏷"; + font-size: 1rem; + position: relative; + left: 1px; + top: -2px; + } + .featured-heading { + font-size: 2rem; + } + .books { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); + gap: 1.5rem; + padding: 0 1.5rem 0 0rem; + } + + .book-card { + display: flex; + flex-direction: column; + align-items: stretch; + width: 100%; + } + + .cover { + width: 100%; + aspect-ratio: 3 / 4; + object-fit: cover; + border-radius: 0.3rem; + display: block; + } + .book-info { + margin-left: 0%; + margin-bottom: 0%; + width: 100%; + } + .title { + font-size: 1.2rem; + font-weight: 600; + } + .author { + font-size: 1rem; + } + + .mobile-display { + display: none; + } + .desktop-display { + display: none; + } + .normal-display { + display: flex; + } + .mobile-or-normal-display { + display: auto; + } +} +@media (min-width: 1023px) { + .desktop-display { + display: flex; + } + .mobile-display { + display: none; + } + .normal-display { + display: none; + } + .mobile-or-normal-display { + display: none; + } + body { + background-color: white; + } + .container { + background-color: white; + max-width: 100%; + height: 100%; + margin-left: auto; + margin-right: auto; + margin-top: 0; + margin-bottom: 0; + box-shadow: none; + border-radius: none; + border: none; + } + + .header-title { + font-size: 2rem; + } + + .header { + border-bottom: 1px solid #e0deda; + margin: 0 0 1.5rem 0; + padding-left: 2rem; + padding-right: 2rem; + padding-top: 0; + padding-bottom: 0; + background-color: #fcfcfd; + } + + .sign-in-button { + font-family: 'Inter', sans-serif; + color: white; + background-color: #395081; + width: 6rem; + height: 2rem; + border-radius: 0.3rem; + border: none; + font-weight: 600; + font-size: 0.85rem; + } + .featured-heading { + font-size: 1.6rem; + + } + .featured-header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: 1.3rem; /* optional */ + } + .featured-header h2 { + margin: 0; + } + .dropdown { + font-family: "Inter", sans-serif; + font-size: 1rem; + height: 2.5rem; + border-radius: 0.3rem; + padding-right: 3rem; + padding-left: 1rem; + padding-top: 0.5rem; + padding-bottom: 0.5rem; + border: solid 1px #e1e4eb; + margin-right: 0.5rem; + + appearance: none; + background-color: white; + + background-image: url("/images/arrow.svg"); + background-repeat: no-repeat; + background-position: right 0.2rem center; + background-size: 2rem; + } + + + .main-layout { + display: flex; + flex-direction: row; + gap: 2rem; + padding: 1.5rem; + align-items: flex-start; + } + .filter-panel { + width: 150px; + display: flex; + flex-direction: column; + background-color: #f9f9f9; + border: solid 1px #e1e4eb; + padding: 1rem; + border-radius: 0.4rem; + font-size: 0.95rem; + } + .filter-panel h2 { + font-weight: 500; + margin: 0; + } + .filter-group h3 { + margin-bottom: 0.5rem; + font-size: 1.1rem; + font-weight: 600; + } + .checkbox { + appearance: none; + width: 1rem; + height: 1rem; + border: solid 1px #e1e4eb; + border-radius: 0.3rem; + background-color: white; + cursor: pointer; + vertical-align: middle; + position: relative; + margin-bottom: 7px; + } + + .checkbox:checked { + background-color: #243664; + } + .checkbox:checked::after { + content: ""; + position: absolute; + top: 0.16rem; + left: 0.32rem; + width: 0.13rem; + height: 0.4rem; + border: solid white; + border-width: 0 0.13rem 0.13rem 0; + transform: rotate(45deg); + +} + .filter-group label { + display: block; + margin-bottom: 0.5rem; + } + .author-field { + width: 90.5%; + font-family: "Inter", sans-serif; + font-size: 1rem; + border-radius: 0.3rem; + padding: 0.4rem; + border: solid 1px #e1e4eb; + color: #243664; + } + .author-field::placeholder { + color: #243664; + } + .featured-books { + flex: 1; + } + + +} + + +