<body>
<main>
    <h1>Avocado Egg Toast</h1>
    <div class="recipies-info">
        <p> time <span> 15min </span></p>
        <p> serves <span> 1 </span></p>
        <p> level <span> beginner </span></p>
    </div>

    <button class="btn-primary">see ingredients</button>

    <ul class="prep-steps">
        <li class="step">
            Fill a large saucepan with water, add the
            vinegar and bring to a hard boil over a
            high heat. Use a spoon to swirl the water into a whirlpool.
            Crack in both eggs and cook for 2 1/2 mins.
        </li>

        <li class="step">
            Meanwhile, in a small bowl, mash the avocado, lemon juice, garlic powder,
            and basil, and season well with black pepper and salt. Toast the bread.
        </li>

        <li class="step">
            Pile the avocado on the toast, then put a poached egg on top of each.
            Garnish with some sweet chili (or balsamic vinegar)
            and a side ot fresh cherry tomatoes.
        </li>
    </ul>
</main>
</body>
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/dPJ5r9gl3kK6ijoeP1IRsvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(https://fonts.gstatic.com/s/lato/v13/EsvMC5un3kjyUhB9ZEPPwg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/UyBMtLsHKBKXelqf4x7VRQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v13/1YwB1sO8YE1Lyjf12WNiUA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v13/R4a6fty3waPci7C44H8AjvY6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: local('Lato Black'), local('Lato-Black'), url(https://fonts.gstatic.com/s/lato/v13/tI4j516nok_GrVf4dhunkg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}

html {
    font-size: 16px;
}

body {
  font-family: "Lato", sans-serif;
  color: #ffffff;
  margin: 0px;
  padding: 0px;
  background-color: #333;
}
main {
  background: url("http://www.thephoblographer.com/wp-content/uploads/2016/04/Francesco-Nacchia-EyeEm-food-photography-11-of-15ISO-8001-80-sec-at-f-6.3.jpg") no-repeat center;
  background-size: cover;
  border-radius: 20px;    
  width: 1400px;
  height: 700px;
  margin: 0 auto;
  margin-top: 60px;
  margin-bottom: 60px;
 }

h1 {
  font-family: "Lato", sans-serif;
  text-align: right;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 72px;
  margin: 0px 40px 0px 0px;
  padding: 40px 0px 0px 0px;

}

div p span {
  color: #b5c640;
}
.recipies-info, .btn-primary {
  display: block;
  float: right;
  margin: 0px 900px 0 0;
   }

.recipies-info {
  padding: 0 0 20px 0;
  display: block;
}

.btn-primary {
  border: 1px solid #ffffff;
  background: none;
  border-radius: 20px;
  color: #ffffff;
  padding: 10px 20px;
  font-size: 16px;
  display: block;
}

.btn-primary:hover {
  cursor: pointer;
  background: #b5c640;
  border-color: #b5c640;
}

* {
  margin: 0px;
  padding: 0px;
}
.recipies-info p {
  display: inline-block;
  padding: 0 20px;
 font-size: 16px;
}

ul.prep-steps {
  float: right;
  text-align: justify;
  width: 55%;
  margin: 0 40px 0 0;
  list-style: none;
}

li.step {
  margin-bottom: 30px;
}


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.