<!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>If you're reading this, you must have heard the buzz about ChatGPT and its incredible…
How to Use ChatGPT in Cybersecurity If you're a cybersecurity geek, you've probably heard about…
Introduction In the dynamic world of cryptocurrencies, staying informed about the latest market trends is…
The Events Calendar Widgets for Elementor has become easiest solution for managing events on WordPress…
Introduction The "Story Timeline" is a versatile plugin that offers an innovative way to present…
Introduction In today's globalized world, catering to diverse audiences is very important. However, the process…
