Simple Dark Form

Developer
Clément Guillou
Size
3,832 Kb
Views
50,600
  1. Simple Dark Form Previews
  2. Simple Dark Form HTML Codes
  3. Simple Dark Form CSS Codes
  4. Simple Dark Form JS Codes

How do I make an simple dark form?

Simple form based on Andreas Storm work.. What is a simple dark form? How do you make a simple dark form? This script and codes were developed by Clément Guillou on 04 July 2022, Monday.

Simple Dark Form Previews
IQ Test

Simple Dark Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Dark Form</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Sofia' rel='stylesheet' type='text/css'>
<div class='login'> <h2>Register</h2> <input name='username' placeholder='Username' type='text'> <input id='pw' name='password' placeholder='Password' type='password'> <input name='email' placeholder='E-Mail Address' type='text'> <div class='agree'> <input id='agree' name='agree' type='checkbox'> <label for='agree'></label>Accept rules and conditions </div> <input class='animated' type='submit' value='Register'> <a class='forgot' href='#'>Already have an account?</a>
</div> <script src="js/index.js"></script>
</body>
</html>

Simple Dark Form - Script Codes CSS Codes

* { margin: 0; padding: 0;
}
body { background: #2E3740; color: #435160; font-family: "Open Sans", sans-serif;
}
h2 { color: #6D7781; font-family: "Sofia", cursive; font-size: 15px; font-weight: bold; font-size: 3.6em; text-align: center; margin-bottom: 20px;
}
a { color: #435160; text-decoration: none;
}
.login { width: 350px; position: absolute; top: 10%; left: 50%; margin-left: -175px;
}
input[type="text"], input[type="password"] { width: 350px; padding: 20px 0px; background: transparent; border: 0; border-bottom: 1px solid #435160; outline: none; color: #6D7781; font-size: 16px;
}
input[type=checkbox] { display: none;
}
label { display: block; position: absolute; margin-right: 10px; width: 8px; height: 8px; border-radius: 50%; background: transparent; content: ""; transition: all 0.3s ease-in-out; cursor: pointer; border: 3px solid #435160;
}
#agree:checked ~ label[for=agree] { background: #435160;
}
input[type="submit"] { background: #1FCE6D; border: 0; width: 350px; height: 40px; border-radius: 3px; color: #fff; font-size: 12px; cursor: pointer; transition: background 0.3s ease-in-out;
}
input[type="submit"]:hover { background: #16aa56; animation-name: shake;
}
.forgot { margin-top: 30px; display: block; font-size: 11px; text-align: center; font-weight: bold;
}
.forgot:hover { margin-top: 30px; display: block; font-size: 11px; text-align: center; font-weight: bold; color: #6D7781;
}
.agree { padding: 30px 0px; font-size: 12px; text-indent: 25px; line-height: 15px;
}
::-webkit-input-placeholder { color: #435160; font-size: 12px;
}
.animated { animation-fill-mode: both; animation-duration: 1s;
}
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); }
}

Simple Dark Form - Script Codes JS Codes

/* Based on Andreas Storm work URL: http://codepen.io/andreasstorm/pen/duBpt
*/
Simple Dark Form - Script Codes
Simple Dark Form - Script Codes
Home Page Home
Developer Clément Guillou
Username cguillou
Uploaded July 04, 2022
Rating 4.5
Size 3,832 Kb
Views 50,600
Do you need developer help for Simple Dark Form?

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!

Clément Guillou (cguillou) Script Codes
Name
CSS3 Animated buttons
CSS3 Horror Style Text Effect
UI Kit
Flat CSS3 Weather Widget
Fancy Mobile Flat Navigation
Fancy Flat Social Button Animation
Create amazing captions 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!