<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <title>Design system</title>
    </head>
    <body class="bg-dark">
        
        <!-- CHALLENGE ----------------
             1. Give the first div a light blue background and dark text color
             2. Give the second div a white background and dark text color
             3. Give the third div a light blue background with a 20% alpha value
        --------------------------- -->
        
        <div class="container">
            <h1>Design system</h1>
            
            
            <div class="" style="padding: 1rem">
                light blue bg, with dark text
            </div>
            
            <div class="" style="padding: 1rem">
                white bg, with dark text
            </div>
            
            <div class="" style="padding: 1rem">
                light blue bg at 20% opacity and white text
            </div>
            
        </div>
        
        <script src="index.pack.js"></script>
    </body>
</html>

<head>

<title>Design system</title>

</head>

<!-- CHALLENGE ----------------

1. Give the first div a light blue background and dark text color

2. Give the second div a white background and dark text color

3. Give the third div a light blue background with a 20% alpha value

--------------------------- -->

<h1>Design system</h1>

light blue bg, with dark text

</div>

white bg, with dark text

</div>

light blue bg at 20% opacity and white text

</div>

</body>

</html>

<html>

-4:06