Skip to content

Commit 587b359

Browse files
danny-markdanny-mark
committed
First commit
0 parents  commit 587b359

File tree

8 files changed

+200
-0
lines changed

8 files changed

+200
-0
lines changed

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2018 Bootstrap Studio
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
3+
[![Bootstrap Freebies](/readme-images/github-bootstrap-freebies.png)](https://github.com/topics/bootstrap-freebies/)
4+
5+
**Registration form snippet** made with Bootstrap 4. It has a clean, responsive design that is super easy to customize to your liking. The form fields have built in validation and input masks, making it easier for users to enter the right data. There are also buttons for signing up via a social media account. [See a live demo here »](https://epicbootstrap.com/snippets/registration)
6+
7+
[![Registration Form](/readme-images/screenshot.png)](https://epicbootstrap.com/snippets/registration)
8+
9+
## Features
10+
11+
* Beautiful & responsive design
12+
* Perfect browser support
13+
* Easy to customize
14+
* 100% Free to use
15+
16+
<br>
17+
18+
## Use it in Bootstrap Studio
19+
20+
This snippet and many others are available in Bootstrap Studio, the powerful web development tool for building responsive websites. You can drag and drop beautiful components together and create great-looking websites in no time. [Get the app now and supercharge your designs!](https://bootstrapstudio.io)
21+
22+
[![Bootstrap Studio Banner](/readme-images/bootstrap-studio-banner.jpg)](https://bootstrapstudio.io/)
23+
24+
[Website](https://bootstrapstudio.io/) &middot; [YouTube Tutorials](https://www.youtube.com/BootstrapStudioApp) &middot; [GitHub](https://github.com/bootstrapstudio)
25+
26+
## License
27+
28+
This project is licensed under the [MIT license](LICENSE).

‎assets/css/style.css

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
body{
2+
background-color: #dee9ff;
3+
}
4+
5+
.registration-form{
6+
padding: 50px 0;
7+
}
8+
9+
.registration-form form{
10+
background-color: #fff;
11+
max-width: 600px;
12+
margin: auto;
13+
padding: 50px 70px;
14+
border-top-left-radius: 30px;
15+
border-top-right-radius: 30px;
16+
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
17+
}
18+
19+
.registration-form .form-icon{
20+
text-align: center;
21+
background-color: #5891ff;
22+
border-radius: 50%;
23+
font-size: 40px;
24+
color: white;
25+
width: 100px;
26+
height: 100px;
27+
margin: auto;
28+
margin-bottom: 50px;
29+
line-height: 100px;
30+
}
31+
32+
.registration-form .item{
33+
border-radius: 20px;
34+
margin-bottom: 25px;
35+
padding: 10px 20px;
36+
}
37+
38+
.registration-form .create-account{
39+
border-radius: 30px;
40+
padding: 10px 20px;
41+
font-size: 18px;
42+
font-weight: bold;
43+
background-color: #5791ff;
44+
border: none;
45+
color: white;
46+
margin-top: 20px;
47+
}
48+
49+
.registration-form .social-media{
50+
max-width: 600px;
51+
background-color: #fff;
52+
margin: auto;
53+
padding: 35px 0;
54+
text-align: center;
55+
border-bottom-left-radius: 30px;
56+
border-bottom-right-radius: 30px;
57+
color: #9fadca;
58+
border-top: 1px solid #dee9ff;
59+
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.075);
60+
}
61+
62+
.registration-form .social-icons{
63+
margin-top: 30px;
64+
margin-bottom: 16px;
65+
}
66+
67+
.registration-form .social-icons a{
68+
font-size: 23px;
69+
margin: 0 3px;
70+
color: #5691ff;
71+
border: 1px solid;
72+
border-radius: 50%;
73+
width: 45px;
74+
display: inline-block;
75+
height: 45px;
76+
text-align: center;
77+
background-color: #fff;
78+
line-height: 45px;
79+
}
80+
81+
.registration-form .social-icons a:hover{
82+
text-decoration: none;
83+
opacity: 0.6;
84+
}
85+
86+
@media (max-width: 576px) {
87+
.registration-form form{
88+
padding: 50px 20px;
89+
}
90+
91+
.registration-form .form-icon{
92+
width: 70px;
93+
height: 70px;
94+
font-size: 30px;
95+
line-height: 70px;
96+
}
97+
}

‎assets/js/script.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
$(document).ready(function(){
2+
$('#birth-date').mask('00/00/0000');
3+
$('#phone-number').mask('0000-0000');
4+
})

‎index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>The Easiest Way to Add Input Masks to Your Forms</title>
8+
<link href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css" rel="stylesheet">
9+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
10+
<link rel="stylesheet" href="assets/css/style.css">
11+
</head>
12+
<body>
13+
<div class="registration-form">
14+
<form>
15+
<div class="form-icon">
16+
<span><i class="icon icon-user"></i></span>
17+
</div>
18+
<div class="form-group">
19+
<input type="text" class="form-control item" id="username" placeholder="Username">
20+
</div>
21+
<div class="form-group">
22+
<input type="password" class="form-control item" id="password" placeholder="Password">
23+
</div>
24+
<div class="form-group">
25+
<input type="text" class="form-control item" id="email" placeholder="Email">
26+
</div>
27+
<div class="form-group">
28+
<input type="text" class="form-control item" id="phone-number" placeholder="Phone Number">
29+
</div>
30+
<div class="form-group">
31+
<input type="text" class="form-control item" id="birth-date" placeholder="Birth Date">
32+
</div>
33+
<div class="form-group">
34+
<button type="button" class="btn btn-block create-account">Create Account</button>
35+
</div>
36+
</form>
37+
<div class="social-media">
38+
<h5>Sign up with social media</h5>
39+
<div class="social-icons">
40+
<a href="#"><i class="icon-social-facebook" title="Facebook"></i></a>
41+
<a href="#"><i class="icon-social-google" title="Google"></i></a>
42+
<a href="#"><i class="icon-social-twitter" title="Twitter"></i></a>
43+
</div>
44+
</div>
45+
</div>
46+
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
47+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
48+
<script src="assets/js/script.js"></script>
49+
</body>
50+
</html>

‎readme-images/bootstrap-studio-banner.jpg

148 KB
Loading

‎readme-images/github-bootstrap-freebies.png

9.06 KB
Loading

‎readme-images/screenshot.png

19 KB
Loading

0 commit comments

Comments
 (0)