First Lets Make The Basic HTML Design:
Know Were Gonna Make The Buns ;P
CSS:
Html:
Finishing Html
Know To Add the Meat and Souses!
CSS:
And the
HTML:
Finishing Result:
<!DOCTYPE HTML>
<head>
<title>Yummy Burger</title>
<style type='text/css'>
<!-- Sexy CSS Here -->
</style>
</head>
<body>
</body>
</html>
Know Were Gonna Make The Buns ;P
CSS:
.bunone {
background:#D3885A;
margin-left:auto;
margin-right:auto;
-moz-border-radius:5em 5em 1em 1em ;
border-radius:5em 5em 1em 1em ;
border:1px solid #000000;
width:600px;
height:85px;
padding-left:12px;
padding-right:12px;
}
.buntwo {
background:#D3885A;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 1em 1em 5em 5em;
border-radius: 1em 1em 5em 5em;
border:1px solid #000000;
width:600px;
height:31px;
padding-left:10px;
padding-right:10px;
}
Html:
<div class="bunone"></div>
<!-- No Meat D: -->
<div class="buntwo"></div>
Finishing Html
HINT: Play With Size Height and Width Can Make all the Difference!<head>
<title>Yummy Burger</title>
<style type='text/css'>
.bunone {
background:#D3885A;
margin-left:auto;
margin-right:auto;
-moz-border-radius:5em 5em 1em 1em ;
border-radius:5em 5em 1em 1em ;
border:1px solid #000000;
width:600px;
height:85px;
padding-left:12px;
padding-right:12px;
}
.buntwo {
background:#D3885A;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 1em 1em 5em 5em;
border-radius: 1em 1em 5em 5em;
border:1px solid #000000;
width:600px;
height:31px;
padding-left:10px;
padding-right:10px;
}
</style>
</head>
<body>
<div class="bunone"></div>
<!-- No Meat D: -->
<div class="buntwo"></div>
</body>
</html>
Know To Add the Meat and Souses!
CSS:
.ketchup {
background:#D20000;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
border:1px solid #000000;
width:560px;
height:2px;
padding-left:10px;
padding-right:10px;
}
.cheese {
background:#D9D900;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
border:1px solid #000000;
width:565px;
height:2px;
padding-left:10px;
padding-right:10px;
}
.mayonnaise {
background:#E8D0D0;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
border:1px solid #000000;
width:570px;
height:2px;
padding-left:10px;
padding-right:10px;
}
.patty {
background:#5E2F2F;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 2em 2em 2em 2em;
border-radius: 2em 2em 2em 2em;
border:1px solid #000000;
width:580px;
height:42px;
padding-left:10px;
padding-right:10px;
}
And the
HTML:
Final HTML:<div class="kecthup"></div>
<div class="cheese"></div>
<div class="patty"></div>
<div class="cheese"></div>
<div class="patty"></div>
<div class="mayonnaise"></div>
<html>
<head>
<title>Yummy Burger</title>
<style type='text/css'>
.bunone {
background:#D3885A;
margin-left:auto;
margin-right:auto;
-moz-border-radius:5em 5em 1em 1em ;
border-radius:5em 5em 1em 1em ;
border:1px solid #000000;
width:600px;
height:85px;
padding-left:12px;
padding-right:12px;
}
.ketchup {
background:#D20000;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
border:1px solid #000000;
width:560px;
height:2px;
padding-left:10px;
padding-right:10px;
}
.cheese {
background:#D9D900;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
border:1px solid #000000;
width:565px;
height:2px;
padding-left:10px;
padding-right:10px;
}
.mayonnaise {
background:#E8D0D0;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
border:1px solid #000000;
width:570px;
height:2px;
padding-left:10px;
padding-right:10px;
}
.patty {
background:#5E2F2F;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 2em 2em 2em 2em;
border-radius: 2em 2em 2em 2em;
border:1px solid #000000;
width:580px;
height:42px;
padding-left:10px;
padding-right:10px;
}
.buntwo {
background:#D3885A;
margin-left:auto;
margin-right:auto;
-moz-border-radius: 1em 1em 5em 5em;
border-radius: 1em 1em 5em 5em;
border:1px solid #000000;
width:600px;
height:31px;
padding-left:10px;
padding-right:10px;
}
</style>
</head>
<body>
<div class="bunone"></div>
<div class="kecthup"></div>
<div class="cheese"></div>
<div class="patty"></div>
<div class="cheese"></div>
<div class="patty"></div>
<div class="mayonnaise"></div>
<div class="buntwo"></div>
</body>
</html>
Finishing Result:
You must be registered for see links