Bruce Lee
How do I make an bruce lee?
PureCSS illustration of Bruce Lee. What is a bruce lee? How do you make a bruce lee? This script and codes were developed by Kenneth Alvares on 06 December 2022, Tuesday.
Bruce Lee Previews
Bruce Lee - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Bruce Lee</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box"> <div class="hair"> <div class="ear earLeft"></div> <div class="fringe fringe1"></div> <div class="fringe fringe2"></div> <div class="fringe fringe3"></div> <div class="fringe fringe4"></div> <div class="fringe fringe5"></div> <div class="face"> <div class="eyebrow eyebrowLeft"></div> <div class="eyebrow eyebrowRight"></div> <div class="eye eyeLeft"></div> <div class="eye eyeRight"></div> <div class="nose"></div> <div class="nostril nostrilLeft"></div> <div class="nostril nostrilRight"></div> <div class="cheekbone cheekboneLeft"></div> <div class="smile"> <div class="lipCorner lipCornerLeft"></div> <div class="lipLine"></div> <div class="lipTriangle lipTriangleLeft"></div> <div class="lipTriangle lipTriangleRight"></div> <div class="lipCorner lipCornerRight"></div> </div> <div class="chin"></div> <div class="cheekbone cheekboneRight"> </div> <div class="cut cut1"></div> <div class="cut cut2"></div> <div class="cut cut3"></div> <div class="drip drip1"> <div class="drop drop1"></div> </div> <div class="drip drip2"> <div class="drop drop2"></div> </div> </div> <div class="shoulders"></div> <div class="ear earRight"></div> <div class="neck"> <div class="larynx"></div> </div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>Bruce Lee - Script Codes CSS Codes
body { background-color: #F2BF0E;
}
.box { width: 600px; height: 420px; margin: auto; display: block; position: relative;
}
.hair { width: 78%; height: 120%; background-color: #1D1D1B; position: absolute; left: 11%; border-radius: 50%;
}
.ear { background-color: #C99E67; width: 8%; height: 8%; position: absolute; top: 70%;
}
.earLeft { -webkit-border-radius: 0 0 0 500px; -moz-border-radius: 0 0 0 500px; -o-border-radius: 0 0 0 500px; -ms-border-radius: 0 0 0 500px; border-radius: 0 0 0 500px; left: 13%;
}
.earRight { -webkit-border-radius: 0 0 500px 0; -moz-border-radius: 0 0 500px 0; -o-border-radius: 0 0 500px 0; -ms-border-radius: 0 0 500px 0; border-radius: 0 0 500px 0; right: 13%;
}
.face { -webkit-clip-path: polygon(100% 0, 100% 70%, 75% 100%, 25% 100%, 0 70%, 0 0); -moz-clip-path: polygon(100% 0, 100% 70%, 75% 100%, 25% 100%, 0 70%, 0 0); -o-clip-path: polygon(100% 0, 100% 70%, 75% 100%, 25% 100%, 0 70%, 0 0); -ms-clip-path: polygon(100% 0, 100% 70%, 75% 100%, 25% 100%, 0 70%, 0 0); clip-path: polygon(100% 0, 100% 70%, 75% 100%, 25% 100%, 0 70%, 0 0); background-color: #C99E67; width: 53%; height: 72%; position: absolute; left: 23.5%; top: 40.5%; overflow: hidden;
}
.fringe { background-color: #1D1D1B;
}
.fringe1 { width: 10%; height: 17%; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -o-transform: rotate(30deg); -ms-transform: rotate(30deg); position: absolute; top: 38.5%; left: 17%; z-index: 2;
}
.fringe2 { width: 10%; height: 17%; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); position: absolute; top: 38.5%; right: 17%; z-index: 2;
}
.fringe3 { width: 30%; height: 7%; background-color: #1D1D1B; border-radius: 0 0 500px 0; position: absolute; top: 39.5%; left: 25%; z-index: 2;
}
.fringe4 { width: 12%; height: 7%; background-color: #1D1D1B; border-radius: 0 0 500px 0; position: absolute; top: 39.5%; left: 55%; z-index: 2;
}
.fringe5 { width: 10%; height: 7%; background-color: #1D1D1B; position: absolute; top: 39.5%; left: 67%; z-index: 2;
}
.eyebrow { width: 35%; height: 7%; background-color: #1D1D1B; position: absolute; top: 20%;
}
.eyebrowLeft { left: 5%; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg);
}
.eyebrowRight { right: 5%; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg);
}
.eye { background-color: #1D1D1B; width: 20%; height: 5%; border-radius: 50%; position: absolute; top: 30%;
}
.eyeLeft { left: 10%;
}
.eyeRight { right: 10%;
}
.nose { width: 20%; height: 35%; background: -webkit-linear-gradient(#C99E67, #A8784A); background: -moz-linear-gradient(#C99E67, #A8784A); background: -o-linear-gradient(#C99E67, #A8784A); background: -ms-linear-gradient(#C99E67, #A8784A); background: linear-gradient(#C99E67, #A8784A); border-radius: 0 0 500px 500px; position: absolute; top: 30%; left: 40%; z-index: 3;
}
.nostril { width: 12%; height: 8%; background-color: #A8784A; border-radius: 50%; position: absolute; top: 57%;
}
.nostrilLeft { left: 32%;
}
.nostrilRight { right: 32%;
}
.cheekbone { width: 35%; height: 40%; background: -webkit-linear-gradient(#A8784A, #C99E67); background: -moz-linear-gradient(#A8784A, #C99E67); background: -o-linear-gradient(#A8784A, #C99E67); background: -ms-linear-gradient(#A8784A, #C99E67); background: linear-gradient(#A8784A, #C99E67); position: absolute; top: 52%;
}
.cheekboneLeft { border-radius: 0 30px 0 0; left: -10%;
}
.cheekboneRight { border-radius: 30px 0 0 0; right: -10%;
}
.lipCorner { width: 5%; height: 3%; background-color: #A25825; position: absolute; top: 76.5%; border-radius: 50%;
}
.lipCornerLeft { left: 30%;
}
.lipCornerRight { right: 28%;
}
.lipLine { background-color: #A25825; width: 35%; height: 1%; position: absolute; top: 77.5%; left: 35%;
}
.lipTriangle { -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -moz-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -o-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -ms-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); background-color: #A25825; width: 12%; height: 4%; position: absolute; top: 74%;
}
.lipTriangleLeft { left: 39%;
}
.lipTriangleRight { right: 37%;
}
.chin { width: 25%; height: 10%; background-color: #B98B59; position: absolute; left: 38.5%; top: 85%; border-radius: 0 0 500px 500px;
}
.neck { width: 40%; height: 45%; position: absolute; top: 90%; left: 30%; background: -webkit-linear-gradient(#A8784A, #C99E67); background: -moz-linear-gradient(#A8784A, #C99E67); background: -o-linear-gradient(#A8784A, #C99E67); background: -ms-linear-gradient(#A8784A, #C99E67); background: linear-gradient(#A8784A, #C99E67); z-index: -1;
}
.larynx { width: 35%; height: 15%; background-color: #A8784A; position: absolute; top: 70%; left: 32.5%; border-radius: 0 0 500px 500px;
}
.shoulders { -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -moz-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -o-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -ms-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); clip-path: polygon(50% 0%, 0% 100%, 100% 100%); height: 45%; width: 75%; position: absolute; top: 91%; background-color: #A8784A; z-index: -2; left: 12.5%;
}
.cut { width: 30%; height: 1.5%; background-color: #BA1622; position: absolute; z-index: 2; -webkit-transform: rotate(-30deg); -moz-transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); left: 80%;
}
.cut1 { top: 50%;
}
.cut2 { top: 55%;
}
.cut3 { top: 60%;
}
.drip { height: 1.5%; background-color: #BA1622; position: absolute; z-index: 2; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg);
}
.drip1 { width: 23%; top: 57.5%; left: 83%;
}
.drip2 { width: 10%; top: 65.5%; left: 84%;
}
.drop { height: 200%; border-radius: 50%; background-color: #BA1622; position: absolute;
}
.drop1 { width: 20%; top: -60%; left: 95%;
}
.drop2 { width: 45%; top: -60%; left: 95%;
}
Bruce Lee - Script Codes JS Codes
/*
BUILT WITH <3 BY KENNETH ALVARES
kenalvares.co.in
*/
| Developer | Kenneth Alvares |
| Username | kenalvares |
| Uploaded | December 06, 2022 |
| Rating | 4 |
| Size | 4,145 Kb |
| Views | 6,072 |
Do you need developer help for Bruce Lee?
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!
Kenneth Alvares (kenalvares) Script Codes
| Name | Size |
| Newspaper - Intermediate PureCSS | 2,437 Kb |
| Tupac Shakur - PureCSS Tribute | 5,313 Kb |
| Pure CSS iPhone 5S | 3,689 Kb |
| Cards UI | 2,368 Kb |
| Stuart the Minion | 2,828 Kb |
| Koala | 2,745 Kb |
| Responsive Grid Using Bootstrap | 1,927 Kb |
| Bookshelf | 1,916 Kb |
| Binary Rain | 2,528 Kb |
| Super Nintendo | 2,304 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| Console fun | Dviate | 1,500 Kb |
| Pericles mi loro... | Judag | 4,125 Kb |
| Ionic Infinite outside ion-content with ion-pane | Felquis | 3,117 Kb |
| A bit of elegance | Hackthevoid | 9,095 Kb |
| Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
| A Pen by Kevin | Kevinkenger | 2,642 Kb |
| Scroll to view if element partially out of view port height | ChrisMaki | 2,104 Kb |
| Multi-step GSAP animation | Acacheung | 2,668 Kb |
| Voting App - register | MatheusLima92 | 1,948 Kb |
| Opening Reveal Modal On Document Ready | Winghouchan | 1,787 Kb |
Do you want hide your ip address?
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!