Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    First Website Code

    Uploaded by

    nohigik543
    The document contains HTML and CSS code to create a webpage layout. The HTML defines different page sections using div elements. The CSS styles these elements and sets up a grid layout with columns and rows. A video is embedded in one section.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    First Website Code

    Uploaded by

    nohigik543
    6 views3 pages
    The document contains HTML and CSS code to create a webpage layout. The HTML defines different page sections using div elements. The CSS styles these elements and sets up a grid layout with columns and rows. A video is embedded in one section.

    Original Description:

    Original Title

    First Website code

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document contains HTML and CSS code to create a webpage layout. The HTML defines different page sections using div elements. The CSS styles these elements and sets up a grid layout with columns and rows. A video is embedded in one section.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    6 views3 pages

    First Website Code

    Uploaded by

    nohigik543
    The document contains HTML and CSS code to create a webpage layout. The HTML defines different page sections using div elements. The CSS styles these elements and sets up a grid layout with columns and rows. A video is embedded in one section.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 3

    HTML CODE

    <!DOCTYPE html>
    <html>
    <head>
    <title>Practice</title>
    <link rel="stylesheet"href="Basic.css">
    <link
    href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"rel="stylesh
    eet"/>
    </head>
    <body>
    <div id="main">
    <div id="left-top-left">
    <div id="square">
    </div>
    </div>

    <div id="left-top-right">
    <h4>Menu</h4>
    <h5>Home Page</h5>
    <h5>Portfolio</h5>
    <h5>Fashion Week -&#169;2021</h5>
    <h5>News/Articles</h5>
    <h5>Contact</h5>

    </div>
    <div id="left-center">
    <h1>Select</h1>
    <h1>Fashion</h1>
    <h1>Mod.05 -</h1>
    <h1>Scene</h1>
    </div>
    <div id="left-top-bottom">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum
    deleniti expedita id magni sunt non sapiente illo molestiae laborum incidunt
    explicabo reprehenderit, iusto totam magnam laboriosam. </p>
    </div>
    <div id="right">
    <video autoplay loop muted src="C:\Users\Harsh\Desktop\men.mp4"></video>
    </div>
    <div id="arrow">
    <i class="ri-arrow-right-fill"></i>
    </div>
    </div>
    </body>
    </html>

    CSS CODE

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gilroy';
    }
    html,body{
    height: 100%;
    width: 100%;
    }
    #main{
    height: 100%;
    width: 100%;
    background-color: whitesmoke;
    display: grid;
    grid-template-columns: 25% 25% 50%;
    grid-template-rows: 30% 55% 15%;
    }
    #left-top-left{
    /* background-color: blueviolet; */
    padding: 30px;
    }
    #square{
    height: 18px;
    width: 18px;
    background-color: black;
    rotate: 45deg;
    }

    #left-top-right{
    /* background-color:tomato; */
    justify-self: right;
    text-align: right;
    padding: 30px;
    }
    #left-top-right h4{
    margin-bottom: 35px;
    font-size: 18px;
    font-weight: 600;
    }
    #left-top-right h5{
    font-size: 12px;
    font-weight: 300;
    }
    #left-center{
    /* background-color:orchid; */
    grid-column: 1/3;
    padding: 30px;
    }
    #left-center h1{
    font-size: 6vw;
    text-transform: uppercase;
    font-weight: 500;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 5.3vw;
    }
    #left-center h1:nth-child(2n){
    text-align: center;
    }

    #left-top-bottom{
    /* background-color: red; */
    grid-column: 1/3;
    padding: 15px;
    }
    #left-top-bottom p{
    width: 75%;
    font-size: 12px;
    }
    #right{
    /* background-color: chartreuse; */
    grid-column: 3;
    grid-row: 1/4;
    padding: 40px;
    padding-right: 150px;
    }
    #right video{
    height: 100%;
    width: 100%;
    object-fit: cover;
    border:3px;
    box-shadow: 5px 5px 20px black;
    }
    #arrow{
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: orangered;
    padding: 10px;
    color: white;
    border-radius: 50%;
    }
    #arrow i{
    font-size: 40px;
    font-weight: 100;
    }

    You might also like