lesson-2-index-in-class

<!DOCTYPE html>
<html>
    <head>
        <title>My second lesson</title>


        <style>
            /* HERE CSS */

            /* CSS classes */
            .green-text {
                color: green;
                font-family: Arial, Helvetica, sans-serif;
                font-weight: bold;
            }

            .big-text {
                font-size: 50px;
            }

            /* CSS globals  */
            p {
                color: purple;
            }

            body {
                background-color: pink;
            }

        </style>

    </head>

    <body>
        <!-- For homework check https://www.w3schools.com/ -->
        <p class="green-text big-text">Paragraph is a block of text. The HTML will remove any extra spacing.</p>

        <p class="big-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quod earum at necessitatibus sequi maiores, voluptates nesciunt eum quae provident obcaecati ad molestias alias, ipsa, temporibus neque quis beatae asperiores doloribus!</p>

        <span><strong>This</strong> is an inline of text.</span>
        <span>This is second line of inline text.</span>

        <!-- Break -->
        <br>

        <pre>      The text inside preserves element preserves          both space and breaks
            (but change font).
        </pre>

        <!-- This is a paragraph -->
        <p>
            Lorem ipsum dolor sit amet consectetur, adipisicing elit.

            <em>Nihil enim maxime voluptatum</em>

            <i>accusamus illo qui sit ducimus</i>

            <strong>Repudiandae perferendis</strong>

            <b>consectetur blanditiis, nisi at</b>

            <del>laboriosam</del> unde sint
            <ins>something</ins> corrupti recusandae!
        </p>

        <!-- URL link -->
        <a href="https://www.bbc.co.uk/food/cake">Cake</a>

        <!-- Image -->
        <!-- URL image link -->
        <img src="https://picsum.photos/200" alt="random image">

        <!-- local destination / path link to image -->
        <!-- Use for Homework -->
        <img src="/lesson-2/cake.jpg" alt="carrot cake">

        <!-- Inline CSS -->
        <p style="color: blue;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus velit impedit, atque reprehenderit inventore adipisci eveniet aperiam quia totam ipsam iure esse sequi molestiae recusandae animi, voluptates molestias. Repellat, quam.</p>

        <!-- Use in homework -->
        <!-- Inline CSS for part of the paragraph text. -->
        <p>Lorem ipsum dolor sit
            <span style="background-color: red;" class="big-text">amet</span> consectetur adipisicing elit. Sed doloribus excepturi nemo ratione dolorum mollitia rem eius earum cumque, ea provident perspiciatis dignissimos magni veritatis sequi facere ipsum aut dolor?
        </p>

        <!-- Inline CSS with multiple properties  -->
        <p style="  color: yellow;
                    background-color: green;
                    font-family:'Courier New', Courier, monospace;
                    font-size: 20px;
                    text-align:center;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum inventore maxime nulla, corporis natus nesciunt. Natus quas suscipit ducimus placeat. Eos veniam repellat voluptatum nobis rem recusandae in illum accusantium.
        </p>

    </body>
</html>