Desktop design

Confirmation modal

Mobile design

Product list with cart

<header class="_header_462sp_1">Desserts</header>

<article class="_article_hhvs5_14"><p class="_name_hhvs5_34">Waffle</p><p class="_title_hhvs5_38">Waffle with Berries</p><p class="_price_hhvs5_43">$6.50</p></article>

<article class="_article_hhvs5_14"><p class="_name_hhvs5_34">Crème Brûlée</p><p class="_title_hhvs5_38">Vanilla Bean Crème Brûlée</p><p class="_price_hhvs5_43">$7.00</p></article>

<article class="_article_hhvs5_14"><p class="_name_hhvs5_34">Macaron</p><p class="_title_hhvs5_38">Macaron Mix of Five</p><p class="_price_hhvs5_43">$8.00</p></article>

<article class="_article_hhvs5_14"><p class="_name_hhvs5_34">Tiramisu</p><p class="_title_hhvs5_38">Classic Tiramisu</p><p class="_price_hhvs5_43">$5.50</p></article>

<article class="_article_hhvs5_14"><p class="_name_hhvs5_34">Baklava</p><p class="_title_hhvs5_38">Pistachio Baklava</p><p class="_price_hhvs5_43">$4.00</p></article>

<article class="_article_hhvs5_14"><p class="_name_hhvs5_34">Pie</p><p class="_title_hhvs5_38">Lemon Meringue Pie</p><p class="_price_hhvs5_43">$5.00</p></article>

<article class="_article_hhvs5_14"><p class="_name_hhvs5_34">Cake</p><p class="_title_hhvs5_38">Red Velvet Cake</p><p class="_price_hhvs5_43">$4.50</p></article>

<article class="_article_hhvs5_14"><p class="_name_hhvs5_34">Brownie</p><p class="_title_hhvs5_38">Salted Caramel Brownie</p><p class="_price_hhvs5_43">$4.50</p></article>

<article class="_article_hhvs5_14"><p class="_name_hhvs5_34">Panna Cotta</p><p class="_title_hhvs5_38">Vanilla Panna Cotta</p><p class="_price_hhvs5_43">$6.50</p></article>

<section class="_cartComponent_2qx50_1"><article class="_article_2qx50_10"><h2>Your Cart (0)</h2><img class="_emptyCart_2qx50_26" src="/images/illustration-empty-cart.svg" alt="No item in cart"><p>Your added items will appear here</p></article></section>

<div class="attribution">Challenge by <a href="https://www.frontendmentor.io?ref=challenge">Frontend Mentor</a>. Coded by <a href="https://anaamaral.netlify.app/">Ana Amaral</a>.</div>

ton></div><article class="_article_hhvs5_14"><p cla

_hhvs5_1"><article class="_cardMain_hhvs5_8"><div c

</article><article class="_cardMain_hhvs5_8"><div c

s</header><section class="_cardSection_hhvs5_1"><artic

</article><section class="_cartComponent_2qx50_1"><artic

id="root"><section class="main-content"><artic

Please log in to post a comment

Community feedback

Responsive app with React

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community