A simple login interface designed using html 5 css 3 and bootstrap 5
The HTML code is below
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" href="style.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
head>
<body>
<div class="container">
<div class="shadow-sm p-5 mb-5 bg-body-secondry rounded new">
<img src="crest.jpg" alt="">
div>
<form action="" method="post" class="shadow-lg p-4 mb-5 bg-body-tertiary rounded">
<h4>HO TECHNICAL UNIVERSITYh4>
<p>Welcome, please login to register.p>
<div class="mb-3">
<input type="text" name="" placeholder="Enter Index Number" id=""
class="form-control material-symbols-outlined after">
div>
<div class="mb-3">
<input type="password" name="" placeholder="Enter Password" id=""
class="form-control material-symbols-outlined">
div>
<div class="mb-3">
<div class="wrapper">
<input type="checkbox" name="">
<span class="">Remember mespan>
<br>
<a href="" class="text-decoration-none" id="front">Forget Detailsa>
div>
div>
<div class="mb-3">
<div class="main">
<button type="submit" class="btn btn-outline-warning">Enquiriesbutton>
<button type="submit" class="btn float-right btn-inline state">Loginbutton>
div>
div>
<div class="py-3">
<h4 class="text-center">ORh4>
div>
<div class="mb-3">
<button class="btn btn-outline-secondary btn-lg" id="firm">Googlebutton>
div>
<div class="mb-3">
<a href="" class="text-decoration-none" id="">Need help? Chat now!a>
div>
<div class="mb-3">
<div class="text-center">©2024 HTUdiv>
div>
form>
div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js">script>
body>
html>
The CSS Code also follows as well
:root{
--pool: #006;
--white: #fff;
}
body{
font-family: sans-serif;
}
.container{
display: flex;
margin-top: 90px !important;
justify-content: center;
width: 980px !important;
position: relative;
left: -6%;
}
.new{
position: relative;
left: 10%;
}
.bg-body-secondry{
width: 1000px !important;
}
img{
width: 200px;
height: auto;
margin-top: 130px;
position: relative;
left: 20%;
}
form{
position: relative;
left: 10%;
}
.primary{
color: var(--pool);
}
.main{
display: flex;
}
.state{
margin: 0px 150px;
position: relative;
left: 33%;
background: var(--pool) !important;
color: var(--white) !important;
}
.state:hover{
background: #006 !important;
}
a{
color: rgb(102, 92, 248) !important;
}
.wrapper{
display: flex;
position: relative;
}
#front{
margin-left: 45%;
}
#firm{
width: 250px;
}
#firm:hover{
background: #ffc107;
border: 1px solid white;
}
input{
outline: none;
}
#check{
font-size: 50px !important;
}
The Output

Leave a comment