Layout B


<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
        <style>
            * {
                color: rgb(68, 68, 68);
            }
            body {
                background-color: sandybrown;
            }

            .custom-navbar-bg {
                background-color: rgb(82, 82, 82);
            }

            .custom-navbar-txt-color {
                color: aliceblue;
            }
            .footer {
                padding-top: 30px;
                background-color: rgb(255, 153, 63);
            }

            .header {
                background-color: rgb(255, 153, 63);
            }

            .image {
                margin-top: 20px;
                width: 256px;
                height: 256px;
                border: 4px solid rgb(200, 113, 113);
                border-radius: 8px;
                object-fit: cover;
            }

        </style>
    </head>
    <body>
        <!--Navigation-->
        <div class="container-fluid">
            <div class="row flex-nowrap">
                <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 custom-navbar-bg">
                    <div class="d-flex flex-column align-items-center align-items-sm-start px-3 pt-2 text-white min-vh-100">
                        <a class="d-flex align-items-center pb-3 mb-md-0 me-md-auto text-white text-decoration-none">
                            <span class="fs-5 d-none d-sm-inline custom-navbar-txt-color">04 Activity 1</span>
                        </a>
                        <ul class="nav nav-pills flex-column mb-sm-auto mb-0 align-items-center align-items-sm-start" id="menu">
                            <li class="nav-item">
                                <a href="#" class="nav-link align-middle px-0">
                                    <i class="fs-4 bi-house"></i> <span class="ms-1 d-none d-sm-inline custom-navbar-txt-color">Home</span>
                                </a>
                            </li>
                            <li>
                                <a href="#" class="nav-link px-0 align-middle">
                                    <i class="fs-4 bi-table"></i> <span class="ms-1 d-none d-sm-inline custom-navbar-txt-color">About</span></a>
                            </li>
                            <li>
                                <a href="#" class="nav-link px-0 align-middle">
                                    <i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline custom-navbar-txt-color">Store</span> </a>
                            </li>
                            <li>
                                <a href="#" class="nav-link px-0 align-middle">
                                    <i class="fs-4 bi-people"></i> <span class="ms-1 d-none d-sm-inline custom-navbar-txt-color">More Articles</span> </a>
                            </li>
                        </ul>
                        <hr>
                    </div>
                </div>
                <!--Header-->
                <div class="col py-3">
                    <header class="text-center header">
                        <h1>MADE FOR LAYOUT B</h1>
                    </header>
        <!--Section/Article-->
        <div class="container text-center">
            <div class="row text-center fs-1">
                <div class="col">
                    How artificial intelligence is transforming the world
                </div>
            </div>
            <div class="row">
              <section class="col">
                The potential of Artificial Intelligence (AI) and robots to reshape our future has attracted vast interest among
                the public, government and academia in the last few years. As in every other sector of life, higher education
                (HE) will be affected, perhaps in a profound way (Bates et al., 2020; DeMartini and Benussi, 2017). HE will have
                to adapt to educate people to operate in a new economy and potentially for a different way of life. AI and robotics
                are also likely to change how education itself works, altering what learning is like, the role of teachers.
                <br><img class="image" src="https://sdtimes.com/wp-content/uploads/2016/06/0622.sdt-openai.jpeg" class="img-fluid rounded mx-auto d-block">
              </section>
              <section class="col">
                Artificial intelligence algorithms are designed to make decisions, often using real-time data. They are unlike
                passive machines that are capable only of mechanical or predetermined responses. Using sensors, digital data,
                or remote inputs, they combine information from a variety of different sources, analyze the material instantly,
                and act on the insights derived from those data. With massive improvements in storage systems, processing speeds,
                and analytic techniques, they are capable of tremendous sophistication in analysis and decisionmaking.
                <br><img class="image" src="https://imageio.forbes.com/specials-images/imageserve/5eda41e0b6ac5c00060e2821/Network-forming-AI-robot-face/960x0.jpg" class="img-fluid rounded mx-auto d-block">
              </section>
            </div>
          </div>
          <!--Footer-->
          <div class="container">
            <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
              <p class="col-md-4 mb-0 text-body-secondary">Santos, Ygi Martin <br>BSIT 3A</p>

              <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
                <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
              </a>

              <ul class="nav col-md-4 justify-content-end">
                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
              </ul>
            </footer>
          </div>
        </div>
            </div>
        </div>


    </body>
</html>