lesson-1-index-in-class

<!DOCTYPE html>
<html>
    <head>

        <title>My first webpage</title>
        <!-- CSS code below -->
        <style>
            /* This is affection all h1 */
            h1 {
                color: blue;
                font-family:'Courier New', Courier, monospace;
                font-size: 40px;
                font-weight: bold;
                background-color: red;
                padding: 20px;
                border: 2px solid green;
                border-radius: 10px;
            }

            p {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                font-size: 20px;
                font-weight: bold;
                padding-top: 20px;
                color: violet;
                background: linear-gradient(45deg, orange, red, yellow, orange);
                text-align: center;
            }

            body {
                background-color: crimson;
            }

            .changeText {
                color: green;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <h1>Hello World!</h1>
        <h1>This is a second h1 line</h1>
        <p>This is my very first website</p>

        <a href="https://www.bbcgoodfood.com/recipes/collection/classic-cake-recipes" target="_blank">  Cake  </a>

        <img src="https://e3.365dm.com/22/06/2048x1152/skynews-elephant-new-york-happy_5805212.jpg" alt="elephant" height="150px">

        <!-- This is my comment -->
        <ul>
            <li>  Car  </li>
            <li>  Bike  </li>
            <li>  Plane  </li>
        </ul>

        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
            <br>
            Velit, <b>minima nobis</b> similique <i>harum officia</i> excepturi sint dolorem? Exercitationem corrupti, soluta atque architecto tempora id. Magnam exercitationem facilis excepturi a velit!</p>
            <br>
            <br>
            <p>Lorem <i><b>ipsum dolor</b></i> sit amet, consectetur adipisicing elit. Harum, omnis!</p>

    <span>This content is inline.</span>
    <span class="changeText">This sentence will continue inline.</span>
    </body>
</html>