Scribd Logo
Upload

Welcome to Scribd!

  • Style Css

    Uploaded by

    iruljack176
    9 views3 pages
    The document contains CSS code that defines styles for a website layout. It styles elements like the header, navigation bar, main content section, sidebar, footer, and embedded images. The header has a background image and the navbar has list items for navigation links. The main content and aside sections are displayed flexibly side by side. Social media links have hover effects and images are used for products being displayed.

    Original Description:

    asdasd

    Original Title

    style css

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document contains CSS code that defines styles for a website layout. It styles elements like the header, navigation bar, main content section, sidebar, footer, and embedded images. The header has a background image and the navbar has list items for navigation links. The main content and aside sections are displayed flexibly side by side. Social media links have hover effects and images are used for products being displayed.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as txt, pdf, or txt
    9 views3 pages

    Style Css

    Uploaded by

    iruljack176
    The document contains CSS code that defines styles for a website layout. It styles elements like the header, navigation bar, main content section, sidebar, footer, and embedded images. The header has a background image and the navbar has list items for navigation links. The main content and aside sections are displayed flexibly side by side. Social media links have hover effects and images are used for products being displayed.

    Copyright:

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

    header{

    background-color: royalblue;
    height: 90px;
    background-image: url('img/xiaomi.png');
    background-position: center;
    background-repeat: no-repeat;
    text-align: left;
    color: white;
    font-size: 70px;
    line-height: 90px;
    }
    nav{
    height: 40px;
    background-color: white;
    }
    nav ul{
    list-style: none;
    color: white;
    }
    nav ul li{
    background-color: royalblue;
    border-radius: 50%;
    height: 40px;
    width: 70px;
    margin-left: 30px;
    float: right;
    font-size: 17px;
    line-height: 40px;
    text-align: center;
    }
    nav ul li a{
    color: white;
    text-decoration: none;
    }
    nav ul li a:hover{
    color: yellow;
    }
    .flex{
    display: flex;
    clear: both;
    }
    section{
    min-height: 450px;
    flex: 77%;
    border: 2px solid royalblue;
    border-radius: 50px;
    color: royalblue;
    margin: 10px;
    padding: 10px;
    text-align: center;
    }
    aside{
    min-height: 450px;
    flex: 23%;
    background-color: white;
    border: 2px solid royalblue;
    border-radius: 50px;
    color: royalblue;
    margin: 10px;
    padding: 10px;
    text-align: center;
    }
    .ig{
    background-image: url('img/ig.png');
    background-repeat: no-repeat;
    height: 118px;
    width: 118px;
    margin-left: 29%;
    margin-bottom: 5%;
    margin-top: 10%;
    }
    .iga{
    color: royalblue;
    text-decoration: none;
    }
    .iga:hover{
    color:purple;
    }
    .yt{
    background-image: url('img/yt.png');
    background-repeat: no-repeat;
    height: 100px;
    width: 178px;
    margin-left: 18%;
    margin-bottom: 5%;
    margin-top: 40%;
    }
    .yta{
    color: royalblue;
    text-decoration: none;
    }
    .yta:hover{
    color: red;
    }
    footer{
    background-color: royalblue;
    height: 50px;
    text-align: center;
    color: white;
    font-size: 20px;
    line-height: 50px;
    }
    .smartphone{
    background-image: url('img/smartphone.png');
    height: 277px;
    width: 400px;
    background-repeat: no-repeat;
    margin-left: 29%;
    }
    .monitor{
    background-image: url('img/monitor.png');
    height: 280px;
    width: 400px;
    background-repeat: no-repeat;
    margin-left: 29%;
    }
    .smarttv{
    background-image: url('img/smartv.png');
    height: 250px;
    width: 400px;
    background-repeat: no-repeat;
    margin-left: 29%;
    }
    .cctv{
    background-image: url('img/cctv.png');
    height: 400px;
    width: 400px;
    background-repeat: no-repeat;
    margin-left: 29%;
    }

    You might also like