RSW

Developer
Jordan Checkman
Size
3,726 Kb
Views
8,092

How do I make an rsw?

ReadySetWhoa Design WIP. What is a rsw? How do you make a rsw? This script and codes were developed by Jordan Checkman on 21 January 2023, Saturday.

RSW Previews
IQ Test

RSW - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RSW</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head>	<title>Ready Set Whoa</title>
</head>	<body>	<header>	<nav>	<ul class="group">	<li>About<span class="underline"></span></li>	<li>Process<span class="underline"></span></li>	<li>Contact<span class="underline"></span></li>	</ul>	</nav>	</header>	<section class="hero">	<div class="overlay outer-wrapper">	<div class="inner-wrapper">	<div class="title">	<span class="intro">WE ARE</span>	</div>	<ul class="traffic-light">	<li class="red-light"></li>	<li class="yellow-light"></li>	<li class="green-light"></li>	</ul>	<div class="title">	<span class="red-text">READY</span>	<span class="yellow-text">SET</span>	<span class="green-text pulse">WHOA</span>	</div>	<div class="scroll-button">	<span class="down-arrow"></span>	More Whoa Below	<span class="down-arrow"></span>	</div>	</div>	</div>	</section>	<section class="about">	<div class="outer-wrapper">	<div class="inner-wrapper">	<div class="title">	<span class="red-text">ABOUT US</span>	</div>	</div>	</div>	</section>	<section></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>

RSW - Script Codes CSS Codes

