Basic Website Dezine

 

 EXERCISE ON CSS

EXERCISE V



HTML Code:

<!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>
    @import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans:wght@300&family=Poppins:wght@300&display=swap');

    * {
        padding: 0;
        margin: 0;
    }

    :root {
        --bodyback: #cbccd5;
        --navback: #040468;
        --spncol: white;
        --undercol: red;
    }

    body {
        background-color: var(--bodyback);
    }

    header {
        position: sticky;
        top: 0px;
    }

    nav {

        margin-bottom: 20px;
        display: block;
        padding: 88px;
        background-color: var(--navback);
    }

    nav>span {
        padding: 58px;
        font-size: x-large;
        font-weight: bold;
        font-family: 'Merriweather', serif;
        font-family: 'Open Sans', sans-serif;
        font-family: 'Poppins', sans-serif;
        color: var(--spncol);
    }

    nav>span:hover {
        text-decoration: underline 3px;
        text-decoration-color: var(--undercol);
        text-underline-offset: 10px;
        cursor: pointer;
        /* font-size: xx-large;
        font-weight: bolder; */
    }
</style>
<style>
    .mainbox {

        display: flex;
        justify-content: center;
        margin: 10px;
        background-color: green;
        padding: 100px 0px 100px 0px;
    }

    .box {
        width: 800px;
        height: 1000px;
        border: 2px solid black;
        margin-right: 50px;
        margin-left: 50px;

    }

    .red {
        background-color: red;

    }

    .yellow {
        background-color: yellow;
    }

    .mybox {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    p {
        display: flex;
        justify-content: center;
        color: white;
        font-size: xx-large;
    }

    .yobox {
        background-color: gray;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 2px solid black;
        border-radius: 20px;
        width: 80vw;
        height: 20vh;
        margin: 50px 0 60px 0;
    }

    footer>div {
        border: 2px solid black;
        width: 100vw;
        height: 20vh;
        background-color: white;
    }
   

    img {
        position: fixed;
        bottom: 10px;
        right: 10px;
        width: 5vw;
        /* border-radius: 100px; */
        opacity: 70%;
        clip-path: circle();
    }
</style>


<body>
    <header>

        <nav>
            <span>Home</span>
            <span>About</span>
            <span>Cources</span>
            <span>Contacts</span>
        </nav>
    </header>
    <div class="mainbox">
        <div class="box red">


        </div>
        <div class="box yellow">

        </div>

    </div>
    <div class="mybox">
        <div class="yobox">

            <p>
                Wlecome to Aditya Kashyaps website!
            </p>
        </div>
    </div>
    <footer>
        <div class="end">

        </div>
    </footer>
        <img src="wp8232058-creative-4k-wallpapers.jpg" alt="icon">
</body>

</html>




Preview:


Comments

Post a Comment

Popular posts from this blog

UltraEdit Website Clone(Part 1- Nav Bar)

Image
   EXERCISE ON CSS EXERCISE VI HTML Code: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >ultra edit clone</ title > </ head > < style >     @import url ( 'https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans:wght@300&family=Poppins:wght@100;300&display=swap' ); </ style > < style >     * {         margin : 0 ;         padding : 0 ;     }     a {         color : inherit ;         text-decoration : none ;         font-size : x-small ;         font-family : 'Merriweather' , serif ;         font-family : 'Open Sans' , sans-serif ;   ...
Read more

Nav Bar Template

    EXERCISE ON CSS EXERCISE IV HTML Code: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >CSS Multicolor Website</ title > </ head > < style >     @import url ( 'https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Open+Sans:wght@300&family=Poppins:wght@300&display=swap' );     * {         padding : 0 ;         margin : 0 ;     }     :root {         --bodyback : #cbccd5 ;         --navback : #040468 ;         --spncol : white ;         --undercol : red ;     }     body {         background-color : var ( --bodyback ) ;     } ...
Read more

MEDIA PLAYER(HTML)

Image
            EXERCISE ON HTML EXERCISE I THIS IS HOW VIDEOS, PHOTOS AND AUDIO FILES ARE IMPORTED IN WEBSITE. HTML CODE: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title >Media player</ title > </ head > < body >     < h1 >My files</ h1 >       < h2 >Video files</ h2 >     < video height = "200" src = "1.mp4" controls poster = "mercedes.jpg" loop >Mercedes</ video >     < video height = "200" src = "1.mp4" controls poster = "mercedes.jpg" loop >Mercedes</ video >     < video height = "200" src = "1.mp4" controls poster = "mercedes.jpg" loop >Mercedes</ video >     < video height = "200" src...
Read more