Skip to content
This repository has been archived by the owner on Jan 14, 2024. It is now read-only.

London10 - Hussein Bahdon - HTML-CSS-Coursework-week1 #350

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

London10 - Hussein Bahdon - HTML-CSS-Coursework-week1 #350

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 72 additions & 8 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
53 changes: 51 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,56 @@
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<!-- Add your HTML markup here -->
<!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->

<header>
<h1>My Bookshelf</h1>
<p>Welcome to my book collection. Explore the world of literature through these handpicked recommendations.</p>
</header>
<main>
<section class="articles">
<article class="article">
<h2>The Great Gatsby</h2>
<img src="gatsby.jpg" alt="The Great Gatsby">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.</p>
<a href="https://www.example.com/book1">Read</a>
</article>
<article class="article">
<h2>Pride and Prejudice</h2>
<img src="pride_prejudice.jpg" alt="Pride and Prejudice">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.</p>
<a href="https://www.example.com/book2">Read</a>
</article>
<article class="article">
<h2>To Kill a Mockingbird</h2>
<img src="mockingbird.jpg" alt="To Kill a Mockingbird">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.</p>
<a href="https://www.example.com/book3">Read more</a>
</article>
<article class="article">
<h2>New Book 1</h2>
<img src="new_book1.jpg" alt="New Book 1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.</p>
<a href="https://www.example.com/newbook1">Read</a>
</article>
<article class="article">
<h2>New Book 2</h2>
<img src="new_book2.jpg" alt="New Book 2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.</p>
<a href="https://www.example.com/newbook2">Read</a>
</article>
<article class="article">
<h2>New Book 3</h2>
<img src="new_book2.jpg" alt="New Book 2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin volutpat quam vitae felis dictum, ac pulvinar felis mattis.</p>
<a href="https://www.example.com/newbook2">Read</a>
</article>
<!-- Add more articles as needed -->
</section>
</main>


<footer>
<p> Created by Hussein Bahdon | 2023</p>
</footer>
</body>
</html>