A Pen by Eduard L.

Developer
Size
3,953 Kb
Views
18,216

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. Previews

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 ); });
});
A Pen by Eduard L. - Script Codes
A Pen by Eduard L. - Script Codes
Home Page Home
Developer Eduard L.
Username EduardL
Uploaded October 15, 2022
Rating 3
Size 3,953 Kb
Views 18,216
Do you need developer help for A Pen by Eduard L.?

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!

Eduard L. (EduardL) Script Codes
Create amazing SEO content with AI!

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!