Tweet
Share
Post
<!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" />
<link rel="stylesheet" href="./css/main.css" />
<link rel="stylesheet" href="https://zaferinci.com.tr/workspace/reset.css" />
<title>Login</title>
</head>
<body>
<nav class="top-menu">
<ul>
<li>
<a href="#"> Home </a>
</li>
<li>
<a href="#"> About </a>
</li>
<li>
<a href="#"> Blog </a>
</li>
<li>
<a href="#"> Pages </a>
</li>
<li>
<a href="#"> Contact </a>
</li>
</ul>
<span class="language">
English
<svg
width="10"
height="6"
viewBox="0 0 10 6"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683418 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976306 1.31658 -0.0976305 0.683418 0.292893 0.292893Z"
fill="#9CA3AF"
/>
</svg>
</span>
<span class="sign-in">Sign in</span>
<span class="register">Register</span>
</nav>
<main>
<div class="left">
<h2>
Sign In to<br />
Recharge Direct
</h2>
<span
>if you dont an account<br />
you can <a href="#">Register here!</a></span
>
<div class="glow">
<div class="ellipse"></div>
<div class="ellipse"></div>
</div>
</div>
<div class="right">
<form>
<div class="e-mail">
<input type="text" placeholder="Enter Email" />
<svg
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="17.5"
height="17.5"
rx="8.75"
stroke="#667085"
/>
<path
d="M11.7946 7.00214L7.00256 11.7941"
stroke="#667085"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M11.796 11.797L7 7"
stroke="#667085"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</div>
<div class="password">
<input type="password" placeholder="••••••••" />
<svg
width="21"
height="17"
viewBox="0 0 21 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10.5114 11.0663C8.98465 11.0663 7.74624 9.82856 7.74624 8.30111C7.74624 7.52721 8.06306 6.82955 8.57541 6.32693C8.76563 6.14031 8.76856 5.83483 8.58194 5.6446C8.39533 5.45438 8.08984 5.45145 7.89962 5.63807C7.21011 6.31449 6.78125 7.25732 6.78125 8.30111C6.78125 10.3617 8.45186 12.0312 10.5114 12.0312C11.5542 12.0312 12.498 11.6024 13.1744 10.9129C13.361 10.7227 13.3581 10.4172 13.1679 10.2306C12.9777 10.0439 12.6722 10.0469 12.4856 10.2371C11.983 10.7494 11.2845 11.0663 10.5114 11.0663Z"
fill="#677185"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M2.86113 12.2958C4.41187 14.2002 6.87407 16.1562 10.4278 16.1562C12.838 16.1562 14.7565 15.2541 16.2279 14.0769C16.4338 13.9122 16.4662 13.6131 16.3003 13.4087C16.1344 13.2044 15.833 13.1723 15.6272 13.3369C14.2908 14.406 12.5783 15.2059 10.4278 15.2059C7.27031 15.2059 5.05482 13.478 3.60568 11.6984C2.88217 10.8099 2.35932 9.91906 2.01741 9.24956C1.84675 8.91538 1.72195 8.63788 1.64038 8.44546C1.62008 8.39758 1.60248 8.35501 1.58752 8.31817C1.62404 8.23283 1.67542 8.11661 1.74195 7.97494C1.89472 7.64965 2.12678 7.1915 2.44151 6.66599C3.07304 5.61151 4.02699 4.30344 5.32593 3.24933C5.53061 3.08323 5.56089 2.78387 5.39356 2.58069C5.22623 2.37751 4.92466 2.34745 4.71998 2.51355C3.30516 3.66169 2.28386 5.06949 1.61858 6.18033C1.2849 6.73747 1.03816 7.22433 0.874227 7.57339C0.792211 7.74803 0.730778 7.88848 0.68943 7.98637C0.668752 8.03532 0.653086 8.07366 0.642369 8.10032C0.637011 8.11366 0.632888 8.12408 0.629995 8.13146L0.626575 8.14023L0.625554 8.14287L0.625215 8.14375L0.625089 8.14408C0.625037 8.14421 0.624991 8.14433 1.07244 8.31319C0.621509 8.47265 0.621582 8.47285 0.621665 8.47308L0.621883 8.47369L0.622503 8.4754L0.62448 8.48083C0.626128 8.48533 0.628434 8.49158 0.631405 8.49953C0.637347 8.51544 0.645948 8.53814 0.657254 8.56719C0.679864 8.62528 0.713309 8.70879 0.757949 8.81409C0.847195 9.0246 0.981397 9.32272 1.16349 9.67927C1.52708 10.3912 2.08471 11.3424 2.86113 12.2958ZM1.07244 8.31319L0.621509 8.47265C0.583335 8.36627 0.584569 8.24989 0.624991 8.14433L1.07244 8.31319Z"
fill="#677185"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M16.8437 12.599C17.0391 12.772 17.3392 12.7556 17.5141 12.5624C18.4324 11.5478 19.0912 10.4913 19.5202 9.6906C19.7352 9.2895 19.8935 8.95058 19.9987 8.71036C20.0513 8.59019 20.0907 8.49457 20.1172 8.42803C20.1305 8.39476 20.1406 8.36874 20.1476 8.35055C20.1511 8.34146 20.1538 8.33432 20.1557 8.3292L20.158 8.32306L20.1587 8.32114L20.1589 8.32048L20.159 8.32022C20.1591 8.32011 20.1591 8.32001 19.7128 8.15998C20.1566 7.99323 20.1565 7.99304 20.1564 7.99282L20.1555 7.99058L20.1535 7.98526C20.1517 7.98084 20.1493 7.97466 20.1462 7.9668C20.1399 7.95107 20.1308 7.92856 20.1189 7.89973C20.0951 7.84208 20.0599 7.7591 20.0131 7.65441C19.9195 7.44509 19.7795 7.14851 19.5911 6.79371C19.2149 6.08521 18.6431 5.13866 17.8603 4.18977C16.2995 2.29764 13.853 0.34375 10.4131 0.34375C8.86164 0.34375 7.50706 0.743134 6.34492 1.35717C6.11365 1.47936 6.02631 1.76388 6.14983 1.99266C6.27336 2.22143 6.56097 2.30784 6.79224 2.18564C7.83116 1.63672 9.03325 1.283 10.4131 1.283C13.4521 1.283 15.6554 3.00241 17.1247 4.78359C17.857 5.67135 18.3953 6.56145 18.7505 7.23045C18.9278 7.56439 19.0587 7.84176 19.1447 8.03421C19.1665 8.08293 19.1854 8.12618 19.2014 8.16349C19.1814 8.21177 19.1568 8.26996 19.1274 8.33705C19.0308 8.55775 18.8831 8.87417 18.6813 9.25072C18.277 10.0054 17.6596 10.9934 16.8067 11.9359C16.6318 12.1291 16.6484 12.426 16.8437 12.599ZM19.7128 8.15998L20.1566 7.99323C20.1969 8.09835 20.1978 8.2143 20.1591 8.32001L19.7128 8.15998Z"
fill="#677185"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.4279 9.2744C13.6747 9.31914 13.9085 9.13993 13.95 8.87411C13.9819 8.67029 14 8.45944 14 8.24201C14 6.15868 12.4318 4.46875 10.4963 4.46875C10.2944 4.46875 10.0986 4.48825 9.90931 4.52255C9.66248 4.56729 9.49606 4.81905 9.53761 5.08487C9.57915 5.35069 9.81293 5.5299 10.0598 5.48516C10.2034 5.45913 10.3488 5.4449 10.4963 5.4449C11.931 5.4449 13.0936 6.69762 13.0936 8.24201C13.0936 8.40085 13.0804 8.55739 13.0562 8.71209C13.0146 8.9779 13.1811 9.22966 13.4279 9.2744Z"
fill="#677185"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.78125 8.30111C6.78125 10.3616 8.4509 12.0312 10.5114 12.0312C11.5552 12.0312 12.498 11.6024 13.1744 10.9129C13.361 10.7227 13.3581 10.4172 13.1679 10.2306C12.9777 10.0439 12.6722 10.0469 12.4856 10.2371C11.983 10.7494 11.2853 11.0663 10.5114 11.0663C8.98385 11.0663 7.74624 9.82865 7.74624 8.30111C7.74624 7.52802 8.06311 6.8295 8.57541 6.32693C8.76563 6.14031 8.76855 5.83483 8.58194 5.6446C8.39533 5.45438 8.08984 5.45145 7.89962 5.63807C7.21006 6.31454 6.78125 7.25827 6.78125 8.30111Z"
fill="#677185"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M18.6749 16.3624C18.8584 16.1789 18.8584 15.8814 18.6749 15.6978L3.11465 0.137629C2.93115 -0.0458755 2.63363 -0.0458755 2.45013 0.137629C2.26662 0.321131 2.26662 0.618649 2.45013 0.802153L18.0103 16.3624C18.1939 16.5459 18.4914 16.5459 18.6749 16.3624Z"
fill="#677185"
/>
</svg>
</div>
<span>Recover Password?</span>
<button>Sign In</button>
<h5>Or continue with</h5>
<div class="login-width">
<a href="#">
<svg
width="28"
height="28"
viewBox="0 0 28 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M27.44 14.3182C27.44 13.3254 27.3509 12.3709 27.1855 11.4545H14V16.87H21.5345C21.21 18.62 20.2236 20.1027 18.7409 21.0954V24.6082H23.2655C25.9127 22.1709 27.44 18.5818 27.44 14.3182Z"
fill="#4285F4"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.0001 28C17.7801 28 20.9491 26.7463 23.2655 24.6082L18.741 21.0954C17.4873 21.9354 15.8837 22.4318 14.0001 22.4318C10.3537 22.4318 7.26732 19.9691 6.16641 16.66H1.48914V20.2872C3.79277 24.8627 8.52732 28 14.0001 28Z"
fill="#34A853"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M6.16637 16.66C5.88637 15.82 5.72727 14.9227 5.72727 14C5.72727 13.0773 5.88637 12.18 6.16637 11.34V7.71271H1.48909C0.540909 9.60271 0 11.7409 0 14C0 16.2591 0.540909 18.3973 1.48909 20.2873L6.16637 16.66Z"
fill="#FBBC05"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14.0001 5.56818C16.0555 5.56818 17.901 6.27455 19.3519 7.66182L23.3673 3.64637C20.9428 1.38727 17.7737 0 14.0001 0C8.52732 0 3.79277 3.13727 1.48914 7.71273L6.16641 11.34C7.26732 8.03091 10.3537 5.56818 14.0001 5.56818Z"
fill="#EA4335"
/>
</svg>
</a>
<a href="#">
<svg
width="23"
height="28"
viewBox="0 0 23 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.8414 6.46154C13.1172 6.46154 14.7164 5.60712 15.6687 4.4679C16.5312 3.43547 17.1602 1.99364 17.1602 0.551812C17.1602 0.356008 17.1422 0.160203 17.1062 0C15.6867 0.0534012 13.9797 0.943421 12.9555 2.13605C12.1469 3.04387 11.4102 4.4679 11.4102 5.92753C11.4102 6.14113 11.4461 6.35474 11.4641 6.42594C11.5539 6.44374 11.6977 6.46154 11.8414 6.46154ZM7.34922 28C9.09219 28 9.86484 26.843 12.0391 26.843C14.2492 26.843 14.7344 27.9644 16.675 27.9644C18.5797 27.9644 19.8555 26.22 21.0594 24.5111C22.407 22.5531 22.9641 20.6306 23 20.5416C22.8742 20.506 19.2266 19.0286 19.2266 14.8811C19.2266 11.2854 22.1016 9.66561 22.2633 9.541C20.3586 6.83535 17.4656 6.76414 16.675 6.76414C14.5367 6.76414 12.7937 8.04577 11.6977 8.04577C10.5117 8.04577 8.94844 6.83535 7.09766 6.83535C3.57578 6.83535 0 9.71901 0 15.1659C0 18.548 1.32969 22.1259 2.96484 24.4399C4.36641 26.398 5.58828 28 7.34922 28Z"
fill="#000100"
/>
</svg>
</a>
<a href="#">
<svg
width="29"
height="28"
viewBox="0 0 29 28"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M28.0061 14.0856C28.0061 6.30631 21.7367 0 14.003 0C6.26936 0 0 6.30631 0 14.0856C0 21.1161 5.1207 26.9433 11.8151 28V18.1572H8.2596V14.0856H11.8151V10.9823C11.8151 7.45214 13.9056 5.50217 17.1042 5.50217C18.6363 5.50217 20.2388 5.77728 20.2388 5.77728V9.24365H18.473C16.7335 9.24365 16.191 10.3294 16.191 11.4433V14.0856H20.0747L19.4538 18.1572H16.191V28C22.8853 26.9433 28.0061 21.1161 28.0061 14.0856Z"
fill="#1778F2"
/>
</svg>
</a>
</div>
</form>
</div>
</main>
</body>
</html>
* {
padding: 0;
margin: 0;
list-style: none;
border: none;
outline: 0;
-webkit-overflow-scrolling: touch;
text-decoration: none;
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scrollbar-width: auto;
scrollbar-color: #ccc #fff;
-webkit-tap-highlight-color: transparent;
}
*::-webkit-scrollbar {
width: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: #ccc;
border: 4px solid transparent;
}
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
background: #f6f6f6;
background-image: url("../img/falling-man.png");
background-repeat: no-repeat;
background-position: center;
background-size: 450px;
padding: 68px 150px;
}
body,
input,
textarea,
select,
button {
font-family: "Gilroy";
}
@mixin no-select {
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.top-menu {
display: flex;
ul {
display: flex;
align-items: center;
li {
a {
z-index: 999999;
cursor: pointer;
font-size: 17px;
font-weight: medium;
color: #000;
margin-right: 54px;
}
}
}
span {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 17px;
font-weight: bold;
color: #3957f0;
svg {
margin-left: 5px;
}
margin: 0 38px 0 0;
&:last-child {
background: #fff;
border-radius: 21px;
padding: 12px 21px;
margin: 0;
box-shadow: 0px 5px 6px 0px rgba(#000, 0.1);
}
&:nth-child(3) {
position: relative;
&:hover::before {
width: 90%;
transition: 300ms all;
}
&::before {
content: "";
position: absolute;
width: 50%;
height: 3px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
transition: 300ms all;
border-radius: 4px;
background: #4461f2;
}
}
}
.language {
font-weight: medium;
color: #000;
margin-left: auto;
}
}
main {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
.left,
.right {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.left {
position: relative;
flex: 1;
z-index: -1;
margin-top: -130px;
h2 {
font-size: 58px;
font-weight: bold;
margin-bottom: 60px;
}
span {
padding: 0 0 0 5px;
font-size: 17px;
font-weight: 500;
a {
font-weight: 600;
color: #4461f2;
}
}
.glow {
display: flex;
flex-direction: column-reverse;
justify-content: center;
width: 300px;
height: 500px;
position: absolute;
z-index: -1;
opacity: 0.75;
.ellipse {
&:first-child {
background: #4461f2;
filter: blur(100px);
width: 150px;
height: 150px;
margin-left: auto;
}
&:last-child {
background: #dda82a;
filter: blur(100px);
width: 150px;
height: 150px;
}
}
}
}
.right {
width: 400px;
form {
display: flex;
flex-direction: column;
width: 100%;
.e-mail,
.password {
position: relative;
width: 100%;
input {
width: 100%;
border-radius: 10px;
background: #eaf0f7;
font-size: 17px;
font-weight: 500;
padding: 12px 20px;
margin-bottom: 12px;
}
svg {
position: absolute;
top: calc(50% - 6px);
transform: translateY(-50%);
right: 15px;
cursor: pointer;
}
}
.password {
input {
font-family: "Inter", sans-serif;
font-size: 18px;
}
}
span {
margin-left: auto;
margin-bottom: 32px;
color: #c7c7c7;
cursor: pointer;
font-weight: 400;
}
button {
background: #4461f2;
color: #fff;
font-size: 17px;
font-weight: bold;
border-radius: 10px;
width: 100%;
height: 45px;
cursor: pointer;
margin-bottom: 60px;
}
h5 {
position: relative;
text-align: center;
color: #acadac;
font-size: 16px;
font-weight: 400;
margin-bottom: 55px;
&::before,
&::after {
content: "";
position: absolute;
width: 30%;
height: 1px;
top: 50%;
transform: translateY(-50%);
background: #dfdfdf;
}
&::before {
left: 0;
}
&::after {
right: 0;
}
}
.login-width {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
a {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: calc(100% / 3 - 12px);
border-radius: 10px;
border: 1px solid #dddfdd;
transition: 300ms all;
@include no-select();
svg {
width: 24px;
height: 24px;
}
&:hover {
background: #fff;
transition: 300ms all;
}
}
}
}
}
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Heavy.woff2") format("woff2"),
url("../font/Gilroy-Heavy.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-HeavyItalic.woff2") format("woff2"),
url("../font/Gilroy-HeavyItalic.woff") format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Light.woff2") format("woff2"),
url("../font/Gilroy-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-ExtraBold.woff2") format("woff2"),
url("../font/Gilroy-ExtraBold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-ExtraBoldItalic.woff2") format("woff2"),
url("../font/Gilroy-ExtraBoldItalic.woff") format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-MediumItalic.woff2") format("woff2"),
url("../font/Gilroy-MediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Regular.woff2") format("woff2"),
url("../font/Gilroy-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-LightItalic.woff2") format("woff2"),
url("../font/Gilroy-LightItalic.woff") format("woff");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Medium.woff2") format("woff2"),
url("../font/Gilroy-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-UltraLightItalic.woff2") format("woff2"),
url("../font/Gilroy-UltraLightItalic.woff") format("woff");
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy-RegularItalic";
src: url("../font/Gilroy-RegularItalic.woff2") format("woff2"),
url("../font/Gilroy-RegularItalic.woff") format("woff");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Thin.woff2") format("woff2"),
url("../font/Gilroy-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-SemiBold.woff2") format("woff2"),
url("../font/Gilroy-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("Gilroy-UltraLight.woff2") format("woff2"),
url("Gilroy-UltraLight.woff") format("woff");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("Gilroy-SemiBoldItalic.woff2") format("woff2"),
url("Gilroy-SemiBoldItalic.woff") format("woff");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-ThinItalic.woff2") format("woff2"),
url("../font/Gilroy-ThinItalic.woff") format("woff");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("Gilroy-BoldItalic.woff2") format("woff2"),
url("Gilroy-BoldItalic.woff") format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("Gilroy-BlackItalic.woff2") format("woff2"),
url("Gilroy-BlackItalic.woff") format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Black.woff2") format("woff2"),
url("../font/Gilroy-Black.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Bold.woff2") format("woff2"),
url("../font/Gilroy-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap");
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
background: #f6f6f6;
background-image: url("../img/falling-man.png");
background-repeat: no-repeat;
background-position: center;
background-size: 450px;
padding: 68px 150px;
}
body,
input,
textarea,
select,
button {
font-family: "Gilroy";
}
.top-menu {
display: flex;
}
.top-menu ul {
display: flex;
align-items: center;
}
.top-menu ul li a {
z-index: 999999;
cursor: pointer;
font-size: 17px;
font-weight: medium;
color: #000;
margin-right: 54px;
}
.top-menu span {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 17px;
font-weight: bold;
color: #3957f0;
margin: 0 38px 0 0;
}
.top-menu span svg {
margin-left: 5px;
}
.top-menu span:last-child {
background: #fff;
border-radius: 21px;
padding: 12px 21px;
margin: 0;
box-shadow: 0px 5px 6px 0px rgba(0, 0, 0, 0.1);
}
.top-menu span:nth-child(3) {
position: relative;
}
.top-menu span:nth-child(3):hover::before {
width: 90%;
transition: 300ms all;
}
.top-menu span:nth-child(3)::before {
content: "";
position: absolute;
width: 50%;
height: 3px;
left: 50%;
bottom: 0;
transform: translateX(-50%);
transition: 300ms all;
border-radius: 4px;
background: #4461f2;
}
.top-menu .language {
font-weight: medium;
color: #000;
margin-left: auto;
}
main {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
}
main .left,
main .right {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
main .left {
position: relative;
flex: 1;
z-index: -1;
margin-top: -130px;
}
main .left h2 {
font-size: 58px;
font-weight: bold;
margin-bottom: 60px;
}
main .left span {
padding: 0 0 0 5px;
font-size: 17px;
font-weight: 500;
}
main .left span a {
font-weight: 600;
color: #4461f2;
}
main .left .glow {
display: flex;
flex-direction: column-reverse;
justify-content: center;
width: 300px;
height: 500px;
position: absolute;
z-index: -1;
opacity: 0.75;
}
main .left .glow .ellipse:first-child {
background: #4461f2;
filter: blur(100px);
width: 150px;
height: 150px;
margin-left: auto;
}
main .left .glow .ellipse:last-child {
background: #dda82a;
filter: blur(100px);
width: 150px;
height: 150px;
}
main .right {
width: 400px;
}
main .right form {
display: flex;
flex-direction: column;
width: 100%;
}
main .right form .e-mail,
main .right form .password {
position: relative;
width: 100%;
}
main .right form .e-mail input,
main .right form .password input {
width: 100%;
border-radius: 10px;
background: #eaf0f7;
font-size: 17px;
font-weight: 500;
padding: 12px 20px;
margin-bottom: 12px;
}
main .right form .e-mail svg,
main .right form .password svg {
position: absolute;
top: calc(50% - 6px);
transform: translateY(-50%);
right: 15px;
cursor: pointer;
}
main .right form .password input {
font-family: "Inter", sans-serif;
font-size: 18px;
}
main .right form span {
margin-left: auto;
margin-bottom: 32px;
color: #c7c7c7;
cursor: pointer;
font-weight: 400;
}
main .right form button {
background: #4461f2;
color: #fff;
font-size: 17px;
font-weight: bold;
border-radius: 10px;
width: 100%;
height: 45px;
cursor: pointer;
margin-bottom: 60px;
}
main .right form h5 {
position: relative;
text-align: center;
color: #acadac;
font-size: 16px;
font-weight: 400;
margin-bottom: 55px;
}
main .right form h5::before,
main .right form h5::after {
content: "";
position: absolute;
width: 30%;
height: 1px;
top: 50%;
transform: translateY(-50%);
background: #dfdfdf;
}
main .right form h5::before {
left: 0;
}
main .right form h5::after {
right: 0;
}
main .right form .login-width {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
main .right form .login-width a {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: calc(100% / 3 - 12px);
border-radius: 10px;
border: 1px solid #dddfdd;
transition: 300ms all;
-webkit-user-drag: none;
user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
main .right form .login-width a svg {
width: 24px;
height: 24px;
}
main .right form .login-width a:hover {
background: #fff;
transition: 300ms all;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Heavy.woff2") format("woff2"),
url("../font/Gilroy-Heavy.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-HeavyItalic.woff2") format("woff2"),
url("../font/Gilroy-HeavyItalic.woff") format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Light.woff2") format("woff2"),
url("../font/Gilroy-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-ExtraBold.woff2") format("woff2"),
url("../font/Gilroy-ExtraBold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-ExtraBoldItalic.woff2") format("woff2"),
url("../font/Gilroy-ExtraBoldItalic.woff") format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-MediumItalic.woff2") format("woff2"),
url("../font/Gilroy-MediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Regular.woff2") format("woff2"),
url("../font/Gilroy-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-LightItalic.woff2") format("woff2"),
url("../font/Gilroy-LightItalic.woff") format("woff");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Medium.woff2") format("woff2"),
url("../font/Gilroy-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-UltraLightItalic.woff2") format("woff2"),
url("../font/Gilroy-UltraLightItalic.woff") format("woff");
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy-RegularItalic";
src: url("../font/Gilroy-RegularItalic.woff2") format("woff2"),
url("../font/Gilroy-RegularItalic.woff") format("woff");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Thin.woff2") format("woff2"),
url("../font/Gilroy-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-SemiBold.woff2") format("woff2"),
url("../font/Gilroy-SemiBold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("Gilroy-UltraLight.woff2") format("woff2"),
url("Gilroy-UltraLight.woff") format("woff");
font-weight: 200;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("Gilroy-SemiBoldItalic.woff2") format("woff2"),
url("Gilroy-SemiBoldItalic.woff") format("woff");
font-weight: 600;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-ThinItalic.woff2") format("woff2"),
url("../font/Gilroy-ThinItalic.woff") format("woff");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("Gilroy-BoldItalic.woff2") format("woff2"),
url("Gilroy-BoldItalic.woff") format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("Gilroy-BlackItalic.woff2") format("woff2"),
url("Gilroy-BlackItalic.woff") format("woff");
font-weight: 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Black.woff2") format("woff2"),
url("../font/Gilroy-Black.woff") format("woff");
font-weight: 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Gilroy";
src: url("../font/Gilroy-Bold.woff2") format("woff2"),
url("../font/Gilroy-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}