Skip to content

Instantly share code, notes, and snippets.

@nabilateuse

nabilateuse/index.html

Created September 26, 2019 17:27
Show Gist options
  • Save nabilateuse/4dd4b798d3971d6d72acd418f93416fa to your computer and use it in GitHub Desktop.
Save nabilateuse/4dd4b798d3971d6d72acd418f93416fa to your computer and use it in GitHub Desktop.
Download ZIP
My cool site // source https://jsbin.com/zufoves
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>My cool site </title>
<style id="jsbin-css">
*{
margin:3px;
padding:0;
}
body{
background-color:lightblue;
margin:0;
padding:0;
}
nav,footer{
height:30px;
background-color:yellow;
width:100%
line_heght:50px;
}
nav ul {
list-style:none;
padding-left:0;
display:flex;
}
nav li{
background-color:burlywood;
font-size:20px;
}
nav li hover{
background-color:chocolate;
}
footer{
color:blue;
padding-left:20px;
padding-top:5px;
}
hover a{
text-decoration:none;
color:wihte;
display:block;
padding:0 10px;
}
#intro{
text-align:center;
}
main article{
display:flex;
}
#blog-text{
margin-right:20px;
font-size:18px;
}
#blog-text p: first-child<section{
margin-bottom:60px;
}
.card{
background-color:#fff;
border-radius:10px;
padding-bottom:2px;
padding-top:2px;
margin:1px 50px;/*Added*/
padding:2%;
}
main h2{
text-align:center;
}
.card{
width:500px;
}
main article{
justify-content:center;
margin:20px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 35%;
height:auto;
}
#ingredients{
font-size:18px;
padding-bottom:15px
margin:20px;
}
}
img{
border:solid 2px white;
img-align: center;
}
</style>
</head>
<body>
<nav>
<ul>
<li>| <a href="#home">Home</a></li>
<li>|<a href="#contact"> Contact</a></li>
<li>|<a href="#about"> About</a></li>
</ul>
</nav>
<main>
<!--heading-->
<header id="intro">
<h1> Pizza Can Serve Many People!</h1>
<section>
<img src="https://pizzaneed.com/wp-content/uploads/2019/04/cheesy-pizza.gif" alt="click pizza">
</section>
</header>
<section id="blog-text">
<p >Pizza is a traditional Italian cooking recipe from Naples, Italy, made from bread dough, topped with various ingredients and baked in the oven.
There's a reason pizza is cut into slices: <span class="ingredient">to share with your friends!</span> Pizza is a great party food. You can cut it into triangles for smaller gathering and squares for large ones. And if there is extra, pizza makes great leftovers! </p>
</section>
<h2>How to make pizza dough</h2>
<article>
<section id="ingredients" class="card">
<h3>Ingredients:</h3>
<!-- unordered list -->
<Ul >
<li> A glass of warm water</li>
<li> 3 cups white flour</li>
<li> Teaspoon olive oil</li>
<li> Teaspoon salt</li>
<li> Teaspoon sugar</li>
</Ul>
<h3>How to prepare:</h3>
</section>
<!-- ordered list -->
<section id="directions" class="card">
<Ol>
<li> Apply instant yeast to warm water and sugar, and dissolve them well.</li>
<li> Mix the flour with salt and put them in a large pot.</li>
<li> Add oil to flour and salt 😄.</li>
<li> Break the eggs into the bowl </li>
<li> Add the water and yeast to the flour and mix well.</li>
<li> Continue kneading and add a little water if necessary😄 </li>
<li> Put the dough in a large bowl and well wrapped, and leave for an hour until brewed.</li>
<li> Bring a pizza tray and put a little oil, and then chop the dough and Averdha well in it.
</Ol>
</section>
</article>
<section>
<li><a href="https://lemondeculinairedesamia.com/pate-a-pizza-la-vraie-recette-italienne/"> Click here!</a></li>
<li><a href="https://i.imgur.com/gAbnwpD.jpg">
<img class="center" src="https://i.imgur.com/gAbnwpD.jpg" alt ="click image to more pizza Recipes"</a></li>
</section>
</main>
<!---Separation --->
<ul>
<li><a href="https://www.cuisineaz.com/recettes/pizza-mexicaine-rapide-62492.aspx"> Get into link to piza</a></li>
<li><a href="https://www.marmiton.org/recettes/recette_pizza-orientale-grosse-faim_230462.aspx">Pizza oriental </a></li>
<li><a href="https://www.750g.com/pizza-orientale-r53014.htm">Pizza 750g!!</a></li>
<li><a href="http://suismoiencuisine.canalblog.com/archives/2013/08/21/27514588.html">canalblog</a></li>
</ul>
<!--This is footer-->
<footer>
<p> © 2019 ChemNaf:page created by Nanouche </p>
</footer>
<!--End of footer -->
<script id="jsbin-source-css" type="text/css">*{
margin:3px;
padding:0;
}
body{
background-color:lightblue;
margin:0;
padding:0;
}
nav,footer{
height:30px;
background-color:yellow;
width:100%
line_heght:50px;
}
nav ul {
list-style:none;
padding-left:0;
display:flex;
}
nav li{
background-color:burlywood;
font-size:20px;
}
nav li hover{
background-color:chocolate;
}
footer{
color:blue;
padding-left:20px;
padding-top:5px;
}
hover a{
text-decoration:none;
color:wihte;
display:block;
padding:0 10px;
}
#intro{
text-align:center;
}
main article{
display:flex;
}
#blog-text{
margin-right:20px;
font-size:18px;
}
#blog-text p: first-child<section{
margin-bottom:60px;
}
.card{
background-color:#fff;
border-radius:10px;
padding-bottom:2px;
padding-top:2px;
margin:1px 50px;/*Added*/
padding:2%;
}
main h2{
text-align:center;
}
.card{
width:500px;
}
main article{
justify-content:center;
margin:20px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 35%;
height:auto;
}
#ingredients{
font-size:18px;
padding-bottom:15px
margin:20px;
}
}
img{
border:solid 2px white;
img-align: center;
}</script>
</body>
</html>
Raw
jsbin.zufoves.css
*{
margin:3px;
padding:0;
}
body{
background-color:lightblue;
margin:0;
padding:0;
}
nav,footer{
height:30px;
background-color:yellow;
width:100%
line_heght:50px;
}
nav ul {
list-style:none;
padding-left:0;
display:flex;
}
nav li{
background-color:burlywood;
font-size:20px;
}
nav li hover{
background-color:chocolate;
}
footer{
color:blue;
padding-left:20px;
padding-top:5px;
}
hover a{
text-decoration:none;
color:wihte;
display:block;
padding:0 10px;
}
#intro{
text-align:center;
}
main article{
display:flex;
}
#blog-text{
margin-right:20px;
font-size:18px;
}
#blog-text p: first-child<section{
margin-bottom:60px;
}
.card{
background-color:#fff;
border-radius:10px;
padding-bottom:2px;
padding-top:2px;
margin:1px 50px;/*Added*/
padding:2%;
}
main h2{
text-align:center;
}
.card{
width:500px;
}
main article{
justify-content:center;
margin:20px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 35%;
height:auto;
}
#ingredients{
font-size:18px;
padding-bottom:15px
margin:20px;
}
}
img{
border:solid 2px white;
img-align: center;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment