<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.