Preview
Source Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900');
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
article, header, section, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}
body {
background: #ddf4e6 none repeat scroll 0 0;
color: #222;
font-size: 100%;
line-height: 24px;
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
}
a {
font-family: "Raleway", sans-serif;
text-decoration: none;
outline: none;
}
a:hover, a:focus {
color: #373e18;
}
section {
float: left;
width: 100%;
padding-bottom: 3em;
}
h2 {
color: #1a0e0e;
font-size: 26px;
font-weight: 700;
margin: 0;
line-height: normal;
text-transform: uppercase;
}
h2 span {
display: block;
padding: 0;
font-size: 18px;
opacity: 0.7;
margin-top: 5px;
text-transform: uppercase;
}
#float-right {
float: right;
}
.ScriptTop {
background: #fff none repeat scroll 0 0;
float: left;
font-size: 0.69em;
font-weight: 600;
line-height: 2.2;
padding: 12px 0;
text-transform: uppercase;
width: 100%;
}
.ScriptTop ul {
margin: 24px 0;
padding: 0;
text-align: left;
}
.ScriptTop li {
list-style: none;
display: inline-block;
}
.ScriptTop li a {
background: #6a4aed none repeat scroll 0 0;
color: #fff;
display: inline-block;
font-size: 14px;
font-weight: 600;
padding: 5px 18px;
text-decoration: none;
text-transform: capitalize;
}
.ScriptTop li a:hover {
background: #000;
color: #fff;
}
.ScriptHeader {
float: left;
width: 100%;
padding: 2em 0;
}
.rt-heading {
margin: 0 auto;
text-align: center;
}
.Scriptcontent {
line-height: 28px;
}
.ScriptHeader h1 {
font-family: "brandon-grotesque", "Brandon Grotesque", "Source Sans Pro", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
color: #6a4aed;
font-size: 26px;
font-weight: 700;
margin: 0;
line-height: normal;
}
.ScriptHeader h2 {
color: #312c8f;
font-size: 20px;
font-weight: 400;
margin: 5px 0 0;
line-height: normal;
}
.ScriptHeader h1 span {
display: block;
padding: 0;
font-size: 22px;
opacity: 0.7;
margin-top: 5px;
}
.ScriptHeader span {
display: block;
padding: 0;
font-size: 22px;
opacity: 0.7;
margin-top: 5px;
}
.rt-container {
margin: 0 auto;
padding-left: 12px;
padding-right: 12px;
}
.rt-row:before, .rt-row:after {
display: table;
line-height: 0;
content: "";
}
.rt-row:after {
clear: both;
}
[class^="col-rt-"] {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
padding: 0 15px;
min-height: 1px;
position: relative;
}
@media (min-width: 768px) {
.rt-container {
width: 750px;
}
[class^="col-rt-"] {
float: left;
width: 49.9999999999%;
}
.col-rt-6, .col-rt-12 {
width: 100%;
}
}
@media (min-width: 1200px) {
.rt-container {
width: 1170px;
}
.col-rt-1 {
width: 16.6%;
}
.col-rt-2 {
width: 30.33%;
}
.col-rt-3 {
width: 50%;
}
.col-rt-4 {
width: 67.664%;
}
.col-rt-5 {
width: 83.33%;
}
}
@media only screen and (min-width:240px) and (max-width: 768px) {
.ScriptTop h1, .ScriptTop ul {
text-align: center;
}
.ScriptTop h1 {
margin-top: 0;
margin-bottom: 15px;
}
.ScriptTop ul {
margin-top: 12px;
}
.ScriptHeader h1, .ScriptHeader h2, .scriptnav ul {
text-align: center;
}
.scriptnav ul {
margin-top: 12px;
}
#float-right {
float: none;
}
}
.modal-btn {
padding: 10px 20px;
color: #01b491;
font-size: 16px;
font-weight: bold;
outline: solid #01b491 2px;
cursor: pointer;
}
#modal-toggle {
display: none;
}
.modal-content, .modal-backdrop {
opacity: 0;
position: fixed;
padding: 15px;
padding-top: 50px;
z-index: -1;
overflow: hidden;
cursor: pointer;
transition: all 0.3s ease-in-out;
}
.modal-content {
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
height: 550px;
max-height: 98%;
width: 70%;
max-width: 600px;
text-align: center;
transform: translateX(125%);
}
.modal-backdrop {
left: 0;
top: 0;
height: 100%;
height: 100vh;
width: 100%;
width: 100vw;
transform: scale(0);
}
#modal-toggle:checked~.modal-backdrop {
opacity: 1;
background-color: rgba(0, 70, 62, 0.5);
z-index: 998;
transform: scale(1);
}
#modal-toggle:checked~.modal-content {
opacity: 1;
background-color: #fff;
overflow-y: auto;
overflow-x: hidden;
pointer-events: auto;
cursor: auto;
z-index: 999;
transform: translateX(0%);
}
@media (max-width: 600px) {
#modal-toggle:checked~.modal-backdrop {
opacity: 0;
}
.modal-content {
top: 0;
left: 0;
height: 100vh;
width: 100vw;
}
}
.modal-close-btn {
margin-top: 5px;
display: inline-block;
cursor: pointer;
position: absolute;
right: 10px;
top: 5px;
}
.modal-close-btn svg {
transition: 0.2s;
}
.modal-close-btn svg line {
stroke-width: 5px;
stroke: #01b491;
}
.modal-close-btn:hover svg {
transform: rotate(90deg);
}
.tabs {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
margin: 10px 0;
}
.tabs>.radio {
display: none;
}
.tabs>.radio:checked+.table+.tabs-content {
display: block;
}
.tabs>.table {
order: -1;
flex-basis: 50%;
flex-shrink: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tabs .tabs-content {
width: 100%;
display: none;
}
.tabs>.table {
padding: 20px 0;
text-align: center;
border-bottom: solid #01b491 5px;
color: #01b491;
cursor: pointer;
}
.tabs>.table span {
font-weight: 600;
}
.tabs>.table:hover {
color: #01b491;
background: rgba(0, 121, 107, 0.2);
}
.tabs>.radio:checked+.table {
color: #fff;
background: #01b491;
cursor: auto;
}
.tabs>.radio:checked+.table span {
display: inline-block;
font-weight: 500;
transform: scale(1.2);
transition: 0.1s;
}
.tabs>.tabs-content .login_socnet {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: no-wrap;
justify-content: space-around;
}
.tabs>.tabs-content .login_socnet a {
margin: 20px;
margin-bottom: 0;
width: 100%;
font-size: 60px;
text-decoration: none;
transition: 0.2s;
}
.tabs>.tabs-content .login_socnet a:hover {
transform: scale(1.1);
filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.2));
}
.tabs>.tabs-content .login_socnet .fa-vk {
color: #7986CB;
}
.tabs>.tabs-content .login_socnet .fa-google-plus {
color: #E57373;
}
.tabs>.tabs-content .login_socnet .fa-facebook {
color: #5C6BC0;
}
.tabs>.tabs-content form {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
-webkit-flex-direction: column;
-moz-flex-direction: column;
-ms-flex-direction: column;
-o-flex-direction: column;
flex-direction: column;
}
.tabs>.tabs-content form input {
padding: 10px;
margin: 15px 0;
border: none;
border-bottom: solid 1px #01b491;
font-size: 18px;
letter-spacing: 1px;
transition: 0.1s;
}
.tabs>.tabs-content form input:focus {
transform: translateX(10px);
outline: none;
}
.tabs>.tabs-content input[type="submit"] {
padding: 15px 0;
width: 100%;
background: #01b491;
color: #fff;
border: none;
font-size: 18px;
cursor: pointer;
}
.tabs>.tabs-content input[type="submit"]:focus {
transform: none;
}
.tabs>.tabs-content .forgot-password label {
margin: 0 auto;
width: 50%;
color: #01b491;
text-decoration: none;
font-size: 12px;
line-height: 1.5;
}
.tabs>.tabs-content .forgot-password label:hover {
text-decoration: underline;
}
.forgot-password #forgot-password-toggle {
display: none;
}
.forgot-password .forgot-password-content {
height: 0;
width: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
cursor: pointer;
transition: opacity 0.2s ease-in;
}
.forgot-password .forgot-password-content input[type="email"] {
width: 80%;
margin-right: 0px;
border-right: none;
}
.forgot-password .forgot-password-content input[type="submit"] {
width: 20%;
margin-left: 0px;
}
.forgot-password #forgot-password-toggle:checked~.forgot-password-content {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
opacity: 1;
width: 100%;
height: 100%;
z-index: 999;
pointer-events: auto;
cursor: auto;
visibility: visible;
}
</style>
</head>
<body>
<script src='https://use.fontawesome.com/7fcc5972f1.js'></script>
<section>
<div class="rt-container">
<div class="col-rt-12">
<div class="Scriptcontent">
<center>
<br>
<label class="modal-btn" for="modal-toggle">Login/Signup</label>
</center>
<input id="modal-toggle" type="checkbox">
<label class="modal-backdrop" for="modal-toggle"></label>
<div class="modal-content">
<label class="modal-close-btn" for="modal-toggle">
<svg width="30" height="30">
<line x1="5" y1="5" x2="20" y2="20"/>
<line x1="20" y1="5" x2="5" y2="20"/>
</svg>
</label>
<div class="tabs">
<input class="radio" id="tab-1" name="tabs-name" type="radio" checked>
<label for="tab-1" class="table"><span>Login</span></label>
<div class="tabs-content">
<div class="login_socnet">
<a href="http://www.devanswer.com" class="fa fa-vk" aria-hidden="true"></a>
<a href="http://www.devanswer.com" class="fa fa-instagram" aria-hidden="true"></a>
<a href="http://www.devanswer.com" class="fa fa-facebook" aria-hidden="true"></a>
</div>
<form action="">
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<input type="submit" value="Log In">
</form>
<form class="forgot-password" action="">
<input id="forgot-password-toggle" type="checkbox">
<label for="forgot-password-toggle">forgot password?</label>
<div class="forgot-password-content">
<input type="email" placeholder="enter your email" required>
<input type="submit" value="go">
</div>
</form>
</div>
<input class="radio" id="tab-2" name="tabs-name" type="radio">
<label for="tab-2" class="table"><span>Sign up</span></label>
<div class="tabs-content">
<div class="login_socnet">
<a href="http://www.devanswer.com" class="fa fa-vk" aria-hidden="true"></a>
<a href="http://www.devanswer.com" class="fa fa-instagram" aria-hidden="true"></a>
<a href="http://www.devanswer.com" class="fa fa-facebook" aria-hidden="true"></a>
</div>
<form action="">
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<input type="password" placeholder="Confirm password" required>
<input type="submit" value="Sign Up">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>
</body>
</html>