Form?

Developer
Colm Hewson
Size
5,393 Kb
Views
12,144
  1. Form? Previews
  2. Form? HTML Codes
  3. Form? CSS Codes
  4. Form? JS Codes

How do I make an form??

What is a form?? How do you make a form?? This script and codes were developed by Colm Hewson on 28 November 2022, Monday.

Form? Previews
IQ Test

Form? - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Form?</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="bg">
</div>
<div class="slide-landing"> <div class="container-landing"> <div class="question">Landing Page</div> <i class="fa fa-safari"></i> <i class="fa fa-edge"></i> </div>
</div>
<div class="slide-one"> <div class="container-one"> <div class="question">“I always got A's in gym”</div> <i class="fa fa-facebook"></i> <i class="fa fa-reddit"></i> </div>
</div>
<div class="slide-two"> <div class="container-two"> <div class="question">“Gad, I'm such a genius!”</div> <i class="fa fa-spotify"></i> <i class="fa fa-soundcloud"></i> </div>
</div>
<div class="slide-three"> <div class="container-three"> <div class="question">“The beauty of me is that I’m very rich”</div> <i class="fa fa-safari"></i> <i class="fa fa-edge"></i> </div>
</div>
<div class="slide-four"> <div class="container-four"> <div class="question">"You don't have to be crazy to do this... But it sure helps!”</div> <i class="fa fa-safari"></i> <i class="fa fa-edge"></i> </div>
</div>
<div class="slide-five"> <div class="container-five"> <div class="question">“Sorry losers and haters, but my I.Q. is one of the highest – and you all know it!”</div> <i class="fa fa-safari"></i> <i class="fa fa-edge"></i> </div>
</div>
<div class="slide-six"> <div class="container-six"> <div class="question">“Consequences, schmonsequences, as long as I'm rich”</div> <i class="fa fa-safari"></i> <i class="fa fa-edge"></i> </div>
</div>
<div class="slide-seven"> <div class="container-seven"> <div class="question">And... this one?</div> <i class="fa fa-safari"></i> <i class="fa fa-edge"></i> </div>
</div>
<div class="slide-eight"> <div class="container-eight"> <div class="question">And... this one?</div> <i class="fa fa-safari"></i> <i class="fa fa-edge"></i> </div>
</div>
<div class="slide-nine"> <div class="container-nine"> <div class="question">And... this one?</div> <i class="fa fa-safari"></i> <i class="fa fa-edge"></i> </div>
</div>
<div class="slide-ten"> <div class="container-ten"> <div class="question">And... this one?</div> <i class="fa fa-safari"></i> <i class="fa fa-edge"></i> </div>
</div>
<div class="slide-ten"> <div class="container-ten"> <div class="question">And... this one?</div> <i class="fa fa-safari"></i> <i class="fa fa-edge"></i> </div>
</div>
<div class="slide-answer"> <div class="container-answer"> </div> <div class="start-again"> <i class="fa fa-angle-up"></i> </div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Form? - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);
body { font-family: 'Open Sans'; -webkit-font-smoothing: antialiased; text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; -webkit-text-shadow: rgba(0, 0, 0, 0.01) 0 0 1px; margin: 0; max-height: 300vh; transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.25s; box-sizing: border-box; overflow: hidden; -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Likely future */ background: #00C9FF; /* fallback for old browsers */
}
div { margin: 0px; padding: 0px;
}
a { text-decoration: none;
}
.bg { display: block; position: absolute; width: 100%; height: 400vh; top: 0px; bottom: 0px; left: 0px; right: 0px; background: #00C9FF; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #00C9FF, #92FE9D); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #00C9FF, #92FE9D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.question { display: table-cell; position: absolute; width: 100%; height: 100%; color: #ffffff; margin-top: -100px; font-size: 28px; text-align: center; font-weight: 300; letter-spacing: 0.3em; cursor: default; transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.7s; z-index: -1;
}
.slide-one { display: block; position: absolute; width: 100%; top: 0px; left: 0px; right: 0px; margin: 0px; height: 100%; z-index: 1;
}
.container-one { display: block; position: absolute; width: 100%; height: 100%; top: 50%; text-align: center; text-transform: uppercase; color: #f1f1f1; z-index: 2;
}
.slide-two { display: block; position: absolute; width: 100%; top: 100vh; left: 0px; right: 0px; margin: 0px; height: 100%; z-index: 1;
}
.container-two { display: block; position: absolute; width: 100%; height: 100%; top: 50%; text-align: center; text-transform: uppercase; color: #f1f1f1; z-index: 2;
}
.slide-three { display: block; position: absolute; width: 100%; top: 200vh; left: 0px; right: 0px; margin: 0px; height: 100%; z-index: 1;
}
.container-three { display: block; position: absolute; width: 100%; height: 100%; top: 50%; text-align: center; text-transform: uppercase; color: #f1f1f1; z-index: 2;
}
.slide-answer { display: block; position: absolute; width: 100%; top: 300vh; left: 0px; right: 0px; margin: 0px; height: 100%; z-index: 1;
}
.container-answer { display: block; position: absolute; width: 100%; height: 100%; top: 0px; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/owlface-2.gif); background-position: 50% 50%; background-repeat: no-repeat; cursor: pointer; z-index: 4;
}
.container-answer-repeat { display: block; position: absolute; width: 100%; height: 100%; top: 0px; background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/223675/owlface-2.gif); background-position: 50% 50%; background-repeat: repeat; z-index: 4;
}
.fa { display: inline-block; width: 72px; height: 72px; line-height: 72px; font-size: 36px; background: #3e3e3e; border-radius: 72px; cursor: pointer; transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.25s; z-index: 999;
}
.fa:active { box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.3);
}
.fa-angle-up { display: block; position: absolute; width: 72px; height: 72px; bottom: 36px; left: 50%; margin-left: -36px; line-height: 72px; font-size: 36px; background: #3e3e3e; border-radius: 72px; cursor: pointer; transition: all cubic-bezier(0.5, 0, 0.5, 1) 0.25s; color: #f1f1f1; text-align: center;
}

