Skip to content

Instantly share code, notes, and snippets.

@emygeek

emygeek/dailyui-sign-up-page.markdown

Created August 18, 2018 10:37
Show Gist options
  • Save emygeek/577ce8961748f09b7929c285e6c0badb to your computer and use it in GitHub Desktop.
Save emygeek/577ce8961748f09b7929c285e6c0badb to your computer and use it in GitHub Desktop.
Download ZIP
#DailyUi Sign Up Page
Raw
dailyui-sign-up-page.markdown
Raw
index.html
<section id="signup" >
<div class="container ">
<div class="row">
<div class="col-md-10 mx-auto">
<div class="card">
<div class="row d-flex h-100">
<div class="col-md-6 img-holder justify-content-center align-self-center">
<img src="https://res.cloudinary.com/emygeek/image/upload/v1534583336/undraw_digital_nomad_9kgl_awjyq5.svg" class="img-fluid" />
</div>
<div class="col-md-6">
<div class="card-title">
<h2>Sign up for reward</h2>
</div>
<div class="card-body">
<form>
<div class="form-group">
<label>Name</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="name-addon"><i class="far fa-user"></i></span>
</div>
<input type="text" class="form-control" placeholder="John Doe" aria-label="Name" aria-describedby="name-addon">
</div>
</div>
<div class="form-group">
<label>Email</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="email-addon"><i class="far fa-envelope-open"></i></span>
</div>
<input type="email" class="form-control" placeholder="johndoe@email.com" aria-label="Email" aria-describedby="email-addon">
</div>
</div>
<div class="form-group">
<label>Password</label>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="password-addon"><i class="fas fa-fingerprint"></i></span>
</div>
<input type="password" class="form-control" placeholder="password" aria-label="Password" aria-describedby="password-addon">
</div>
</div>
<div class="form-group">
<button type="submit" class="form-control btn-primary">Register</button>
</div>
</form>
</div>
</div>
</div>
</div> <!-- End of card -->
</div>
</div>
</div>
</section>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
Raw
style.css
@import url('https://fonts.googleapis.com/css?family=Quicksand');
body{
background:#f9fbfd;
font-family: 'Quicksand', sans-serif;
}
#signup{
padding-top: 50px;
}
#signup .card{
box-shadow:0 2px 1px 0 rgba(0,0,0,.07), 0 5px 20px 0 rgba(0,0,0,.06), 0 8px 40px 0 rgba(0,0,0,.04);
}
#signup .card .card-title{
padding: 2rem 1.2rem 0;
margin-bottom:0;
}
#signup .card .card-title h2{
font-size:1.2rem;
letter-spacing:.5px;
font-weight:bold;
margin-bottom:0;
text-transform:uppercase;
}
.img-holder{
padding: 3rem;
}
form .form-control{
border-radius:1px;
border-left:none;
}
form .input-group>.input-group-prepend>.input-group-text {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-radius: 1px;
background: transparent;
/* border-right: none; */
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment