From e85a6ed3511014b77b5d85a1582740af681cbf13 Mon Sep 17 00:00:00 2001 From: Hussein Bahdon <35459369+H-BAHDON@users.noreply.github.com> Date: Mon, 29 May 2023 18:01:56 -0700 Subject: [PATCH] London10 - Hussein Bahdon - HTML-CSS-Coursework-week1 --- css/style.css | 80 +++++++++++++++++++++++++++++++++++++++++++++------ index.html | 53 ++++++++++++++++++++++++++++++++-- 2 files changed, 123 insertions(+), 10 deletions(-) diff --git a/css/style.css b/css/style.css index 75e9841e..3f9d39b7 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,72 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +body { + font-family: Arial, sans-serif; + color: #333; + text-align: center; + } + + a { + color: #007bff; + text-decoration: none; + } + + header { + background-color: #f2f2f2; + padding: 20px; + } + + h1 { + margin: 0; + } + + .highlighted-article { + background-color: #ffd700; + padding: 10px; + } + + .articles { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + } + + .article { + width: 39%; + margin-bottom: 27px; + padding: 96px; + border: 1px solid #000000; + border-radius: 85px; + text-align: center; + margin-top: 20px; + } + + .article h2 { + font-size: 18px; + margin-bottom: 10px; + } + + .article img { + width: 100%; + height: auto; + margin-bottom: 10px; + border-radius: 5px; + } + + .article p { + font-size: 14px; + margin-bottom: 10px; + } + + .article a { + display: block; + color: #fff; + background-color: #007bff; + padding: 5px 10px; + border-radius: 3px; + text-decoration: none; + } + + footer { + background-color: #f2f2f2; + padding: 10px; + text-align: center; + } \ No newline at end of file diff --git a/index.html b/index.html index 67dfc7f5..a8ed91dc 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,56 @@ - - + +
+

My Bookshelf

+

Welcome to my book collection. Explore the world of literature through these handpicked recommendations.

+
+
+
+
+

The Great Gatsby

+ The Great Gatsby +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.

+ Read +
+
+

Pride and Prejudice

+ Pride and Prejudice +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.

+ Read +
+
+

To Kill a Mockingbird

+ To Kill a Mockingbird +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.

+ Read more +
+
+

New Book 1

+ New Book 1 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.

+ Read +
+
+

New Book 2

+ New Book 2 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.

+ Read +
+
+

New Book 3

+ New Book 2 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.

+ Read +
+ +
+
+ + +