Posts Details

Here is a detailed
explaination on this course

Bootstrap Tutorials

Bootstrap / Bootstrap Tutorials

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

Advertisements