99 Pledges Login

Developer
Ashlee Phillips
Size
3,722 Kb
Views
38,456
  1. 99 Pledges Login Previews
  2. 99 Pledges Login HTML Codes
  3. 99 Pledges Login CSS Codes

How do I make an 99 pledges login?

Based on the Dribbble by James McDonald https://dribbble.com/shots/3225390-99pledges-Login. What is a 99 pledges login? How do you make a 99 pledges login? This script and codes were developed by Ashlee Phillips on 15 September 2022, Thursday.

99 Pledges Login Previews
IQ Test

99 Pledges Login - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>99 Pledges Login</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"> <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;
}
body { background: #EFF1F6; font-family: "Open Sans", Helvetica;
}
input, button { font-family: "Open Sans", Helvetica; font-size: 13px;
}
h1 { margin: -5px 0 0 3px; margin-bottom: 48px; padding: 0; text-align: center; font-size: 30px;
}
button { background: #3ABEC3; width: 300px; border: none; color: white; border-radius: 3px; padding: 14px 48px; font-size: 15px; cursor: pointer; margin-top: 22px; transition: opacity 200ms ease;
}
button:hover { opacity: 0.9;
}
p { text-align: center; margin-top: 38px; font-size: 14px;
}
p a { transition: color 200ms ease;
}
p a:hover { color: black;
}
.main-content { width: 300px; margin: 100px auto;
}
.head { margin: 0; padding: 0;
}
.image-container { position: relative;
}
.image-container img { display: block; margin: auto; width: 90px; margin-bottom: 10px;
}
.input { padding: 14px; border: none; border-radius: 3px; box-shadow: 0 0 3px -1px #CCC; display: block; width: 100%; margin-bottom: 18px; outline: none;
}
.remember-me, .forgot { font-size: 14px;
}
.remember-me { float: left;
}
.remember-me input { margin-right: 20px;
}
.forgot { float: right; color: black; transition: color 200ms ease;
}
.forgot:hover { color: #3ABEC3; cursor: pointer;
}
.account a { color: #3ABEC3;
}
.clearfix { clear: both;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="main-content"> <header class="head"> <div class="image-container"> <img src="http://www.ashleephillips.com/wp-content/uploads/2017/01/Screen-Shot-2017-01-18-at-6.02.23-PM.png" alt="" /> </div> <h1>99 pledges</h1> </header> <form action> <input type="Username" name="user" placeholder="Username" class="input" /> <input type="Password" name="pass" placeholder="Password" class="input"/> <span class="remember-me"> <input type="checkbox" id="c1" name="cc" checked="checked" /> <label for="c1"><span></span>Remember me</label> </span> <a href="#" class="forgot">Forgot password</a> <div class="clearfix"></div> <button>Sign in to your account</button> </form> <div class="account"> <p>Don't have an account? <a href="#">Sign up</a></p> </div>
</div> <script src='https://use.fontawesome.com/27ca801b4d.js'></script>
</body>
</html>

99 Pledges Login - Script Codes CSS Codes

* { box-sizing: border-box;
}
body { background: #EFF1F6; font-family: "Open Sans", Helvetica;
}
input, button { font-family: "Open Sans", Helvetica; font-size: 13px;
}
h1 { margin: -5px 0 0 3px; margin-bottom: 48px; padding: 0; text-align: center; font-size: 30px;
}
button { background: #3ABEC3; width: 300px; border: none; color: white; border-radius: 3px; padding: 14px 48px; font-size: 15px; cursor: pointer; margin-top: 22px; transition: opacity 200ms ease;
}
button:hover { opacity: 0.9;
}
p { text-align: center; margin-top: 38px; font-size: 14px;
}
p a { transition: color 200ms ease;
}
p a:hover { color: black;
}
.main-content { width: 300px; margin: 100px auto;
}
.head { margin: 0; padding: 0;
}
.image-container { position: relative;
}
.image-container img { display: block; margin: auto; width: 90px; margin-bottom: 10px;
}
.input { padding: 14px; border: none; border-radius: 3px; box-shadow: 0 0 3px -1px #CCC; display: block; width: 100%; margin-bottom: 18px; outline: none;
}
.remember-me, .forgot { font-size: 14px;
}
.remember-me { float: left;
}
.remember-me input { margin-right: 20px;
}
.forgot { float: right; color: black; transition: color 200ms ease;
}
.forgot:hover { color: #3ABEC3; cursor: pointer;
}
.account a { color: #3ABEC3;
}
.clearfix { clear: both;
}
99 Pledges Login - Script Codes
99 Pledges Login - Script Codes
Home Page Home
Developer Ashlee Phillips
Username smashlee
Uploaded September 15, 2022
Rating 3
Size 3,722 Kb
Views 38,456
Do you need developer help for 99 Pledges 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
Google login form
Javascript practice
Scooped Border
Scream for Ice Cream
Styled Form
Project Euler 01
Script Test
Food Tag
Simple Login
Project Euler 02
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!