Form? - Script Codes JS Codes

$(document).ready( function() {
showHeight( "window", $( window ).height() ); var height2 = $( window ).height(); $(".slide-one").css('top', (height2 - height2) + "px" + "!important"); $(".slide-two").css('top', height2 + "px" + "!important"); $(".slide-three").css('top', (height2 * 2) + "px" + "!important"); $(".slide-answer").css('top', (height2 * 3) + "px" + "!important");
});
$(window).resize( function( ) {
showHeight( "window", $( window ).height() ); var height2 = $( window ).height(); $(".slide-one").css('top', (height2 - height2) + "px" + "!important"); $(".slide-two").css('top', height2 + "px" + "!important"); $(".slide-three").css('top', (height2 * 2) + "px" + "!important"); $(".slide-answer").css('top', (height2 * 3) + "px" + "!important");
});
function showHeight( element, height ) { $( ".height" ).text( height + "px" );
}
$(".container-one .fa").click(function() { $('html,body').animate({ scrollTop: $(".slide-two").offset().top}, 'ease');
});
$(".container-two .fa").click(function() { $('html,body').animate({ scrollTop: $(".slide-three").offset().top}, 'ease');
});
$(".container-three .fa").click(function() { $('html,body').animate({ scrollTop: $(".slide-answer").offset().top}, 'ease');
});
$(".fa-angle-up").click(function() { $('html,body').animate({ scrollTop: $(".slide-one").offset().top}, 'ease');
}); $( ".container-answer" ).click(function() { $( ".container-answer" ).toggleClass( "container-answer-repeat" );
});
Form? - Script Codes
Form? - Script Codes
Home Page Home
Developer Colm Hewson
Username legofsalmon
Uploaded November 28, 2022
Rating 3
Size 5,393 Kb
Views 12,144
Do you need developer help for Form??

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!

Colm Hewson (legofsalmon) Script Codes
Name
SVG Icons Template - Event
Map Marker Test
Des1gnon Logo - Testing the Wave Pattern
Get a Route - Draft
Breadcrumbs for motor journey top bar thing.
Information Icon
Get a Route - Draft v02
Get a Route - Draft v04 - Flexbox Test
SVG Icons Template
Listy - Version 1
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!