API tools faq
paste
ro8ot

mo

ro8ot
May 27th, 2020
202
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.36 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
  6.     <title>Login</title>
  7.     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  8. <style media="screen">
  9.   .login-clean {
  10.   background: #f1f7fc;
  11.   padding: 80px 0;
  12. }
  13.  
  14. .login-clean form {
  15.   max-width: 320px;
  16.   width: 90%;
  17.   margin: 0 auto;
  18.   background-color: #ffffff;
  19.   padding: 40px;
  20.   border-radius: 4px;
  21.   color: #505e6c;
  22.   box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
  23. }
  24.  
  25. .login-clean .illustration {
  26.   text-align: center;
  27.   padding: 0 0 20px;
  28.   font-size: 100px;
  29.   color: rgb(244,71,107);
  30. }
  31.  
  32. .login-clean form .form-control {
  33.   background: #f7f9fc;
  34.   border: none;
  35.   border-bottom: 1px solid #dfe7f1;
  36.   border-radius: 0;
  37.   box-shadow: none;
  38.   outline: none;
  39.   color: inherit;
  40.   text-indent: 8px;
  41.   height: 42px;
  42. }
  43.  
  44. .login-clean form .btn-primary {
  45.   background: #f4476b;
  46.   border: none;
  47.   border-radius: 4px;
  48.   padding: 11px;
  49.   box-shadow: none;
  50.   margin-top: 26px;
  51.   text-shadow: none;
  52.   outline: none !important;
  53. }
  54.  
  55. .login-clean form .btn-primary:hover, .login-clean form .btn-primary:active {
  56.   background: #eb3b60;
  57. }
  58.  
  59. .login-clean form .btn-primary:active {
  60.   transform: translateY(1px);
  61. }
  62.  
  63. .login-clean form .forgot {
  64.   display: block;
  65.   text-align: center;
  66.   font-size: 12px;
  67.   color: #6f7a85;
  68.   opacity: 0.9;
  69.   text-decoration: none;
  70. }
  71.  
  72. .login-clean form .forgot:hover, .login-clean form .forgot:active {
  73.   opacity: 1;
  74.   text-decoration: none;
  75. }
  76.  
  77. .df {
  78.   display: block;
  79.   margin-left: auto;
  80.   margin-right: auto;
  81.   width: 40%;
  82.   /*height: 90px;*/
  83. }
  84.  
  85. footer {
  86.   background-color: #292c2f;
  87.   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
  88.   box-sizing: border-box;
  89.   width: 100%;
  90.   text-align: left;
  91.   font: bold 16px sans-serif;
  92.   padding: 55px 50px;
  93.   margin-top: 80px;
  94.   bottom: 0;
  95.   color: #fff;
  96. }
  97.  
  98. .footer-navigation h3 {
  99.   margin: 0;
  100.   font: normal 36px Cookie, cursive;
  101.   margin-bottom: 20px;
  102.   color: #fff;
  103. }
  104.  
  105. .footer-navigation h3 a {
  106.   text-decoration: none;
  107.   color: #fff;
  108. }
  109.  
  110. .footer-navigation h3 span {
  111.   color: #5383d3;
  112. }
  113.  
  114. .footer-navigation p.links a {
  115.   color: #fff;
  116.   text-decoration: none;
  117. }
  118.  
  119. .footer-navigation p.company-name {
  120.   color: #8f9296;
  121.   font-size: 14px;
  122.   font-weight: normal;
  123.   margin-top: 20px;
  124. }
  125.  
  126. @media (max-width:767px) {
  127.   .footer-contacts {
  128.     margin: 30px 0;
  129.   }
  130. }
  131.  
  132. .footer-contacts p {
  133.   display: inline-block;
  134.   color: #ffffff;
  135.   vertical-align: middle;
  136. }
  137.  
  138. .footer-contacts p a {
  139.   color: #5383d3;
  140.   text-decoration: none;
  141. }
  142.  
  143. .fa.footer-contacts-icon {
  144.   background-color: #33383b;
  145.   color: #fff;
  146.   font-size: 18px;
  147.   width: 38px;
  148.   height: 38px;
  149.   border-radius: 50%;
  150.   text-align: center;
  151.   line-height: 38px;
  152.   margin: 10px 15px 10px 0;
  153. }
  154.  
  155. span.new-line-span {
  156.   display: block;
  157.   font-weight: normal;
  158.   display: block;
  159.   font-weight: normal;
  160.   font-size: 14px;
  161.   line-height: 2;
  162. }
  163.  
  164. .footer-about h4 {
  165.   display: block;
  166.   color: #fff;
  167.   font-size: 14px;
  168.   font-weight: bold;
  169.   margin-bottom: 20px;
  170. }
  171.  
  172. .footer-about p {
  173.   line-height: 20px;
  174.   color: #92999f;
  175.   font-size: 13px;
  176.   font-weight: normal;
  177.   margin: 0;
  178. }
  179.  
  180. div.social-links {
  181.   margin-top: 20px;
  182.   color: #fff;
  183. }
  184.  
  185. .social-links a {
  186.   display: inline-block;
  187.   width: 35px;
  188.   height: 35px;
  189.   cursor: pointer;
  190.   background-color: #33383b;
  191.   border-radius: 2px;
  192.   font-size: 20px;
  193.   color: #ffffff;
  194.   text-align: center;
  195.   line-height: 35px;
  196.   margin-right: 5px;
  197.   margin-bottom: 5px;
  198. }
  199.  
  200.  
  201. </style>
  202. </head>
  203. <body>
  204.     <div class="login-clean">
  205.         <form method="post">
  206.             <h2 class="sr-only">Login</h2><img src="https://image.flaticon.com/icons/png/512/1674/1674704.png" class="df" />
  207.             <div class="illustration"></div>
  208.             <div class="form-group"><input type="email" class="form-control" name="email" placeholder="Email" /></div>
  209.             <div class="form-group"><input type="password" class="form-control" name="password" placeholder="Password" /></div>
  210.             <div class="form-group"><button class="btn btn-primary btn-block" type="submit" style="  background-color: #007bff;
  211. ">Log In</button></div><a class="forgot" href="#">Forgot your password?</a></form>
  212.     </div>
  213.     <footer>
  214.         <div class="row">
  215.             <div class="col-sm-6 col-md-4 footer-navigation">
  216.                 <h3></h3>
  217.                 <p class="company-name">© 2020</p>
  218.             </div>
  219.             <div class="col-sm-6 col-md-4 footer-contacts">
  220.                 <div><i class="fa fa-envelope footer-contacts-icon"></i>
  221.                     <p><img src="https://www.freeiconspng.com/uploads/email-icon--clipart-best-22.png" width="35px" alt=""><a href="#" target="_blank"> support@legends.com</a></p>
  222.                 </div>
  223.             </div>
  224.             <div class="clearfix"></div>
  225.             <div class="col-md-4 footer-about">
  226.                 <h4></h4>
  227.                 <p></p>
  228.                 <div class="social-links social-icons"><a href="#"><img src="https://cdn.icon-icons.com/icons2/1558/PNG/512/353424-instagram-logo_107474.png" width="35px"  alt=""></a></div>
  229.             </div>
  230.         </div>
  231.     </footer>
  232. </body>
  233. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!