How to make A burger ;P

Do u like stupid Tuts?

  • Yes

    Votes: 5 31.3%

  • No

    Votes: 1 6.3%

  • Pi = 3.1415

    Votes: 10 62.5%
  • Total voters
    16
Status
Not open for further replies.
G

GarettM

Posting Freak
Aug 5, 2010
833
136
First Lets Make The Basic HTML Design:


<!DOCTYPE HTML>
<head>
<title>Yummy Burger</title>
<style type='text/css'>
<!-- Sexy CSS Here -->
</style>
</head>
<body>
</body>
</html>
Click to expand...

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;
}
Click to expand...


Html:

<div class="bunone"></div>
<!-- No Meat D: -->
<div class="buntwo"></div>
Click to expand...

Finishing 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;
}
.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>
Click to expand...
HINT: Play With Size Height and Width Can Make all the Difference!

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;
}
Click to expand...

And the
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>
Click to expand...
Final HTML:
<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>
Click to expand...

Finishing Result:
You must be registered for see links








 
Kaz

Kaz

BooYah
Staff member
Nov 16, 2010
3,064
1,025
Thats pretty epic, i saw the thread and was like wtf is this dude postin
 
Weasel

Weasel

👄 I'd intercept me
Nov 25, 2011
4,132
2,456
This is kind a cool. I like how people stay doing diffrent things instead of just some lay-outs, re-makes and stuff. I like it.
 
Status
Not open for further replies.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top