Typeset a Poem - Rodeo 005
How do I make an typeset a poem - rodeo 005?
What is a typeset a poem - rodeo 005? How do you make a typeset a poem - rodeo 005? This script and codes were developed by João Victor on 06 November 2022, Sunday.
Typeset a Poem - Rodeo 005 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Typeset a Poem - Rodeo 005</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="foo"> <p class="f1">I will not play at tug o’ war.</p> <p class="f4">I’d rather play at hug o’ war,</p> <p class="f6">Where everyone hugs</p> <p class="f7">Instead of tugs,</p> <p class="f8">Where everyone giggles</p> <p class="f9">And rolls on the rug,</p> <p class="f10">Where everyone kisses,</p> <p class="f11">And everyone grins,</p> <p class="f12">And everyone cuddles,</p> <p class="f13">And everyone wins.</p>
</div> <script src="js/index.js"></script>
</body>
</html>
Typeset a Poem - Rodeo 005 - Script Codes CSS Codes
@font-face { font-family: 'Marck Script'; font-style: normal; font-weight: 400; src: local('Marck Script'), local('MarckScript-Regular'), url(http://themes.googleusercontent.com/static/fonts/marckscript/v4/O_D1NAZVOFOobLbVtW3bcnhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
/* style */
@-webkit-keyframes anim{ to{ -webkit-transform: translate(0) rotate(0) scale(1) skew(0); }
}
@-webkit-keyframes text{ to{ text-shadow: 0 0 1px #0D3454; }
}
@-moz-keyframes anim{ to{ -moz-transform: translate(0) rotate(0) scale(1) skew(0); }
}
@-moz-keyframes text{ to{ text-shadow: 0 0 1px #0D3454; }
}
html{height: 100%;}
body{ margin: 0; padding: 0; width: 100%; height: 100%; background:-webkit-radial-gradient( center center,circle cover,white ,rgb(226, 216, 173)); background:-moz-radial-gradient( center center,circle cover,white ,rgb(226, 216, 173));
}
.foo{ height: 100%; min-height: 500px; overflow: hidden;
}
p{ position: relative; top: 5%; width: 500px; margin: 0 auto; font-family: 'Marck Script'; font-size: 30px; line-height: 45px; color: transparent; letter-spacing: 2px; text-shadow: 0 0 25px #0D3454; -webkit-transform: scale(3); -webkit-animation: anim 1s 2s cubic-bezier(0.620, -0.600, 0.175, 1.650) forwards, text 2s 12s linear forwards; -moz-transform: scale(3); -moz-animation: anim 1s 2s cubic-bezier(0.620, -0.600, 0.175, 1.650) forwards, text 2s 12s linear forwards;
}
.f1{ -webkit-transform: translate(-150px, -10px); -webkit-animation-delay:2s; -moz-transform: translate(-150px, -10px); -moz-animation-delay:2s;
}
.f4{ -webkit-transform: translate(50px, 250px) scale(2) rotate(180deg); -webkit-animation-delay:3s; -moz-transform: translate(50px, 250px) sscale(2) rotate(180deg); -moz-animation-delay:3s;
}
.f6{ -webkit-transform: translate(-50px, -350px) skew(20deg) rotate(-320deg); -webkit-animation-delay:4s; -moz-transform: translate(-50px, -350px) skew(20deg) rotate(-320deg); -moz-animation-delay:4s;
}
.f7{ -webkit-transform: translate(-150px, -150px) scale(1.2) rotate(60deg); -webkit-animation-delay:5s; -moz-transform: translate(-150px, -150px) scale(1.2) rotate(60deg); -moz-animation-delay:5s;
}
.f8{ -webkit-transform: translate(-350px, 350px) scaleY(2) rotate(-20deg); -webkit-animation-delay:6s; -moz-transform: translate(-350px, 350px) scaleY(2) rotate(-20deg); -moz-animation-delay:6s;
}
.f9{ -webkit-transform: translate(-100px, -50px) scale(2); -webkit-animation-delay:7s; -moz-transform: translate(-100px, -50px) scale(2); -moz-animation-delay:7s;
}
.f10{ -webkit-transform: translate(300px, 10px) scale(.5) rotate(380deg); -webkit-animation-delay:8s; -moz-transform: translate(300px, 10px) scale(.5) rotate(380deg); -moz-animation-delay:8s;
}
.f11{ -webkit-transform: translate(-300px, -100px) skewX(50deg); -webkit-animation-delay:9s; -moz-transform: translate(-300px, -100px) skewX(50deg) scale(3); -moz-animation-delay:9s;
}
.f12{ -webkit-transform: translate(300px, 100px) skewX(-50deg) scale(3); -webkit-animation-delay:10s; -moz-transform: translate(300px, 100px) skewX(-50deg) scale(3); -moz-animation-delay:10s;
}
.f13{ -webkit-transform: translate(-500px, 300px) skew(-50deg) scale(5) rotate(-20deg); -webkit-animation-delay:11s; -moz-transform: translate(-500px, 300px) skew(-50deg) scale(5) rotate(-20deg); -moz-animation-delay:11s;
}
Typeset a Poem - Rodeo 005 - Script Codes JS Codes
//See better in firefox
Developer | João Victor |
Username | jotavejv |
Uploaded | November 06, 2022 |
Rating | 4 |
Size | 2,546 Kb |
Views | 12,144 |
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 |
Webpack logo | 3,472 Kb |
Sass random color animation | 4,827 Kb |
Loading... | 3,315 Kb |
Aku Aku CSS art | 4,829 Kb |
Compass CSS | 1,754 Kb |
Css wave simulation | 2,285 Kb |
Banner Google Engage CSS | 4,893 Kb |
Palette-js | 2,357 Kb |
Slider looping CSS | 2,180 Kb |
Web Platform logo CSS - only one div | 2,117 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 |
Stylize Stories | Jvhti | 2,465 Kb |
Menubar compass mixin | Michaelparenteau | 4,925 Kb |
Day 11 - Calendar Card | Arnellebalane | 6,984 Kb |
Basic HTML Slideshow | Tomhodgins | 3,386 Kb |
Sticky footer testing | 75th | 1,649 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
BabyStore | Pablo-Ai | 3,807 Kb |
NAV WPMANAGER | Mstoic | 1,991 Kb |
CodeCamp Tribute Page | JonathanDeJesus | 6,860 Kb |
Parallax scrolling scene | Iharosi | 2,485 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!