Pretty
How do I make an pretty?
What is a pretty? How do you make a pretty? This script and codes were developed by Jordan Checkman on 21 January 2023, Saturday.
Pretty - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pretty</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html> <body class="morning"> <header> <nav> <ul class="clearfix"> <li></li> <li></li> </ul> </nav> </header> <section> <div class="sun"> <span class="sunbeam s1"></span> <span class="sunbeam s2"></span> <span class="sunbeam s3"></span> <span class="sunbeam s4"></span> <span class="sunbeam s5"></span> <span class="sunbeam s6"></span> <span class="sunbeam s7"></span> <span class="sunbeam s8"></span> </div> <h1 class="hero">Hi Friends!</h1> <div class="clouds cloudDrift c1"> <span class="cloud"></span> </div> <div class="clouds cloudDrift c2"> <span class="cloud"></span> </div> <div class="clouds cloudDrift c3"> <span class="cloud"></span> </div> <div class="clouds cloudDrift c4"> <span class="cloud"></span> </div> <div class="clouds cloudDrift c5"> <span class="cloud"></span> </div> </section> <section> </section> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Pretty - Script Codes CSS Codes
/*
*,
*:before,
*:after{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*/
ul{ -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-padding-start: 0;
}
body{ margin: 0; padding: 0; font-family: 'Lato', Sans-Serif; height: 3000px;
}
.morning{ //background: rgb(250, 226, 209); background: -moz-linear-gradient(45deg, rgb(250, 226, 209) 0%, rgb(201, 226, 255) 100%); background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgb(250, 226, 209)), color-stop(100%,rgb(201, 226, 255))); background: -webkit-linear-gradient(45deg, rgb(250, 226, 209) 0%,rgb(201, 226, 255) 100%); background: -o-linear-gradient(45deg, rgb(250, 226, 209) 0%,rgb(201, 226, 255) 100%); background: -ms-linear-gradient(45deg, rgb(250, 226, 209) 0%,rgb(201, 226, 255) 100%); background: linear-gradient(45deg, rgb(250, 226, 209) 0%,rgb(201, 226, 255) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgb(250, 226, 209)', endColorstr='rgb(201, 226, 255)',GradientType=1 );
}
header{ position: fixed; top: 0; z-index: 999; height: 60px; width: 100%; padding: 0; background: rgba(255, 250, 244, 0); -webkit-transition: padding .7s ease, background .7s ease; -moz-transition: padding .7s ease, background .7s ease; -o-transition: padding .7s ease, background .7s ease; transition: padding .7s ease, background .7s ease;
}
header.scrolled{ padding: 10px 0; background: rgba(255, 250, 244, .9);
}
nav>ul{ list-style-type: none;
}
nav>ul>li{ float: left;
}
section{ width: 100%; overflow: hidden;
}
section:nth-child(1){ height: 700px; margin-top: 80px;
}
section:nth-child(2){ height: 900px;
}
h1.hero{ position: relative; z-index: 2; font-size: 5em; font-weight: 900; text-align: center; color: rgba(84, 176, 255, .8); -webkit-transition: color .7s ease; -moz-transition: color .7s ease; -o-transition: color .7s ease; transition: color .7s ease;
}
h1.hero.scrolled{ color: rgba(84,176,255,0);
}
.clearfix:after{ visibility: hidden; display: block; font-size: 0; content: ''; clear: both; height: 0;
}
.sun{ position: relative; top: -25px; right: -100%; -webkit-transform-origin: 0 30px 30px; transform-origin: 0 30px 30px; -webkit-animation: sunRotate 30s linear infinite; animation: sunRotate 30s linear infinite;
}
.sun:before{ content: ''; position: absolute; height: 120px; width: 120px; left: -60px; top: -30px; z-index: 2; border-radius: 100%; background: -webkit-radial-gradient(center, ellipse cover, orange 0%, yellow 100%); background: -moz-radial-gradient(center, ellipse cover, orange 0%, yellow 100%); background: -o-radial-gradient(center, ellipse cover, orange 0%, yellow 100%); background: -ms-radial-gradient(center, ellipse cover, orange 0%, yellow 100%); background: radial-gradient(ellipse at center, orange 0%, yellow 100%); box-shadow: 0 0 15px 15px orange; opacity: .5
}
@-webkit-keyframes sunRotate{ from{ -webkit-transform: rotate(0); } to{ -webkit-transform: rotate(360deg); }
}
@keyframes sunRotate{ from{ transform: rotate(0); } to{ transform: rotate(360deg); }
}
.sunbeam{ position: absolute; height: 50px; width: 200px; background: rgba(255,231,50,.4); border-top-right-radius: 30px; border-bottom-right-radius: 30px; -webkit-transform-origin: 0 50% 0; transform-origin: 0 50% 0;
}
.s1{ -webkit-transform: rotate3d(0,0,1,180deg) translate3d(60px, 0 ,0); transform: rotate3d(0,0,1,180deg) translate3d(60px, 0 ,0);
}
.s2{ -webkit-transform: rotate3d(0,0,1,135deg) translate3d(60px, 0 ,0); transform: rotate3d(0,0,1,135deg) translate3d(60px, 0 ,0);
}
.s3{ -webkit-transform: rotate3d(0,0,1,90deg) translate3d(60px, 0 ,0); transform: rotate3d(0,0,1,90deg) translate3d(60px, 0 ,0);
}
.s4{ -webkit-transform: rotate3d(0,0,1,45deg) translate3d(60px, 0 ,0); transform: rotate3d(0,0,1,45deg) translate3d(60px, 0 ,0);
}
.s5{ -webkit-transform: rotate3d(0,0,1,0deg) translate3d(60px, 0 ,0); transform: rotate3d(0,0,1,0deg) translate3d(60px, 0 ,0);
}
.s6{ -webkit-transform: rotate3d(0,0,1,225deg) translate3d(60px, 0 ,0); transform: rotate3d(0,0,1,225deg) translate3d(60px, 0 ,0);
}
.s7{ -webkit-transform: rotate3d(0,0,1,270deg) translate3d(60px, 0 ,0); transform: rotate3d(0,0,1,270deg) translate3d(60px, 0 ,0);
}
.s8{ -webkit-transform: rotate3d(0,0,1,315deg) translate3d(60px, 0 ,0); transform: rotate3d(0,0,1,315deg) translate3d(60px, 0 ,0);
}
.clouds{ position: fixed; display: block; -webkit-transform: translate3d(-30%,0,0); transform: translate3d(-30%,0,0); width: 100%;
}
.cloudDrift{ -webkit-animation: cloudDrift linear infinite; animation: cloudDrift linear infinite;
}
@-webkit-keyframes cloudDrift{ from{-webkit-transform: translate3d(-30%,0,0);} to{-webkit-transform: translate3d(130%,0,0);}
}
@keyframes cloudDrift{ from{transform: translate3d(-30%,0,0);} to{transform: translate3d(130%,0,0);}
}
.c1{ top: 20px; -webkit-animation-duration: 140s; -webkit-animation-direction: alternate; animation-duration: 140s; animation-direction: alternate;
}
.c2{ top: 110px; -webkit-animation-duration: 105s; -webkit-animation-direction: alternate-reverse; animation-duration: 105s; animation-direction: alternate-reverse;
}
.c3{ top: 200px; -webkit-animation-duration: 76s; -webkit-animation-direction: alternate; animation-duration: 76s; animation-direction: alternate;
}
.c4{ top: 290px; -webkit-animation-duration: 142s; -webkit-animation-direction: alternate-reverse; animation-duration: 142s; animation-direction: alternate-reverse;
}
.c5{ top: 380px; -webkit-animation-duration: 98s; -webkit-animation-direction: alternate; animation-duration: 98s; animation-direction: alternate;
}
.cloud{ position: absolute; height: 60px; width: 175px; background: rgb(242, 249, 254); background: linear-gradient(top, rgb(242, 249, 254) 5%, rgb(214, 240, 253) 100%); background: -webkit-linear-gradient(top, rgb(242, 249, 254) 5%, rgb(214, 240, 253) 100%); background: -moz-linear-gradient(top, rgb(242, 249, 254) 5%, rgb(214, 240, 253) 100%); background: -ms-linear-gradient(top, rgb(242, 249, 254) 5%, rgb(214, 240, 253) 100%); border-radius: 100px; margin: 60px auto 10px;
}
.cloud:after,
.cloud:before{ content: ''; position: absolute; background: rgb(242, 249, 254); z-index: -1
}
.cloud:after{ width: 50px; height: 50px; top: -25px; left: 25px; border-radius: 100px;
}
.cloud:before { width: 90px; height: 90px; top: -45px; right: 25px; border-radius: 200px;
}
Pretty - Script Codes JS Codes
$(document).ready(function(){ $(window).scroll(function(){ scrollPosition = ($(window).scrollTop()); if (scrollPosition > 50) { $('header').addClass('scrolled'); $('.hero').addClass('scrolled'); } else if(scrollPosition < 50){ $('header').removeClass('scrolled'); $('.hero').removeClass('scrolled'); } });
});
Developer | Jordan Checkman |
Username | JordanC |
Uploaded | January 21, 2023 |
Rating | 3 |
Size | 3,250 Kb |
Views | 4,048 |
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 |
Fancy Menu | 2,356 Kb |
Carl Philippe Effect | 1,858 Kb |
Word Slider Demo | 2,387 Kb |
A Pen by Jordan Checkman | 3,495 Kb |
RSW | 3,726 Kb |
Awesome Reports | 6,603 Kb |
Contenteditable Test | 1,723 Kb |
Print Button | 1,969 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 |
SVG Animation | Thepheer | 4,793 Kb |
Cofee and sugar | Tripack | 2,094 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
A Pen by Final Boss tommyb9 | FBtommyb9 | 55,354 Kb |
Update CSS Variables with JS | Wesbos | 2,335 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Guidepopup | Wooljs | 3,747 Kb |
Fun animations with CSS3 | Minimalmonkey | 2,360 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!