Happy New Year

Developer
Barbara Laird
Size
3,577 Kb
Views
4,048
  1. Happy New Year Previews
  2. Happy New Year HTML Codes
  3. Happy New Year CSS Codes

How do I make an happy new year?

Inspired by http://dribbble.com/shots/1356335--GIF-Goodbye-2013-hello-2014?list=searches&tag=new_years. What is a happy new year? How do you make a happy new year? This script and codes were developed by Barbara Laird on 16 January 2023, Monday.

Happy New Year Previews
IQ Test

Happy New Year - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Happy New Year</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
body { background-color: #3eb3c4; color:white; font-family: 'Concert One', cursive; font-size: 300pt;
}
#container { width:780px; margin: 0 auto;
}
.date { margin:0 100px;
}
.date { margin:0 0 0; width: 780px;
}
.wine { display:inline-block; margin-left:-145px; margin-top:45px; position:absolute; width:126px; height:210px; background-color:white; -webkit-border-radius: 73px 73px 83px 83px / 210px 210px 108px 108px; background: -webkit-gradient(linear, center top, center bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(5%,rgba(255,255,255,0)),color-stop(5%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
}
.wine::before { position:relative; top:100%; left:58px; display:block; content:''; height:150px; width: 10px; background-color:white;
}
.wine::after { position:relative; top:100%; left:0px; display:block; content:''; height:10px; width:126px; border-radius: 190px 190px 0 0; -moz-border-radius: 190px 190px 0 0; -webkit-border-radius: 400px 400px 0 0; background:white;
}
#bubbles { width:86px; display:block; height: 100px; left:460px; position:relative;
}
.bubble { width: 20px; height: 20px; background: #fff; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; position: absolute;
}
.x1 { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); opacity: 0.8; -webkit-animation: moveclouds 10s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 10s linear infinite, sideWays 4s ease-in-out infinite alternate; -o-animation: moveclouds 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x2 { left: 10px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); opacity: 0.7; -webkit-animation: moveclouds 15s linear infinite, sideWays 5s ease-in-out infinite alternate; -moz-animation: moveclouds 15s linear infinite, sideWays 5s ease-in-out infinite alternate; -o-animation: moveclouds 15s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 { left: 9px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.3; -webkit-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate; -o-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 { left: 18px; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); opacity: 0.35; -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 { left: 12px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.7; -webkit-animation: moveclouds 7s linear infinite, sideWays 5s ease-in-out infinite alternate; -moz-animation: moveclouds 7s linear infinite, sideWays 5s ease-in-out infinite alternate; -o-animation: moveclouds 7s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds { 0% { top: 170px; } 100% { top:50px; }
}
@-webkit-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; }
}
@-moz-keyframes moveclouds { 0% { top: 270px; } 100% { top: -100px; }
}
@-moz-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; }
}
@-o-keyframes moveclouds { 0% { top: 270px; } 100% { top: -100px; }
}
@-o-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Concert+One' rel='stylesheet' type='text/css'>
<div id='container'> <div id='bubbles'> <div class='bubble x1'></div> <div class='bubble x2'></div> <div class='bubble x3'></div> <div class='bubble x4'></div> <div class='bubble x5'></div> </div> <div class='date'> 20 <div class='wine'></div> 4 </div>
</div>
</body>
</html>

Happy New Year - Script Codes CSS Codes

body { background-color: #3eb3c4; color:white; font-family: 'Concert One', cursive; font-size: 300pt;
}
#container { width:780px; margin: 0 auto;
}
.date { margin:0 100px;
}
.date { margin:0 0 0; width: 780px;
}
.wine { display:inline-block; margin-left:-145px; margin-top:45px; position:absolute; width:126px; height:210px; background-color:white; -webkit-border-radius: 73px 73px 83px 83px / 210px 210px 108px 108px; background: -webkit-gradient(linear, center top, center bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(5%,rgba(255,255,255,0)),color-stop(5%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1)));
}
.wine::before { position:relative; top:100%; left:58px; display:block; content:''; height:150px; width: 10px; background-color:white;
}
.wine::after { position:relative; top:100%; left:0px; display:block; content:''; height:10px; width:126px; border-radius: 190px 190px 0 0; -moz-border-radius: 190px 190px 0 0; -webkit-border-radius: 400px 400px 0 0; background:white;
}
#bubbles { width:86px; display:block; height: 100px; left:460px; position:relative;
}
.bubble { width: 20px; height: 20px; background: #fff; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; position: absolute;
}
.x1 { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); transform: scale(0.9); opacity: 0.8; -webkit-animation: moveclouds 10s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 10s linear infinite, sideWays 4s ease-in-out infinite alternate; -o-animation: moveclouds 10s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x2 { left: 10px; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); transform: scale(0.6); opacity: 0.7; -webkit-animation: moveclouds 15s linear infinite, sideWays 5s ease-in-out infinite alternate; -moz-animation: moveclouds 15s linear infinite, sideWays 5s ease-in-out infinite alternate; -o-animation: moveclouds 15s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
.x3 { left: 9px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.3; -webkit-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate; -moz-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate; -o-animation: moveclouds 12s linear infinite, sideWays 4s ease-in-out infinite alternate;
}
.x4 { left: 18px; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); transform: scale(0.75); opacity: 0.35; -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate; -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}
.x5 { left: 12px; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); transform: scale(0.8); opacity: 0.7; -webkit-animation: moveclouds 7s linear infinite, sideWays 5s ease-in-out infinite alternate; -moz-animation: moveclouds 7s linear infinite, sideWays 5s ease-in-out infinite alternate; -o-animation: moveclouds 7s linear infinite, sideWays 5s ease-in-out infinite alternate;
}
@-webkit-keyframes moveclouds { 0% { top: 170px; } 100% { top:50px; }
}
@-webkit-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; }
}
@-moz-keyframes moveclouds { 0% { top: 270px; } 100% { top: -100px; }
}
@-moz-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; }
}
@-o-keyframes moveclouds { 0% { top: 270px; } 100% { top: -100px; }
}
@-o-keyframes sideWays { 0% { margin-left:0px; } 100% { margin-left:50px; }
}
Happy New Year - Script Codes
Happy New Year - Script Codes
Home Page Home
Developer Barbara Laird
Username bhlaird
Uploaded January 16, 2023
Rating 4
Size 3,577 Kb
Views 4,048
Do you need developer help for Happy New Year?

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!

Barbara Laird (bhlaird) Script Codes
Name
Color Wheel
Smile More
SVG Shape Hover Effect
Coming Soon
Sketch heart
Playing with colors
Barber Shop
Atom
Flexbox Dice
Codrops animated text
Create amazing web content 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!