-
-
Notifications
You must be signed in to change notification settings - Fork 24
Barcelona | 25-ITP-OCT | Basma Malainine | Sprint 1 | Wireframe #57
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| 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; | ||
| } |
| 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=""/> | ||
| <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> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I would suggest to use the |
||
| <section class="article featured"> | ||
| <div class="https://assets.pinterest.com/ext/embed.html?id=3237030974549846" height="517" width="345" frameborder="0" scrolling="no"></div> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. |
||
| <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> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Minor comment but sometimes you use a link element |
||
| </div> | ||
| </section> | ||
| <section class="article-grid"> | ||
| <div class="article"> | ||
|
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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> | ||
There was a problem hiding this comment.
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
alttag including a description usually of the image likealt="Portrait of a lady..."in the<img>elements, this is for accessibility purposes and it is strongly recommended