<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - https://www.youtube.com/watch?v=-sMXE7E3R3M</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE HTML>
<head>
<!-- I did not create this form. This was completed following this youtube video:
https://www.youtube.com/watch?v=-sMXE7E3R3M
Thank you. -->
<title>
</title>
</head>
<body>
<div class="regform"> <h1>Registration Form</h1> </div>
<div class="main">
<form>
<div id="name">
<h2 class="name">Name</h2>
<input class="firstname" type="text" name="first_name"><br>
<label class="firstlabel">first name</label>
<input class="lastname" type="text" name="last_name">
<label class="lastlabel">last name</label>
</div>
<h2 class="name">Company</h2>
<input class="company" type="text" name="company">
<h2 class="name">Email</h2>
<input class="email" type="text" name="email">
<h2 class="name"> Phone</h2>
<input class="code" type="text" name="area_code">
<label class="area-code">Area Code</label>
<input class="number" type="text" name="phone">
<label class="phone-number">Phone Number</label>
<h2 class="name">Subject</h2>
<select class="option" name="subject">
<option disabled="disabled" selected="selected">--Choose Option</option>
<option> subject 1 </option>
<option> subject 2 </option>
<option> subject 3 </option>
</select>
<h2 id="customer">Are you a beginner?</h2>
<label class="radio">
<input class="radio-one" type="radio" checked="checked" name="beg">
<span class="checkmark"> </span>
Yes
</label>
<label class="radio">
<input class="radio-two" type="radio" name="beg">
<span class="checkmark"> </span>
No
</label>
<button type="submit">Register</button>
</form>
</div>
</body>
</HTML>
<!-- partial -->
</body>
</html>
* {
margin: 0;
padding: 0;
}
/* Change the background image url to a background of your choosing. */
body {
background-image: url(https://i.pinimg.com/originals/ef/47/f4/ef47f4c663869a49bdb6c70155e055a3.jpg);
background-position: center;
background-size: cover;
font-family: san-serif;
margin-top: 40px;
}
.regform {
width: 800px;
background-color:rgb(0,0,0,0.6);
margin: auto;
color: #ffffff;
padding: 10px 0px 10px 0px;
text-align: center;
border-radius: 15px 15px 0px 0px;
}
.main {
background-color: rgb(0,0,0,0.5);
width: 800px;
margin: auto;
}
form {
padding:10px;
}
#name {
width: 100%;
height: 100px;
}
.name {
margin-left: 25px;
margin-top: 30px;
width: 125px;
color: white;
font-size: 18px;
font-weight: 700;
}
.firstname {
position: relative;
left: 200px;
top: -37px;
line-height: 40px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
}
.lastname {
position: relative;
left: 417px;
top: -80px;
line-height: 40px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.firstlabel {
position: relative;
color: #e5e5e5;
text-transform: capitalize;
font-size: 14px;
left: 203px;
top: -45px;
}
.lastlabel {
position: relative;
color: #e5e5e5;
text-transform: capitalize;
font-size: 14px;
left: 175px;
top: -45px;
}
.company {
position: relative;
left: 200px;
top: -37px;
line-height: 40px;
width: 480px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.email {
position: relative;
left: 200px;
top: -37px;
line-height: 40px;
width: 480px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.code {
position: relative;
left: 200px;
top: -37px;
line-height: 40px;
width: 95px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.number {
position: relative;
left: 200px;
top: -37px;
line-height: 40px;
width: 255px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.area-code {
position: relative;
color: #E5E5E5;
text-transform: capitalize;
font-size: 16px;
left: 54px;
top: -4px;
}
.phone-number {
position: relative;
color: #E5E5E5;
text-transform: capitalize;
font-size: 16px;
left: -100px;
top: -2px;
}
.option {
position: relative;
left: 200px;
top: -37px;
line-height: 40px;
width: 532px;
height: 40px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555;
outline: none;
overflow: hidden;
}
.option option{
font-size: 20px;
}
#customer {
margin-left: 25px;
color: white;
font-size: 18px;
}
.radio {
display: inline-block;
padding-right: 70px;
font-size: 25px;
margin-left: 25px;
margin-top: 15px;
color: white;
}
.radio input{
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
outline: none;
}
Button {
background-color: #3BAF9F;
display: block;
margin: 20px 0px 0px 20px;
text-align: center;
border-radius: 12px;
border: 2px solid #366473;
padding: 14px 110px;
outline: none;
color: white;
cursor: pointer;
transition: 0.25px;
}
button:hover {
background-color: #5390F5;
}