Mr.Build A Face
How do I make an mr.build a face?
What is a mr.build a face? How do you make a mr.build a face? This script and codes were developed by Kescoe on 22 October 2022, Saturday.
Mr.Build A Face - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mr.Build A Face</title> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- im still working on this! for some reason it didnt save so i had to re-add everything -->
<h1 style = text-align:center > HOW MANY FACES CAN YOU MAKE? <h1>
<div class = "game">
<div class = "backg"></div>
<div id = "head">
<div id = "top"></div>
<div id= "bottom"></div>
</div>
<div class = "drag" id = "eye1">
<div id = "lid"></div> <div id = "pupil"></div>
</div>
<div class = "drag" id = "eye2"> <div id = "lid2"></div> <div id = "pupil2"></div>
</div> <div class = "drag" id = "hair1"></div>
<div class = "drag" id = "nose"> <div id = "shine"></div>
</div>
<div class = "drag" id = "mouth">
<div id = "teeth1" ></div> <div id = "teeth2" ></div> <div id = "teeth3" ></div> <div id = "teeth4" ></div> <div id = "teeth5" ></div>
</div> <div class = "drag" id= "brow1"></div>
<div class = "drag" id= "brow2"></div>
<div class = "drag" id= "brow3"></div>
<div class = "drag" id= "brow4"></div>
<div class = "drag" id= "brow5"></div>
<div class = "drag" id = "nose2"> <div id = "shine2"></div>
</div>
<div class = "drag" id = "nose3"> <div id = "shine3"></div> </div>
<div class = "drag" id = "Seye1"> <div id = "Spupil1"></div>
</div>
<div class = "drag" id = "Seye2">
<div id = "Spupil2"></div>
</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Mr.Build A Face - Script Codes CSS Codes
.game{padding:20px;}
.backg{
background-color:grey;
height:520px;
width:935px;
position:absolute;
}
#top{
width:250px;
height:300px;
background:brown;
/*border-radius*/
-webkit-border-radius:200px; -moz-border-radius:200px; border-radius:200px;
position:absolute;
margin-left:25px;
}
#bottom{
width:300px;
height:300px;
background:brown;
/*border-radius*/
-webkit-border-radius:200px; -moz-border-radius:200px; border-radius:200px;
margin-top:145px;
position:absolute;
}
#head{
margin-top:60px;
margin-left:60px;
position:absolute;
}
#nose{
width:100px;
height:100px;
margin-left:600px;
background:red;
/*border-radius*/
-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
}
#shine{
background-color:#FFC0C0;
height:20px;
width:20px;
margin-left:60px;
margin-top:20px;
position:absolute;
}
#eye1{
width:100px;
height:100px;
margin-left:400px;
background:white;
/*border-radius*/
-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
position:absolute;
}
#lid{
height:45px;
width:90px;
/*border-radius*/
-webkit-border-radius:90px 90px 0 0; -moz-border-radius:90px 90px 0 0; border-radius:90px 90px 0 0;
margin-left:5px;
background:#701C00;
position:absolute;
}
#pupil{
background-color:black;
height:30px;
width:30px;
position:absolute;
margin-left:35px;
margin-top:44px;
}
/* second eye */
#eye2{
width:100px;
height:100px;
margin-left:400px;
margin-top:100px;
background:white;
/*border-radius*/
-webkit-border-radius:50px; -moz-border-radius:50px; border-radius:50px;
position:absolute;
}
#lid2{
height:45px;
width:90px;
/*border-radius*/
-webkit-border-radius:90px 90px 0 0; -moz-border-radius:90px 90px 0 0; border-radius:90px 90px 0 0;
margin-left:5px;
background:#701C00;
position:absolute;
}
#pupil2{
background-color:black;
height:30px;
width:30px;
position:absolute;
margin-left:35px;
margin-top:44px;
}
/* mouth */
#mouth{
height:75px;
width:174px;
/*border-radius*/
-webkit-border-radius:0 0 90px 90px; -moz-border-radius:0 0 90px 90px; border-radius:0 0 90px 90px;
background:black;
margin-left:500px;
margin-top:100px;
}
#teeth1{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left:5px;
margin-top:2px;
}
#teeth2{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left:40px;
margin-top:2px;
}
#teeth3{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left:75px;
margin-top:2px;
}
#teeth4{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left:110px;
margin-top:2px;
}
#teeth5{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left:140px;
margin-top:2px;
}
/* nose 2 */
#nose2{
display:block;
width:100px;
height:150px;
background-color:purple;
position:absolute;
margin-left:700px;
/*border-radius*/
-webkit-border-radius:50% 50% 50% 50%/60% 60% 40% 40%; -moz-border-radius:50% 50% 50% 50%/60% 60% 40% 40%; border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
}
#shine2{
background-color:white;
height:20px;
width:20px;
position:absolute;
margin-left:50px;
margin-top:25px;
}
#brow1{
height:20px;
width:70px;
background-color:black;
margin-left:400px;
position:absolute;
}
#brow2{
height:20px;
width:70px;
background-color:black;
margin-left:400px;
margin-top:25px;
position:absolute;
}
#brow3{
height:20px;
width:70px;
background-color:black;
margin-left:400px;
margin-top:50px;
position:absolute;
}
#brow4{
height:20px;
width:150px;
background-color:black;
margin-left:400px;
margin-top:75px;
position:absolute;
}
#brow5{
height:20px;
width:150px;
background-color:black;
margin-left:400px;
margin-top:100px;
position:absolute;
}
#Seye1{
height:30px;
width:50px;
background-color:white;
margin-left:520px;
margin-top:-150px;
position:absolute;
}
#Spupil1{
height:20px;
width:20px;
position:absolute;
margin-left:15px;
background-color:black;
}
#Seye2{
height:30px;
width:50px;
background-color:white;
margin-left:520px;
margin-top:-200px;
position:absolute;
}
#Spupil2{
height:20px;
width:20px;
position:absolute;
margin-left:15px;
background-color:black;
}
#hair1{
border-bottom:70px solid black;
border-left:50px solid transparent;
border-right:50px solid transparent;
height:0;
width:70px;
position:absolute;
margin-top:406px;
margin-left:500px;
}
#nose3{
width:100px;
height:60px;
background:blue;
/*border-radius*/
-webkit-border-radius:100px / 50px; -moz-border-radius:100px / 50px; border-radius:100px / 50px;
position:absolute;
margin-left:700px;
margin-top:-100px;
}
#shine3{
height:15px;
width:15px;
margin-left:60px;
margin-top:10px;
background-color:white;
}
Mr.Build A Face - Script Codes JS Codes
$(document).ready(function(){ $(".drag").draggable();
});
![Mr.Build A Face - Script Codes](http://shots.codepen.io/kescoe/pen/lDkfe-512.jpg)
Developer | Kescoe |
Username | kescoe |
Uploaded | October 22, 2022 |
Rating | 3 |
Size | 2,672 Kb |
Views | 12,144 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Animated Invite | 2,556 Kb |
Duck Hunt | 1,706 Kb |
Funny animals | 3,076 Kb |
CSS gameboy | 4,131 Kb |
IceCream Truck | 4,306 Kb |
Glitchy Text Effect | 2,208 Kb |
Color chart | 2,248 Kb |
Div buttons | 1,978 Kb |
Css iphone | 2,773 Kb |
Accordian nav | 2,168 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Use the Twitchtv JSON API | Roksanaop | 3,561 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
Scroll to top button | DominicFrancois | 3,743 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
Medium Menu | Lucasmotta | 3,923 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Airbnb Homepage | SindhujaD | 2,480 Kb |
Front in Aracaju Logo Pure CSS | Shankarcabus | 2,581 Kb |
Sidebar Thing | Jonambas | 2,779 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!