lesson-4-index-in-class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lesson 4</title>

    <style>
        .fl-left {
            float: left;
        }

        .myDiv {
            height: 300px;
            background-color: orange;
        }

        .m-p-b {
            background-color: lightgreen;
            font-size: 20px;
            margin: 100px;
            /* margin: 100px 50px;
            margin: 80px 40px 30px 60px;
            margin-left: 50px; */

            padding: 80px;
            /* padding: 30px 50px;
            padding: 80px 40px 20px 100px;
            padding-top: 70px; */

            border: 3px solid red;
            border-radius: 20px;
        }

        table, th, td {
            margin-left: auto;
            margin-right: auto;

            padding: 20px;

            border-spacing: 30px;

            border: 3px solid orange;
            border-radius: 10px;
        }

        /* https://www.magicpattern.design/tools/css-backgrounds */
        body {
            /* insert pattern here */
        }
    </style>


</head>
<body>
    <!-- Float property applied -->
    <div class="myDiv">
        <img src="http://picsum.photos/300" alt="random image" class="fl-left">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem quisquam suscipit odit accusantium fugit eius quas in tempora! Provident, illo beatae! Incidunt distinctio, quis nemo qui laboriosam at odio eius.</p>
    </div>

    <!-- Margin, Padding, Border -->
    <div class="m-p-b">
        <h3>Margin</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, velit!</p>

        <h3>Padding</h3>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Iure, voluptates.</p>

        <h3>Border</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste, saepe sint. Commodi ducimus delectus nisi.</p>
    </div>

    <!-- table -->
    <table>
        <tr>
            <th>Name</th>
            <th>Surname</th>
            <th>Age</th>
        </tr>

        <tr>
            <td>John</td>
            <td>Smith</td>
            <td>17</td>
        </tr>

        <tr>
            <td>Emily</td>
            <td>Green</td>
            <td>16</td>
        </tr>
    </table>

    <!-- lists -->
    <ul>
        <li>text</li>
        <li>text</li>
        <li>text</li>
    </ul>

    <ol>
        <li>shoes</li>
        <li>boots</li>
        <li>books</li>
    </ol>


    <!-- ul>li*3 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <!-- embedding video -->
    <iframe width="560" height="315" src="https://www.youtube.com/embed/I-k-iTUMQAY?start=5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>