Another Great Login from Dribbble

Developer
Kaushalya Mandaliya
Size
5,828 Kb
Views
38,456
  1. Another Great Login from Dribbble Previews
  2. Another Great Login from Dribbble HTML Codes
  3. Another Great Login from Dribbble CSS Codes
  4. Another Great Login from Dribbble JS Codes

How do I make an another great login from dribbble?

Pure Css.. What is a another great login from dribbble? How do you make a another great login from dribbble? This script and codes were developed by Kaushalya Mandaliya on 08 August 2022, Monday.

Another Great Login from Dribbble Previews
IQ Test

Another Great Login from Dribbble - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Another Great Login from Dribbble</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(http://fonts.googleapis.com/css?family=Karla);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="fontawesome-"]:before { font-family: "FontAwesome", sans-serif; color: #7c3c30; font-size: 1.5em; position: absolute; right: 0.4em; top: 1.7em;
}
[class*="entypo-"]:before { font-family: "entypo", sans-serif; color: #b3b3b3; font-size: 1.5em; margin: -1.8em 14.5em; position: absolute;
}
[class*="entypo-"]:after { font-family: "entypo", sans-serif; color: #b3b3b3; content: "|"; font-size: 1.8em; margin: -1.7em 11.7em; position: absolute;
}
* { margin: 0; padding: 0; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
body { background: #ba8978; font-family: "Karla", sans-serif;
}
form { width: 24em; position: absolute; top: 50%; left: 50%; border: 0.2em solid #a3645b; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em; border-radius: 0.7em; margin: -7em 0 0 -10em; background: #f9f8f8; overflow: hidden; -moz-box-shadow: inset 0 -0.2em 0.2em 0 #ffb1be; -webkit-box-shadow: inset 0 -0.2em 0.2em 0 #ffb1be; box-shadow: inset 0 -0.2em 0.2em 0 #ffb1be;
}
form:hover { -moz-box-shadow: inset 0 -0.2em 0.1em 0 pink; -webkit-box-shadow: inset 0 -0.2em 0.1em 0 pink; box-shadow: inset 0 -0.2em 0.1em 0 pink;
}
form .header { margin: 1em 0; padding: 1em; text-transform: uppercase; background: #fb6567; color: white; font-weight: bold; text-shadow: 0 0.1em 0.2em #999; font-size: 1.1em; border-left: 0.15em solid #a3645b; border-right: 0.15em solid #a3645b;
}
form .header a { float: right; color: inherit; font-size: 0.8em; padding: 0.2em 0.4em; text-shadow: none not- !important;
}
input[type="text"], input[type="password"] { background: #f2f2f2; border: 0.1em solid #e0e0e0; outline: none; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em; border-radius: 0.7em; font-size: 1.1em; width: 17.9em; margin: 0.3em; padding: 0.5em 1em; padding-right: 2.3em; border-bottom: 0.3em inset #e6e6e6; color: #74c4b1; display: block; cursor: pointer;
}
::-webkit-input-placeholder { font-style: italic; color: #c7c7c7; font-family: "Karla", sans-serif;
}
:-moz-placeholder { font-style: italic; color: #c7c7c7; font-family: "Karla", sans-serif;
}
::-moz-placeholder { font-style: italic; color: #c7c7c7; font-family: "Karla", sans-serif;
}
:-ms-input-placeholder { font-style: italic; color: #c7c7c7; font-family: "Karla", sans-serif;
}
.rem-me { margin: 1em; color: #adadad; display: inline-block; width: 10em;
}
.submit-button { display: inline-block;
}
input[type="submit"] { background: linear-gradient(#ededed, #dbdbdb); border: 0.1em solid #fb6567; outline: none; font-size: 1.2em; font-weight: bold; padding: 0.3em 1em; margin: 0.2em 0 0 2.7em; text-transform: uppercase; color: #fb6567; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; cursor: pointer;
}
input[type="submit"]:hover, input[type="submit"]:active { border-color: #74c4b1;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="text"]:focus, input[type="password"]:focus { border-color: #74c4b1;
}
input[type="text"]:focus ~ .entypo-user, input[type="password"]:focus ~ .entypo-key { opacity: 0;
}
.attribution { position: absolute; bottom: 0; left: 0;
}
.attribution a { color: white; text-decoration: none;
}
.credit { position: absolute; right: 0; top: 0;
}
.credit a { color: white; text-decoration: none;
}
input[type="checkbox"] { appearance: none; height: 1.35em; width: 2.2em; outline: none; cursor: pointer; background: #ededed; border: 0.1em solid #d9d9d9; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; overflow: hidden; position: relative;
}
input[type="checkbox"]:before { height: 1.3em; width: 1.1em; background: #fb6567; position: absolute; content: ""; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
input[type="checkbox"]:checked:before { margin: 0 1em; background: #74c4b1;
}
label[for="remember"] { margin: 0 0.4em; margin-top: -0.1em; position: absolute; cursor: pointer;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="credit"> <a href="http://dribbble.com/shots/1258612-Free-Login-Form-UI-Kit">Inspired by a Dribbble shot by Ferman Aziz</a>
</div>
<form action="#"> <div class="header"> Secure Login <a href="#" class="fontawesome-double-angle-right">Get A Free Account</a> </div> <div> <input type="text" name="username" id="password" placeholder="USERNAME" /><span class="entypo-user"></span> </div> <div> <input type="password" name="password" id="password" placeholder="PASSWORD" /><span class="entypo-key"></span> </div> <div class="rem-me"> <input type="checkbox" name="remember" id="remember" value="None"> <label for="remember">Remember me</label> </div> <div class="submit-button"> <input type="submit" value="Sign In!" /> </div>
</form>
<div class="attribution"> Made with <span> &lt;3 </span> by <a href="http://seebeetee.com" target="_blank">Kaushalya Mandaliya</a>.
</div> <script src="js/index.js"></script>
</body>
</html>

Another Great Login from Dribbble - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Karla);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
@import url(http://weloveiconfonts.com/api/?family=entypo);
[class*="fontawesome-"]:before { font-family: "FontAwesome", sans-serif; color: #7c3c30; font-size: 1.5em; position: absolute; right: 0.4em; top: 1.7em;
}
[class*="entypo-"]:before { font-family: "entypo", sans-serif; color: #b3b3b3; font-size: 1.5em; margin: -1.8em 14.5em; position: absolute;
}
[class*="entypo-"]:after { font-family: "entypo", sans-serif; color: #b3b3b3; content: "|"; font-size: 1.8em; margin: -1.7em 11.7em; position: absolute;
}
* { margin: 0; padding: 0; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
body { background: #ba8978; font-family: "Karla", sans-serif;
}
form { width: 24em; position: absolute; top: 50%; left: 50%; border: 0.2em solid #a3645b; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em; border-radius: 0.7em; margin: -7em 0 0 -10em; background: #f9f8f8; overflow: hidden; -moz-box-shadow: inset 0 -0.2em 0.2em 0 #ffb1be; -webkit-box-shadow: inset 0 -0.2em 0.2em 0 #ffb1be; box-shadow: inset 0 -0.2em 0.2em 0 #ffb1be;
}
form:hover { -moz-box-shadow: inset 0 -0.2em 0.1em 0 pink; -webkit-box-shadow: inset 0 -0.2em 0.1em 0 pink; box-shadow: inset 0 -0.2em 0.1em 0 pink;
}
form .header { margin: 1em 0; padding: 1em; text-transform: uppercase; background: #fb6567; color: white; font-weight: bold; text-shadow: 0 0.1em 0.2em #999; font-size: 1.1em; border-left: 0.15em solid #a3645b; border-right: 0.15em solid #a3645b;
}
form .header a { float: right; color: inherit; font-size: 0.8em; padding: 0.2em 0.4em; text-shadow: none not- !important;
}
input[type="text"], input[type="password"] { background: #f2f2f2; border: 0.1em solid #e0e0e0; outline: none; -moz-border-radius: 0.7em; -webkit-border-radius: 0.7em; border-radius: 0.7em; font-size: 1.1em; width: 17.9em; margin: 0.3em; padding: 0.5em 1em; padding-right: 2.3em; border-bottom: 0.3em inset #e6e6e6; color: #74c4b1; display: block; cursor: pointer;
}
::-webkit-input-placeholder { font-style: italic; color: #c7c7c7; font-family: "Karla", sans-serif;
}
:-moz-placeholder { font-style: italic; color: #c7c7c7; font-family: "Karla", sans-serif;
}
::-moz-placeholder { font-style: italic; color: #c7c7c7; font-family: "Karla", sans-serif;
}
:-ms-input-placeholder { font-style: italic; color: #c7c7c7; font-family: "Karla", sans-serif;
}
.rem-me { margin: 1em; color: #adadad; display: inline-block; width: 10em;
}
.submit-button { display: inline-block;
}
input[type="submit"] { background: linear-gradient(#ededed, #dbdbdb); border: 0.1em solid #fb6567; outline: none; font-size: 1.2em; font-weight: bold; padding: 0.3em 1em; margin: 0.2em 0 0 2.7em; text-transform: uppercase; color: #fb6567; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; cursor: pointer;
}
input[type="submit"]:hover, input[type="submit"]:active { border-color: #74c4b1;
}
input[type="text"]:hover, input[type="password"]:hover, input[type="text"]:focus, input[type="password"]:focus { border-color: #74c4b1;
}
input[type="text"]:focus ~ .entypo-user, input[type="password"]:focus ~ .entypo-key { opacity: 0;
}
.attribution { position: absolute; bottom: 0; left: 0;
}
.attribution a { color: white; text-decoration: none;
}
.credit { position: absolute; right: 0; top: 0;
}
.credit a { color: white; text-decoration: none;
}
input[type="checkbox"] { appearance: none; height: 1.35em; width: 2.2em; outline: none; cursor: pointer; background: #ededed; border: 0.1em solid #d9d9d9; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; overflow: hidden; position: relative;
}
input[type="checkbox"]:before { height: 1.3em; width: 1.1em; background: #fb6567; position: absolute; content: ""; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;
}
input[type="checkbox"]:checked:before { margin: 0 1em; background: #74c4b1;
}
label[for="remember"] { margin: 0 0.4em; margin-top: -0.1em; position: absolute; cursor: pointer;
}

Another Great Login from Dribbble - Script Codes JS Codes

/*== *= Another Great Login from Dribbble =* *= =* Inspired by a Dribbble Shot: *= http://dribbble.com/shots/1258612-Free-Login-Form-UI-Kit =* by Ferman Aziz. *= 2013 by Kaushalya Mandaliya =* http://seebeetee.com
==*/
Another Great Login from Dribbble - Script Codes
Another Great Login from Dribbble - Script Codes
Home Page Home
Developer Kaushalya Mandaliya
Username kman
Uploaded August 08, 2022
Rating 3
Size 5,828 Kb
Views 38,456
Do you need developer help for Another Great Login from Dribbble?

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!

Kaushalya Mandaliya (kman) Script Codes
Name
Simple chat UI
Drop-down menu
Simple but improved fb graph search
Indian flag like menu
Trello like loading
Github Flavoured Markdown Cheat Sheet
A Cool Menu
Equalizer loading
Another responsive css menu
C language
Create amazing blog posts 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!