Website - HOW-TO OVERVIEW page

[babalicious-io]

HOW-TO OVERVIEW page

dev site

---

The How-To landingpage (from the footer link), that displays all articles

Desktop

• intro text
• 1/3+2/3 image/text
• 2/3+1/3 text/mage
• repeat alternately for each new article

Tablet // MobileLarge

• intro text
• 1/2+1/2 image/text
• 1/2+1/2 text/mage
• repeat alternately for each new article

MobileSmall

• intro text
• 1/1 image/text
• copy for each new article

---

On desktop/tablet/mobileLarge, the amount of characters in the excerpt text need to be reduced when the browser window/device scales down, so that the text just fills the height of the image/module.
Alternately cut the text short at the first word in the last line - this can maybe solve it...

On mobileSmall, it's not so important.

Title and image link to the article.
Title hover state is in the figma file.
The image should scale 10% within the container on hover - ease-in-out.

---

We can include sections/modules beneath the rows of excerpts with About Stampchain, Donate or Faq modules - v2.2

---

The figma mockup is marked for dev.

The version layers are marked 🟢
https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=5544-23332&m=dev&t=wZi6Sdn3Spk6nS9u-1

---

---

[babalicious-io]

Please add a 6px rounded corner to all images