<!DOCTYPE html>
<html>
<head>
<title>Simple<title>Contact registration form</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
<style>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
html,<style>
body { html, body display:{
flex; justify-content: center;
min-height: 100%;
}
body, div, h1, form, input, p {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 16px14px;
color: #666;
}
h1 {
paddingmargin: 10px0 0;
font-size: 32px 20px;
font-weight: 300400;
text-aligncolor: center#1c87c9;
}
p {
font-sizemargin: 12px;0 }
hr {
color: #a9a9a90 5px;
opacity: 0.3;
}
.main-block {
max-widthdisplay: 340pxflex;
minflex-heightdirection: 460pxcolumn;
paddingjustify-content: 10px 0center;
margin: auto;
border-radius: 5pxalign-items: center;
border: solid 1px #ccc;
box-shadow: 1px 2px 5px rgba(0,0,0,.31)min-height: 100vh;
background: #ebebeb#1c87c9;
}
form {
marginpadding: 0 30px25px;
}
.account-type, .gender {
margin: 15px 025px;
}box-shadow: 0 2px input[type=radio] {
display: none5px #f5f5f5;
}
label#icon {
margin: 0 background: #f5f5f5;
border-radius: 5px 0 0 5px;
}
label.radiofas {
positionmargin: relative;25px display: inline-block10px 0;
paddingfont-topsize: 4px72px;
margin-rightcolor: 20px#fff;
text-indent: 30px;
overflow: visible;
cursor: pointer;
}
label.radio:before.fa-envelope {
contenttransform: ""rotate(-20deg);
position:}
absolute; top: 2px;
left: 0;
width: 20px;
height: 20px;
border-radius: 50%;.fa-at , .fa-mail-bulk{
backgroundtransform: #1c87c9rotate(10deg);
}
label.radio:after input, textarea {
content: "";
position: absolute;
width: 9px;calc(100% height: 4px- 18px);
toppadding: 8px;
leftmargin-bottom: 4px20px;
border: 3px1px solid #fff#1c87c9;
border-topoutline: none;
border-right: none;
transform: rotate(-45deg);
opacity: 0;
}
input[type=radio]:checked + label:afterplaceholder {
opacitycolor: 1#666;
}
input[type=text], input[type=password] button {
width: calc(100% - 57px);
heightpadding: 36px10px;
marginborder: 13px 0 0 -5pxnone;
padding-leftbackground: 10px#1c87c9;
borderfont-radiussize: 0 5px 5px 016px;
border: solid 1px #cbc9c9;
box-shadow: 1px 2px 5px rgba(0,0,0,.09)font-weight: 400;
backgroundcolor: #fff;
}
input[type=password]button:hover {
margin-bottombackground: 15px#2371a0;
}
#icon { display: inline-block;
@media (min-width: 568px) {
padding: 9.3px 15px;main-block {
boxflex-shadowdirection: 1px 2px 5px rgba(0,0,0,.09)row;
}
background: #1c87c9; .left-part, form color:{
#fff; text-alignwidth: center50%;
}
.btnfa-blockenvelope {
margin-top: 10px0;
textmargin-alignleft: center20%;
}
button.fa-at {
widthmargin-top: 100%-10%;
padding: 10px 0;
margin: 10px auto;
border-radius-left: 5px65%;
}
border: none; .fa-mail-bulk {
background: #1c87c9; font-sizemargin-top: 14px2%;
fontmargin-weightleft: 60028%;
color: #fff;
}
button:hover {
background: #26a9e0;
}
</style>
</head>
<body>
<div class="main-block">
<h1>Registration</h1>
<form action="/">
<hr>
<div class="accountleft-typepart">
<input type="radio" value="none" id="radioOne" name="account" checked/>
<label for="radioOne" class="radio">Personal</label>
<input type="radio" value="none" id="radioTwo" name="account" />
<label for="radioTwo" class="radio">Company</label>
</div>
<hr>
<label id="icon" for="name"><i class="<i class="fas fa-envelope"></i></label>i>
<input type="text" name="name" id="name" placeholder="Email" required/>
<label id="icon" for="name"><i <i class="fas fa-userat"></i></label>i>
<input type="text" name="name" id="name" placeholder="Name" required/>
<label id="icon" for="name"><i <i class="fas fa-unlockmail-altbulk"></i></label>i>
</div>
<input type="password" name="name" id="name" placeholder <form action="Password/" required/>
<hr><h1>Contact Us</h1>
<div class="genderinfo">
<input typeclass="radiofname" valuetype="nonetext" idname="male" name="gender" checked/>
<label for="male" class="radio">Male</label> placeholder="Full name">
<input type="radiotext" valuename="nonename" idplaceholder="female" name="gender" /Email">
</div>
<label for="female" class="radio">Female</label> <p>Message</p>
</div> <div>
<hr> <textarea <div classrows="btn-block">4"></textarea>
<p>By clicking Register, you agree on our <a href="https://www.w3docs.com/privacy-policy">Privacy Policy for W3Docs</a>.</p></div>
<button type="submit" href="/">Submit</button>
</div>
</form>
</div>
</body>
</html> |