Pretty

Size
3,250 Kb
Views
4,048

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 Previews

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');	}	});
});
Pretty - Script Codes
Pretty - Script Codes
Home Page Home
Developer Jordan Checkman
Username JordanC
Uploaded January 21, 2023
Rating 3
Size 3,250 Kb
Views 4,048
Do you need developer help for Pretty?

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!

Jordan Checkman (JordanC) Script Codes
Create amazing SEO 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!