Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
70 changes: 70 additions & 0 deletions css
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
margin: 0;
padding: 0;
background: white;
color: black;
}

.page-header {
text-align: center;
padding: 30px 20px;
}

.article {
border: 2px solid black;
margin: 20px auto;
width: 90%;
}

.image-placeholder {
height: 180px;
border-bottom: 2px solid black;
position: relative;
}

.image-placeholder::after {
content: "IMAGE";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
}

.image-placeholder.large {
height: 300px;
}

.content {
padding: 15px;
}

button {
border: 2px solid black;
background: white;
padding: 5px 10px;
cursor: pointer;
}

.articles-grid {
display: flex;
gap: 20px;
width: 90%;
margin: auto;
}

.articles-grid .article {
flex: 1;
}

footer {
border-top: 2px solid black;
text-align: center;
padding: 20px;
margin-top: 40px;
}
46 changes: 46 additions & 0 deletions html
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<header>
<h1>Art</h1>
<p>
Art in the 17th century
</p>
</header>
<main>
<article>
<img
src="https://assets.pinterest.com/ext/embed.html?id=492649946889933" height="636" width="345" frameborder="0" scrolling="no" alt=""/>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's a good practice to always include an alt tag including a description usually of the image like alt="Portrait of a lady..." in the <img> elements, this is for accessibility purposes and it is strongly recommended

<h2>Unknown Lady by William Larkin, 17th Century</h2>
<p>
Unknown Lady* by William Larkin (17th century)** is a refined English portrait that emphasizes status, elegance, and restraint. The sitter is depicted in lavish Jacobean attire, with intricate embroidery, lace, and jewelry that highlight wealth and social rank. Larkin’s flat background and careful attention to costume place more importance on identity and symbolism than emotion, reflecting the formal portrait style of early 17th-century England.
</p>
<a href="">Read more</a>
</article>
</main>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would suggest to use the <main> element and wrap the whole section till before the <footer>, meaning include inside the <main> all <section> elements

<section class="article featured">
<div class="https://assets.pinterest.com/ext/embed.html?id=3237030974549846" height="517" width="345" frameborder="0" scrolling="no"></div>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe you wanted to use an element here instead of a <div>? like above, cause this is not going to smake the image to appear

<div class="content">
<h2>Isaac de Moucheron (Amsterdam 1667-1744 Amsterdam)</h2>
<p>Isaac de Moucheron (Amsterdam, 1667–1744) was a Dutch painter and draughtsman best known for his elegant **Italianate landscape paintings**. Influenced by French classicism and artists like Gaspard Dughet, his works often depict idealized ruins, harbors, and pastoral scenes bathed in warm light. De Moucheron’s landscapes emphasize balance, atmosphere, and architectural detail, reflecting the Dutch Golden Age fascination with travel, nature, and classical antiquity.</p>
<button>Read more</button>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor comment but sometimes you use a link element <a> and sometimes a <button> for the Read More, usually if you want to navigate to a new page it's better to use a link

</div>
</section>
<section class="article-grid">
<div class="article">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for future reference and maybe a good practice for the class names https://getbem.com/introduction/

<div class="https://assets.pinterest.com/ext/embed.html?id=8866530508706951" height="529" width="345" frameborder="0" scrolling="no"></div>
<div class="content">
<h3>The Most Alluring Women of 17th-Century England</h3>
<p>What the Most Alluring Women of 17th-Century England Looked Like*** explores how beauty functioned as power in the Restoration court. Female allure was carefully constructed through fashion, cosmetics, posture, and portraiture, turning appearance into a social and political tool. However, this beauty was double-edged: admired and influential, yet often criticized and morally judged, revealing how women’s value was closely tied to their looks in 17th-century English society.</p>
<button>Read more</button>
</div>
</div>
<div class="article">
<div class="https://assets.pinterest.com/ext/embed.html?id=101049585387970308" height="699" width="345" frameborder="0" scrolling="no"></div>
<div class="content">
<h3>Madame Infante de Parme, Louise-Élizabeth de France</h3>
<p>Madame Infante de Parme, Louise-Élisabeth de France*** portrays the eldest daughter of King Louis XV, presented with elegance and authority befitting her royal status. The painting emphasizes luxury through rich fabrics, refined posture, and controlled expression, reflecting both her political role as Duchess of Parma and the ideals of French aristocratic femininity in the 18th century.</p>
<button>Read more</button>
</div>
</div>
</section>
<footer>
<p>© 2025 All rights reserved</p>
</footer>