A Pen by Kevin Haag

Developer
Kevin Haag
Size
4,352 Kb
Views
4,048
  1. A Pen by Kevin Haag Previews
  2. A Pen by Kevin Haag HTML Codes
  3. A Pen by Kevin Haag CSS Codes

How do I make an a pen by kevin haag?

What is a a pen by kevin haag? How do you make a a pen by kevin haag? This script and codes were developed by Kevin Haag on 29 November 2022, Tuesday.

A Pen by Kevin Haag Previews
IQ Test

A Pen by Kevin Haag - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Kevin Haag</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="slider_wrapper"> <div class="slider_question"> <span class="question_num">1</span> I always knew I would start my own business one day </div> <ul class="slider_answer"> <li class="slider_val"> <input type="radio" id="q1a1" name="question1" value="1"> <label for="q1a1">1</label> </li> <li class="slider_val"> <input type="radio" id="q1a2" name="question1" value="2"> <label for="q1a2">2</label> </li> <li class="slider_val"> <input type="radio" id="q1a3" name="question1" value="3"> <label for="q1a3">3</label> </li> <li class="slider_val"> <input type="radio" id="q1a4" name="question1" value="4"> <label for="q1a4">4</label> </li> <li class="slider_val"> <input type="radio" id="q1a5" name="question1" value="5"> <label for="q1a5">5</label> </li> <li class="slider_val"> <input type="radio" id="q1a6" name="question1" value="6"> <label for="q1a6">6</label> </li> <li class="slider_val"> <input type="radio" id="q1a7" name="question1" value="7"> <label for="q1a7">7</label> </li> </ul> <div class="slider_scale"> <span class="scale_text">Completely Disagree</span> <span class="scale_text">Neither Agree nor Disagree</span> <span class="scale_text">Completely Agree</span> </div>
</div>
<div class="slider_wrapper yes-no"> <div class="slider_question"> <span class="question_num">2</span> I consider luck and timing / market conditions to be one of the most important reasons for my success </div> <ul class="slider_answer"> <li class="slider_val"> <input type="radio" id="q2a1" name="question2" value="1"> <label for="q2a1">No</label> </li> <li class="slider_val"> <input type="radio" id="q2a2" name="question2" value="2"> <label for="q2a2">Yes</label> </li> </ul>
</div>
<div class="slider_wrapper is-double"> <div class="slider_question"> <span class="question_num">3</span> I am more energized by selling vs. delivering the product / service </div> <ul class="slider_answer"> <li class="slider_val"> <input type="radio" id="q3a1" name="question3" value="1"> <label for="q3a1">1</label> </li> <li class="slider_val"> <input type="radio" id="q3a2" name="question3" value="2"> <label for="q3a2">2</label> </li> <li class="slider_val"> <input type="radio" id="q3a3" name="question3" value="3"> <label for="q3a3">3</label> </li> <li class="slider_val"> <input type="radio" id="q3a4" name="question3" value="4"> <label for="q3a4">4</label> </li> <li class="slider_val"> <input type="radio" id="q3a5" name="question3" value="5"> <label for="q3a5">5</label> </li> <li class="slider_val"> <input type="radio" id="q3a6" name="question3" value="6"> <label for="q3a6">6</label> </li> <li class="slider_val"> <input type="radio" id="q3a7" name="question3" value="7"> <label for="q3a7">7</label> </li> </ul> <div class="slider_scale"> <span class="scale_text">I am more energized by selling product/service</span> <span class="scale_text">I am more energized by delivering product/service</span> </div>
</div>
<div class="slider_wrapper double"> <div class="slider_question"> <span class="question_num">4</span> When framing a problem, I rely mostly on the facts vs. I rely mostly on my intuition </div> <ul class="slider_answer"> <li class="slider_val"> <input type="radio" id="q4a1" name="question4" value="1"> <label for="q4a1">1</label> </li> <li class="slider_val"> <input type="radio" id="q4a2" name="question4" value="2"> <label for="q4a2">2</label> </li> <li class="slider_val"> <input type="radio" id="q4a3" name="question4" value="3"> <label for="q4a3">3</label> </li> <li class="slider_val"> <input type="radio" id="q4a4" name="question4" value="4"> <label for="q4a4">4</label> </li> <li class="slider_val"> <input type="radio" id="q4a5" name="question4" value="5"> <label for="q4a5">5</label> </li> <li class="slider_val"> <input type="radio" id="q4a6" name="question4" value="6"> <label for="q4a6">6</label> </li> <li class="slider_val"> <input type="radio" id="q4a7" name="question4" value="7"> <label for="q4a7">7</label> </li> </ul> <div class="slider_scale"> <span class="scale_text">I rely mostly on the facts</span> <span class="scale_text">I rely mostly on my intuition</span> </div>
</div>
<div class="slider_wrapper"> <div class="slider_question"> <span class="question_num">5</span> Our company culture strongly encourages experimentation </div> <ul class="slider_answer"> <li class="slider_val"> <input type="radio" id="q5a1" name="question5" value="1"> <label for="q5a1">1</label> </li> <li class="slider_val"> <input type="radio" id="q5a2" name="question5" value="2"> <label for="q5a2">2</label> </li> <li class="slider_val"> <input type="radio" id="q5a3" name="question5" value="3"> <label for="q5a3">3</label> </li> <li class="slider_val"> <input type="radio" id="q5a4" name="question5" value="4"> <label for="q5a4">4</label> </li> <li class="slider_val"> <input type="radio" id="q5a5" name="question5" value="5"> <label for="q5a5">5</label> </li> <li class="slider_val"> <input type="radio" id="q5a6" name="question5" value="6"> <label for="q5a6">6</label> </li> <li class="slider_val"> <input type="radio" id="q5a7" name="question5" value="7"> <label for="q5a7">7</label> </li> </ul> <div class="slider_scale"> <span class="scale_text">Completely Disagree</span> <span class="scale_text">Neither Agree nor Disagree</span> <span class="scale_text">Completely Agree</span> </div>
</div>
<div class="slider_wrapper yes-no"> <div class="slider_question"> <span class="question_num">6</span> I inspire people to follow me primarily through my compassion / empathy </div> <ul class="slider_answer"> <li class="slider_val"> <input type="radio" id="q6a1" name="question6" value="1"> <label for="q6a1">No</label> </li> <li class="slider_val"> <input type="radio" id="q6a2" name="question6" value="2"> <label for="q6a2">Yes</label> </li> </ul>
</div>
<div class="slider_wrapper is-double"> <div class="slider_question"> <span class="question_num">7</span> I consider the company as MY company vs. OUR company </div> <ul class="slider_answer"> <li class="slider_val"> <input type="radio" id="q7a1" name="question7" value="1"> <label for="q7a1">1</label> </li> <li class="slider_val"> <input type="radio" id="q7a2" name="question7" value="2"> <label for="q7a2">2</label> </li> <li class="slider_val"> <input type="radio" id="q7a3" name="question7" value="3"> <label for="q7a3">3</label> </li> <li class="slider_val"> <input type="radio" id="q7a4" name="question7" value="4"> <label for="q7a4">4</label> </li> <li class="slider_val"> <input type="radio" id="q7a5" name="question7" value="5"> <label for="q7a5">5</label> </li> <li class="slider_val"> <input type="radio" id="q7a6" name="question7" value="6"> <label for="q7a6">6</label> </li> <li class="slider_val"> <input type="radio" id="q7a7" name="question7" value="7"> <label for="q7a7">7</label> </li> </ul> <div class="slider_scale"> <span class="scale_text">My Company</span> <span class="scale_text">Our Company</span> </div>
</div>
<div class="slider_wrapper yes-no"> <div class="slider_question"> <span class="question_num">8</span> I consider my management team / staff to be one of the most important reasons for my success </div> <ul class="slider_answer"> <li class="slider_val"> <input type="radio" id="q8a1" name="question8" value="1"> <label for="q8a1">No</label> </li> <li class="slider_val"> <input type="radio" id="q8a2" name="question8" value="2"> <label for="q8a2">Yes</label> </li> </ul>
</div>
<div class="slider_wrapper"> <div class="slider_question"> <span class="question_num">9</span> Most of my friends and colleagues would consider me a control freak </div> <ul class="slider_answer"> <li class="slider_val"> <input type="radio" id="q9a1" name="question9" value="1"> <label for="q9a1">1</label> </li> <li class="slider_val"> <input type="radio" id="q9a2" name="question9" value="2"> <label for="q9a2">2</label> </li> <li class="slider_val"> <input type="radio" id="q9a3" name="question9" value="3"> <label for="q9a3">3</label> </li> <li class="slider_val"> <input type="radio" id="q9a4" name="question9" value="4"> <label for="q9a4">4</label> </li> <li class="slider_val"> <input type="radio" id="q9a5" name="question9" value="5"> <label for="q9a5">5</label> </li> <li class="slider_val"> <input type="radio" id="q9a6" name="question9" value="6"> <label for="q9a6">6</label> </li> <li class="slider_val"> <input type="radio" id="q9a7" name="question9" value="7"> <label for="q9a7">7</label> </li> </ul> <div class="slider_scale"> <span class="scale_text">Completely Disagree</span> <span class="scale_text">Neither Agree nor Disagree</span> <span class="scale_text">Completely Agree</span> </div>
</div>
<div class="slider_wrapper"> <div class="slider_question"> <span class="question_num">10</span> I don’t consider tough business decisions personal – I just see them as part of business </div> <ul class="slider_answer"> <li class="slider_val"> <input type="radio" id="q10a1" name="question10" value="1"> <label for="q10a1">1</label> </li> <li class="slider_val"> <input type="radio" id="q10a2" name="question10" value="2"> <label for="q10a2">2</label> </li> <li class="slider_val"> <input type="radio" id="q10a3" name="question10" value="3"> <label for="q10a3">3</label> </li> <li class="slider_val"> <input type="radio" id="q10a4" name="question10" value="4"> <label for="q10a4">4</label> </li> <li class="slider_val"> <input type="radio" id="q10a5" name="question10" value="5"> <label for="q10a5">5</label> </li> <li class="slider_val"> <input type="radio" id="q10a6" name="question10" value="6"> <label for="q10a6">6</label> </li> <li class="slider_val"> <input type="radio" id="q10a7" name="question10" value="7"> <label for="q10a7">7</label> </li> </ul> <div class="slider_scale"> <span class="scale_text">Completely Disagree</span> <span class="scale_text">Neither Agree nor Disagree</span> <span class="scale_text">Completely Agree</span> </div>
</div>
<div id="followUpQuestions"> <div class='option option-l'>What is your gender?</div> <select name="gender" required> <option disabled selected value>Make a Selection</option> <option value='Female'>Female</option> <option value='Male'>Male</option> <option value='No Answer'>Prefer Not to Answer</option> </select> <div class='option option-l'>Which of the following best describes your role in the company?</div> <select name="role" required> <option disabled selected value>Make a Selection</option> <option value='Current Owner/Founder or CEO/President'>Current Owner / Founder and CEO or President</option> <option value='Current Owner/Founder, NOT CEO/President'>Current Owner / Founder and not CEO or President</option> <option value='Retired or Former Owner/Founder'>Retired or Former Owner / Founder</option> <option value='Non-founding CEO/President'>Non-founding CEO or President</option> <option value='Executive Mgmt'>Executive Management</option> <option value='Middle Mgmt'>Middle Management</option> <option value='Intermediate/Entry-level'>Intermediate or Entry Level</option> <option value='Other'>Other</option> </select> <div class='option option-l'>On average, what is the annual revenue for your business?</div> <select name="annual_revenue" required> <option disabled selected value>Make a Selection</option> <option value='<$5M'>Less than $5 million USD</option> <option value='$5M to $10M'>$5 million to less than $10 million USD</option> <option value='$10M to $50M'>$10 million to less than $50 million USD</option> <option value='$50M to $100M'>$50 million to less than $100 million USD</option> <option value='>$100M'>$100 million USD or greater</option> </select> <div class='option option-l'>Which industry best describes the work your company does? (Please select one)</div> <select name="work_your_company" required> <option disabled selected value>Make a Selection</option> <option value='Professional Services'>Professional Services (Accounting, Law, Architecture, Consulting, or Human Resources)</option> <option value='Media, Advertising, Marketing, or Data Sciences'>Media, Advertising, Marketing, or Data Sciences</option> <option value='Technology'>Technology (IT, Software Products & Services, or Online Information & Services)</option> <option value='Finance, Insurance, or Real Estate & Property Services'>Finance, Insurance, or Real Estate & Property Services</option> <option value='Healthcare or Pharmaceuticals'>Healthcare or Pharmaceuticals</option> <option value='Recreation & Entertainment, Food Services, or Travel & Hospitality'>Recreation & Entertainment, Food Services, or Travel & Hospitality</option> <option value='Telecommunications, Energy, Utilities, or Transportation'>Telecommunications, Energy, Utilities, or Transportation</option> <option value='Manufacturing, Mining, Construction, or Waste Management'>Manufacturing, Mining, Construction, or Waste Management</option> <option value='Education or Other'>Education or Other</option> </select>
</div>
<div class='option option-l'>Please enter your email address to complete the Builder Personality Discovery quiz and get your free personal results.</div>
<div><input type='text' id='email' name='email' required pattern='[^@]+@[^@]+\.[a-zA-Z]{2,}' title='Please provide valid email address' placeholder='Email Address' maxlength='500'></div>
<div ><input type='text' id='confirmemail' name='confirmemail' required pattern='[^@]+@[^@]+\.[a-zA-Z]{2,}' title='Please provide valid email address' placeholder='Confirm Email Address' maxlength='500'></div>
<div><input type='submit' value='Submit'></div>
</body>
</html>

