Desktop design

Mobile design

Recipe page

<li>Beat the eggs: <points class="points-brief">In a bowl, beat the eggs with a pinch of salt and pepper until they are well mixed. 
            You can add a tablespoon of water or milk for a fluffier texture.</points></li>

<li>Heat the pan:<points class="points-brief"> Place a non-stick frying pan over medium heat and add butter or oil.</points></li>

<li>Cook the omelette: <points class="points-brief">Once the butter is melted and bubbling, pour in the eggs. Tilt the pan to ensure 
  the eggs evenly coat the surface.</points></li>

<li>Add fillings (optional):<points class="points-brief"> When the eggs begin to set at the edges but are still slightly runny in the 
  middle, sprinkle your chosen fillings over one half of the omelette.</points></li>

<li>Fold and serve:<points class="points-brief"> As the omelette continues to cook, carefully lift one edge and fold it over the 
  fillings. Let it cook for another minute, then slide it onto a plate.</points></li>

<li>Enjoy:<points class="points-brief"> Serve hot, with additional salt and pepper if needed.</points></li>

<body>  <main class="outer-box" role="main" aria-label="main content box">  <

box">  <img src="./assets/images/image-omelette.jpeg" height="320" width="720" role="img" aria-label="representative image of the actual freshly prepared stuffed omelette recipe served on the plate" alt="stuffed omelette served on the plate">   <s

ent">  <h1 aria-label="title of the recipe">Simple

</p>   <div class="prep-time sub-title" aria-label="sub topic about preparation time">

</p><ul aria-label="list about time taken to cook the recipe">

/div>  <h2 class="title" aria-label="sub topic about ingredients used in the recipe">Ingred

</h2>  <ul class="ingredients sub-title" aria-label="list of ingredients used">

<hr>  <h2 class="title" aria-label="sub topic about instructions of how to cook the recipe">Instru

<hr>  <h2 class="title" aria-label="table of nutritional content of the recipe">Nutrit

Please log in to post a comment

Community feedback

I used CSS Flexbox, Grid and Media queries methods in this challenge.

Solution retrospective

Please log in to post a comment

Community feedback

Join our Discord community