Mac Baby

Developer
Jermaine
Size
5,317 Kb
Views
52,624
  1. Mac Baby Previews
  2. Mac Baby HTML Codes
  3. Mac Baby CSS Codes
  4. Mac Baby JS Codes

How do I make an mac baby?

What is a mac baby? How do you make a mac baby? This script and codes were developed by Jermaine on 26 August 2022, Friday.

Mac Baby Previews
IQ Test

Mac Baby - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Mac Baby</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container">	<div class="levitate">	<div class="ear left"></div>	<div class="ear right"></div>	<div class="face"></div>	<div class="curl"></div>	<div class="eye left">	<div class="pupil"></div>	</div>	<div class="eye right">	<div class="pupil"></div>	</div>	<div class="hand left"></div>	<div class="hand right"></div>	<div class="nijnbook">	<div class="logo">	<img src="//static.dviate.com/dump/nijntje.svg" alt="Nijntje">	</div>	</div>	<div class="foot left">	<div class="sole">	<div class="toe"></div>	<div class="toe toe02"></div>	<div class="toe toe03"></div>	<div class="toe toe04"></div>	<div class="toe toe05"></div>	</div>	</div>	<div class="foot right">	<div class="sole">	<div class="toe"></div>	<div class="toe toe02"></div>	<div class="toe toe03"></div>	<div class="toe toe04"></div>	<div class="toe toe05"></div>	</div>	</div>	<div class="base"></div>	<form>	<input type="password" placeholder="What's the password?">	</form>	</div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Mac Baby - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { height: 100vh; font-family: "Helvetica Neue", Arial; font-size: 14px; font-weight: 100; background-color: #FFF; overflow: hidden;
}
.container { position: relative; top: 50%; left: 50%; width: 200px; height: 400px; -webkit-transform: translateX(-50%) translateY(-50%) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px); transform: translateX(-50%) translateY(-50%) rotateY(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
}
.levitate { -webkit-animation: levitate 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite; animation: levitate 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
input[type="password"] { position: absolute; left: -65px; top: 420px; z-index: 20; width: 300px; height: 48px; line-height: 48px; padding: 8px; border-width: 1px; border-style: solid; border-color: #7fc7df; border-radius: 4px; font-size: 16px; text-align: center; -webkit-transition: all .25s; transition: all .25s;
}
input[type="password"]:focus { border-color: #42adcf; outline: none;
}
input[type="password"]:focus::-webkit-input-placeholder { color: #d1ebf3;
}
input[type="password"]:focus::-moz-placeholder { color: #d1ebf3;
}
input[type="password"]:focus:-ms-input-placeholder { color: #d1ebf3;
}
input[type="password"]:focus::placeholder { color: #d1ebf3;
}
input[type="password"]::-webkit-input-placeholder { color: #A8D9E9; -webkit-transition: all .25s; transition: all .25s;
}
input[type="password"]::-moz-placeholder { color: #A8D9E9; -webkit-transition: all .25s; transition: all .25s;
}
input[type="password"]:-ms-input-placeholder { color: #A8D9E9; -webkit-transition: all .25s; transition: all .25s;
}
input[type="password"]::placeholder { color: #A8D9E9; -webkit-transition: all .25s; transition: all .25s;
}
.base { position: absolute; z-index: 1; height: 650px; width: 650px; top: -10px; left: -235px; border-radius: 50%; -webkit-transform: perspective(1200px) rotateX(65deg) translateY(-130px); transform: perspective(1200px) rotateX(65deg) translateY(-130px); background-image: -webkit-radial-gradient(50% 50% circle, #a8d9e9 0%, #ffffff 65%, #ffffff); background-image: radial-gradient(circle at 50% 50%, #a8d9e9 0%, #ffffff 65%, #ffffff);
}
.curl { position: absolute; z-index: 13; top: -20px; left: 60px; width: 40px; height: 40px; border-radius: 30% 70% 30% 30%; border-right: 8px solid #3E250A;
}
.face { position: absolute; z-index: 12; border-radius: 50%; width: 180px; height: 200px; background-image: -webkit-radial-gradient(#d79957 40%, #b27437); background-image: radial-gradient(#d79957 40%, #b27437);
}
.ear { position: absolute; z-index: 11; width: 35px; height: 50px; border-radius: 50%; background-image: -webkit-radial-gradient(#b27437, #d79957); background-image: radial-gradient(#b27437, #d79957);
}
.ear.left { top: 60px; left: -15px;
}
.ear.right { top: 63px; left: 160px;
}
.eye { position: absolute; z-index: 12; top: 70px; left: 33px; background-color: #FFF; border-radius: 50%; width: 48px; height: 50px;
}
.eye.left { left: 33px;
}
.eye.right { left: 100px;
}
.eye .pupil { position: absolute; top: 18px; left: 7px; background-color: #000; border-width: 8px; border-style: solid; border-color: #613a10; border-radius: 50%; width: 15px; height: 15px; box-sizing: content-box; -webkit-animation: rolleyes 3s linear infinite; animation: rolleyes 3s linear infinite;
}
.eye .pupil.is-hidden { -webkit-animation: none; animation: none;
}
.hand { position: absolute; z-index: 13; top: 160px; width: 50px; height: 40px; border-radius: 50%; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: .5s all; transition: .5s all; background-image: -webkit-radial-gradient(#d79957, #b27437); background-image: radial-gradient(#d79957, #b27437);
}
.hand.left { left: -30px; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); -webkit-animation: type .7s ease-out infinite; animation: type .7s ease-out infinite;
}
.hand.right { left: 155px; -webkit-transform: rotate(10deg); transform: rotate(10deg); -webkit-animation: type .5s 1s ease-out infinite; animation: type .5s 1s ease-out infinite;
}
.hand.is-hidden.left { left: 30px; -webkit-animation: handsoff_left .35s ease-out forwards 1; animation: handsoff_left .35s ease-out forwards 1;
}
.hand.is-hidden.right { left: 100px; -webkit-animation: handsoff_right .35s ease-out forwards 1; animation: handsoff_right .35s ease-out forwards 1;
}
.hand.handsback { -webkit-animation: handsback .8s ease-out forwards 1; animation: handsback .8s ease-out forwards 1;
}
.nijnbook { position: absolute; z-index: 15; top: 125px; left: -35px; background-color: #FFF; border-radius: 5%; width: 250px; height: 180px; box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5); background-image: -webkit-radial-gradient(#eeeeee, #cccccc); background-image: radial-gradient(#eeeeee, #cccccc); -webkit-transform: perspective(600px) rotateX(-25deg); transform: perspective(600px) rotateX(-25deg); -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.nijnbook .logo { position: absolute; z-index: 16; top: 48px; left: 95px; margin: 0 auto; width: 40px; height: 35px;
}
.nijnbook .logo img { width: 50px; height: 70px;
}
.foot.left { position: relative; z-index: 25;
}
.foot.right { position: relative; z-index: 25; right: 20px; background-color: #000; -webkit-transform: scaleX(-1); transform: scaleX(-1);
}
.foot .sole { position: absolute; z-index: 13; top: 196px; left: -82px; border-radius: 50%; width: 60px; height: 92px; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3); background: -webkit-radial-gradient(#b27437 10%, #d79957); background: radial-gradient(#b27437 10%, #d79957); -webkit-transform: rotate(-29deg); transform: rotate(-29deg);
}
.foot .sole .toe { position: absolute; z-index: -1; top: -18px; left: 38px; border-radius: 50%; width: 25px; height: 30px; background: -webkit-radial-gradient(#b27437 10%, #d79957); background: radial-gradient(#b27437 10%, #d79957); -webkit-transform: rotate(25deg); transform: rotate(25deg);
}
.foot .sole .toe.toe02 { top: -15px; left: 20px; width: 15px; height: 20px; -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
.foot .sole .toe.toe03 { top: -8px; left: 7px; width: 13px; height: 20px; -webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
.foot .sole .toe.toe04 { top: 6px; left: 0; width: 9px; height: 14px; -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
.foot .sole .toe.toe05 { top: 20px; left: -1px; width: 6px; height: 9px; -webkit-transform: rotate(-15deg); transform: rotate(-15deg);
}
/* keyframes */
@-webkit-keyframes type { 0% { top: 160px; } 100% { top: 120px; }
}
@keyframes type { 0% { top: 160px; } 100% { top: 120px; }
}
@-webkit-keyframes rolleyes { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 25% { -webkit-transform: translateX(4px); transform: translateX(4px); } 45% { -webkit-transform: translateX(-4px) translateY(-2px); transform: translateX(-4px) translateY(-2px); } 85% { -webkit-transform: translateX(-2px); transform: translateX(-2px); }
}
@keyframes rolleyes { 0% { -webkit-transform: translateX(0) translateY(0); transform: translateX(0) translateY(0); } 25% { -webkit-transform: translateX(4px); transform: translateX(4px); } 45% { -webkit-transform: translateX(-4px) translateY(-2px); transform: translateX(-4px) translateY(-2px); } 85% { -webkit-transform: translateX(-2px); transform: translateX(-2px); }
}
@-webkit-keyframes levitate { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 50% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}
@keyframes levitate { 0% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 50% { -webkit-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(-10px); transform: translateY(-10px); }
}
@-webkit-keyframes handsoff_left { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { -webkit-transform: translateY(-70px) rotate(125deg); transform: translateY(-70px) rotate(125deg); }
}
@keyframes handsoff_left { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { -webkit-transform: translateY(-70px) rotate(125deg); transform: translateY(-70px) rotate(125deg); }
}
@-webkit-keyframes handsoff_right { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { -webkit-transform: translateY(-70px) rotate(-125deg); transform: translateY(-70px) rotate(-125deg); }
}
@keyframes handsoff_right { 0% { -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { -webkit-transform: translateY(-70px) rotate(-125deg); transform: translateY(-70px) rotate(-125deg); }
}
@-webkit-keyframes handsback { 0% { -webkit-transform: translateY(-70px); transform: translateY(-70px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes handsback { 0% { -webkit-transform: translateY(-70px); transform: translateY(-70px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); }
}

Mac Baby - Script Codes JS Codes

$('input[type="password"]').focus(function() { $('.hand, .pupil').addClass('is-hidden');
}).blur(function() { $('.hand, .pupil').addClass('handsback').delay(500).queue(function(){ $(this).removeClass('is-hidden').dequeue().delay(1200).queue(function() {	$(this).removeClass('handsback').dequeue();	});	});
});
Mac Baby - Script Codes
Mac Baby - Script Codes
Home Page Home
Developer Jermaine
Username dviate
Uploaded August 26, 2022
Rating 3
Size 5,317 Kb
Views 52,624
Do you need developer help for Mac Baby?

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!

Jermaine (dviate) Script Codes
Name
Dingetje 1
A Pen by Jermaine
Sticky header and footer
Accordion demootje
Testje voor KPN
Telecom preloader in SVG
Console fun
Ripples
Filter testje
Blur demo
Create amazing marketing copy with AI!

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!