<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="untuk tugas">
    <meta name="keywords" content="">
    <meta name="author" content="ardan">
    <title>Bootstrap</title>

    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link rel="icon" type="image/x-icon" href="assets/img/logo3.png">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

</head>

<body>

    <!-- HEADER -->
    <div class="container-fluid" style="background-image: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url(assets/img/header.jpeg);
        height: 645px;
        background-size: cover;
        background-position: center;">

        <div class="row border-bottom border-1">

            <div class="col d-flex align-items-center" style="padding-left: 60px;">

                <img src="assets/img/imagee.png" style="width: 60px; height: 60px;">

                <p class="text-light fs-6 mb-1">
                    L O G O
                </p>

            </div>

            <div class="col d-flex align-items-center gap-4 justify-content-end" style="padding-right: 80px;">

                <a href="#" class="text-success text-decoration-none">
                    Home
                </a>

                <a href="#" class="text-light text-decoration-none">
                    Products
                </a>

                <div class="dropdown">

                    <a href="#" class="dropdown-toggle text-light text-decoration-none" data-bs-toggle="dropdown"
                        aria-expanded="false">

                        Services

                    </a>

                    <ul class="dropdown-menu">

                        <li>
                            <a class="dropdown-item" href="#">
                                Action
                            </a>
                        </li>

                        <li>
                            <a class="dropdown-item" href="#">Another action</a>
                        </li>

                        <li>
                            <a class="dropdown-item" href="#">Something else here</a>
                        </li>
                    </ul>
                </div>
                <a href="#" class="text-light text-decoration-none">Contact</a>
            </div>
        </div>

        <div class="col-12 text-center" style="padding-top: 150px;">
            <p class="text-light display-1">Dramatically Engage</p>
            <p class="lh-sm text-secondary">Objectively innovate empowered manufactured products whereas parallel platforms.</p>
            <a href="#" class="btn btn-success btn-lg text-light rounded-5">ENGAGE NOW</a>
        </div>
    </div>

    <div class="container-fluid bg-success">
        <div class="row">
            <div class="col-12 text-center text-light pt-5 pb-5">
                <i class="bi bi-apple fs-1"></i>
                <p class="fs-3 fw-light">Completely synergize resource taxing relationships</p>
                <p class="fs-5 fw-light" style="margin-left: 152px; margin-right: 120px;">Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.
                </p>
            </div>
        </div>
    </div>


    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-6 text-end pe-0">
                <img src="assets/img/writing.jpg.jpeg" class="rounded-circle mt-5" style="height: 300px; width: 300px;" alt="#">
            </div>

            <div class="col-6 ps-3">
                <p class="text-dark fs-1 fw-light">Best In Class</p>
                <p class="text-secondary fs-5 fw-light">Holistically predominate extensible testing procedures for reliable supply chains. Dynamically innovate resource-leveling customer service for state of the art customer service.</p>
                <a href="#" class="btn btn-success btn-lg text-light mt-3 rounded-5">CLASSIFY IT</a>
            </div>
        </div>
    </div>

    <script src="assets/js/bootstrap.bundle.min.js"></script>

</body>
</html>