<div class="all__recipe">
<div id="recipe__presentation">
<br>
<div class="circle__recipe">
<h2>1h</h2>
<p>Cooking Time</p>
</div>
<div class="circle__recipe">
<h2>12</h2>
<p>Serves</p>
</div>
<br>
<div class="description">
<h1>Portuguese custard tarts</h1>
<p>These little beauties are easier and quicker than a trip to the bakery. They're almost too easy.</p>
<br>
</div>
</div>
<div class="content">
<!-- Menu -->
<ul class="tabs">
<li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'ingredients')" id="defaultOpen">Ingredients</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'method')">Method</a></li>
<li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'author')">Author</a></li>
</ul>
<div id="author" class="tabcontent">
<h2>Author</h2>
<hr>
<img src="https://ichef.bbci.co.uk/food/ic/food_1x1_72/chefs/simon_rimmer_1x1.jpg">
<p><strong>Simon Rimmer</strong> became known for the innovative vegetarian food of his Manchester restaurant Greens, which opened in 1990.</p>
<p>He went on to open Earle, a modern brasserie in Cheshire, in 2006, with business partners including his wife, friends, footballer Jason McAteer and football agent Dave Lockwood. Simon's television career began on lifestyle channel Granada Breeze. He has since appeared in and presented many BBC programmes but is probably most famous as the face of Something for the Weekend. Simon has a degree in fashion and textile design, and,
when not busy with cooking and television, continues to freelance as a textile designer and ceramic decorator.</p>
<a href="https://www.bbc.co.uk/food/recipes/portuguesecustardtar_91040">Original Source</a>
</div>
<div id="ingredients" class="tabcontent">
<h2>Ingredients</h2>
<hr>
<ul>
<li>Butter, for greassing</li>
<li>3 free-range egg yolks</li>
<li>125g/4½ oz caster sugar</li>
<li>30g/1oz cornflour</li>
<li>1 vanilla pod, split, seeds scraped out</li>
<li>175ml/6fl oz full-fat milk</li>
<li>225ml/8fl oz double cream</li>
<li>300g/10½ oz ready-rolled puff pastry</li>
<li>Plain flour, for dusting</li>
<li>Icing sugar, for dusting</li>
</ul>
</div>
<div id="method" class="tabcontent">
<h2>Method</h2>
<hr>
<ol>
<li>Preheat the oven to 180C/350F/Gas 4. Grease the wells of a 12-hole muffin tray with butter.</li>
<li>In a pan, heat the egg yolks, sugar and cornflour over a low to medium heat, whisking continuously until thickened and well combined.</li>
<li>Add the vanilla seeds, then add the milk and cream in a thin stream, whisking continuously, until the mixture is thick, smooth and well combined.</li>
<li>Continue to stir the custard mixture until it comes to the boil, then remove from the heat and cover the surface with cling film. (This prevents a skin from forming on the custard.)</li>
<li>Roll out the puff pastry onto a clean work surface lightly dusted with flour and icing sugar. Cut the pastry in half and place one sheet on top of the other. Roll the pastry sheets up like a Swiss roll and cut the roll into twelve slices.</li>
<li>Lay each of the rolled pastry slices flat onto the work surface and roll out into 10cm/4in discs using a rolling pin.</li>
<li>Press a pastry disc into each of the wells of the prepared muffin tray. Divide the cooled custard equally among the pastry cases.</li>
<li>Transfer the muffin tray to the oven and bake the tarts for 18-20 minutes, or until the custard has set and is pale golden-brown and the pastry is crisp and golden-brown. Allow to cool in the tin.</li>
</ol>
</div>
</div>
</div>
<h1 class="credits">A Pen By Vasco Martins</h1>@import url(https://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic,700,700italic,900,900italic&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek-ext,greek,vietnamese)
body
background-color: #edeeef
.all__recipe
margin: auto
display: flex
height: 350px
justify-content: center
@media screen and (max-width: 1100px)
display: block
hr
color: #cfcfd1
margin-left: 5%
width: 300px
#recipe__presentation
overflow: hidden
width: 30%
background: url("https://static.kidspot.com.au/recipe_asset/665/3906.jpg-20150309012234~q75,dx720y432u1r1gg,c--.jpg")
background-repeat: no-repeat
background-position: center
background-size: cover
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
max-height: 400px
@media screen and (max-width: 1100px)
width: 550px
.circle__recipe
background-color: #e2c904
width: 80px
height: 80px
opacity: 0.8
border-radius: 50%
display: flex
text-align: center
align-items: center
justify-content: center
margin-top: 10px
margin-left: 10px
flex-direction: column
h2
font-family: "Roboto", sans-serif
font-weight: 500
font-size: 20px
margin: 0
p
font-family: "Roboto", sans-serif
font-weight: 500
font-size: 13px
margin: 0
.description
margin-bottom: 0
background-color: rgba(28, 28, 28, 0.23)
h1
font-family: "Roboto", sans-serif
font-weight: 500
font-size: 25px
padding-top: 10px
padding-left: 10px
color: #eaeae5
p
font-family: "Roboto", sans-serif
font-weight: 300
color: #eaeae5
padding-left: 10px
margin-top: 0
word-wrap: break-word
@media screen and (max-width: 1100px)
.description h1
font-size: 17px
padding-top: 5px
.content
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
background-color: #fff
width: 550px
.tabs
text-align: center
@media screen and(max-width: 1100px)
margin-top: 0
padding-top: 10px
li
list-style: none
display: inline
margin-right: 20px
a
text-decoration: none
font-family: "Roboto"
color: #383838
transition: 0.5s
&:hover
color: #f918a7
li .active
border-bottom: 2px solid #f918a7
color: #f918a7
.tabcontent
height: 85%
animation: fadeEffect 1s
p
font-family: "Roboto", sans-serif
font-weight: 300
margin-left: 5%
padding-right: 10px
font-size: 14px
text-align: justify
h2
margin-left: 5%
margin-bottom: 0
font-family: "Roboto"
color: #636363
ul
font-family: "Roboto", sans-serif
font-weight: 300
list-style-type: none
ol
font-family: "Roboto", sans-serif
font-weight: 300
list-style-type: decimal
a
text-decoration: none
margin-left: 5%
color: #1369bf
font-size: 20px
font-family: "Roboto", sans-serif
#author img
float: right
border-radius: 50%
width: 100px
height: 100px
margin-right: 3%
padding-left: 7px
#method ol
overflow-y: scroll
height: 75%
&::-webkit-scrollbar-track
background-color: #F5F5F5
&::-webkit-scrollbar
width: 5px
background-color: #F5F5F5
&::-webkit-scrollbar-thumb
background-color: #949596
background-color-border-radius: 2px
.credits
font-size: 20px
font-family: "Roboto", sans-serif
position: absolute
right: 10px
bottom: 0
color: #686868
@keyframes fadeEffect
from
opacity: 0
to
opacity: 1function openTab(evt, cityName) {
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.