Scribd Logo
Upload

Welcome to Scribd!

  • 24 views

    CSS Part 6 (Ans)

    Uploaded by

    Tarini Shah
    The document provides the code for a multi-column layout website using CSS Grid. It includes the HTML, CSS, and media queries to adjust the layout for smaller screens. The CSS Grid divides the page into 12 equal columns and rows, with different page elements assigned to grid areas. For mobile screens, the layout stacks some elements vertically using media queries.

    Copyright:

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

    CSS Part 6 (Ans)

    Uploaded by

    Tarini Shah
    24 views6 pages
    The document provides the code for a multi-column layout website using CSS Grid. It includes the HTML, CSS, and media queries to adjust the layout for smaller screens. The CSS Grid divides the page into 12 equal columns and rows, with different page elements assigned to grid areas. For mobile screens, the layout stacks some elements vertically using media queries.

    Original Description:

    ....

    Original Title

    14. CSS Part 6 (Ans)

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides the code for a multi-column layout website using CSS Grid. It includes the HTML, CSS, and media queries to adjust the layout for smaller screens. The CSS Grid divides the page into 12 equal columns and rows, with different page elements assigned to grid areas. For mobile screens, the layout stacks some elements vertically using media queries.

    Copyright:

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

    CSS Part 6 (Ans)

    Uploaded by

    Tarini Shah
    The document provides the code for a multi-column layout website using CSS Grid. It includes the HTML, CSS, and media queries to adjust the layout for smaller screens. The CSS Grid divides the page into 12 equal columns and rows, with different page elements assigned to grid areas. For mobile screens, the layout stacks some elements vertically using media queries.

    Copyright:

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

    CSS (Part 1)

    Practice Solutions

    Ans 1
    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</title>
    <link rel="stylesheet" href="style.css" />
    </head>
    <body>
    <div class="container">
    <div class="header">header</div>
    <div class="navigation">navigation</div>
    <div class="sidebar">sidebar</div>
    <div class="main">main</div>
    <div class="ads">ads </div>
    <div class="footer">footer </div>
    </div>
    </body>
    </html>
    CSSCode
    .container {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    grid-gap: 10px;
    }

    .container div {
    background-color: pink;
    font-size: 1.5rem;
    }

    .header {
    grid-column: 1 / span 12;
    }

    .sidebar {
    grid-column: 1 / span 3;
    grid-row: 2 / span 10;
    }

    .navigation {
    grid-column: 4 / span 6;
    }

    .ads {
    grid-column: 10 / span 3;
    grid-row: 2 / span 10;
    }

    .main {
    grid-column: 4 / span 6;
    grid-row: 3 / span 9;
    }

    .footer {
    grid-column: 1 / span 12;
    }
    Ans 2
    @media (max-width: 720px) {
    .header {
    grid-column: 1 / span 12;
    }
    HTML Code will remain the same as answer 1.

    CSS Code
    .navigation {
    grid-column: 1 / span 12;
    grid-row: 2;
    }

    .sidebar {
    grid-column: 1 / span 3;
    grid-row: 3 / span 9;
    }

    .main {
    grid-column: 4 / span 9;
    grid-row: 3 / span 9;
    }

    .ads {
    grid-column: 1 / span 3;
    grid-row: 12;
    }

    .footer {
    grid-column: 4 / span 9;
    grid-row: 12;
    }
    }
    Ans 3

    Complete CSS:
    .loader {
    border: 16px solid #f3f3f3;
    border-top: 16px solid goldenrod;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    }

    @keyframes spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
    }

    You might also like