Advertisement
Guest User

Untitled

a guest
Dec 13th, 2019
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.43 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html><head><style>
  3. @import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
  4.   body{
  5.     font-family: sans-serif;
  6.       background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/23298a55526729.5988857400116.jpg');
  7.   background-repeat: no-repeat;
  8.   background-size: cover;
  9.   }
  10.   .login-box{
  11.     width: 280px;
  12.     position: absolute;
  13.     top: 50%;
  14.     left: 50%;
  15.     transform: translate(-50%,-50%);
  16.     color: white;
  17.     ;
  18.   }
  19.   .login-box h1{
  20.     float: left;
  21.     font-size: 40px;
  22.     border-bottom: 6px solid #4CAF50;
  23.     margin-bottom: 50px;
  24.     padding: 13px 0;
  25.    
  26.   }
  27.   .textbox{
  28.     width: 90%;
  29.     overflow: hidden;
  30.     font-size: 20px;
  31.     padding: 8px 0;
  32.     margin: 8px 0;
  33.     border-bottom: 1px solid #4CAF50;
  34.   }
  35.   .textbox input{
  36.     border: none;
  37.     outline: none;
  38.     background: none;
  39.     color: white;
  40.     font-size: 18px;
  41.     width: 80%;
  42.     float: left;
  43.     margin: 0 10px;
  44.   }
  45.   .textbox i{
  46.     width: 26px;
  47.     float: left;
  48.     text-align: center;
  49.   }
  50.  .btn{
  51.     width: 100%;
  52.     background: none;
  53.     border: 2px solid #4CAF50;
  54.     color: white;
  55.     padding: 5px;
  56.     font-size: 18px;
  57.     cursor: pointer;
  58.     margin: 12px 0;
  59.   }
  60.   .box{
  61.     background-color:#383838;
  62.     padding: 15px;
  63.     width:350px;
  64.     height:300px;
  65.     border:3px solid #73AD21;
  66.     position:absolute;
  67.     left:500px;
  68.     top:200px;
  69.     opacity: .90
  70. </style>
  71.  
  72. </head><body>
  73. <canvas id="risciCanvas" width="410" height="300" style="z-index: 1; opacity: .6">
  74. </canvas>
  75. <img src="https://upload.wikimedia.org/wikipedia/commons/c/c2/Rizal_National_Science_High_School_Logo.png" style="width:100px; border:0; position:absolute; left:50px; top:30px">
  76. <div class="box">
  77.     <div class="login-box">
  78.       <h1>Welcome</h1>
  79.       <div class="textbox">
  80.         <i class="fas fa-user"></i>
  81.         <input type="text" placeholder="Username">
  82.       </div>
  83.       <button onclick="login-ok" class="btn">Enter</button>
  84.     </div>
  85.    </div>
  86.  
  87.  
  88. <script>
  89.     var c = document.querySelector("#risciCanvas");
  90.     var ctx=c.getContext("2d");
  91.     ctx.beginPath();
  92.     ctx.moveTo(0, 300);
  93.     ctx.lineTo(0,0);
  94.     ctx.lineTo(330, 0);
  95.     ctx.closePath();
  96.     ctx.lineWidth = 10;
  97.     ctx.strokeStyle = '#666666';
  98.     ctx.stroke();
  99.     ctx.fillStyle = "#FFCC00";
  100.     ctx.fill();
  101.    
  102.     function login-ok(){
  103.    
  104.     location.href("")
  105.     }
  106. </script>
  107. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement