The Simpsons Wall Painting

Developer
Kevin Jannis
Size
4,018 Kb
Views
36,432
  1. The Simpsons Wall Painting Previews
  2. The Simpsons Wall Painting HTML Codes
  3. The Simpsons Wall Painting CSS Codes
  4. The Simpsons Wall Painting JS Codes

How do I make an the simpsons wall painting?

A scene from Moby Dick. What is a the simpsons wall painting? How do you make a the simpsons wall painting? This script and codes were developed by Kevin Jannis on 25 August 2022, Thursday.

The Simpsons Wall Painting Previews
IQ Test

The Simpsons Wall Painting - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The Simpsons Wall Painting</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="painting"> <div class="nail"></div> <div class="plaque">Scene From Moby Dick</div> <div class="background"></div> <div class="boat"> <div class="sail-left"></div> <div class="sail-right"></div> </div> <div class="clouds"></div>
</div> <script src="js/index.js"></script>
</body>
</html>

The Simpsons Wall Painting - Script Codes CSS Codes

* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;
}
*:before, *:after { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;
}
body { background: #fac5cb; text-align: center; padding: 50px 0;
}
#painting { -moz-transform: rotate(-2deg); -ms-transform: rotate(-2deg); -webkit-transform: rotate(-2deg); transform: rotate(-2deg); -moz-transform-origin: 50% -40px 0 0 50%; -ms-transform-origin: 50% -40px 0 0 50%; -webkit-transform-origin: 50% -40px 0 0 50%; transform-origin: 50% -40px 0 0 50%; position: relative; display: inline-block; background: #211309; width: 300px; height: 234px; border: solid 3px #211309;
}
#painting:before, #painting:after { content: " "; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-style: solid; border-color: transparent; border-width: 25px;
}
#painting:before { top: 2px; bottom: 2px; border-color: transparent #bb6c39;
}
#painting:after { left: 2px; right: 2px; border-color: #bb6c39 transparent;
}
#painting .nail { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; position: absolute; background: #211309; top: -40px; left: 0; right: 0; height: 6px; width: 6px; margin: auto;
}
#painting .nail:before, #painting .nail:after { -moz-transform-origin: 0 0 0; -webkit-transform-origin: 0 0 0; transform-origin: 0 0 0; content: " "; position: absolute; background: #211309; height: 50px; width: 2px; left: 2px; top: 2px;
}
#painting .nail:before { -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg);
}
#painting .nail:after { -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -webkit-transform: rotate(35deg); transform: rotate(35deg);
}
#painting .plaque { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; position: absolute; background: #ffbf22; font-size: 11px; left: 0; right: 0; bottom: 5px; width: 125px; margin: auto; border: solid 2px #211309; z-index: 10;
}
#painting .plaque:before, #painting .plaque:after { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; content: " "; position: absolute; background: #211309; top: 0; bottom: 0; width: 2px; height: 2px; margin: auto;
}
#painting .plaque:before { left: 2px;
}
#painting .plaque:after { right: 2px;
}
#painting .background { position: absolute; top: 28px; left: 28px; right: 28px; bottom: 28px; background: #211309; border-top: solid 144px #a3cacd; border-bottom: solid 25px #8ca1bd;
}
#painting .boat { -moz-border-radius-bottomleft: 12px 22px; -webkit-border-bottom-left-radius: 12px 22px; border-bottom-left-radius: 12px 22px; -moz-border-radius-bottomright: 12px 22px; -webkit-border-bottom-right-radius: 12px 22px; border-bottom-right-radius: 12px 22px; position: absolute; background: #c95539; width: 136px; height: 21px; top: 153px; left: 0; right: 0; border: solid 2px #211309; margin: auto;
}
#painting .boat:before { -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0; border-radius: 0 0 7px 7px; content: " "; position: absolute; background: #c95539; width: 152px; height: 6px; top: -10px; left: -12px; border: solid 2px #211309;
}
#painting .boat:after { -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px; border-radius: 4px 4px 0 0; content: " "; position: absolute; background: #c95539; width: 4px; height: 100px; top: -112px; left: 50%; margin-left: -4px; border: solid 2px #211309;
}
#painting .boat .sail-left { -moz-transform: rotate(22deg); -ms-transform: rotate(22deg); -webkit-transform: rotate(22deg); transform: rotate(22deg); top: -100px; left: 14px;
}
#painting .boat .sail-left, #painting .boat .sail-left:before { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; content: " "; position: absolute; border-style: solid; border-color: transparent transparent #211309 transparent; border-width: 0 22px 77px 31px;
}
#painting .boat .sail-left:before { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; content: " "; top: 4px; left: -28px; border-bottom-color: #ffffff; border-width: 0 19px 71px 28px;
}
#painting .boat .sail-right { -moz-transform: rotate(-23deg); -ms-transform: rotate(-23deg); -webkit-transform: rotate(-23deg); transform: rotate(-23deg); top: -106px; left: 64px;
}
#painting .boat .sail-right, #painting .boat .sail-right:before { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; content: " "; position: absolute; border-style: solid; border-color: transparent transparent #211309 transparent; border-width: 0 26px 85px 24px;
}
#painting .boat .sail-right:before { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; content: " "; top: 5px; left: -22px; border-bottom-color: #ffffff; border-width: 0 24px 78px 22px;
}
#painting .clouds { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 0 0 0 0 #ffffff, 16px 3px 0 -4px #ffffff, 29px 5px 0 -9px #ffffff, 0 0 0 2px #211309, 16px 3px 0 -2px #211309, 29px 5px 0 -7px #211309, 185px 10px 0 -4px #ffffff, 170px 10px 0 2px #ffffff, 150px 10px 0 -2px #ffffff, 185px 10px 0 -2px #211309, 170px 10px 0 4px #211309, 150px 10px 0 0 #211309; -webkit-box-shadow: 0 0 0 0 #ffffff, 16px 3px 0 -4px #ffffff, 29px 5px 0 -9px #ffffff, 0 0 0 2px #211309, 16px 3px 0 -2px #211309, 29px 5px 0 -7px #211309, 185px 10px 0 -4px #ffffff, 170px 10px 0 2px #ffffff, 150px 10px 0 -2px #ffffff, 185px 10px 0 -2px #211309, 170px 10px 0 4px #211309, 150px 10px 0 0 #211309; box-shadow: 0 0 0 0 #ffffff, 16px 3px 0 -4px #ffffff, 29px 5px 0 -9px #ffffff, 0 0 0 2px #211309, 16px 3px 0 -2px #211309, 29px 5px 0 -7px #211309, 185px 10px 0 -4px #ffffff, 170px 10px 0 2px #ffffff, 150px 10px 0 -2px #ffffff, 185px 10px 0 -2px #211309, 170px 10px 0 4px #211309, 150px 10px 0 0 #211309; position: absolute; background: #ffffff; width: 30px; height: 30px; top: 50px; left: 45px;
}

The Simpsons Wall Painting - Script Codes JS Codes

/*
The Simpsons painting: A scene from Moby Dick
Made by Kevin Jannis (@kevinjannis)
View more at www.janniskev.in
*/
The Simpsons Wall Painting - Script Codes
The Simpsons Wall Painting - Script Codes
Home Page Home
Developer Kevin Jannis
Username kevinjannis
Uploaded August 25, 2022
Rating 4
Size 4,018 Kb
Views 36,432
Do you need developer help for The Simpsons Wall Painting?

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
A winter wonderland scene
Adjusting your settings.
Flat Star Wars
Earth in a single HTML element
Simple float label
DC vs. Marvel
Vintage TV
V for Vendetta
Vivid CSS3 Spinner
Curated collection of gradient backgrounds
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!