A Pen by Scott
How do I make an a pen by scott?
What is a a pen by scott? How do you make a a pen by scott? This script and codes were developed by Scott on 09 December 2022, Friday.
A Pen by Scott - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Scott</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="shot"> <div class="p-Contain"> <div class="people person-1"> <div class="p-Head"></div> <div class="p-Body"></div> </div> <div class="people person-2"> <div class="p-Head"></div> <div class="p-Body"></div> </div> </div> <!-- end .p-Contain --> <div class="esc-Contain"> <div class="esc-Ends esc-1"></div> <div class="esc-2"></div> <div class="esc-Ends esc-3"></div> </div><!-- end .esc-Contain --> </div> <!-- end .shot -->
</body>
</html>
A Pen by Scott - Script Codes CSS Codes
body{background:#fafafa; margin:0; padding:0;} .shot{ background:#d2c026; border:1px solid rgba(0,0,0,.3); height:300px; margin:10% auto 0; overflow:hidden; position:relative; width:400px; } .people{ height:58px; left:60px; position:absolute; top:160px; width:16px; z-index:1; } .p-Head{ background:#2a2a2a; border-radius:100px; height:16px; margin-bottom:2px; } .p-Body{ background:#2a2a2a; border-radius:16px 16px 0 0; height:40px; } .person-1{ animation-duration: 7s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-name: p1; left:-5px; z-index:1; } .person-2{ animation-delay: .99s; animation-duration: 7s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; animation-name: p2; left:-20px; transform-style:flat; } @keyframes p1 { 0%{ transform:translate(0,0); } 25%{ transform:translate(130px,0); } 70%{ transform:translate(246px,-100px) } 100%{ transform:translate(420px,-100px) } } @keyframes p2 { 0%{ transform:translate(0,0); } 30%{ transform:translate(150px,0); } 70%{ transform:translate(266px,-100px); } 100%{ transform:translate(420px,-100px); } } /* escalator elements */ .esc-Contain{ position:absolute; height:120px; margin:100px; width:180px; left:7px; z-index:9; } .esc-Ends{ background:#c8b61f; border:3px solid #333; border-radius:20px; height:24px; position:absolute; width:51px; z-index:6; } .esc-1{ bottom:0; left:0; } .esc-2{ background:#c8b61f; border-bottom:3px solid #333; border-top:3px solid #333; height:30px; left:20px; position:absolute; top:42px; transform:rotate(-40deg); width:140px; z-index:7; } .esc-3{ right:0; top:0; }
Developer | Scott |
Username | scottohara |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,104 Kb |
Views | 8,096 |
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 |
CSS only checkboxes | 2,474 Kb |
Nav drop down menus | 3,996 Kb |
Using a label to give an input a pseudo element | 2,315 Kb |
Full screen panel ui | 4,351 Kb |
Show Desc. Block Hover | 2,553 Kb |
ARIA Accordion Example | 4,281 Kb |
Expanding Nav Element | 3,854 Kb |
Morph Menu Button Updated | 3,283 Kb |
Buttons and buttons and buttons | 7,212 Kb |
Tape Recorder | 3,016 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 |
Blog | Rottingroom | 1,430 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
Replace url via jquery | Serluk | 1,429 Kb |
After America | Jonathangarner | 2,686 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
RAQuote | Naderk007 | 4,412 Kb |
SCSS Unit Conversion | Jakob-e | 8,210 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Formations | Cantelope | 5,731 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!