Skip to content

Instantly share code, notes, and snippets.

@ZaynahGiti

ZaynahGiti/dailycssimages-account-registration-form.markdown

Last active May 24, 2017 20:49
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ZaynahGiti/10ad0aaaa268560dbfca6b06a95c802c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ZaynahGiti/10ad0aaaa268560dbfca6b06a95c802c to your computer and use it in GitHub Desktop.
Download ZIP
#DailyCSSImages:Account Registration Form
Raw
index.html
<html>
<!--main container -->
<div class="main-container">
<!--main registration container -->
<div class="registration-container">
<!--circles container -->
<div class="circles-steps">
<ul class="circles">
<li><div class=circle1></div>
</li>
<li><div class="circle2"></div>
</li>
<li><div class='circle3'></div>
</li>
</ul>
</div>
<!-- lines container -->
<div class="lines-steps">
<ul class="lines">
<li> <div class="line1"></div>
</li>
<li><div class="line2"></div>
</li>
</ul>
</div>
<!--menu container -->
<div class="menu">
<ul>
<li>SignUp Form</li>
<li>Login</li>
<li>SignUp</li>
</ul>
</div>
<!--Form start -->
<form class="registration-form">
<!--Form heading -->
<div class="form-heading">
<label>Account Registration</label></div>
<!--Form container -->
<div class="container">
<!--Form login buttons -->
<div class="login-btns">
<button class="fb-login-btn">
Login with Facebook</span></button>
<button class="google-login-btn">
Login with Google</button>
</div>
<!--for login option -->
<div class="login-option">
<label>OR</label></div>
<!--Inputs start -->
<ul class="names">
<li>
<input type="text" placeholder="First Name" name="email" class="first-name"></li>
<li> <input type="text" placeholder="Last Name" name="lastname" class="last-name"> </li>
</ul>
<ul class="emailUsername">
<li>
<input type="text" placeholder="Email" name="email" class="email"></li>
<li> <input type="text" placeholder="Username" name="email" class="username"></li>
</ul>
<ul class="password">
<li>
<input type="password" placeholder="Enter Password" name="psw" class="user-password"></li>
<li> <input type="password" placeholder="Confirm Password" name="psw-repeat" class="confirm-password">
</li>
</ul>
<!--Form next button -->
<button class="next">Next</button
</div>
<!--Form End -->
</form>
</div>
</div>
</html>
Raw
style.scss
$form-color:#55acee;
$fb-btn-color:#3b5999;
$g-btn-color:#dd4b39;
$text-color:white;
$bg-color:lighten(#000,98%);
body{
background-color:$bg-color
}
div{
position:absolute;
}
button{
position:absolute;
}
.main-container{
position:relative;
width:1000px;
height:700px;
background:none;
border:2px solid none;
margin:auto;
}
.registration-container{
position:relative;
width:950px;
height:650px;
background:none;
border:7px solid $form-color;
margin:2% auto;
}
ul{
list-style:none;
padding:10px;
margin:10px;
}
ul li{
display:inline-block;
padding:10px;
margin:10px;
color:$form-color;
}
li:nth-child(2){
margin-left:600px;
color:black;
}
li:nth-child(3){
color:$form-color;
}
.circles-steps{
width:20px;
height:400px;
background:none;
border:1px solid none;
transform:rotate(90deg);
left:450px;
top:-15%;
}
.circles{
padding:10px;
margin:10px;
}
.circles li{
display:inline-block;
padding:0px;
margin:150px;
color:$form-color;
margin-left:-20px;
margin-top:20px;
}
.circle1{
width:10px;
height:10px;
border-radius:50%;
background:gray;
}
.circle2{
@extend .circle1;
background:gray;
}
.circle3{
@extend .circle2;
background:$form-color;
}
.lines-steps{
width:20px;
height:400px;
background:none;
border:2px solid none;
transform:rotate(90deg);
left:450px;
top:-15%;
}
.lines{
margin:12px;
padding:12px;
}
.lines li{
display:inline-block;
padding:0px;
margin:180px;
color:$form-color;
margin-left:-20px;
margin-top:16px;
}
.lines li:nth-child(1){
margin-top:35px;
}
.lines li:nth-child(2){
margin-top:-6px;
}
.line1{
width:2px;
height:140px;
background:lighten(gray,20%);
}
.line2{
width:2px;
height:140px;
background:lighten(gray,20%);
}
.form-heading{
margin-top:15%;
margin-left:35%;
text-align: center;
font-size:25px;
}
.login-btns{
width:400px;
height:40px;
// border:1px solid red;
margin-top:200px;
margin-left:240px;
}
.fb-login-btn{
width:180px;
height:40px;
background:$fb-btn-color;
border-style:none;
color: $text-color;
text-align:center;
}
.google-login-btn{
width:180px;
height:40px;
background:$g-btn-color;
margin-left:222px;
border-style:none;
color: $text-color;
text-align:center;
}
.login-option{
width:30px;
height:20px;
//border:2px solid red;
top:255px;
left:430px;
}
.names{
margin-top:-5px;
margin-left:240px;
}
.container li{
display:inline-block;
margin: 3px 7px 0px -19px;
margin-top:280px;
}
input{
width:190px;
height:25px;
border:1px solid $form-color;
}
.emailUsername,.password{
margin-top:-300px;
margin-left:240px;
}
.next{
width:400px;
height:40px;
// border:1px solid red;
margin-top:10px;
margin-left:240px;
background:$form-color;
border-style:none;
color:$text-color;
font-size:30px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment