پیشنمایش زنده
کد HTML
<div class="container">
<form class="SignInForms">
<div class="font header">Sign in with existing account</div>
<input type="email" class="Input" placeholder="Email address or Username" />
<input type="password" class="Input" placeholder="Password" />
<div class="Buttons">
<button class="SignInUp">Sign in</button>
<button class="ForgotPassword">Forgot password?</button>
</div>
<div class="font header OtherSignInLabel">Or sign in with:</div>
<div class="SignInWith">
<a href="#" class="SignInWithGoogle">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 533.5 544.3"
class="GoogleLogo"
>
<path
fill="#4285f4"
d="M533.5 278.4c0-18.5-1.5-37.1-4.7-55.3H272.1v104.8h147c-6.1 33.8-25.7 63.7-54.4 82.7v68h87.7c51.5-47.4 81.1-117.4 81.1-200.2z"
></path>
<path
fill="#34a853"
d="M272.1 544.3c73.4 0 135.3-24.1 180.4-65.7l-87.7-68c-24.4 16.6-55.9 26-92.6 26-71 0-131.2-47.9-152.8-112.3H28.9v70.1c46.2 91.9 140.3 149.9 243.2 149.9z"
></path>
<path
fill="#fbbc04"
d="M119.3 324.3c-11.4-33.8-11.4-70.4 0-104.2V150H28.9c-38.6 76.9-38.6 167.5 0 244.4l90.4-70.1z"
></path>
<path
fill="#ea4335"
d="M272.1 107.7c38.8-.6 76.3 14 104.4 40.8l77.7-77.7C405 24.6 339.7-.8 272.1 0 169.2 0 75.1 58 28.9 150l90.4 70.1c21.5-64.5 81.8-112.4 152.8-112.4z"
></path>
</svg>
<div>Google</div>
</a>
<div class="SignInWithLogo">
<a href="#">
<svg
viewBox="0 0 24 24"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
></path>
</svg>
</a>
<div class="Bar"></div>
</div>
<div class="SignInWithLogo">
<a href="#">
<svg
fill-rule="evenodd"
viewBox="0 0 64 64"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path fill="#e24329" d="M32 61.477L43.784 25.2H20.216z"></path>
<path fill="#fc6d26" d="M32 61.477L20.216 25.2H3.7z"></path>
<path
fill="#fca326"
d="M3.7 25.2L.12 36.23a2.44 2.44 0 0 0 .886 2.728L32 61.477z"
></path>
<path
fill="#e24329"
d="M3.7 25.2h16.515L13.118 3.366c-.365-1.124-1.955-1.124-2.32 0z"
></path>
<path fill="#fc6d26" d="M32 61.477L43.784 25.2H60.3z"></path>
<path
fill="#fca326"
d="M60.3 25.2l3.58 11.02a2.44 2.44 0 0 1-.886 2.728L32 61.477z"
></path>
<path
fill="#e24329"
d="M60.3 25.2H43.784l7.098-21.844c.365-1.124 1.955-1.124 2.32 0z"
></path>
</svg>
</a>
<div class="Bar"></div>
</div>
<div class="SignInWithLogo">
<a href="#">
<svg
fill="none"
viewBox="4 4 24 24"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="#2684FF"
d="M4.77044 5C4.29089 5 3.93123 5.43959 4.01115 5.87918L7.24814 25.7007C7.32806 26.2203 7.76766 26.5799 8.28717 26.5799H23.9526C24.3123 26.5799 24.632 26.3002 24.7119 25.9405L27.9888 5.91915C28.0688 5.43959 27.7091 5.03997 27.2296 5.03997L4.77044 5ZM18.5177 19.3067H13.5223L12.2035 12.2333H19.7565L18.5177 19.3067Z"
></path>
<path
fill="url(#paint0_linear)"
d="M26.9098 12.2333H19.7165L18.5176 19.3067H13.5222L7.64771 26.3002C7.64771 26.3002 7.92744 26.54 8.32707 26.54H23.9925C24.3522 26.54 24.6719 26.2602 24.7518 25.9005L26.9098 12.2333Z"
></path>
<defs>
<linearGradient
gradientUnits="userSpaceOnUse"
y2="23.5316"
x2="16.672"
y1="14.2265"
x1="28.5925"
id="paint0_linear"
>
<stop stop-color="#0052CC" offset="0.176"></stop>
<stop stop-color="#2684FF" offset="1"></stop>
</linearGradient>
</defs>
</svg>
</a>
<div class="Bar"></div>
</div>
</div>
</form>
<div class="NoAcc">
<form class="NoAccForms">
<div class="font header">Not registerd yet?</div>
<div class="font h3">Create JetBrains Account</div>
<input type="email" class="Input" placeholder="Your email address" />
<button class="SignInUp">Sign Up</button>
</form>
</div>
</div>
کد CSS
.font {
font-family:
JetBrains Sans,
Inter,
system-ui,
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Droid Sans,
Helvetica Neue,
Arial,
sans-serif;
}
form {
padding: 1.5em 1em;
}
.SignInForms {
background-color: rgb(245, 245, 245);
width: 22.375em;
height: 20.313em;
}
.header {
color: rgb(75, 75, 75);
font-size: 0.938em;
font-weight: 640;
margin: 0 0 0.875em 0;
display: block;
}
.Buttons {
padding: 0 0 1em;
border-bottom: solid #d2d0d0 0.063em;
margin-bottom: 1.188em;
}
.SignInUp {
cursor: pointer;
color: #ffffff;
background-color: #00a6fd;
border: none;
width: 6.875em;
padding: 0.5em 1.25em;
font-size: 0.875em;
line-height: 1.65;
border-radius: 1.25em;
touch-action: manipulation;
margin: 0 0.625em 0 0;
}
.ForgotPassword {
cursor: pointer;
color: #4c9dd0;
padding: 0.5em 0;
border: none;
text-decoration: none;
background-color: transparent;
font-size: 0.875em;
}
.ForgotPassword:hover {
text-decoration: underline;
background-color: transparent;
}
.Input {
padding: 0.25em;
vertical-align: middle;
width: 100%;
margin: 0 0 1em 0;
color: #4b4b4b;
height: 2.5em;
border: 1px solid #d9d9d9;
}
.Input:focus {
outline: none;
border-color: #00a6fd;
}
.SignInForms:focus-within,
.NoAcc:focus-within {
-webkit-box-shadow: 0 0 6px 3px #caedff;
box-shadow: 0 0 6px 3px #caedff;
outline: 1px solid #97dbff;
}
.SignInUp:hover {
background-color: #008bd4;
border: #00a6fd;
}
.OtherSignInLabel {
margin-bottom: 0.688em;
}
.SignInWith {
display: flex;
align-items: center;
}
.GoogleLogo {
height: 1.25em;
width: 1.25em;
margin: 0 0.875em;
}
.SignInWithGoogle {
min-width: 8.5em;
height: 3em;
text-decoration: none;
color: #4b4b4b;
display: flex;
margin-right: 1.75em;
align-items: center;
position: relative;
box-shadow:
0 0 0.063em rgb(0 0 0 / 10%),
0 0.063em 0.063em #b7b7b7;
background: #ffffff;
border-radius: 0.125em;
user-select: none;
font-size: 0.813em;
}
.SignInWithLogo {
display: block;
margin-right: 1.75em;
position: relative;
}
.SignInWithLogo:hover .Bar {
transition: ease-in-out 0.5s;
opacity: 1;
}
.h3 {
display: block;
font-size: 1.17em;
font-weight: 600;
margin-bottom: 1em;
}
.Bar {
background-color: #b7b6b6;
bottom: -0.238em;
left: -0.25em;
position: relative;
height: 0.094em;
transition: ease-in-out 0.5s;
opacity: 0;
width: 2em;
border-radius: 6.25em;
}
.NoAcc {
top: 1em;
width: 22.375em;
height: 12.7em;
padding: 1.188em;
background-color: rgb(245, 245, 245);
position: relative;
}
.NoAccForms {
padding: 0;
}
.container {
display: flex;
flex-direction: column;
}