Scribd Logo
Upload

Welcome to Scribd!

  • 27 views

    Second Website Code

    Uploaded by

    nohigik543
    The document contains HTML and CSS code that structures a webpage with navigation menus at the top and images below. The navigation menus include links and the page title. Below the menus are multiple images displayed horizontally.

    Copyright:

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

    Second Website Code

    Uploaded by

    nohigik543
    27 views4 pages
    The document contains HTML and CSS code that structures a webpage with navigation menus at the top and images below. The navigation menus include links and the page title. Below the menus are multiple images displayed horizontally.

    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 that structures a webpage with navigation menus at the top and images below. The navigation menus include links and the page title. Below the menus are multiple images displayed horizontally.

    Copyright:

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

    Second Website Code

    Uploaded by

    nohigik543
    The document contains HTML and CSS code that structures a webpage with navigation menus at the top and images below. The navigation menus include links and the page title. Below the menus are multiple images displayed horizontally.

    Copyright:

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

    HTML CODE

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"href="Basic.css">
    <title>Document</title>
    </head>
    <body>
    <div id="main">
    <div id="nav">
    <div id="nav-1">
    <div class="gola"></div>
    <div class="gola"></div>
    </div>
    <div id="nav-2">
    <h4>EN</h4>
    <h4>Country : Russia</h4>
    <h4>Profile</h4>
    <h4>Wishlist(0)</h4>
    <h4>Search</h4>
    </div>
    </div>
    <div id="nav-part-2">
    <h3>Sun</h3>
    <h3>Optical</h3>
    <h3>Collection</h3>
    <h3>Studio</h3>
    <h3>About</h3>
    <h3>Shops</h3>
    <h3>Journal</h3>
    </div>
    <div id="content">
    <div id="text-part">
    <div class="elem">
    <h1>Johny walker</h1>
    </div>
    <div class="elem">
    <h1>Trendline</h1>
    </div>
    <div class="elem">
    <h1>Blender</h1>
    </div>
    <div class="elem">
    <h1>Johny walker</h1>
    </div>
    <div class="elem">
    <h1>Trendline</h1>
    </div>
    <div class="elem">
    <h1>Blender</h1>
    </div>
    </div>
    <div id="image-part">
    <img src="https://images.unsplash.com/photo-1513673054901-2b5f51551112?
    q=80&w=1000&auto=format&fit=crop&ixlib=rb-
    4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8M3x8d29tYW4lMjB3aXRoJTIwZ2xhc3Nlc3xlbnwwfHwwfHx8
    MA%3D%3D"alt="girl">
    <img src="https://img.freepik.com/free-photo/close-up-portrait-stylish-
    brunette-woman-glasses-laughing-smiling-posing-eyewear-agains_1258-
    88375.jpg"alt="girl">
    <img src="https://e1.pxfuel.com/desktop-wallpaper/930/581/desktop-
    wallpaper-face-black-women-model-sunglasses-glasses-graphy-lips-hair-nose-skin-
    head-color-beauty-eye-neck-hairstyle-shoot-fashion-accessory-vision-care-organ-
    eyewear-1680x1050-women-wear.jpg"alt="girl">
    </div>
    </div>
    </div>
    </body>
    </html>

    CSS CODE

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    html,body{
    height: 100%;
    width: 100%;
    }
    #main{
    height: 100%;
    width: 100%;
    background-color: whitesmoke;
    }
    #nav{
    height: 50px;
    width: 100%;
    /* background-color: darkgoldenrod; */
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding:0px 30px;
    }
    #nav-1{
    /* height: 30px;
    width: 30px; */
    /* background-color:tomato; */
    display: flex;
    gap: 2px;
    align-items: center;
    justify-content: center;
    }
    .gola{
    height: 15px;
    width: 15px;
    background-color: black;
    border-radius: 50%;
    }
    #nav-2{
    /* background-color: chartreuse; */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap:35px;
    }
    #nav-2 h4{
    font-size: 10px;
    font-weight: 600;
    }
    #nav-part-2{
    height: 50px;
    width: 100%;
    /* background-color: hotpink; */
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: start;
    padding-left: 30px;
    }
    #nav-part-2 h3{
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    }
    #content{
    height: calc(100% - 100px);
    width: 100%;
    /* background-color: blueviolet; */

    }
    #text-part{
    height: 40%;
    width: 100%;
    /* background-color: orangered; */
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 35px;
    }
    #text-part::-webkit-scrollbar{
    background-color: transparent;
    height: 7px;
    }
    #text-part::-webkit-scrollbar-thumb{
    background-color: orangered;
    }
    .elem{
    flex-shrink: 0;
    height: 100%;
    width: 60%;
    /* background-color: chartreuse; */
    display: flex;
    align-items: center;
    justify-content: center;
    }
    .elem h1{
    font-size: 80px;
    font-weight: 100;
    }
    #image-part {
    height: 60%;
    width: 100%;
    background-color: yellow;
    display: flex;
    overflow-x: auto;
    }
    #image-part::-webkit-scrollbar{
    display: none;
    }
    #image-part img{
    flex-shrink: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    }

    You might also like