BOX PRACTICE SET #1

-

 <!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style>
    *{
        margin: 0;padding: 0;
    }
    .navbar{
        background-color: black;
        color: whitesmoke;
        width: 100%;
        height: fit-content;
        text-decoration: none;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;  
    }
    .navbar{
        background-color: black;
        color: whitesmoke;
        width: 100%;
        height: fit-content;
        text-decoration: none;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;  
    }
    .navbar ul li{
          display: inline-block;
          margin: 14px;
          font-size: x-small;
    }
    .navbar ul li a{
        color: white;
        text-decoration: none;
    }

    .left{
        background-color: rgb(203, 88, 176);
        height: 120vh;
        width: 50%;
        color: rgb(255, 255, 255);
        display: inline-block;
        font-size: smaller;
    }
    .right{
        background-color: rgb(55, 75, 126);
        height: 120vh;
        width: 50%;
        color: rgb(254, 254, 254);
        display: inline-block;
        font-size: smaller;
    }
    .center{
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        padding: 7px;
        background-color: rgb(30, 89, 71);
    }

</style>
    <body>
        <head>
            <div class="navbar">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Courses</a></li>
                    <li><a href="#">Sign in</a></li>
                    <li><a href="#">Help desk</a></li>
                </ul>
            </div><div class="left">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Animi
                suscipit at reiciendis, est quod perspiciatis. Voluptatum
                aliquam natus vitae doloribus. Assumenda officiis maxime dicta,
                veniam voluptates minus saepe aperiam beatae!
            </div><div class="right">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe
                adipisci porro quod, libero laudantium nihil aperiam molestiae,
                deserunt impedit quasi ipsam minima eligendi explicabo ipsa
                similique ducimus asperiores accusamus tempore?
            </div>
            <div class="small"></div>
            <footer>
                <div class="center"></div>
            </footer>
        </head>
    </body>
</html>

Comments

Post a Comment

Popular posts from this blog

HTML FORMS

-
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < body >     < H1 > Forms in HTML </ H1 >     < form action = "/submit.php" > < div >   < label for = "Name" > Name </ label >   < input type = "text" placeholder = "Enter name" > </ div > < div >     < label for = "Phone" > Phone </ label >     < input type = "tel" placeholder = "Enter phone no." >     </ div >     < div >     < label for = "Email" > Email </ label >     < input type = "email" placeholder = "Email" >     </ div >     < div >     < l...
Read more

FORM STYLING IN CSS

-
<! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "UTF-8" />     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" />     < title > forms </ title >   </ head >   < style >     body {       margin : 0 ;       padding : 0 ;     }     .csf {       display : flexbox;       text-align : center ;       background-color : rgb ( 216 , 216 , 216 );       height : 400px ;       width : 550px ;       padding : 90px 0px 0px 15px ;       margin-left : 40% ;       margin-top : 10% ;       border-radius : 2px ;       border : 2px solid ;       font-size : 19px ;     }     input {       mar...
Read more