index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style>
*,
*:after,
*:before {
box-sizing: border-box;
}
:root {
--primary-text-color: #043959;
--primary-color: #3071cd;
--secondary-color: #2e69cb;
}
:focus {
outline: 0.125rem solid var(--primary-color);
outline-offset: 0.125rem;
}
body {
font-family: "Inter", sans-serif;
color: var(--primary-text-color);
line-height: 1.5;
font-size: 1em;
}
input,
button {
font: inherit;
border-radius: 0;
border: 0;
background-color: transparent;
box-shadow: none;
}
.container {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-image: linear-gradient(135deg, #52e5e7 5%, #130cb7 100%);
}
.panel {
background-color: #fff;
max-width: 34rem;
display: flex;
flex-direction: column;
padding: 4rem 3rem;
border-radius: 0.5rem;
box-shadow: 0.75rem 0.75rem 1.75rem 0 rgba(0, 0, 0, .25);
}
.panel-header {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.panel-header-logo {
width: 5rem;
height: 5rem;
}
.panel-header-logo svg {
max-width: 100%;
max-height: 100%;
}
.panel-header-title {
margin-top: 1.5rem;
font-size: 1.75rem;
font-weight: 700;
}
.panel-header-info {
margin-top: 1rem;
text-align: center;
}
.link {
text-decoration: none;
color: var(--primary-color);
border-bottom: 0.0625rem solid;
}
.link:hover {
color: var(--secondary-color);
}
.form {
margin-top: 2rem;
display: flex;
flex-direction: column;
}
.input {
display: flex;
flex-direction: column;
}
.input+.input {
margin-top: 1.5rem;
}
.input-label {
font-weight: 600;
}
.input-field {
margin-top: 0.25rem;
border: 0.0625rem solid #999;
}
.input-submit {
padding: 1rem;
background-color: var(--primary-color);
color: #fff;
}
.input-submit:hover {
background-color: var(--secondary-color);
}
.input-field,
.input-submit {
padding: 0.5rem 0.75rem;
min-height: 3rem;
}
.panel-footer {
display: flex;
justify-content: center;
margin-top: 1.5rem;
}
.panel-footer-info {
text-align: center;
}
</style>
<body>
<div class="container">
<div class="panel">
<div class="panel-header">
<div class="panel-header-logo">
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg"
fill-rule="evenodd" xml:space="preserve" height="500" width="500" version="1.0"
viewBox="0 0 5.5555557 5.5555555">
<g transform="matrix(1.0755 0 0 1.0755 -3.5103 -1.6684)">
<path fill="#3071cd"
d="m5.8465 1.9131c0.57932 0 1.1068 0.222 1.5022 0.58547-0.1938-0.0052-0.3872 0.11-0.3952 0.3738-0.0163 0.5333 0.6377 0.6469 0.2853 1.7196l-0.2915 0.8873-0.7939-2.3386c-0.0123-0.0362 0.002-0.0568 0.0465-0.0568h0.22445c0.011665 0 0.021201-0.00996 0.021201-0.022158v-0.13294c0-0.012193-0.00956-0.022657-0.021201-0.022153-0.42505 0.018587-0.8476 0.018713-1.2676 0-0.0117-0.0005-0.0212 0.01-0.0212 0.0222v0.13294c0 0.012185 0.00954 0.022158 0.021201 0.022158h0.22568c0.050201 0 0.064256 0.016728 0.076091 0.049087l0.3262 0.8921-0.4907 1.4817-0.8066-2.3758c-0.01-0.0298 0.0021-0.0471 0.0308-0.0471h0.25715c0.011661 0 0.021197-0.00996 0.021197-0.022158v-0.13294c0-0.012193-0.00957-0.022764-0.021197-0.022153-0.2698 0.014331-0.54063 0.017213-0.79291 0.019803 0.39589-0.60984 1.0828-1.0134 1.8639-1.0134l-0.0000029-0.0000062zm1.9532 1.1633c0.17065 0.31441 0.26755 0.67464 0.26755 1.0574 0 0.84005-0.46675 1.5712-1.1549 1.9486l0.6926-1.9617c0.1073-0.3036 0.2069-0.7139 0.1947-1.0443h-0.000004zm-1.2097 3.1504c-0.2325 0.0827-0.4827 0.1278-0.7435 0.1278-0.2247 0-0.4415-0.0335-0.6459-0.0955l0.68415-1.9606 0.70524 1.9284v-1e-7zm-1.6938-0.0854c-0.75101-0.35617-1.2705-1.1213-1.2705-2.0075 0-0.32852 0.071465-0.64038 0.19955-0.92096l1.071 2.9285 0.000003-0.000003zm0.95023-4.4367c1.3413 0 2.4291 1.0878 2.4291 2.4291s-1.0878 2.4291-2.4291 2.4291-2.4291-1.0878-2.4291-2.4291 1.0878-2.4291 2.4291-2.4291zm0-0.15354c1.4261 0 2.5827 1.1566 2.5827 2.5827s-1.1566 2.5827-2.5827 2.5827-2.5827-1.1566-2.5827-2.5827 1.1566-2.5827 2.5827-2.5827z" />
</g>
</svg>
</div>
<h1 class="panel-header-title">Sign in
<h1 />
<p class="panel-header-info">Don't have a WordPress account? <a href="#" class="link">Create an
account</a></p>
</div>
<form class="form" action="javascript:void(0);">
<div class="input">
<label class="input-label">E-mail</label>
<input type="email" class="input-field" />
</div>
<div class="input">
<label class="input-label">Password</label>
<input type="password" class="input-field" />
</div>
<div class="input">
<button class="input-submit">Sign in</button>
</div>
</form>
<div class="panel-footer">
<p class="panel-footer-info">Forgot your username or password? <a href="#" class="link">Restore
account</a></p>
</div>
</div>
</div>
</body>
</html>Screenshot of WordPress Admin Login Page Clone in HTML5 & CSS3
WordPress Admin Login Page Clone in HTML5 & CSS3
