仿写LeetCode登录名片（仅用于学习）
作者：
福心
,
2023-07-10 16:50:11
,
所有人可见
,
阅读 131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/leetcode.css">
</head>
<body style="margin: 0;">
<div class="background">
<div class="login">
<div class="login-leetcode">
<img src=" https://static.leetcode.cn/cn-mono-assets/production/assets/logo-dark-cn.4c5e285b.svg"
alt="力扣">
</div>
<div class="login-tel">
<input class="login-tel-input" type="text" placeholder="输入手机号码">
<input class="login-tel-code" type="text" placeholder="验证码">
<button class="login-btn" type="submit">登录/注册</button>
<span>帐号密码登录</span>
</div>
<div class="login-logo">
<div class="login-logo-QQ">
<svg t="1688976602545" class="icon1" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="821" width="200" height="200">
<path
d="M933.446 643.862c-18.784-108.945-97.673-180.323-97.673-180.323 11.268-98.92-30.056-116.461-30.056-116.461-8.701-306.05-272.335-300.692-277.87-300.546-5.542-0.146-269.211-5.505-277.872 300.548 0 0-41.325 17.54-30.055 116.461 0 0-78.895 71.378-97.676 180.323 0 0-10.034 184.083 90.16 22.544 0 0 22.544 61.344 63.867 116.455 0 0-73.897 25.062-67.621 90.165 0 0-2.518 72.618 157.784 67.625 0 0 112.702-8.757 146.516-56.35h29.795c33.809 47.595 146.514 56.35 146.514 56.35 160.262 4.993 157.781-67.625 157.781-67.625 6.238-65.103-67.62-90.165-67.62-90.165 41.324-55.11 63.862-116.455 63.862-116.455 100.156 161.537 90.164-22.546 90.164-22.546z"
fill="#1296db" p-id="822"></path>
</svg>
</div>
<div class="login-logo-github">
<svg t="1688977006692" class="icon2" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1465" width="200" height="200">
<path
d="M512 12.64c-282.752 0-512 229.216-512 512 0 226.208 146.72 418.144 350.144 485.824 25.6 4.736 35.008-11.104 35.008-24.64 0-12.192-0.48-52.544-0.704-95.328-142.464 30.976-172.512-60.416-172.512-60.416-23.296-59.168-56.832-74.912-56.832-74.912-46.464-31.776 3.52-31.136 3.52-31.136 51.392 3.616 78.464 52.768 78.464 52.768 45.664 78.272 119.776 55.648 148.992 42.56 4.576-33.088 17.856-55.68 32.512-68.48-113.728-12.928-233.28-56.864-233.28-253.024 0-55.904 20-101.568 52.768-137.44-5.312-12.896-22.848-64.96 4.96-135.488 0 0 43.008-13.76 140.832 52.48 40.832-11.36 84.64-17.024 128.16-17.248 43.488 0.192 87.328 5.888 128.256 17.248 97.728-66.24 140.64-52.48 140.64-52.48 27.872 70.528 10.336 122.592 5.024 135.488 32.832 35.84 52.704 81.536 52.704 137.44 0 196.64-119.776 239.936-233.792 252.64 18.368 15.904 34.72 47.04 34.72 94.816 0 68.512-0.608 123.648-0.608 140.512 0 13.632 9.216 29.6 35.168 24.576 203.328-67.776 349.856-259.616 349.856-485.76 0-282.784-229.248-512-512-512z"
fill="#2c2c2c" p-id="1466"></path>
</svg>
</div>
<div class="login-logo-weibo">
<svg t="1688977088903" class="icon3" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2083" width="200" height="200">
<path
d="M851.4 590.193c-22.196-66.233-90.385-90.422-105.912-91.863-15.523-1.442-29.593-9.94-19.295-27.505 10.302-17.566 29.304-68.684-7.248-104.681-36.564-36.14-116.512-22.462-173.094 0.866-56.434 23.327-53.39 7.055-51.65-8.925 1.89-16.848 32.355-111.02-60.791-122.395C311.395 220.86 154.85 370.754 99.572 457.15 16 587.607 29.208 675.873 29.208 675.873h0.58c10.009 121.819 190.787 218.869 412.328 218.869 190.5 0 350.961-71.853 398.402-169.478 0 0 0.143-0.433 0.575-1.156 4.938-10.506 8.71-21.168 11.035-32.254 6.668-26.205 11.755-64.215-0.728-101.66z m-436.7 251.27c-157.71 0-285.674-84.095-285.674-187.768 0-103.671 127.82-187.76 285.674-187.76 157.705 0 285.673 84.089 285.673 187.76 0 103.815-127.968 187.768-285.673 187.768z"
fill="#E71F19" p-id="2084"></path>
<path
d="M803.096 425.327c2.896 1.298 5.945 1.869 8.994 1.869 8.993 0 17.7-5.328 21.323-14.112 5.95-13.964 8.993-28.793 8.993-44.205 0-62.488-51.208-113.321-114.181-113.321-15.379 0-30.32 3.022-44.396 8.926-11.755 4.896-17.263 18.432-12.335 30.24 4.933 11.662 18.572 17.134 30.465 12.238 8.419-3.46 17.268-5.33 26.41-5.33 37.431 0 67.752 30.241 67.752 67.247 0 9.068-1.735 17.857-5.369 26.202a22.832 22.832 0 0 0 12.335 30.236l0.01 0.01z"
fill="#F5AA15" p-id="2085"></path>
<path
d="M726.922 114.157c-25.969 0-51.65 3.744-76.315 10.942-18.423 5.472-28.868 24.622-23.5 42.91 5.509 18.29 24.804 28.657 43.237 23.329a201.888 201.888 0 0 1 56.578-8.064c109.253 0 198.189 88.271 198.189 196.696 0 19.436-2.905 38.729-8.419 57.16-5.508 18.289 4.79 37.588 23.212 43.053 3.342 1.014 6.817 1.442 10.159 1.442 14.943 0 28.725-9.648 33.37-24.48 7.547-24.906 11.462-50.826 11.462-77.175-0.143-146.588-120.278-265.813-267.973-265.813z"
fill="#F5AA15" p-id="2086"></path>
<path
d="M388.294 534.47c-84.151 0-152.34 59.178-152.34 132.334 0 73.141 68.189 132.328 152.34 132.328 84.148 0 152.337-59.182 152.337-132.328 0-73.15-68.19-132.334-152.337-132.334zM338.53 752.763c-29.454 0-53.39-23.755-53.39-52.987 0-29.228 23.941-52.989 53.39-52.989 29.453 0 53.39 23.76 53.39 52.989 0 29.227-23.937 52.987-53.39 52.987z m99.82-95.465c-6.382 11.086-19.296 15.696-28.726 10.219-9.43-5.323-11.75-18.717-5.37-29.803 6.386-11.09 19.297-15.7 28.725-10.224 9.43 5.472 11.755 18.864 5.37 29.808z"
fill="#040000" p-id="2087"></path>
</svg>
</div>
<div class="login-logo-weixin">
<svg t="1688977041758" class="icon4" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1776" width="200" height="200">
<path
d="M1024 624.6c0-149.9-142.3-271.8-317.2-271.8s-317.2 122-317.2 271.8c0 149.9 142.3 271.8 317.2 271.8 30.4 0 60.5-3.7 89.4-10.9 7.9 1.1 30.2 13 43.7 20.2 29.4 15.6 49.6 25.8 65.9 25.8 5.2 0 9.9-1 14.4-3.2 24.9-12.1 15-43.1 5.5-73.1-2.5-8-6.5-20.4-7.8-27.7C985.5 776 1024 702.4 1024 624.6z m-137.5 173c-19.4 14.1-11.1 40.2-1.5 70.5 1.3 4.2 3 9.5 4.5 14.7-9.7-4.4-21.1-10.5-29.4-14.9-29.3-15.6-48.5-25.3-64.3-25.3-3 0-5.8 0.3-8.6 1.1-25.9 6.6-52.9 10-80.3 10-151.3 0-274.3-102.7-274.3-229s123.1-229 274.3-229 274.3 102.7 274.3 229c-0.1 66.3-34.6 129.3-94.7 172.9z"
p-id="1777"></path>
<path
d="M379.1 621.5c0-150.7 146.6-273.7 326.7-274.1 6.9 0 13.4-3.4 17.4-9 4-5.7 5-12.9 2.8-19.4-22.4-64.5-69.6-122.4-132.7-163-64.6-41.5-141.5-63.5-222.6-63.5C166.3 92.5 0 234.8 0 409.7c0 91.4 45.7 177.7 125.5 238-1.2 8.5-6.4 25-9.7 35.5-11.2 35.4-21.8 68.9 4.5 81.7 4.8 2.3 9.8 3.4 15.4 3.4 18.3 0 41.7-11.8 76-30 16.8-8.9 44.7-23.7 53.7-24.3 34.1 8.6 69.5 13 105.4 13h1.3c6.9 0 13.5-3.4 17.5-9 4-5.7 5-12.9 2.8-19.5-8.8-25.2-13.3-51-13.3-77z m-42.8 0c0 20.7 2.4 41.3 7 61.5-23.2-1.6-46.1-5.3-68.3-11-19.4-5-44.3 7.5-83.4 28.3-12.1 6.4-29.7 15.8-42.5 21 2.1-8.3 5.3-18.2 7.5-25.3 10.9-34.4 20.3-64-0.4-79-72-52.2-113.3-127.8-113.3-207.3 0-151.3 147.1-274.3 327.9-274.3 133.2 0 253.5 68.8 303.4 170.4-189 14.1-337.9 150.5-337.9 315.7z"
p-id="1778"></path>
<path d="M249.9 305.3m-42.9 0a42.9 42.9 0 1 0 85.8 0 42.9 42.9 0 1 0-85.8 0Z" p-id="1779">
</path>
<path d="M493.9 305.3m-42.9 0a42.9 42.9 0 1 0 85.8 0 42.9 42.9 0 1 0-85.8 0Z" p-id="1780">
</path>
<path d="M614.9 548.2m-34.3 0a34.3 34.3 0 1 0 68.6 0 34.3 34.3 0 1 0-68.6 0Z" p-id="1781">
</path>
<path d="M806.7 548.2m-34.3 0a34.3 34.3 0 1 0 68.6 0 34.3 34.3 0 1 0-68.6 0Z" p-id="1782">
</path>
</svg>
</div>
<div class="login-logo-others">
<svg t="1688977107301" class="icon5" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="2240" width="200" height="200">
<path
d="M277.333333 448a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m469.333334 0a64 64 0 1 1 0 128 64 64 0 0 1 0-128z m-234.666667 0a64 64 0 1 1 0 128 64 64 0 0 1 0-128z"
fill="#575C63" p-id="2241"></path>
</svg>
</div>
</div>
<div class="login-account">
已有太空站账号
<svg t="1688977592331" class="icon6" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="1003" width="200" height="200">
<path
d="M385.536 102.4l398.848 364.544c12.288 10.752 19.456 26.624 19.456 43.008s-7.168 32.256-19.456 43.008l-398.848 364.544c-18.944 17.92-46.08 23.552-70.656 14.336s-40.96-31.232-43.52-57.344V145.408c2.048-26.112 18.944-48.128 43.52-57.344 24.064-9.216 51.712-3.584 70.656 14.336z"
fill="#7F7F7F" p-id="1004"></path>
</svg>
</div>
<div class="login-last">同意力扣《用户协议》和《隐私协议》</div>
</div>
</div>
</body>
</html>
.background {
width: 100%;
height: 100vh;
background-color: gray;
padding-top: 100px;
}
img {
width: 160px;
height: 100px;
left: 28px;
position: relative;
top: 10px;
}
.login {
margin: auto;
width: 380px;
height: 530px;
background-color: white;
border-radius: 22px 20px;
padding-top: 10px;
}
.login-leetcode {
box-sizing: border-box;
margin-top: 20px;
width: 380px;
height: 100px;
background-color: white;
margin-bottom: 20px;
border-radius: 12px;
}
.login-tel {
display: flex;
flex-direction: column;
align-items: center;
}
.login-tel-input {
width: 320px;
height: 40px;
border-radius: 10px 9px 10px 10px;
border: 1px solid lightgray;
margin-bottom: 15px;
}
.login-tel-code {
width: 320px;
height: 40px;
border-radius: 10px 9px 10px 10px;
border: 1px solid lightgray;
margin-bottom: 16px;
}
.login-btn {
width: 325px;
height: 40px;
background-color: #242528;
border-radius: 10px 9px 10px 10px;
border: 1px solid lightgray;
color: white;
font-size: 16px;
margin-bottom: 20px;
cursor: pointer;
}
.login-btn:hover {
background-color: #454548;
}
.login-tel>span {
position: relative;
left: -112px;
color: #7F7F7F;
font-size: 15px;
cursor: pointer;
}
.login-logo {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 20px;
}
.login-logo>div {
margin: 10px;
width: 40px;
height: 40px;
background-color: #FFFFFF;
border-radius: 50%;
border: 1px solid #E3E4E7;
flex-wrap: wrap;
box-sizing: border-box;
cursor: pointer;
}
.login-logo svg {
margin-left: auto;
margin-right: auto;
left: 9px;
position: relative;
width: 20px;
height: 40px;
}
.login-account {
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #7F7F7F;
}
.icon6 {
width: 10px;
height: 20px;
position: relative;
margin: 0 0 0 4px;
top: 1px;
}
.login-last {
color: #7F7F7F;
font-size: 12px;
position: relative;
bottom: -10px;
text-align: center;
transform: translateY(200%);
cursor: pointer;
}
