A Pen by MohammadTaseenKhan on CodePen.
Created
September 12, 2022 07:15
-
-
Save MohammadTaseenKhan/1d872f7d2590670c76973a7ac99e5957 to your computer and use it in GitHub Desktop.
Survey Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="container"> | |
<header class="header"> | |
<h1 id="title" class="text-center">Survey Form</h1> | |
<p id="description" class="description text-center"> | |
Thank you for taking the time to help me improve the platform | |
</p> | |
</header> | |
<form id="survey-form"> | |
<div class="form-group"> | |
<label id="name-label" for="name">Name</label> | |
<input type="text" name="name" id="name" class="form-control" placeholder="Enter your name" required /> | |
</div> | |
<div class="form-group"> | |
<label id="email-label" for="email">Email</label> | |
<input type="email" name="email" id="email" class="form-control" placeholder="Enter your Email" required /> | |
</div> | |
<div class="form-group"> | |
<label id="number-label" for="number">Age<span class="clue">(optional)</span></label> | |
<input type="number" name="age" id="number" min="10" max="99" class="form-control" placeholder="Age" /> | |
</div> | |
<div class="form-group"> | |
<p>Which option best describes your current job?</p> | |
<select id="dropdown" name="role" class="form-control" required> | |
<option disabled selected value>Select current role</option> | |
<option value="student">Student</option> | |
<option value="job">Full Time Job</option> | |
<option value="learner">Full Time Learner</option> | |
<option value="preferNo">Prefer not to say</option> | |
<option value="other">Other</option> | |
</select> | |
</div> | |
<div class="form-group"> | |
<p>Would you recommend MD Support to a friend?</p> | |
<label> | |
<input name="user-recommend" value="definitely" type="radio" class="input-radio" checked />Definitely</label> | |
<label> | |
<input name="user-recommend" value="maybe" type="radio" class="input-radio" />Maybe</label> | |
<label><input name="user-recommend" value="not-sure" type="radio" class="input-radio" />Not sure</label> | |
</div> | |
<div class="form-group"> | |
<p> | |
What is your favorite feature of mdsupport? | |
</p> | |
<select id="most-like" name="mostLike" class="form-control" required> | |
<option disabled selected value>Select an option</option> | |
<option value="challenges">Challenges</option> | |
<option value="projects">Projects</option> | |
<option value="community">Community</option> | |
<option value="openSource">Open Source</option> | |
</select> | |
</div> | |
<div class="form-group"> | |
<p> | |
What would you like to see improved? | |
<span class="clue">(Check all that apply)</span> | |
</p> | |
<label><input name="prefer" value="front-end-projects" type="checkbox" class="input-checkbox" />Front-end Projects</label> | |
<label> | |
<input name="prefer" value="back-end-projects" type="checkbox" class="input-checkbox" />Back-end Projects</label> | |
<label><input name="prefer" value="data-visualization" type="checkbox" class="input-checkbox" />Data Visualization</label> | |
<label><input name="prefer" value="challenges" type="checkbox" class="input-checkbox" />Challenges</label> | |
<label><input name="prefer" value="open-source-community" type="checkbox" class="input-checkbox" />Open Source Community</label> | |
<label><input name="prefer" value="gitter-help-rooms" type="checkbox" class="input-checkbox" />Gitter help rooms</label> | |
<label><input name="prefer" value="videos" type="checkbox" class="input-checkbox" />Videos</label> | |
<label><input name="prefer" value="city-meetups" type="checkbox" class="input-checkbox" />City Meetups</label> | |
<label><input name="prefer" value="wiki" type="checkbox" class="input-checkbox" />Wiki</label> | |
<label><input name="prefer" value="forum" type="checkbox" class="input-checkbox" />Forum</label> | |
<label><input name="prefer" value="additional-courses" type="checkbox" class="input-checkbox" />Additional Courses</label> | |
</div> | |
<div class="form-group"> | |
<p>Any comments or suggestions?</p> | |
<textarea id="comments" class="input-textarea" name="comment" placeholder="Enter your comment here..."></textarea> | |
</div> | |
<div class="form-group"> | |
<button type="submit" id="submit" class="submit-button"> | |
Submit | |
</button> | |
</div> | |
<div class="container"> | |
<div class="row"> | |
<div class="col-sm-12"> | |
<div class="copyright-box"> | |
<div class="footer-content"> | |
<div>Share This Page</div> | |
<ul class="socials"> | |
<li><a href="#" rel="dofollow"><i class="fa fa-facebook"></i></a></li> | |
<li><a href="#" rel="dofollow"><i class="fa fa-twitter"></i></a></li> | |
<li><a href="#" rel="dofollow"><i class="fa fa-pinterest"></i></a></li> | |
<li><a href="#" rel="dofollow"><i class="fa fa-reddit"></i></a></li> | |
<li><a href="#" rel="dofollow"><i class="fa fa-linkedin-square"></i></a></li> | |
</ul> | |
</div> | |
<div class="credits"> | |
<!-- | |
All the links in the footer should remain intact. | |
--> | |
Inspired from <a href="https://codepen.io/freeCodeCamp/full/VPaoNP" rel="dofollow">lasjorg</a> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var isCtrl = false; | |
document.onkeyup = function (e) { | |
if (e.which == 17) isCtrl = false; | |
}; | |
document.onkeydown = function (e) { | |
if (e.which == 123) isCtrl = true; | |
if ( | |
(e.which == 85 || | |
e.which == 65 || | |
e.which == 88 || | |
e.which == 67 || | |
e.which == 86 || | |
e.which == 2 || | |
e.which == 3 || | |
e.which == 123 || | |
e.which == 83) && | |
isCtrl == true | |
) { | |
alert("WE HAVE DISABLED THIS FUNCTION FOR SECURITY REASONS"); | |
return false; | |
} | |
}; | |
// right click code By MD Taseen Khan | |
var isNS = navigator.appName == "Netscape" ? 1 : 0; | |
if (navigator.appName == "Netscape") | |
document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP); | |
function mischandler() { | |
alert("Sorry you can not copy anything from this website "); | |
alert( | |
"Rather than copying you can share the link of the post or the website " | |
); | |
alert("Thank You 😊 "); | |
return false; | |
} | |
function mousehandler(e) { | |
var myevent = isNS ? e : event; | |
var eventbutton = isNS ? myevent.which : myevent.button; | |
if (eventbutton == 2 || eventbutton == 3) return false; | |
} | |
document.oncontextmenu = mischandler; | |
document.onmousedown = mousehandler; | |
document.onmouseup = mousehandler; | |
//select content code disable alok goyal | |
function killCopy(e) { | |
return false; | |
} | |
function reEnable() { | |
return true; | |
} | |
document.onselectstart = new Function("return false"); | |
if (window.sidebar) { | |
document.onmousedown = killCopy; | |
document.onclick = reEnable; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://use.fontawesome.com/22080e681c.js"></script> | |
<script src="https://md-taseen-khan.vercel.app/lib/jquery/jquery.min.js"></script> | |
<script src="https://md-taseen-khan.vercel.app/lib/jquery/jquery-migrate.min.js"></script> | |
<script src="https://md-taseen-khan.vercel.app/lib/bootstrap/js/bootstrap.min.js"></script> | |
<script src="https://md-taseen-khan.vercel.app/lib/easing/easing.min.js"></script> | |
<script src="https://md-taseen-khan.vercel.app/lib/counterup/jquery.waypoints.min.js"></script> | |
<script src="https://md-taseen-khan.vercel.app/lib/counterup/jquery.counterup.js"></script> | |
<script src="https://md-taseen-khan.vercel.app/lib/owlcarousel/owl.carousel.min.js"></script> | |
<script src="https://md-taseen-khan.vercel.app/lib/lightbox/js/lightbox.min.js"></script> | |
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url("https://fonts.googleapis.com/css?family=Poppins:200i,400&display=swap"); | |
:root { | |
--color-white: #f3f3f3; | |
--color-darkblue: #1b1b32; | |
--color-darkblue-alpha: rgba(27, 27, 50, 0.8); | |
--color-green: #37af65; | |
} | |
*, | |
*::before, | |
*::after { | |
box-sizing: border-box; | |
} | |
body { | |
font-family: "Poppins", sans-serif; | |
font-size: 1rem; | |
font-weight: 400; | |
line-height: 1.4; | |
color: var(--color-white); | |
margin: 0; | |
} | |
/* background-attachment: fixed */ | |
body::before { | |
content: ""; | |
position: fixed; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
z-index: -1; | |
background: none; | |
background-image: linear-gradient( | |
115deg, | |
rgba(58, 58, 158, 0.8), | |
rgba(136, 136, 206, 0.7) | |
), | |
url(https://c.tenor.com/o23PLsTxPLoAAAAd/wallpaper.gif); | |
background-size: cover; | |
background-repeat: no-repeat; | |
background-position: center; | |
} | |
h1 { | |
font-weight: 400; | |
line-height: 1.2; | |
} | |
p { | |
font-size: 1.125rem; | |
} | |
h1, | |
p { | |
margin-top: 0; | |
margin-bottom: 0.5rem; | |
} | |
label { | |
display: flex; | |
align-items: center; | |
font-size: 1.125rem; | |
margin-bottom: 0.5rem; | |
} | |
input, | |
button, | |
select, | |
textarea { | |
margin: 0; | |
font-family: inherit; | |
font-size: inherit; | |
line-height: inherit; | |
} | |
button { | |
border: none; | |
} | |
.container { | |
width: 100%; | |
margin: 3.125rem auto 0 auto; | |
} | |
@media (min-width: 576px) { | |
.container { | |
max-width: 540px; | |
} | |
} | |
@media (min-width: 768px) { | |
.container { | |
max-width: 720px; | |
} | |
} | |
.header { | |
padding: 0 0.625rem; | |
margin-bottom: 1.875rem; | |
} | |
.description { | |
font-style: italic; | |
font-weight: 200; | |
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); | |
} | |
.clue { | |
margin-left: 0.25rem; | |
font-size: 0.9rem; | |
color: #e4e4e4; | |
} | |
.text-center { | |
text-align: center; | |
} | |
/* form */ | |
form { | |
background: var(--color-darkblue-alpha); | |
padding: 2.5rem 0.625rem; | |
border-radius: 0.25rem; | |
} | |
@media (min-width: 480px) { | |
form { | |
padding: 2.5rem; | |
} | |
} | |
.form-group { | |
margin: 0 auto 1.25rem auto; | |
padding: 0.25rem; | |
} | |
.form-control { | |
display: block; | |
width: 100%; | |
height: 2.375rem; | |
padding: 0.375rem 0.75rem; | |
color: #495057; | |
background-color: #fff; | |
background-clip: padding-box; | |
border: 1px solid #ced4da; | |
border-radius: 0.25rem; | |
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; | |
} | |
.form-control:focus { | |
border-color: #80bdff; | |
outline: 0; | |
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); | |
} | |
.input-radio, | |
.input-checkbox { | |
display: inline-block; | |
margin-right: 0.625rem; | |
min-height: 1.25rem; | |
min-width: 1.25rem; | |
} | |
.input-textarea { | |
min-height: 120px; | |
width: 100%; | |
padding: 0.625rem; | |
resize: vertical; | |
} | |
.submit-button { | |
display: block; | |
width: 100%; | |
padding: 0.75rem; | |
background: var(--color-green); | |
color: inherit; | |
border-radius: 2px; | |
cursor: pointer; | |
} | |
.socials { | |
list-style: none; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
margin: 1rem 0 3rem 0; | |
} | |
ul { | |
display: block; | |
list-style-type: disc; | |
margin-block-start: 1em; | |
margin-block-end: 1em; | |
margin-inline-start: 0px; | |
margin-inline-end: 0px; | |
padding-inline-start: 40px; | |
} | |
div { | |
text-align: center; | |
color: #fff; | |
padding-bottom: 4rem; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://md-taseen-khan.vercel.app/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" /> | |
<link href="https://md-taseen-khan.vercel.app/lib/animate/animate.min.css" rel="stylesheet" /> | |
<link href="https://md-taseen-khan.vercel.app/lib/ionicons/css/ionicons.min.css" rel="stylesheet" /> | |
<link href="https://md-taseen-khan.vercel.app/lib/lightbox/css/lightbox.min.css" rel="stylesheet" /> | |
<link href="https://md-taseen-khan.vercel.app/lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet" /> | |
<link href="https://md-taseen-khan.vercel.app/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> | |
<link href="https://md-taseen-khan.vercel.app/css/style.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment