Scribd Logo
Upload

Welcome to Scribd!

  • Lab 8

    Uploaded by

    Charlotte Skråmestø
    6 views3 pages
    html

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html

    Copyright:

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

    Lab 8

    Uploaded by

    Charlotte Skråmestø
    html

    Copyright:

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

     

    Lab 8
    • Block, for sections in a webpage • Inline, for text • Table, for two-dimensional table data •
    Positioned, for explicit position of an element
    <html lang="en">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Flex layout template</title>
    <style>
    /* Removing all the default margins */
    *{
    margin: 0;
    box-sizing: border-box;
    }
    /* The whole page is a flex container */
    body {
    display: flex;
    flex-direction: column;
    }
    /* Header and footer same styles.
    Flex containers with their elements centered horizontally and vertically */
    header,
    footer {
    height: 10vh;
    display: flex;
    align-items: center;
    background-color: lightblue;
    justify-content: center;
    }
    /* Row with "2 columns". The flex items will be strech to fill the container*/
    main {
    display: flex;
    flex-direction: row;
    height: 80vh;
    align-items: stretch;
    }
    nav {
    flex: 20;
    display: flex;
    flex-direction: column;
    background-color: lightcoral;
    }
    /* nav ul is a flex container where flex items are placed in columns */
    nav>ul {
    padding-left: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    list-style: none;
    }
    nav>ul>li {
    /* flex: 1;
    is the same as saying flex: 1 1 auto;
    or in other words,
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;*/
    flex: 1;
    /* all the elemnts will be flex container
    so that we can align them vertically and horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
    }
    nav>ul>li:hover {
    box-shadow: 0px 0px 5px 0px black;
    }
    nav a {
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    }
    section {
    flex: 80;
    background-color: lightgreen;
    overflow: auto;
    display: flex;
    flex-direction: column;
    }
    section>* {
    text-align: justify;
    margin: 5% 5% 0 5%;
    }
    section>*:last-child {
    margin-bottom: 5%;
    }
    /* With small screens we change the layout:
    NOTE: Newer "design" practices advocates for going movile first
    which means that the page would be implemented first considering small screens
    and then use the media queries for styling larger screens. In other words, the opposite
    of what we are doing here.
    */
    @media only screen and (max-width: 600px) {
    main {
    flex-direction: column;
    }
    nav,
    nav ul {
    flex-direction: row;
    }
    nav {
    flex: 10;
    }
    section {
    flex: 90;
    }
    }
    </style>
    </head>
    <body>
    <header>
    &lt;header&gt;
    </header>
    <main>
    <nav>
    <ul>
    <li><a href="#">&lt;section&gt;</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
    <li><a href="#">Page 3</a></li>
    <li><a href="#">Page 4</a></li>
    <li><a href="#">Page 5</a></li>
    </ul>
    </nav>
    <section>
    <article>
    <h2>Article 1</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
    Cum
    sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque
    eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
    a
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
    Cum
    sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque
    eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
    arcu.

    </p>
    </article>
    <article>
    <h2>Article 2</h2>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
    Cum
    sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque
    eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
    arcu.
    </p>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
    Cum
    sociis natoque
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
    pellentesque
    eu, pretium
    quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget,
    arcu.
    </p>
    </article>
    </section>
    </main>
    <footer>
    &lt;footer&gt;
    </footer>
    </body>
    </html>

    You might also like