Simple Login

Developer
Ashlee Phillips
Size
2,462 Kb
Views
24,288
  1. Simple Login Previews
  2. Simple Login HTML Codes
  3. Simple Login CSS Codes

How do I make an simple login?

Based on Dribbble https://dribbble.com/shots/2145451-Compact-Login. What is a simple login? How do you make a simple login? This script and codes were developed by Ashlee Phillips on 15 September 2022, Thursday.

Simple Login Previews
IQ Test

Simple Login - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Login</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ * { box-sizing: border-box;
}
.form{ background-color: #FEFFFF; border-radius: 5px; width: 280px; margin: 50px auto 10px auto; overflow: hidden; box-shadow: 0 2px 10px -3px #333;
}
.form-container { padding: 30px;
}
body { background-color: #6BEED7; font-family: helvetica; color: #D8DFDD;
}
label { font-size: 12px; color: #000000; display: inline-block; margin-top: 5px; margin-bottom: 5px;
}
input { width: 100%; padding: 5px; border: none; border-top: 1px solid #D8DFDD;
}
button { border: 2px solid; background: #FEFFFF; color: #D8DFDD; margin: auto; width: 65%; padding: 10px; font-size: 12px; display: block;
}
button:hover { background-color: #ED2855; border-color: #ED2855; color: #FEFFFF;
}
h1 { color: #ED2855; border-left: 3px solid #ED2855; margin: 0; padding: 0; font-size: 16px; margin-top: 35px; padding-left: 30px;
}
.forgot-password { font-size: 14px; text-align: center; margin-top: 25px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="form"> <h1>LOGIN</h1> <div class="form-container"> <label>Username</label> <br /> <input type="username" name="Username" /> <br /> <label>Password</label> <br /> <input type="password" name="Password" /> <br /> <br /> <button>GO</button> <p class="forgot-password">Forgot your password?</p> </div>
</div>
</body>
</html>

Simple Login - Script Codes CSS Codes

* { box-sizing: border-box;
}
.form{ background-color: #FEFFFF; border-radius: 5px; width: 280px; margin: 50px auto 10px auto; overflow: hidden; box-shadow: 0 2px 10px -3px #333;
}
.form-container { padding: 30px;
}
body { background-color: #6BEED7; font-family: helvetica; color: #D8DFDD;
}
label { font-size: 12px; color: #000000; display: inline-block; margin-top: 5px; margin-bottom: 5px;
}
input { width: 100%; padding: 5px; border: none; border-top: 1px solid #D8DFDD;
}
button { border: 2px solid; background: #FEFFFF; color: #D8DFDD; margin: auto; width: 65%; padding: 10px; font-size: 12px; display: block;
}
button:hover { background-color: #ED2855; border-color: #ED2855; color: #FEFFFF;
}
h1 { color: #ED2855; border-left: 3px solid #ED2855; margin: 0; padding: 0; font-size: 16px; margin-top: 35px; padding-left: 30px;
}
.forgot-password { font-size: 14px; text-align: center; margin-top: 25px;
}
Simple Login - Script Codes
Simple Login - Script Codes
Home Page Home
Developer Ashlee Phillips
Username smashlee
Uploaded September 15, 2022
Rating 3
Size 2,462 Kb
Views 24,288
Do you need developer help for Simple Login?

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!

Ashlee Phillips (smashlee) Script Codes
Name
CSS Granny
Scooped Border
Work in Progress
Food Tag
Google login form
Project Euler 02
99 Pledges Login
Scream for Ice Cream
Gradient
Javascript practice
Create amazing web 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!