Dumb and Dumber van!

Developer
Kevin Jannis
Size
5,057 Kb
Views
30,360
  1. Dumb and Dumber van! Previews
  2. Dumb and Dumber van! HTML Codes
  3. Dumb and Dumber van! CSS Codes
  4. Dumb and Dumber van! JS Codes

How do I make an dumb and dumber van!?

The awesome dumb and dumber van in HTML/CSS!. What is a dumb and dumber van!? How do you make a dumb and dumber van!? This script and codes were developed by Kevin Jannis on 25 August 2022, Thursday.

Dumb and Dumber van! Previews
IQ Test

Dumb and Dumber van! - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dumb and Dumber van!</title> <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 id="van"> <div class="left"> <div class="ear-1"></div> <div class="ear-2"></div> <div class="ear-3"></div> <div class="ear-4"></div> <div class="ear-5"></div> <div class="antenna"></div> <div class="roof"></div> <div class="window-border"></div> <div class="window"></div> <div class="window-shade"></div> <div class="window-border-top"></div> <div class="window-border-bottom"></div> <div class="hood"></div> <div class="freckles"></div> <div class="light"></div> <div class="nose"></div> <div class="tongue"></div> <div class="tongue-inner"></div> <div class="front"></div> <div class="tire"></div> <div class="bumper"></div> </div> <div class="right"> <div class="ear-1"></div> <div class="ear-2"></div> <div class="ear-3"></div> <div class="ear-4"></div> <div class="ear-5"></div> <div class="antenna"></div> <div class="roof"></div> <div class="window-border"></div> <div class="window"></div> <div class="window-shade"></div> <div class="window-border-top"></div> <div class="window-border-bottom"></div> <div class="hood"></div> <div class="freckles"></div> <div class="light"></div> <div class="nose"></div> <div class="tongue"></div> <div class="tongue-inner"></div> <div class="front"></div> <div class="tire"></div> <div class="bumper"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Dumb and Dumber van! - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;
}
body { background: #e9e5e2; padding: 40px 0; text-align: center;
}
#van { overflow: hidden; position: relative; display: inline-block; width: 242px; height: 205px;
}
#van:after { content: " "; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: solid 2px #d8d3cf;
}
#van .left,
#van .right { top: 0; bottom: 0; width: 50%; overflow: hidden;
}
#van .left,
#van .left > *,
#van .right,
#van .right > * { position: absolute;
}
#van .left { left: 0;
}
#van .left .ear-1 { top: 11px; left: 29px; width: 37px; height: 21px; border-style: solid; border-color: transparent transparent #957552 transparent; border-width: 0 0 21px 37px;
}
#van .left .ear-2 { top: 36px; left: 0px; width: 45px; height: 69px; border-style: solid; border-color: transparent transparent #957552 transparent; border-width: 0 0 69px 26px;
}
#van .left .ear-3 { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; top: 10px; left: 62px; width: 14px; height: 14px; background: #957552;
}
#van .left .ear-4 { -moz-border-radius: 50% 0 0 50%; -webkit-border-radius: 50%; border-radius: 50% 0 0 50%; top: 31px; left: 26px; width: 20px; height: 10px; background: #957552;
}
#van .left .ear-5 { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; top: 100px; left: 0; width: 14px; height: 14px; background: #957552;
}
#van .left .antenna { -moz-border-radius: 10px 0 0 0; -webkit-border-radius: 10px; border-radius: 10px 0 0 0; top: 0; right: 0; width: 10px; height: 31px; background: #957552;
}
#van .left .roof { -moz-border-radius-topleft: 90px 30px; -webkit-border-top-left-radius: 90px 30px; border-top-left-radius: 90px 30px; top: 13px; left: 43px; width: 78px; height: 23px; background: #c69c6d;
}
#van .left .window-border { top: 34px; left: 28px; width: 93px; height: 49px; border-style: solid; border-color: transparent transparent #c69c6d transparent; border-width: 0 0 49px 15px;
}
#van .left .window { top: 44px; left: 35px; width: 86px; height: 39px; border-style: solid; border-color: transparent transparent #f6efe8 transparent; border-width: 0 0 39px 12px;
}
#van .left .window-shade { top: 44px; left: 44px; width: 77px; height: 9px; border-style: solid; border-color: transparent transparent #e4cfbb transparent; border-width: 0 0 9px 3px;
}
#van .left .window-border-top { -moz-border-radius-bottomleft: 40px 80px; -webkit-border-bottom-left-radius: 40px 80px; border-bottom-left-radius: 40px 80px; top: 34px; left: 113px; width: 8px; height: 15px; background: #c69c6d;
}
#van .left .window-border-bottom { -moz-border-radius-topleft: 30px 80px; -webkit-border-top-left-radius: 30px 80px; border-top-left-radius: 30px 80px; top: 72px; left: 105px; width: 16px; height: 45px; background: #957552;
}
#van .left .hood { top: 83px; left: 11px; width: 110px; height: 19px; border-style: solid; border-color: transparent transparent #d1b08a transparent; border-width: 0 0 19px 17px;
}
#van .left .tongue { -moz-border-radius-bottomleft: 40px 80px; -webkit-border-bottom-left-radius: 40px 80px; border-bottom-left-radius: 40px 80px; top: 157px; left: 103px; width: 20px; height: 35px; background: #c1272d; z-index: 10;
}
#van .left .tongue-inner { -moz-border-radius-bottomleft: 30px 80px; -webkit-border-bottom-left-radius: 30px 80px; border-bottom-left-radius: 30px 80px; top: 152px; left: 111px; width: 10px; height: 25px; background: #911d22; z-index: 20;
}
#van .left .front { -moz-border-radius: 22px 0 12px 12px; -webkit-border-radius: 22px; border-radius: 22px 0 12px 12px; top: 95px; left: 5px; width: 116px; height: 74px; background: #c69c6d; z-index: 30;
}
#van .left .freckles { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: -9px 11px 0 0 #957552, 9px 11px 0 0 #957552; -webkit-box-shadow: -9px 11px 0 0 #957552, 9px 11px 0 0 #957552; box-shadow: -9px 11px 0 0 #957552, 9px 11px 0 0 #957552; top: 123px; left: 30px; width: 7px; height: 7px; background: #957552; z-index: 40;
}
#van .left .light { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 2px 0 0 #d1b08a; -webkit-box-shadow: 0 2px 0 0 #d1b08a; box-shadow: 0 2px 0 0 #d1b08a; top: 120px; left: 59px; width: 30px; height: 30px; background: #ffffff; border: solid 7px #ba9266; z-index: 40;
}
#van .left .nose { -moz-box-shadow: 0 -4px 0 0 #333333; -webkit-box-shadow: 0 -4px 0 0 #333333; box-shadow: 0 -4px 0 0 #333333; -moz-border-radius-topleft: 11px 8px; -webkit-border-top-left-radius: 11px 8px; border-top-left-radius: 11px 8px; -moz-border-radius-bottomleft: 33px 92px; -webkit-border-bottom-left-radius: 33px 92px; border-bottom-left-radius: 33px 92px; top: 99px; left: 91px; width: 30px; height: 43px; background: #000000; z-index: 40;
}
#van .left .nose:before { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset 0 -2px 0 0 #5c5c5c; -webkit-box-shadow: inset 0 -2px 0 0 #5c5c5c; box-shadow: inset 0 -2px 0 0 #5c5c5c; content: " "; position: absolute; display: block; top: 12px; left: 13px; width: 12px; height: 12px; background: #333333;
}
#van .left .bumper { -moz-border-radius: 0 0 0 10px; -webkit-border-radius: 0; border-radius: 0 0 0 10px; top: 169px; left: 17px; width: 104px; height: 18px; background: #957552;
}
#van .left .tire { -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0; border-radius: 0 0 5px 5px; top: 169px; left: 17px; width: 25px; height: 36px; background: #000000; z-index: 1;
}
#van .right { right: 0;
}
#van .right .ear-1 { top: 11px; right: 29px; width: 37px; height: 21px; border-style: solid; border-color: transparent transparent #86694a transparent; border-width: 0 37px 21px 0;
}
#van .right .ear-2 { top: 36px; right: 0px; width: 45px; height: 69px; border-style: solid; border-color: transparent transparent #86694a transparent; border-width: 0 26px 69px 0;
}
#van .right .ear-3 { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; top: 10px; right: 62px; width: 14px; height: 14px; background: #86694a;
}
#van .right .ear-4 { -moz-border-radius: 50% 50% 0 0; -webkit-border-radius: 50%; border-radius: 50% 50% 0 0; top: 31px; right: 26px; width: 22px; height: 10px; background: #86694a;
}
#van .right .ear-5 { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; top: 100px; right: 0; width: 14px; height: 14px; background: #86694a;
}
#van .right .antenna { -moz-border-radius: 0 10px 0 0; -webkit-border-radius: 0; border-radius: 0 10px 0 0; top: 0; left: 0; width: 10px; height: 31px; background: #86694a;
}
#van .right .roof { -moz-border-radius-topright: 90px 30px; -webkit-border-top-right-radius: 90px 30px; border-top-right-radius: 90px 30px; top: 13px; right: 43px; width: 78px; height: 23px; background: #ad895f;
}
#van .right .window-border { top: 34px; right: 28px; width: 93px; height: 49px; border-style: solid; border-color: transparent transparent #ad895f transparent; border-width: 0 15px 49px 0;
}
#van .right .window { top: 44px; right: 35px; width: 86px; height: 39px; border-style: solid; border-color: transparent transparent #d4cbc2 transparent; border-width: 0 12px 39px 0;
}
#van .right .window-shade { top: 44px; right: 44px; width: 77px; height: 9px; border-style: solid; border-color: transparent transparent #c5b19e transparent; border-width: 0 3px 9px 0;
}
#van .right .window-border-top { -moz-border-radius-bottomright: 40px 80px; -webkit-border-bottom-right-radius: 40px 80px; border-bottom-right-radius: 40px 80px; top: 34px; right: 113px; width: 8px; height: 15px; background: #ad895f;
}
#van .right .window-border-bottom { -moz-border-radius-topright: 30px 80px; -webkit-border-top-right-radius: 30px 80px; border-top-right-radius: 30px 80px; top: 72px; right: 105px; width: 16px; height: 45px; background: #86694a;
}
#van .right .hood { top: 83px; right: 11px; width: 110px; height: 19px; border-style: solid; border-color: transparent transparent #b69977 transparent; border-width: 0 17px 19px 0;
}
#van .right .tongue { -moz-border-radius-bottomright: 40px 80px; -webkit-border-bottom-right-radius: 40px 80px; border-bottom-right-radius: 40px 80px; top: 157px; right: 103px; width: 20px; height: 35px; background: #a92b2c; z-index: 10;
}
#van .right .tongue-inner { -moz-border-radius-bottomright: 30px 80px; -webkit-border-bottom-right-radius: 30px 80px; border-bottom-right-radius: 30px 80px; top: 152px; right: 111px; width: 10px; height: 25px; background: #832323; z-index: 20;
}
#van .right .front { -moz-border-radius: 0 22px 12px 12px; -webkit-border-radius: 0; border-radius: 0 22px 12px 12px; top: 95px; right: 5px; width: 116px; height: 74px; background: #ad895f; z-index: 30;
}
#van .right .freckles { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: -9px 11px 0 0 #86694a, 9px 11px 0 0 #86694a; -webkit-box-shadow: -9px 11px 0 0 #86694a, 9px 11px 0 0 #86694a; box-shadow: -9px 11px 0 0 #86694a, 9px 11px 0 0 #86694a; top: 123px; right: 30px; width: 7px; height: 7px; background: #86694a; z-index: 40;
}
#van .right .light { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 2px 0 0 #b69977; -webkit-box-shadow: 0 2px 0 0 #b69977; box-shadow: 0 2px 0 0 #b69977; top: 120px; right: 59px; width: 30px; height: 30px; background: #ffffff; border: solid 7px #a4815a; z-index: 40;
}
#van .right .nose { -moz-box-shadow: 0 -4px 0 0 #383531; -webkit-box-shadow: 0 -4px 0 0 #383531; box-shadow: 0 -4px 0 0 #383531; -moz-border-radius-topright: 11px 8px; -webkit-border-top-right-radius: 11px 8px; border-top-right-radius: 11px 8px; -moz-border-radius-bottomright: 33px 92px; -webkit-border-bottom-right-radius: 33px 92px; border-bottom-right-radius: 33px 92px; top: 99px; right: 91px; width: 30px; height: 43px; background: #0f0c08; z-index: 40;
}
#van .right .nose:before { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: inset 0 -2px 0 0 #595552; -webkit-box-shadow: inset 0 -2px 0 0 #595552; box-shadow: inset 0 -2px 0 0 #595552; content: " "; position: absolute; display: block; top: 12px; right: 13px; width: 12px; height: 12px; background: #383531;
}
#van .right .bumper { -moz-border-radius: 0 0 10px 0; -webkit-border-radius: 0; border-radius: 0 0 10px 0; top: 169px; right: 17px; width: 104px; height: 18px; background: #86694a;
}
#van .right .tire { -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0; border-radius: 0 0 5px 5px; top: 169px; right: 17px; width: 25px; height: 36px; background: #000000; z-index: 1;
}

Dumb and Dumber van! - Script Codes JS Codes

/*
Dumb and dumber van!
Inspired by https://dribbble.com/shots/1030724-Pull-over
Made by Kevin Jannis (@kevinjannis)
View more at www.janniskev.in
*/
Dumb and Dumber van! - Script Codes
Dumb and Dumber van! - Script Codes
Home Page Home
Developer Kevin Jannis
Username kevinjannis
Uploaded August 25, 2022
Rating 4.5
Size 5,057 Kb
Views 30,360
Do you need developer help for Dumb and Dumber van!?

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!

Kevin Jannis (kevinjannis) Script Codes
Name
DC vs. Marvel
Random Access Memories
The Simpsons Wall Painting
Google Chrome logos in CSS
A winter wonderland scene
Adjusting your settings.
The world with CSS3 Transforms
Golfing
V for Vendetta
Flat Star Wars
Create amazing Facebook ads 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!