A Pen by Kevin Haag - Script Codes CSS Codes

body{ padding:100px;
}
.slider_wrapper{ margin-bottom:64px;
}
.slider_question{ font-family:'Open Sans', sans-serif; font-size:18px;
}
.question_num{ width:24px; margin-right:8px; font-size:12px; line-height:24px; text-align:center; display:inline-block; border-radius:12px; color:#fff; font-weight:bold; transform:translateY(-2px); background-color:rgba(0, 115, 234, 1);
}
.slider_answer{ padding:0; list-style:none; display:flex; border:1px solid #ccc; border-radius:4px;
}
.slider_wrapper.yes-no .slider_answer{ width:28.6%; min-width:176px;
}
.slider_val{ line-height:40px; flex-grow:1; display:block; position:relative; text-align:center; border-right:1px solid #ccc; font-family:'Open Sans', sans-serif;
}
.slider_val:first-child::after, .slider_val:nth-child(4)::after, .slider_val:last-child::after{ content:''; width:1px; height:16px; display:block; position:absolute; background-color:#ccc;
}
.slider_val:first-child::after{ left:16px;
}
.slider_val:nth-child(4)::after{ left:50%
}
.slider_val:last-child::after{ right:16px;
}
.slider_val:last-child{ border-right:none;
}
.slider_wrapper.yes-no .slider_val::after{ display:none;
}
.slider_wrapper.is-double .slider_val:nth-child(4)::after{ display:none;
}
.slider_val input[type="radio"]{ position:absolute; visibility:hidden;
}
.slider_val label{ width:100%; color:rgba(0, 115, 234, 1); display:block; transition:all 0.15s ease-in-out;
}
.slider_val label:hover{ cursor:pointer; background-color:#f5f5f5;
}
.slider_val input[type="radio"]:checked + label{ font-weight:bold; background-color:rgba(0, 115, 234, 0.15);
}
.slider_scale{ width:100%; display:flex; padding-top:4px; font-size:13px; font-family:'Open Sans', sans-serif; color:#666
}
.scale_text{ flex-grow:1;
}
.scale_text:nth-child(2){ text-align:center; transform:translateX(-2%);
}
.scale_text:last-child{ text-align:right;
}
A Pen by Kevin Haag - Script Codes
A Pen by Kevin Haag - Script Codes
Home Page Home
Developer Kevin Haag
Username khaag
Uploaded November 29, 2022
Rating 3
Size 4,352 Kb
Views 4,048
Do you need developer help for A Pen by Kevin Haag?

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!

Kevin Haag (khaag) Script Codes
Name
Modal Popup Window
SVG Fuel Gauge
Hamburger Icon Toggle
Animated Search Icon
Vertical Centering
Scroll Icon
Youtube Layout
Hostwise Nav Bar
Create amazing marketing copy 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!