Facebook page using html and css


source code html


<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Facebook</title>
        <link rel="stylesheet" href="fb.css">
    </head>
    <body>
        <div class="left">
            <p class="h1">
                facebook
            </p>
            <p class="h2">
                Facebook helps you connect and share <br>
                with the people in your life.
            </p>
        </div>
        <form action="#" method="POST">
            <label for="email"></label>
            <input type="text" id="email" placeholder="Email adress or phone number">
            <br> <br>
            <label for="pass"></label>
            <input type="text" id="pass" placeholder="Password">
            <br> <br>
            <button class="button" type="submit">
            <b>
                Log In
            </b>
            </button>
            <br> <br>
            <a href="#" class="forgo">
                Forgotten Password?
            </a>
            <br> <br>
            <hr>
            <br>
            <button class="ca">
                Create New Account
            </button>
        </form>
        <p class="page">
            <a href="#" class="black">
                <b>
                    Create a Page
                </b>
            </a>
            for a celebrity, band or business
        </p>
    </body>
</html>


                          source code css


body {
    background-color: rgb(224, 224, 226);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.left {
    margin-top: 200px;
    margin-left: 180px;
}
.h1 {
    color: rgb(25, 118, 240);
    font-size: 62px;
    font-style: normal;
    font-weight: bolder;
}
.h2 {
    font-size: 25px;  
    margin-top: -60px; 
}
form {
    width: 360px;
    background-color: white;
    padding: 17px;
    height: 340px;
    border-radius: 10px;
    box-shadow: 2px 2px 7px rgb(170, 169, 169);
}
input {
    width: 340px;
    height: 50px;
    padding-left: 15px;
    font-size: larger;
    border: 1px solid rgb(180, 179, 179);
    border-radius: 5px;
    opacity: 70%;
}
.button {
    width: 360px;
    height: 50px;
    font-size: larger;
    border: 1px solid rgb(180, 179, 179);
    border-radius: 5px;
    background-color: rgb(25, 118, 240);
    color: white;   
}
form {
    margin-top: -220px;
    margin-left: 750px;
}
.forgo {
    margin-left: 100px;
    color: rgb(25, 118, 240);
}
.ca {
    margin-left: 80px;
    color: white;
    background-color: rgb(39, 184, 39);
    width: 210px;
    height: 50px;
    font-size: larger;
    border: 1px solid rgb(180, 179, 179);
    border-radius: 5px;
    font-weight: bolder;
}
hr {
    opacity: 50%;
}
.black {
    color: black;
}
.page {
    text-align: right;
    margin-right: 125px;
}


Comments

Post a Comment

Popular Posts