<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Gustoso</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css"> <link rel="stylesheet" href="stylesheet.css"> </head> <body> <section id="banner"> <div class="wrapper"> <header> <p class="logo">Gustoso</p> <nav> <ul> <li><a href="#welcome">Welcome</a></li> <li><a href="#menu">Menu</a></li> <li><a href="#reservations">Reservations</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <div class="social-icon"> <ul> <li class="icon-1"><img src="#" alt="Twitter"></li> <li class="icon-2"><img src="#" alt="Facebook"></li> <li class="icon-3"><img src="#" alt="Instagram"></li> </ul> </div> </header> <div class="content"> <h1>Pastry with Love</h1> <h2>We're bringing you fresh ingredients every day in ways you can't resist.</h2> <div class="button-wrapper"> <a href="" class="button">Our Menu</a> </div> </div> </div> </section> <section id="cakes"> <div class="cakes-wrapper"> <header> <p class="title">Art of Cakes</p> <p class="sub-title">We create delicious memories</p> </header> <p class="regular-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptas magni consequatur numquam debitis distinctio consequuntur a tempore autem nihil. Minus aspernatur sint distinctio fuga porro aut eius officiis, voluptas. </p> <div class="chef"> <h3> Chef Cook</h3> <img src="#" alt="chef's picture"> <p> Benito Gaspare </p> <p class="logo quote"><span>"</span>Unique creatins for unite occasions.<span>"</span> </div> </div> <div class="images-wrapper"> <div class="box"> <p>Tastes so Good!</p> </div> <img src="#" alt="cakes"> </div> </section> <section id="pancakes"> <div class="pancakes-wrapper"> <header> <p class="title">Tasty pancakes</p> <p class="sub-title">Season Favourite</p> </header> <p class="regular-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima voluptas magni consequatur numquam debitis distinctio consequuntur a tempore autem nihil. Minus aspernatur sint distinctio fuga porro aut eius officiis, voluptas. </p> <!-- Carrousel --> <div class="slider"> <ul class="slides"> <li><img src="#" alt="Slide1"></li> <li><img src="#" alt="Slide2"></li> <li><img src="#" alt="Slide3"></li> </ul> </div> <div class="slides-navigation"> <a href="#" class="prev-slides"><img src="#" alt="Arrow Left"></a> <a href="#" class="next-slides"><img src="#" alt="Arrow Right"></a> </div> </div> <div class="time-box"> <p class="title small-title uppercase">Ready in</p> <p><span class="time">40</span>mins</p> </div> </section> <section id="breakfast"> <div class="breakfast-wrapper"> <header> <p class="title white-title">Breakfast</p> <p class="sub-title">7am breakfast? We're Open!</p> </header> <p class="title small">Full Breakfast</p> <p>Duis ut tortor, et risus, vulputate pretium</p> <p class="price">$12.49</p> <p class="title small">Toast and Jam</p> <p>Suspendisse, tempus, nterdum</p> <p class="price">$4.90</p> <p class="title small">Muffins</p> <p>Fusce eget dui sodales est</p> <p class="price">$3.95</p> </div> <div id="flair-wrapper"> <p class="title brown-title">Breakfast</p> <p class="regular-tex">Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tinicudnt. Duis leo.</p> <a href="#" class="button ghost">Read</a> </div> </section> <section id="jibarito-sandwich"> <header> <p class="title">The Jibarito Sandwich</p> <p class="sub-title">The best sandwaich you've ever tasted!</p> </header> <div class="food-wrapper"> <div class="ingredient-1"> <header> <img src="#" alt="Ingredient 1"> <p class="title small-title">Class aptent</p> </header> <p class="regular-text">9Quot alinuem perscuti ut eam, nam ad atqui primis nusqeuam.</p> </div> <div class="ingredient-2"> <header> <img src="#" alt="Ingredient 2"> <p class="title small-title">Nulla egget</p> </header> <p class="regular-text">Nullam dictum felis eu pede mollis pretium Integer tincidunt.</p> </div> <div class="ingredient-3"> <header> <img src="#" alt="Ingredient 3"> <p class="title small-title">Sed nibh purus</p> </header> <p class="regular-text">Aenam eleifend tellus leo ligula, porttitor eu, consequat vitae.</p> </div> </div> <div class="recipe-result-wrapper"> <aside> <div class="info-1"> <p class="title small-title uppercase">Prep</p> <p><span class="time brown-time">15</span>mins</p> </div> <div class="info-2"> <p class="title small-title uppercase">Cook</p> <p><span class="time brown-time">35</span>mins</p> </div> <div class="info-3 time-box"> <p class="title small-title uppercase">Ready in</p> <p><span class="time">50</span>mins</p> </div> </aside> <a href="#" class="button white-button">Full Recipe</a> </div> </section> <footer> <p class="logo">Gustoso</p> <nav id="footer"> <ul> <li><a href="#">Our Menu</a></li> <li><a href="#">Galerry</a></li> <li><a href="#">Culture</a></li> <li><a href="#">Events</a></li> <li><a href="#">Catering</a></li> <li><a href="#">Visit Us</a></li> </ul> </nav> </footer> </body> </html>