Login page
How do I make an login page?
Please view in full page. What is a login page? How do you make a login page? This script and codes were developed by Matheus Silva on 20 October 2022, Thursday.
Login page - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Login page</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="MugFoundation home"> <meta name="author" content="MugFoundation"> <link rel="icon" href="http://assets.mugfoundation.com/fw/favicon.ico"> <title>MugFoundation home</title> <link href="http://assets.mugfoundation.com/fw/css/mug.css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <link href="http://assets.mugfoundation.com/fw/css/material.min.css" rel="stylesheet"> <link href="http://assets.mugfoundation.com/fw/css/material-wfont.min.css" rel="stylesheet"> <link href="http://assets.mugfoundation.com/fw/css/ripples.min.css" rel="stylesheet"> <link href="http://assets.mugfoundation.com/fw/css/jumbotron.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body { width: 100%; height: 100%;
}
body { background-color: #2574A9;
}
.center-block { display: block; margin-left: auto; margin-right: auto; margin-top: 15%; width: 30%;
}
.contact { background-color: #fff; padding: 20px; width: 100%; transition: 0.5s opacity; opacity: 0.75;
}
.contact:hover, .form-control:active { opacity: 1;
}
.horizontal-ruller { width: 5px; height: 50%; background-color: #000;
}
.logo { position: fixed; right: 0; bottom: 0; width: 100%; height: 100%; width: auto; height: auto; z-index: -1000; background: url("http://assets.mugfoundation.com/images/textures/landscape.svg") no-repeat;
}
object { display: none;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container-fluid"> <div class="center-block"> <form action="javascript:scf();" id="contact" class="contact form-fluid"> <br /> <div class="form-group"> <input type="mail" class="form-control floating-label form-control-material-red-100" placeholder="E-mail" name="c_mail"> <br /> <input type="password" class="form-control floating-label" placeholder="Password" name="c_password"> <br /> <a href="javascript:submit();" class="btn btn-fab btn-raised btn-sm btn-success"><i class="fa fa-check"></i></a> <a href="javascript:submit();" class="btn btn-fab btn-raised btn-sm btn-danger"><i class="fa fa-close"></i></a> </div> </form> <div class="horizontal-ruller"></div> </div>
</div>
<div class="logo"> </div> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://assets.mugfoundation.com/fw/js/bootstrap.min.js'></script>
<script src='http://assets.mugfoundation.com/fw/js/ripples.min.js'></script>
<script src='http://assets.mugfoundation.com/fw/js/material.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/6.2.0/jquery.nouislider.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Login page - Script Codes CSS Codes
html, body { width: 100%; height: 100%;
}
body { background-color: #2574A9;
}
.center-block { display: block; margin-left: auto; margin-right: auto; margin-top: 15%; width: 30%;
}
.contact { background-color: #fff; padding: 20px; width: 100%; transition: 0.5s opacity; opacity: 0.75;
}
.contact:hover, .form-control:active { opacity: 1;
}
.horizontal-ruller { width: 5px; height: 50%; background-color: #000;
}
.logo { position: fixed; right: 0; bottom: 0; width: 100%; height: 100%; width: auto; height: auto; z-index: -1000; background: url("http://assets.mugfoundation.com/images/textures/landscape.svg") no-repeat;
}
object { display: none;
}
Login page - Script Codes JS Codes
$(function() { $.material.init(); $('[data-toggle="tooltip"]').tooltip();
});
function submit(){ $.ajax({ method: 'GET', url: "http://mugfoundation.com/api/echo.service/", data: {msg: "lol", key:"test"} }) .done(function(msg){ alert(msg); });
}
Developer | Matheus Silva |
Username | matheusxaviersi |
Uploaded | October 20, 2022 |
Rating | 3 |
Size | 3,547 Kb |
Views | 22,264 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Color switching button | 2,764 Kb |
Mug foundation-pre loader | 3,330 Kb |
Keytester | 2,180 Kb |
Rapier script playground | 2,937 Kb |
Markup playground | 2,492 Kb |
Recipe site layout | 5,896 Kb |
Css3 loaders 4rd revision | 3,307 Kb |
Sample page | 4,168 Kb |
Server satus indicator | 2,289 Kb |
Menu concept | 3,451 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Cartoon Bomb | Tcmulder | 4,929 Kb |
Twitch JSON API | Jvhti | 2,808 Kb |
Css or Czz.. | Judag | 4,111 Kb |
Cool audio | Bigliam | 1,868 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
Mesmerizing octopus | Jllodra | 3,549 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
SVG email test v2.0 | M_J_Robbins | 2,090 Kb |
A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!