Skip to content

Instantly share code, notes, and snippets.

/index.html

Created May 15, 2016 21:58
Show Gist options
  • Save anonymous/453d74620e37ab0c0f5df574b7b52bd8 to your computer and use it in GitHub Desktop.
Save anonymous/453d74620e37ab0c0f5df574b7b52bd8 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/tibayiloti
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.js"></script>
<style id="jsbin-css">
body {
margin: 30px;
background-color: lightgrey;
}
.ui.move.reveal {
width: 290px;
white-space: normal;
}
.ui.card {
height: 420px;
}
.ui.labeled.icon.menu .item{
min-width: 33.3333%;
max-width: 33.3333%;
font-size: 0.8em;
padding: 6px 2px;
}
.ui.pointing.menu {
cursor: pointer;
}
.ui.tab {
height: 320px;
overflow-y: auto;
}
</style>
</head>
<body>
<div class="ui move reveal">
<div class="visible content">
<div class="ui card">
<img class="ui image" src="http://mrg.bz/TRRrQJ">
<div class="content">
<div class="header">Pizza Margherita</div>
<div class="description">Invented in Naples in honor of the first queen of Italy, the Margherita pizza is the triumph of Italian cuisine in the world.</div>
</div>
<div class="extra content" >
<div class="ui labeled icon menu">
<a class="item"><i class="wait icon"></i>2h 16min</a>
<a class="item"><i class="food icon"></i>6 servings</a>
<a class="item"><i class="signal icon"></i>Easy</a>
</div>
</div>
</div>
</div>
<div class="hidden content">
<div class="ui card">
<div class="content">
<div class="ui pointing secondary menu">
<div class="item active" data-tab="ingredients">Ingredients</div>
<div class="item" data-tab="directions">Directions</div>
</div>
<div class="ui tab active" data-tab="ingredients">
<h3>For pasta</h3>
<div class="ui list">
<div class="item"><i class="check circle red icon"></i>2 lb Italian "00" flour or all-purpose flour</div>
<div class="item"><i class="check circle red icon"></i>1 oz fresh yeast</div>
<div class="item"><i class="check circle red icon"></i>2 cups water</div>
<div class="item"><i class="check circle red icon"></i>⅜ oz salt</div>
</div>
<h3>For dressing</h3>
<div class="ui small list">
<div class="item"><i class="check circle red icon"></i>½ cup extra virgin olive oil</div>
<div class="item"><i class="check circle red icon"></i>1 lb mozzarella cheese</div>
<div class="item"><i class="check circle red icon"></i>basil leaves to taste</div>
<div class="item"><i class="check circle red icon"></i>1 lb canned tomatoes</div>
<div class="item"><i class="check circle red icon"></i>salt to taste</div>
</div>
</div>
<div class="ui tab" data-tab="directions">
<div class="ui small list">
<div class="item"><span class="ui red circular label">1</span> On a wooden or marble work surface, shape the flour into a well. Place the yeast, salt and warm water in the center. Be careful not to let the salt come in contact with the yeast. </div>
<div class="item"><span class="ui red circular label">2</span> Knead the dough vigorously with your hands for 15-20 minutes, or in a mixer, until the dough is soft and smooth.</div>
<div class="item"><span class="ui red circular label">3</span> Once you have the right consistency, adding a bit of water or flour if necessary, shape the dough into a ball. Cover with a plastic bowl so that the dough is protected from the air. Let rise for 3 or 4 hours at room temperature for about an hour in a warm place. </div>
<div class="item"><span class="ui red circular label">4</span> Once the dough will be doubled in volume, ricavatene 6 loaves, modellateli in spherical shapes, cover with a sheet of plastic wrap and let them rise at room temperature for a couple of hours or in a warm place for about 45 minutes.</div>
<div class="item"><span class="ui red circular label">5</span> As soon as the loaves have doubled in volume, prepare the tomato sauce and place it in a bowl. Add a pinch of salt and 1/3 of the olive oil.</div>
<div class="item"><span class="ui red circular label">6</span> Knead the dough, then flattening them using your fingers.</div>
<div class="item"><span class="ui red circular label">7</span> Use a ladle or a spoon to spread a good amount of tomato sauce on the pizza. Then, cover with mozzarella, torn into pieces. Garnish with a couple leaves of basil and bake in a 480° F oven for 5 or 6 minutes.</div>
<div class="item"><span class="ui red circular label">8</span> Once ready, remove the pizza from the oven. Garnish with more basil and a drizzle of oil. Serve immediately.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script id="jsbin-javascript">
$( document ).ready(function() {
$('.menu .item').tab();
});
</script>
<script id="jsbin-source-css" type="text/css">body {
margin: 30px;
background-color: lightgrey;
}
.ui.move.reveal {
width: 290px;
white-space: normal;
}
.ui.card {
height: 420px;
}
.ui.labeled.icon.menu .item{
min-width: 33.3333%;
max-width: 33.3333%;
font-size: 0.8em;
padding: 6px 2px;
}
.ui.pointing.menu {
cursor: pointer;
}
.ui.tab {
height: 320px;
overflow-y: auto;
}</script>
<script id="jsbin-source-javascript" type="text/javascript"> $( document ).ready(function() {
$('.menu .item').tab();
});</script></body>
</html>
Raw
jsbin.tibayiloti.css
body {
margin: 30px;
background-color: lightgrey;
}
.ui.move.reveal {
width: 290px;
white-space: normal;
}
.ui.card {
height: 420px;
}
.ui.labeled.icon.menu .item{
min-width: 33.3333%;
max-width: 33.3333%;
font-size: 0.8em;
padding: 6px 2px;
}
.ui.pointing.menu {
cursor: pointer;
}
.ui.tab {
height: 320px;
overflow-y: auto;
}
Raw
jsbin.tibayiloti.js
$( document ).ready(function() {
$('.menu .item').tab();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment