Fantasy Form

Developer
Pankaj Parashar
Size
7,314 Kb
Views
34,408
  1. Fantasy Form Previews
  2. Fantasy Form HTML Codes
  3. Fantasy Form CSS Codes
  4. Fantasy Form JS Codes

How do I make an fantasy form?

This is my entry for the CodePen Rodeo Challenge - 008. What is a fantasy form? How do you make a fantasy form? This script and codes were developed by Pankaj Parashar on 12 August 2022, Friday.

Fantasy Form Previews
IQ Test

Fantasy Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Fantasy Form</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://raw.github.com/damirfoy/iCheck/master/skins/square/blue.css'> <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! */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(https://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlNHq-FFgoDNV3GTKpHwuvtI.woff) format('woff');
}
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGIqjGYJUyOXcBwUQbRaNH6c.woff) format('woff');
}
li { border:0px solid #000; min-height: 350px; color:#fff; margin-bottom:250px;}
body
{ background-color: #292929; overflow: scroll; overflow-x: hidden;
}
ul, li { list-style: none;}
ul{display:block;margin:50px auto;max-width:800px;}
li {-khtml-opacity:0.08;-moz-opacity:0.08;opacity:0.08;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=8)";}
ul { position: relative; font-family: lucida sans unicode, "Source Sans Pro", sans-serif; }
li { position: relative; opacity: 0.2; }
.open { transition: opacity .5s ease-in-out 1s; opacity: 1; }
h2 { color:#fad05c; font-size:3em; margin-bottom:1.5em; font-family:"Source Sans Pro", sans-serif;}
p { font-size:180%; line-height:2;}
.quote { border-left: .25em solid #fad05c; padding-left:1em; background: #2e2e2e; padding-top:.5em; padding-bottom:.5em;font-size:120%;}
.button {
display: inline-block;
cursor: default;
background-color: #fdc539;
width: auto;
height: 35px; margin-top:3.5em;
line-height: 30px;
padding: 5px 12px 0 12px;
font-size: 20px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; text-decoration:none;
text-align: center;
overflow: hidden;
-moz-transition: background-color ease-out 100ms 0;
-webkit-transition: background-color ease-out 100ms 0;
-o-transition: background-color ease-out 100ms 0;
transition: background-color ease-out 100ms 0;
color: #2a2a2a;
background-image: url(https://s3-eu-west-1.amazonaws.com/typeform-media-static/button-gradient-light.png);
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),0 2px 2px rgba(0, 0, 0, 0.16),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),0 2px 2px rgba(0, 0, 0, 0.16),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
-moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),0 2px 2px rgba(0, 0, 0, 0.16),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
text-shadow: rgba(255, 255, 255, 0.4) 0px 1px 1px;
}
.button:hover{
-moz-transition: background-color ease-out 100ms 0;
-webkit-transition: background-color ease-out 100ms 0;
-o-transition: background-color ease-out 100ms 0;
transition: background-color ease-out 100ms 0;
background-color: #fed46b; cursor: pointer;}
.symbol { font-size:120%; color:#fad05c}
input[type=radio]{ font-family:"Consolas", monospace !important; font-size:200% !important;
margin-top:-2em; color:#f44;
}
input[type=radio] + label {font-size:120% !important; line-height:2; margin-top:1.5em; margin-right:1em;
}
input[type=text], input[type=email], input[type=url]{
padding: 0 0 0 0px;
outline: 0!important;
border: 0; font-size:150% !important;
background: 0;
color: #fad05c;
border-bottom: 1px dashed #d9e0eb;
font: inherit;
min-width: 30px;
}
table,tr,td { border:0px solid #000;}
thead tr{ margin-bottom:1.5em; color:#fad05c}
tbody td, thead td { width:130px; text-align:center; line-height:3;}
tbody tr:nth-child(odd) { background-color:#333}
tbody th {padding-left:1em;}
.select
{ display:block; vertical-align:middle; position:relative; width:auto; max-width:350px; height:40px; background:#f4f6fb; border:2px solid #d3dae7; border-radius:2px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
.select:hover
{ border-color:#c5cddf;
}
.select>select
{ display:block; width:100%; height:40px; line-height:17px; color:#333; background:#f4f6fb; border:0; -webkit-appearance:none; outline:0; margin:0; font-size:120%; padding:7px 6px 6px 10px;
}
.select>select:focus
{ color:#3c3c3c; outline:0; outline-offset:0; -moz-outline-radius:2px;
}
.select:before,.select:after
{ content:''; position:absolute; pointer-events:none;
}
.select:before
{ top:0; bottom:0; right:0; width:35px; background:inherit;
}
.select:after
{ top:18px; right:13px; width:0; height:0; border:7px solid transparent; border-top-color:#333;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul> <li id="intro" class="open"> <h2>A Form of Fantasy</h2> <p class="quote">The gift of fantasy has meant more to me than my talent for absorbing positive knowledge - Albert Einstein</p> <a class="button" href="#single-choice">Begin the quest <span>&#9997;</span></a> </li> <li id="single-choice"> <p style="margin-bottom:1em; color:#fff;">Which is better?</p> <div> <span> <input id="Field1_0" name="Field1" type="radio" class="field radio" value="Fantasty" checked="checked" /> <label class="choice" for="Field1_0" > Fantasty </label> </span> <span> <input id="Field1_1" name="Field1" type="radio" class="field radio" value="Sci-Fi" /> <label class="choice" for="Field1_1">Science-Fi</label> </span> <span> <input id="Field1_2" name="Field1" type="radio" class="field radio" value="Don&#039;t make me choose!" /> <label class="choice" for="Field1_2" > Don't make me choose! </label> </span> <span> <input id="Field1_3" name="Field1" type="radio" class="field radio" value="I don&#039;t like either" /> <label class="choice" for="Field1_3" > I don't like either </label> </span> <a class="button" href="#multiple-text">Next &rarr;</a> </div> </li> <li id="multiple-text"> <p style="margin-bottom:1.5em; color:#fff;">How much would you donate to a Kickstarter to bring back Firefly?</p> <span class="symbol">$</span> <span> <input id="Field2" name="Field2" type="text" class="field text currency nospin" value="" size="10" /> </span> <span class="symbol radix">.</span> <span class="cents"> <input id="Field2-1" name="Field2-1" type="text" class="field text nospin" value="00" size="2" maxlength="2"/> </span><br> <a class="button" href="#multiple-choice">Next &rarr;</a> </li> <li id="multiple-choice" class="likert"> <p style="margin-bottom:1.5em; color:#fff;">Rate the Start Movies</p> <table cellspacing="0"> <thead> <tr> <th>&nbsp;</th> <td>Didn't Like</td> <td>Meh'Lo</td> <td>Kinda Liked</td> <td>Loved!</td> </tr> </thead> <tbody> <tr class="statement3"> <th> <label for="Field3">Episode I - The Phantom Menace</label> </th> <td title="Didn&#039;t Like At All"> <input id="Field3_1" name="Field3" type="radio" value="Didn&#039;t Like At All" /> <label for="Field3_1">1</label> </td> <td title="Meh"> <input id="Field3_2" name="Field3" type="radio" value="Meh" /> <label for="Field3_2">2</label> </td> <td title="Kinda Liked"> <input id="Field3_3" name="Field3" type="radio" value="Kinda Liked" /> <label for="Field3_3">3</label> </td> <td title="Loved!"> <input id="Field3_4" name="Field3" type="radio" value="Loved!" /> <label for="Field3_4">4</label> </td> </tr> <tr class="alt statement4"> <th> <label for="Field4">Episode II - Attack of the Clones</label> </th> <td title="Didn&#039;t Like At All"> <input id="Field4_1" name="Field4" type="radio" value="Didn&#039;t Like At All" /> <label for="Field4_1">1</label> </td> <td title="Meh"> <input id="Field4_2" name="Field4" type="radio" value="Meh" /> <label for="Field4_2">2</label> </td> <td title="Kinda Liked"> <input id="Field4_3" name="Field4" type="radio" value="Kinda Liked" /> <label for="Field4_3">3</label> </td> <td title="Loved!"> <input id="Field4_4" name="Field4" type="radio" value="Loved!" /> <label for="Field4_4">4</label> </td> </tr> <tr class="statement5"> <th><label for="Field5">Episode III - Revenge of the Sith</label></th> <td title="Didn&#039;t Like At All"> <input id="Field5_1" name="Field5" type="radio" value="Didn&#039;t Like At All" /> <label for="Field5_1">1</label> </td> <td title="Meh"> <input id="Field5_2" name="Field5" type="radio" value="Meh" /> <label for="Field5_2">2</label> </td> <td title="Kinda Liked"> <input id="Field5_3" name="Field5" type="radio" value="Kinda Liked" /> <label for="Field5_3">3</label> </td> <td title="Loved!"> <input id="Field5_4" name="Field5" type="radio" value="Loved!" /> <label for="Field5_4">4</label> </td> </tr> <tr class="alt statement6"> <th> <label for="Field6">Episode IV - A New Hope</label> </th> <td title="Didn&#039;t Like At All"> <input id="Field6_1" name="Field6" type="radio" value="Didn&#039;t Like At All" /> <label for="Field6_1">1</label> </td> <td title="Meh"> <input id="Field6_2" name="Field6" type="radio" value="Meh" /> <label for="Field6_2">2</label> </td> <td title="Kinda Liked"> <input id="Field6_3" name="Field6" type="radio" value="Kinda Liked" /> <label for="Field6_3">3</label> </td> <td title="Loved!"> <input id="Field6_4" name="Field6" type="radio" value="Loved!" /> <label for="Field6_4">4</label> </td> </tr> <tr class="statement7"> <th> <label for="Field7">Episode V - The Empire Strikes</label> </th> <td title="Didn&#039;t Like At All"> <input id="Field7_1" name="Field7" type="radio" value="Didn&#039;t Like At All" /> <label for="Field7_1">1</label> </td> <td title="Meh"> <input id="Field7_2" name="Field7" type="radio" value="Meh" /> <label for="Field7_2">2</label> </td> <td title="Kinda Liked"> <input id="Field7_3" name="Field7" type="radio" value="Kinda Liked" /> <label for="Field7_3">3</label> </td> <td title="Loved!"> <input id="Field7_4" name="Field7" type="radio" value="Loved!" /> <label for="Field7_4">4</label> </td> </tr> <tr class="alt statement8"> <th> <label for="Field8">Episode VI - Return of the Jedi</label> </th> <td title="Didn&#039;t Like At All"> <input id="Field8_1" name="Field8" type="radio" value="Didn&#039;t Like At All" /> <label for="Field8_1">1</label> </td> <td title="Meh"> <input id="Field8_2" name="Field8" type="radio" value="Meh" /> <label for="Field8_2">2</label> </td> <td title="Kinda Liked"> <input id="Field8_3" name="Field8" type="radio" value="Kinda Liked" /> <label for="Field8_3">3</label> </td> <td title="Loved!"> <input id="Field8_4" name="Field8" type="radio" value="Loved!" /> <label for="Field8_4">4</label> </td> </tr> </tbody> </table> <a class="button" href="#select">Next &rarr;</a> </li> <li id="select"> <p style="margin-bottom:1.5em; color:#fff;">Are you caught up on Game of Thrones?</p> <div class="select"> <select id="Field104" name="Field104" class="field select medium" tabindex="31" > <option value="Never seen it" selected="selected"> Never seen it </option> <option value="Yep, totally caught up" > Yep, totally caught up </option> <option value="I&#039;ve seen some but I&#039;m not caught up" > I've seen some but I'm not caught up </option> </select> </div> <a class="button" href="#text">Next &rarr;</a> </li> <li id="text"> <p style="margin-bottom:1.5em; color:#fff;"> What is your favorite Fantasty or Sci-Fi movie of all time?
</p> <label class="desc" id="title107" for="Field107"> </label> <div> <input id="Field107" name="Field107" type="text" class="field text medium" value="" maxlength="255" tabindex="32" onkeyup="" /> </div> <a class="button" href="#info">Next &rarr;</a> </li> <li id="info"> <p style="margin-bottom:1.5em; color:#fff;">Personal Information</p> <span> <input id="Field105" name="Field105" type="text" class="field text fn" value="" size="15" tabindex="33" placeholder="First Name" style="margin-right:1.5em"> </span> <span> <input id="Field106" name="Field106" type="text" class="field text ln" value="" size="14" tabindex="34" placeholder="Last Name" style="margin-right:1.5em"> </span> <br><br><br><br> <div> <input id="Field110" name="Field110" type="email" spellcheck="false" class="field text medium" value="" maxlength="255" size="35" placeholder="Email Address" style="margin-right:1.5em"> </div> <br><br><br> <div> <input id="Field117" name="Field117" type="url" class="field text medium" value="" maxlength="255" tabindex="36" size="35" placeholder="http://" style="margin-right:1.5em"/> </div> <br><br> <a class="button" href="#info">Submit <span style="font-size:25px">&#9996;<span></a> </li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://raw.github.com/teamdf/jquery-visible/master/jquery.visible.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fantasy Form - Script Codes CSS Codes

@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(https://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/ODelI1aHBYDBqgeIAH2zlNHq-FFgoDNV3GTKpHwuvtI.woff) format('woff');
}
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(https://themes.googleusercontent.com/static/fonts/sourcesanspro/v5/toadOcfmlt9b38dHJxOBGIqjGYJUyOXcBwUQbRaNH6c.woff) format('woff');
}
li { border:0px solid #000; min-height: 350px; color:#fff; margin-bottom:250px;}
body
{ background-color: #292929; overflow: scroll; overflow-x: hidden;
}
ul, li { list-style: none;}
ul{display:block;margin:50px auto;max-width:800px;}
li {-khtml-opacity:0.08;-moz-opacity:0.08;opacity:0.08;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=8)";}
ul { position: relative; font-family: lucida sans unicode, "Source Sans Pro", sans-serif; }
li { position: relative; opacity: 0.2; }
.open { transition: opacity .5s ease-in-out 1s; opacity: 1; }
h2 { color:#fad05c; font-size:3em; margin-bottom:1.5em; font-family:"Source Sans Pro", sans-serif;}
p { font-size:180%; line-height:2;}
.quote { border-left: .25em solid #fad05c; padding-left:1em; background: #2e2e2e; padding-top:.5em; padding-bottom:.5em;font-size:120%;}
.button {
display: inline-block;
cursor: default;
background-color: #fdc539;
width: auto;
height: 35px; margin-top:3.5em;
line-height: 30px;
padding: 5px 12px 0 12px;
font-size: 20px;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px; text-decoration:none;
text-align: center;
overflow: hidden;
-moz-transition: background-color ease-out 100ms 0;
-webkit-transition: background-color ease-out 100ms 0;
-o-transition: background-color ease-out 100ms 0;
transition: background-color ease-out 100ms 0;
color: #2a2a2a;
background-image: url(https://s3-eu-west-1.amazonaws.com/typeform-media-static/button-gradient-light.png);
border-top: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),0 2px 2px rgba(0, 0, 0, 0.16),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),0 2px 2px rgba(0, 0, 0, 0.16),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
-moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3),0 2px 2px rgba(0, 0, 0, 0.16),transparent 0 0 0,transparent 0 0 0,transparent 0 0 0;
text-shadow: rgba(255, 255, 255, 0.4) 0px 1px 1px;
}
.button:hover{
-moz-transition: background-color ease-out 100ms 0;
-webkit-transition: background-color ease-out 100ms 0;
-o-transition: background-color ease-out 100ms 0;
transition: background-color ease-out 100ms 0;
background-color: #fed46b; cursor: pointer;}
.symbol { font-size:120%; color:#fad05c}
input[type=radio]{ font-family:"Consolas", monospace !important; font-size:200% !important;
margin-top:-2em; color:#f44;
}
input[type=radio] + label {font-size:120% !important; line-height:2; margin-top:1.5em; margin-right:1em;
}
input[type=text], input[type=email], input[type=url]{
padding: 0 0 0 0px;
outline: 0!important;
border: 0; font-size:150% !important;
background: 0;
color: #fad05c;
border-bottom: 1px dashed #d9e0eb;
font: inherit;
min-width: 30px;
}
table,tr,td { border:0px solid #000;}
thead tr{ margin-bottom:1.5em; color:#fad05c}
tbody td, thead td { width:130px; text-align:center; line-height:3;}
tbody tr:nth-child(odd) { background-color:#333}
tbody th {padding-left:1em;}
.select
{ display:block; vertical-align:middle; position:relative; width:auto; max-width:350px; height:40px; background:#f4f6fb; border:2px solid #d3dae7; border-radius:2px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
}
.select:hover
{ border-color:#c5cddf;
}
.select>select
{ display:block; width:100%; height:40px; line-height:17px; color:#333; background:#f4f6fb; border:0; -webkit-appearance:none; outline:0; margin:0; font-size:120%; padding:7px 6px 6px 10px;
}
.select>select:focus
{ color:#3c3c3c; outline:0; outline-offset:0; -moz-outline-radius:2px;
}
.select:before,.select:after
{ content:''; position:absolute; pointer-events:none;
}
.select:before
{ top:0; bottom:0; right:0; width:35px; background:inherit;
}
.select:after
{ top:18px; right:13px; width:0; height:0; border:7px solid transparent; border-top-color:#333;
}

Fantasy Form - Script Codes JS Codes

/*! jQuery visible 1.0.0 teamdf.com/jquery-plugins | teamdf.com/jquery-plugins/license */
(function(d){d.fn.visible=function(e,i){var a=d(this).eq(0),f=a.get(0),c=d(window),g=c.scrollTop();c=g+c.height();var b=a.offset().top,h=b+a.height();a=e===true?h:b;b=e===true?b:h;return!!(i===true?f.offsetWidth*f.offsetHeight:true)&&b<=c&&a>=g}})(jQuery);
$(document).ready(function(){ $(window).scroll(function(){ /* Intro */ if($('#intro').visible(true)){$('#intro').addClass('open');} if(!$('#intro').visible(true)){$('#intro').removeClass('open');} /* Single Choice */ if($('#single-choice').visible(true)){$('#single-choice').addClass('open');} if(!$('#single-choice').visible(true)){$('#single-choice').removeClass('open');} /* Multiple Text */ if($('#multiple-text').visible(true)){$('#multiple-text').addClass('open');} if(!$('#multiple-text').visible(true)){$('#multiple-text').removeClass('open');} /* Multiple Choice */ if($('#multiple-choice').visible(true)){$('#multiple-choice').addClass('open');} if(!$('#multiple-choice').visible(true)){$('#multiple-choice').removeClass('open');} /* Select */ if($('#select').visible(true)){$('#select').addClass('open');} if(!$('#select').visible(true)){$('#select').removeClass('open');} /* Text */ if($('#text').visible(true)){$('#text').addClass('open');} if(!$('#text').visible(true)){$('#text').removeClass('open');} /* Info */ if($('#info').visible(true)){$('#info').addClass('open');} if(!$('#info').visible(true)){$('#info').removeClass('open');} }); $('a').click(function(){ $('html, body').animate({ scrollTop: $( $.attr(this, 'href') ).offset().top - 150 }, 500); return false;
});
});
Fantasy Form - Script Codes
Fantasy Form - Script Codes
Home Page Home
Developer Pankaj Parashar
Username pankajparashar
Uploaded August 12, 2022
Rating 4
Size 7,314 Kb
Views 34,408
Do you need developer help for Fantasy 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!

Pankaj Parashar (pankajparashar) Script Codes
Name
Arsenal vs Tottenham - Match Day 3
A Pen by Pankaj Parashar
Negative Margins, Positive Padding
The Chili Recipe
Animated Color Schemes
Skillset using HTML5 progress bars with CSS3 animations
Deconstruction of Twitter Logo
Selection Co-ordinates
Webkit Scrollbars
3D Pie Chart using amCharts.js
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!