Scribd Logo
Upload

Welcome to Scribd!

  • Lab 9 and 10

    Uploaded by

    Zaniash fatima
    10 views5 pages
    This document contains details about a group project to create an animated login page. It includes the group leader and members, the CSS code to style the login page, the HTML code for the login page structure and form, and screenshots of the completed login page. The login page allows users to enter a username and password, and includes styling for the inputs, headings, and submit button.

    Original Description:

    Original Title

    LAB 9 AND 10

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document contains details about a group project to create an animated login page. It includes the group leader and members, the CSS code to style the login page, the HTML code for the login page structure and form, and screenshots of the completed login page. The login page allows users to enter a username and password, and includes styling for the inputs, headings, and submit button.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views5 pages

    Lab 9 and 10

    Uploaded by

    Zaniash fatima
    This document contains details about a group project to create an animated login page. It includes the group leader and members, the CSS code to style the login page, the HTML code for the login page structure and form, and screenshots of the completed login page. The login page allows users to enter a username and password, and includes styling for the inputs, headings, and submit button.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    GROUP LEADER:- FAIZ MOHIUDDIN

    MEMBERS:- MARYAM WAHID


    ZANISH FATIMA
    MAHEEN ILYAS

    CSS OF LOGIN PAGE:-


    body{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: #477499;
    }
    .box{
    width: 300px;
    padding: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: #3f3a3a;
    text-align: center;

    Page 1 of 5
    GROUP LEADER:- FAIZ MOHIUDDIN
    MEMBERS:- MARYAM WAHID
    ZANISH FATIMA
    MAHEEN ILYAS
    }
    .box h1{
    color: rgb(211, 55, 27);
    text-transform: uppercase;
    font-weight: 500;
    }
    .box input[type = "text"],.box input[type = "password"]{
    border:0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #0fd1f3;
    padding: 14px 10px;
    width: 200px;
    outline: none;
    color: rgb(211, 199, 199);
    border-radius: 24px;
    transition: 0.25s;
    }
    .box input[type = "text"]:focus,.box input[type = "password"]:focus{
    width: 280px;
    border-color: #2ecc71;
    }
    .box input[type = "submit"]{
    border:0;
    background: none;
    display: block;
    margin: 20px auto;
    text-align: center;
    border: 2px solid #2ecc71;
    padding: 14px 40px;
    outline: none;
    color: rgb(207, 206, 206);
    border-radius: 24px;
    transition: 0.25s;
    cursor: pointer;
    }
    .box input[type = "submit"]:hover{
    background: #2ecc71;
    }

    Page 2 of 5
    GROUP LEADER:- FAIZ MOHIUDDIN
    MEMBERS:- MARYAM WAHID
    ZANISH FATIMA
    MAHEEN ILYAS

    LAB#10

    HTML CODE OF LOGIN PAGE:-


    <!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
    <meta charset="utf-8">
    <title>َAnimated Login Form</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>

    <form class="box" action="index.html" method="post">


    <h1>Login</h1>
    <input type="text" name="" placeholder="Username" >
    <input type="password" name="" placeholder="Password" >
    <input type="submit" name="" value="Login">
    </form>

    </body>
    </html>

    Page 3 of 5
    GROUP LEADER:- FAIZ MOHIUDDIN
    MEMBERS:- MARYAM WAHID
    ZANISH FATIMA
    MAHEEN ILYAS

    SCREEN SHOTS OOF LOGIN PAGE:-

    Page 4 of 5
    GROUP LEADER:- FAIZ MOHIUDDIN
    MEMBERS:- MARYAM WAHID
    ZANISH FATIMA
    MAHEEN ILYAS

    Page 5 of 5

    You might also like