A Pen by Eduard L.
How do I make an a pen by eduard l.?
What is a a pen by eduard l.? How do you make a a pen by eduard l.? This script and codes were developed by Eduard L. on 15 October 2022, Saturday.
A Pen by Eduard L. - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Eduard L.</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html lang="en">
<head> <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <!-- Basic Page Needs ================================================== --> <meta charset="utf-8"> <title>Flat Login</title> <meta name="description" content=""> <meta name="author" content=""> <!-- Mobile Specific Metas ================================================== --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <!-- CSS ================================================== --> <!--[if lt IE 9]> <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>
<body> <div class="container"> <div class="flat-form"> <ul class="tabs"> <li> <a href="#login" class="login">LOGIN</a> </li> <li> <a href="#register"class="register">REGISTER</a> </li> <!--- Reset pass hidden <li> <a href="#reset">Reset Password</a> </li> Reset pass hidden --> </ul> <div id="login" class="form-action show"> <h1>Login to Startific</h1>
<form>
<ul>
<li>
<input type="text" placeholder="Username" />
</li>
<li>
<input type="password" placeholder="Password" />
</li>
</ul>
<ul class="keepme">
<li id="keep"> Keep me signed in?
</li>
<li id="forgotpass"><a href="#reset">Reset Password</a>
</li>
</ul>
<ul>
<li>
<input type="submit" value="LOGIN" class="button" />
</li>
<p id="social_login"> Or login with your social networks:</p> <li>
<input type="submit" value="Login with Facebook" class="button_facebook" />
</li>
<li>
<input type="submit" value="Login with Google" class="button_google" />
<div class="stroke"></div>
</li>
</ul>
</form> </div> <!--/#login.form-action--> <div id="register" class="form-action hide"> <h1>Register to Startific</h1> <p> By registering or using our service, you signify that you have read, understand and agree to be bound to our <a href="#"> Terms of service</a> </p> <form> <ul> <li> <input type="text" placeholder="Your Name (Jon Doe)" /> </li> <li> <input type="text" placeholder="Username" /> </li> <li> <input type="text" placeholder="E-mail" /> </li> <li> <input type="password" placeholder="Password" /> </li> <li> <li> <input type="password" placeholder="Confirm password" /> </li> <li> <input type="submit" value="Sign Up" class="button" /> </li> </ul> </form> </div> <!--/#register.form-action--> <div id="reset" class="form-action hide"> <h1>Reset Password</h1> <p> If you have forgotten your password, you can reset it. </p> <form> <ul> <li> <input type="text" placeholder="Email" /> </li> <li> <input type="password" placeholder="password" /> </li> <li> <input type="submit" value="Send" class="button" /> </li> </ul> </form> </div> <!--/#register.form-action--> </div> </div> <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
A Pen by Eduard L. - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Roboto:100);
@import url(https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
body { background: lightgray; color: #6e6e6e; font-family: 'Roboto'; font-style:bold;
}
.stroke { height:5px; background: #1763a6; /* Old browsers */ background: -webkit-gradient(linear, 0 0, 100% 0, from(#1763a6), color-stop(0.47, #419ca6), color-stop(0.91, #54bf83)); background: -webkit-linear-gradient(left, #1763a6 0%, #419ca6 47%, #54bf83 91%); background: -moz-linear-gradient(left, #1763a6 0%, #419ca6 47%, #54bf83 91%); background: -o-linear-gradient(left, #1763a6 0%, #419ca6 47%, #54bf83 91%); background: linear-gradient(left, #1763a6 0%, #419ca6 47%, #54bf83 91%); /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1763a6', endColorstr='#54bf83',GradientType=1 ); /* IE6-9 */
}
p{
}
input:focus{ background-color:blue;
}
.flat-form { overflow:hidden; background: white; margin: 25px auto; width: 100%; height: 100%; position: relative; font-family: 'Roboto';
}
.tabs { width: 100%; background:#00bbbb; height:45px;
}
.tabs li { display: inline;
}
.tabs a {
background: #00bbbb;
float: left;
text-decoration: none;
color: white;
padding-top:15px;
font-size: 16px;
height:30px;
text-align:center;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
/******** register ********/
.tabs a.login { align:left; width:50%;
}
.tabs a.login:hover { background: #008C8C;
}
.tabs a.register {
align:right;
width:50%;
-moz-box-shadow: inset white 1px 0 0 0 ;
-webkit-box-shadow: inset #B3B3B3 1px 0 0 0 ;
box-shadow: inset white 1px 0 0 0 ;
}
.tabs a.register:hover { background: #008C8C;
}
.form-action { padding: 0 0; position: relative;
}
.form-action h1 { font-size: 42px; padding-top: 20px; padding-bottom: 20px; padding-left: 20px; text-align:center;
}
.form-action p { font-size: 12px; padding-bottom: 10px; padding-left: 20px; line-height: 25px;
}
form {
}
form input[type=text],
form input[type=password],
form input[type=submit] { font-family: 'Roboto'; padding-left: 20px;
}
form input[type=text],
form input[type=password] { width: 100%; height: 50px; margin-bottom: 10px; background: #F5F5F5; border: none; color: #6e6e6e; outline: none;
}
.dark-box {
}
.form-action .dark-box.bottom {
}
.tabs + .dark-box.top { position: absolute; right: 0; top: 0px;
}
.show { display: block;
}
.hide { display: none;
}
#social_login { padding:10px;
}
.keepme ul
{
}
.keepme li {
display: inline;
float: left;
width: 95%;
font-size: 13px;
}
#keep{
text-align:left; padding:15px;
}
#forgotpass{ text-align:right; margin-top:-27px; padding-right:20px; text-decoration: none;
}
#forgotpass a{ text-decoration: none; color: inherit;
}
.button { border: none; display: block; background: #00bbbb; height: 40px; width: 100%; color: #ffffff; text-align: center; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; transition: all 0.15s linear;
}
.button:hover { background: #008C8C;
}
.button:active { background: #136899;
}
.button_facebook { border: none; display: block; background: #242424; height: 40px; width: 100%; color: #ffffff; text-align: center; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; transition: all 0.15s linear;
}
.button_facebook:hover { background: #3B5998;
}
.button_facebook:active { background: #136899;
}
.button_google { border: none; display: block; background: #212121; height: 40px; width: 100%; color: #ffffff; text-align: center; -webkit-transition: all 0.15s linear; -moz-transition: all 0.15s linear; transition: all 0.15s linear;
}
.button_google:hover { background: #d34836;
}
.button_google:active { background: #136899;
}
A Pen by Eduard L. - Script Codes JS Codes
$(function() { // constants var SHOW_CLASS = 'show', HIDE_CLASS = 'hide', ACTIVE_CLASS = 'active'; $( '.tabs' ).on( 'click', 'li a', function(e){ e.preventDefault(); var $tab = $( this ), href = $tab.attr( 'href' ); $( '.active' ).removeClass( ACTIVE_CLASS ); $tab.addClass( ACTIVE_CLASS ); $( '.show' ) .removeClass( SHOW_CLASS ) .addClass( HIDE_CLASS ) .hide(); $(href) .removeClass( HIDE_CLASS ) .addClass( SHOW_CLASS ) .hide() .fadeIn( 550 ); });
});
Developer | Eduard L. |
Username | EduardL |
Uploaded | October 15, 2022 |
Rating | 3 |
Size | 3,953 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Social Menu | 1,931 Kb |
Side Sliding Menu CSS | 4,388 Kb |
Grid Resizable Drag and Drop, Masonery | 2,437 Kb |
HackaGlobal | 1,798 Kb |
Sticker.js Peel and drag the edge to unstick te element | 1,962 Kb |
Draggable add element | 2,642 Kb |
404 not found page | 3,165 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Hover Animation from UNIQLO | Insprd | 3,772 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
CSS- UI Element States Pseudo-Classes | Tesla809 | 2,206 Kb |
Hmmm... | Rk007 | 4,848 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Bootstrap example | Ssaakkaa | 2,716 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
CSS3 iPad | Vikvarg | 1,766 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!