From ec0406de992590dac1c4122615dc20eb33824384 Mon Sep 17 00:00:00 2001 From: ErikaOlsson Date: Thu, 26 Sep 2024 13:24:18 +0200 Subject: [PATCH 1/5] Update: html and css for library --- index.html | 146 +++++++++++++++++++++++++++++++++++- style.css | 215 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 358 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index cf5c31a..686392a 100644 --- a/index.html +++ b/index.html @@ -3,11 +3,151 @@ + Project Library + -

Project Library

- +
+ +
+ + + + + +
+
+ +
+ +
+ +
+

Project Library

+

Filter on genre

+
+ + + + +
+
+
+
+ + +

Read more about seasonal vegetables and the color it brings our life!

+ +
+ +
+ Vegetables good for you and the earth +
+

1984

+

Tags: Thriller

+ +
+
+ +
+ Vegetables good for you and the earth +
+

Harry Potter & the sorcerer stone

+

Tags: Adventure

+ +
+
+ +
+ Vegetables good for you and the earth +
+

Moby Dick

+

Tags: Adventure

+ +
+
+ +
+ Vegetables good for you and the earth +
+

Pride & prejudice

+

Tags: Romance

+ +
+
+ +
+ Vegetables good for you and the earth +
+

The chronicles of Narnia

+

Tags: Adventure

+ +
+
+ +
+ Vegetables good for you and the earth +
+

The great Gatsby

+

Tags: Romance

+ +
+
+ +
+ Vegetables good for you and the earth +
+

The Hobbit

+

Tags: Adventure

+ +
+
+ +
+ Vegetables good for you and the earth +
+

Lord of the rings

+

Tags: Adventure

+ +
+
+
+ +
+ + +
+ + + + + - \ No newline at end of file + + + + + diff --git a/style.css b/style.css index e69de29..a26a727 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,215 @@ +html { + box-sizing: border-box; + background-color: #c1b8a9; + color: #000; + } + body { + margin: 0; + } + /* header */ + header { + margin: 0; + padding: 10px 0; + border-bottom: #4c6051 2px solid; + } + .header-content-width { + margin: 0 3.5rem; + display: flex; + justify-content: space-between; + align-items: center; + } + .main-logo { + font-family: Arial, Helvetica, sans-serif; + color: #4c6051; + margin: 0; + } + .main-logo>span { + font-size: 65px; + font-style: italic; + color: #1e391e; + font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; + text-decoration: underline; + } + .nav-small-screen { + display: none; + } + + .nav-desktop { + width: 400px; + } + .nav-desktop>ul { + list-style: none; + text-decoration: none; + font-family: Arial, Helvetica, sans-serif; + font-weight: 600; + display: flex; + justify-content: space-around; + align-items: center; + cursor: pointer; + } + .nav-menu-item-desktop:hover { + border-bottom: #4c6051 solid 2px; + } + .btn-nav { + background-color: #1e391e; + color: #fff; + border: none; + padding: 8px 20px; + cursor: pointer; + font-size: 0.9rem; + margin: 0; + } + .btn-nav:hover { + background-color: #4c6051; + } + + /* big news section */ + .big-news { + margin: 2rem 3.5rem; + } + .big-news-btn-flex { + display: flex; + gap: 15px; + flex-wrap: wrap; + } + .big-news-text>h1 { + font-size: 3.3rem; + text-transform: uppercase; + color: #1e391e; + font-family:Arial, Helvetica, sans-serif; + margin-bottom: 0; + } + .big-news-text>h3 { + font-size: 1.6rem; + color: #000; + } + .big-news-btn { + background-color: #1e391e; + color: #fff; + border: none; + padding: 8px 20px; + cursor: pointer; + font-size: 1.1rem; + } + .big-news-btn:hover { + background-color: #4c6051; + font-weight: 600; + } + /* divider h2 */ + .divider-h2 { + margin: 4rem 3.5rem 2.5rem; + color: #1e391e; + border-bottom: #4c6051 2px solid; + padding-bottom: 15px; + } + + /* small box news */ + .small-box-news { + margin: 0 3.5rem; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 25px 15px; + } + .small-box-news-item { + border-bottom: #1e391e 2px solid; + padding: 0 0 10px;; + } + .small-box-news-item>p { + font-style: italic; + } + .small-box-news-item-img { + width: 100%; + height: 550px; + object-fit: cover; + } + .small-news-btn { + background-color: #1e391e; + color: #fff; + border: none; + padding: 8px 20px; + cursor: pointer; + font-size: 1.1rem; + margin: 0; + } + .small-news-btn:hover { + background-color: #4c6051; + font-weight: 600; + } + /* sign up */ + .flex-div-sign-up { + margin: 100px 0; + text-align: center; + } + .sign-up-h2 { + color: #1e391e; + font-size: 1.9rem; + padding-bottom: 15px; + } + + /* footer */ + footer { + background-color: #1e391e; + color: #fff; + margin: 70px 0 0; + } + footer>div>p { + margin: 0; + padding: 50px 0; + text-align: center; + } + + @media only screen and (max-width: 1024px) { + .nav-small-screen { + display: flex; + align-items: center; + } + .nav-small-screen>ul { + list-style: none; + text-decoration: none; + display: flex; + flex-direction: column; + row-gap: 10px; + cursor: pointer; + } + .nav-menu-item-small-screen { + width: 30px; + border-bottom: #000 3px solid; + } + .nav-desktop { + display: none; + } + .small-box-news { + grid-template-columns: repeat(2, 1fr); + gap: 15px; + } + .big-news-content-width { + grid-template-columns: 1fr; + } + } + @media only screen and (max-width: 620px) { + .small-box-news { + grid-template-columns: repeat(1, 1fr); + } + .header-content-width, + .small-box-news { + margin: 0 2.5rem; + } + .big-news { + margin: 2rem 2.5rem; + } + .small-box-news-item { + display: flex; + justify-content: space-between; + gap: 0 20px; + } + .small-box-news-item>div { + width: 40%; + } + .small-box-news-item-img { + width: 50%; + height: 200px; + } + .divider-h2 { + margin: 4rem 2.5rem 2.5rem; + } + } \ No newline at end of file From 96c324c0b005dc0b2c502b3a8352ba9c973dd1a2 Mon Sep 17 00:00:00 2001 From: ErikaOlsson Date: Tue, 8 Oct 2024 14:23:35 +0200 Subject: [PATCH 2/5] Update: html and javascript --- index.html | 8 +--- script.js | 109 +++++++++++++++++++++++++++++++++++++++++++++++++++-- style.css | 11 +----- 3 files changed, 108 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 686392a..3031c31 100644 --- a/index.html +++ b/index.html @@ -46,6 +46,7 @@

Filter on genre

+ @@ -129,13 +130,6 @@

Lord of the rings

-