*{	margin: 0;	padding: 0;
}
body{	font-family: sans-serif;	background: rgb(60,54,87);
}
ul{	-webkit-margin-before: 0;	-webkit-margin-after: 0;	-webkit-padding-start: 0;
}
header{	position: fixed;	z-index: 999;	top: 0;	width: 100%;	height: 30px;	-webkit-transition: padding .7s cubic-bezier(.1,.7,.1,1), background .7s cubic-bezier(.1,.7,.1,1);	-moz-transition: padding .7s cubic-bezier(.1,.7,.1,1), background .7s cubic-bezier(.1,.7,.1,1);	-o-transition: padding .7s cubic-bezier(.1,.7,.1,1), background .7s cubic-bezier(.1,.7,.1,1);	-ms-transition: padding .7s cubic-bezier(.1,.7,.1,1), background .7s cubic-bezier(.1,.7,.1,1);	transition: padding .7s cubic-bezier(.1,.7,.1,1), background .7s cubic-bezier(.1,.7,.1,1);
}
header.scrolled{	padding: 10px 0;	background: rgba(205,195,205,.8);
}
nav{	height: 100%;	width: 100%;	text-align: center;
}
nav>ul{	display: inline-block;	margin-top: -15px;	list-style-type: none;	width: 360px;	overflow: hidden;	-webkit-transition: opacity .7s cubic-bezier(.1,.7,.1,1);
}
nav>ul>li{	position: relative;	float: left;	text-align: center;	line-height: 30px;	height: 30px;	width: 100px;	margin: 15px 10px;	color: rgba(255,255,255,.8);	font-weight: bold;	cursor: pointer;
}
header.scrolled>nav>ul>li{	color: rgb(50,50,50);
}
.underline{	position: absolute;	width: 80%;	height: 2px;	background: rgba(255,255,255,.8);	bottom: 0;	left: 10%;	-webkit-transition: background .7s cubic-bezier(.1,.7,.1,1);	-moz-transition: background .7s cubic-bezier(.1,.7,.1,1);	-o-transition: background .7s cubic-bezier(.1,.7,.1,1);	-ms-transition: background .7s cubic-bezier(.1,.7,.1,1);	transition: background .7s cubic-bezier(.1,.7,.1,1);
}
.scrolled .underline{	background: rgb(50,50,50);
}
nav>ul>li:nth-child(1):hover>.underline{	background: rgb(232,50,44);
}
nav>ul>li:nth-child(2):hover>.underline{	background: rgb(255,239,63);
}
nav>ul>li:nth-child(3):hover>.underline{	background: rgb(107,255,94);
}
/*Sections*/
section{	width: 100%;
}
.hero{	background: url(http://checkman.io/whoa/City-Street.jpg);	background-size: cover;	background-repeat: no-repeat;	background-attachment: fixed;	background-position: 50% 50%;
}
.about{	background: rgb(205,195,205);	padding: 50px 0;
}
/*END Sections*/
.overlay{	width: 100%;	height: 100%;	//height: 100vh;	background: rgba(60,54,87,.8);
}
.outer-wrapper{	display: table;	width: 100%;
}
.inner-wrapper{	display: table-cell;	vertical-align: middle;
}
.title{	display: block;	font-size: 3.5em;	letter-spacing: .2em;	-webkit-user-select: none;	user-select: none;	cursor: default;	text-align: center;	padding: 40px 0;
}
.title span{	text-align: center;
}
.intro{	color: rgb(255,255,255);	font-size: .8em;
}
.red-text{ color: rgb(232,50,44);}
.yellow-text{ color: rgb(255,239,63);}
.green-text{ color: rgb(107,255,94);}
.traffic-light{	display: block;	position: relative;	margin: 0 auto;	background: rgb(255,197,63);	list-style-type: none;	height: 300px;	width: 120px;	border-radius: 10px;	overflow: hidden;
}
.traffic-light>li{	position: absolute;	display: block;	height: 70px;	width: 70px;	border-radius: 50%;	left: 25px;	box-shadow:	rgb(194,150,48) 1px 1px,	rgb(194,150,48) 2px 1.5px,	rgb(194,150,48) 3px 2px,	rgb(194,150,48) 4px 2.5px,	rgb(194,150,48) 5px 3px,	rgb(194,150,48) 6px 3.5px,	rgb(194,150,48) 7px 4px,	rgb(194,150,48) 8px 4.5px,	rgb(194,150,48) 9px 5px,	rgb(194,150,48) 10px 5.5px,	rgb(194,150,48) 11px 6px,	rgb(194,150,48) 12px 6.5px,	rgb(194,150,48) 13px 7px,	rgb(194,150,48) 14px 7.5px,	rgb(194,150,48) 15px 8px,	rgb(194,150,48) 16px 8.5px,	rgb(194,150,48) 17px 9px,	rgb(194,150,48) 18px 9.5px,	rgb(194,150,48) 19px 10px,	rgb(194,150,48) 20px 10.5px,	rgb(194,150,48) 21px 11px,	rgb(194,150,48) 22px 11.5px,	rgb(194,150,48) 23px 12px,	rgb(194,150,48) 24px 12.5px,	rgb(194,150,48) 25px 13px,	rgb(194,150,48) 26px 13.5px,	rgb(194,150,48) 27px 14px,	rgb(194,150,48) 28px 14.5px,	rgb(194,150,48) 29px 15px,	rgb(194,150,48) 30px 15.5px,	rgb(194,150,48) 31px 16px,	rgb(194,150,48) 32px 16.5px,	rgb(194,150,48) 33px 17px,	rgb(194,150,48) 34px 17.5px,	rgb(194,150,48) 35px 18px,	rgb(194,150,48) 36px 18.5px,	rgb(194,150,48) 37px 19px,	rgb(194,150,48) 38px 19.5px,	rgb(194,150,48) 39px 20px,	rgb(194,150,48) 40px 20.5px,	rgb(194,150,48) 41px 21px,	rgb(194,150,48) 42px 21.5px,	rgb(194,150,48) 43px 22px,	rgb(194,150,48) 44px 22.5px,	rgb(194,150,48) 45px 23px,	rgb(194,150,48) 46px 23.5px,	rgb(194,150,48) 47px 24px,	rgb(194,150,48) 48px 24.5px,	rgb(194,150,48) 49px 25px,	rgb(194,150,48) 50px 25.5px,	rgb(194,150,48) 51px 26px,	rgb(194,150,48) 52px 26.5px,	rgb(194,150,48) 53px 27px,	rgb(194,150,48) 54px 27.5px,	rgb(194,150,48) 55px 28px,	rgb(194,150,48) 56px 28.5px,	rgb(194,150,48) 57px 29px,	rgb(194,150,48) 58px 29.5px,	rgb(194,150,48) 59px 30px,	rgb(194,150,48) 60px 30.5px,	rgb(194,150,48) 61px 31px,	rgb(194,150,48) 62px 31.5px,	rgb(194,150,48) 63px 32px,	rgb(194,150,48) 64px 32.5px,	rgb(194,150,48) 65px 33px,	rgb(194,150,48) 66px 33.5px,	rgb(194,150,48) 67px 34px,	rgb(194,150,48) 68px 34.5px,	rgb(194,150,48) 69px 35px,	rgb(194,150,48) 70px 35.5px;
}
.red-light{	top: 20px;	background: rgb(232,50,44);
}
.yellow-light{	top: 115px;	background: rgb(255,239,63);
}
.green-light{	top: 210px;	background: rgb(107,255,94);
}
.scroll-button{	margin: 0 auto;	height: 50px;	width: 240px;	line-height: 50px;	border-radius: 5px;	border: 2px solid rgb(255,255,255);	font-size: 1.25em;	color: rgb(255,255,255);	text-align: center;	-webkit-user-select: none;	user-select: none;	cursor: pointer;
}
.scroll-button>span.down-arrow{	position: relative;	top: 16px;	margin: 0 10px;	width: 0;	height: 0;	border-left: 7px solid transparent;	border-right: 7px solid transparent;	border-top: 10px solid rgb(255,255,255);
}
.pulse{	-webkit-animation: pulse 5s ease-in-out infinite;	animation: pulse 5s ease-in-out infinite;
}
@-webkit-keyframes pulse{	0%{	text-shadow: 0 0 0 rgba(107,255,94,.4);	}	50%{	text-shadow: 0 0 .25em rgba(107,255,94,1);	}	100%{	text-shadow: 0 0 0 rgba(107,255,94,.4);	}
}
@keyframes pulse{	0%{	text-shadow: 0 0 0 rgba(107,255,94,.4);	}	50%{	text-shadow: 0 0 .25em rgba(107,255,94,1);	}	100%{	text-shadow: 0 0 0 rgba(107,255,94,.4);	}
}
/*hacks n stuff*/
.group:after { content: ''; display: table; clear: both;
}

RSW - Script Codes JS Codes

$(document).ready(function(){	$('.hero').height( $(window).height() );	$(window).resize(function(){	$('.hero').height( $(window).height() );	});	$(window).scroll(function(){	scrollPosition = ($(window).scrollTop());	if (scrollPosition > 50) {	$('header').addClass('scrolled');	}	else if(scrollPosition < 50){	$('header').removeClass('scrolled');	}	});	$('.scroll-button').click(function() {	$('html, body').animate({	scrollTop: $('section.about').offset().top	}, 500);	});	//top nav	$('nav>ul>li:nth-child(1)').click(function() {	$('html, body').animate({	scrollTop: $('section.about').offset().top	}, 500);	});	$('nav>ul>li:nth-child(2)').click(function() {	$('html, body').animate({	scrollTop: $('section.about').offset().top	}, 500);	});	$('nav>ul>li:nth-child(3)').click(function() {	$('html, body').animate({	scrollTop: $('section.about').offset().top	}, 500);	});
});
RSW - Script Codes
RSW - Script Codes
Home Page Home
Developer Jordan Checkman
Username JordanC
Uploaded January 21, 2023
Rating 3
Size 3,726 Kb
Views 8,092
Do you need developer help for RSW?

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
Name
Print Button
Word Slider Demo
Pretty
Awesome Reports
Fancy Menu
Contenteditable Test
Carl Philippe Effect
A Pen by Jordan Checkman
Create amazing Facebook ads 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!