Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html><head><style>
- @import "https://use.fontawesome.com/releases/v5.5.0/css/all.css";
- body{
- font-family: sans-serif;
- background-image: url('https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/23298a55526729.5988857400116.jpg');
- background-repeat: no-repeat;
- background-size: cover;
- }
- .login-box{
- width: 280px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%,-50%);
- color: white;
- ;
- }
- .login-box h1{
- float: left;
- font-size: 40px;
- border-bottom: 6px solid #4CAF50;
- margin-bottom: 50px;
- padding: 13px 0;
- }
- .textbox{
- width: 90%;
- overflow: hidden;
- font-size: 20px;
- padding: 8px 0;
- margin: 8px 0;
- border-bottom: 1px solid #4CAF50;
- }
- .textbox input{
- border: none;
- outline: none;
- background: none;
- color: white;
- font-size: 18px;
- width: 80%;
- float: left;
- margin: 0 10px;
- }
- .textbox i{
- width: 26px;
- float: left;
- text-align: center;
- }
- .btn{
- width: 100%;
- background: none;
- border: 2px solid #4CAF50;
- color: white;
- padding: 5px;
- font-size: 18px;
- cursor: pointer;
- margin: 12px 0;
- }
- .box{
- background-color:#383838;
- padding: 15px;
- width:350px;
- height:300px;
- border:3px solid #73AD21;
- position:absolute;
- left:500px;
- top:200px;
- opacity: .90
- </style>
- </head><body>
- <canvas id="risciCanvas" width="410" height="300" style="z-index: 1; opacity: .6">
- </canvas>
- <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">
- <div class="box">
- <div class="login-box">
- <h1>Welcome</h1>
- <div class="textbox">
- <i class="fas fa-user"></i>
- <input type="text" placeholder="Username">
- </div>
- <button onclick="login-ok" class="btn">Enter</button>
- </div>
- </div>
- <script>
- var c = document.querySelector("#risciCanvas");
- var ctx=c.getContext("2d");
- ctx.beginPath();
- ctx.moveTo(0, 300);
- ctx.lineTo(0,0);
- ctx.lineTo(330, 0);
- ctx.closePath();
- ctx.lineWidth = 10;
- ctx.strokeStyle = '#666666';
- ctx.stroke();
- ctx.fillStyle = "#FFCC00";
- ctx.fill();
- function login-ok(){
- location.href("")
- }
- </script>
- </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement