<?php
    $Page_Title = '?';
    $Topic1 = 'Topic 1';
    $Detail_Topic1_P1 = 'Detail 1st Paragraph';
    $Detail_Topic1_P2 = 'Detail 2nd Paragraph';
    $Suggestion = 'Suggestion' ;
    $Sub_Topic1 = 'Bab 1';
    $Detail_Suggestion1 = 'Description 1'; 
    $Sub_Topic2 = 'Bab 2';
    $Detail_Suggestion2 = 'Description 2';
    $Sub_Topic3 = 'Bab 3';
    $Detail_Suggestion3 = 'Description 3';

    $Image_Path_Topic_1='D:/Picture/Wallpaper Gamma/1131146.png';
    
    $Image_Path_Suggestion_1='D:/Picture/Wallpaper Gamma/NeoZeta/231011165323-archax-robot-japan.jpg';
    $Image_Path_Suggestion_2='D:/Picture/Wallpaper Gamma/NeoZeta/kuratas.png';
    $Image_Path_Suggestion_3='D:/Picture/Wallpaper Gamma/Lock Screen/peakpx(4).jpg';    
    
    $IMG1 = 'data:image/jpeg;base64,' . base64_encode(file_get_contents($Image_Path_Topic_1));
    $IMG_Sug1 = 'data:image/jpeg;base64,' . base64_encode(file_get_contents($Image_Path_Suggestion_1));
    $IMG_Sug2 = 'data:image/jpeg;base64,' . base64_encode(file_get_contents($Image_Path_Suggestion_2));
    $IMG_Sug3 = 'data:image/jpeg;base64,' . base64_encode(file_get_contents($Image_Path_Suggestion_3));

    function Journaling($Topic1,$Detail_Topic1_P1,$Detail_Suggestion1){

    };
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>
        <?php
            echo $Page_Title;
        ?>
    </title>
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" /> <!-- https://fonts.google.com/ -->
    <link href="Asset_549/css/bootstrap.min.css" rel="stylesheet" /> <!-- https://getbootstrap.com/ -->
    <link href="fontawesome/css/all.min.css" rel="stylesheet" /> <!-- https://fontawesome.com/ -->
    <link href="Asset_549/css/templatemo-business-oriented.css" rel="stylesheet" />
</head>
<!--

TemplateMo 549 Business Oriented

https://templatemo.com/tm-549-business-oriented

-->
<body>
    <div class="container-fluid mt-7">
        <div class="row mb-6">
            <section class="col-lg-6">
                <h3 class="tm-title-gray mb-4">
                        Online
                </h3>

                <h3 class="tm-title-gray mb-4">
                        <?php
                            echo $Suggestion;
                        ?>
                </h3>
                <hr class="mb-5 tm-hr">
                <div class="tm-strategy-box mb-5">
                    <img src="<?php echo $IMG_Sug1;?>" 
                    alt="Image" class="img-fluid tm-strategy-img" width="150px" height="50px">
                    <div>
                        <h4 class="tm-text-primary">
                            <?php
                                echo $Sub_Topic1;
                            ?>
                        </h4>
                        <p class="tm-strategy-text">
                            <?php
                             echo $Detail_Suggestion1;
                            ?>
                        </p>
                    </div>
                </div>
                <div class="tm-strategy-box mb-5">
                    <img src="
                    <?php echo $IMG_Sug2;?>
                    " 
                    alt="Image" class="img-fluid tm-strategy-img" width="150px" height="50px">
                    <div>
                        <h4 class="tm-text-primary">
                            <?php
                                echo $Sub_Topic2;
                            ?>
                        </h4>
                        <p class="tm-strategy-text">
                            <?php
                                echo $Detail_Suggestion2;
                            ?>
                        </p>
                    </div>
                </div>
                <div class="tm-strategy-box mb-5">
                    <img src="<?php echo $IMG_Sug3;?>" 
                    alt="Image" class="img-fluid tm-strategy-img" width="150px" height="50px">
                    <div>
                        <h4 class="tm-text-primary"><?php echo $Sub_Topic3;?></h4>
                        <p class="tm-strategy-text">
                            <?php
                            echo $Detail_Suggestion3;
                            ?>
                        </p>
                    </div>
                </div>
            </section>
            <section class="col-lg-6 mb-lg-0 mb-5">
                <div class="tm-intro">
                    <h3 class="tm-title-gray mb-4">
                        <?php
                            echo $Topic1;
                        ?>
                    </h3>
                    <hr class="mb-5 tm-hr">
                    <p class="mb-5">
                        <?php
                            echo $Detail_Topic1_P1;
                        ?>
                    </p>
                    <p class="mb-5">
                        <?php
                            echo $Detail_Topic1_P2;
                        ?>
                    </p>
                    <img src="<?php echo $IMG1;?>" 
                    alt="Company Background Image" class="img-fluid tm-mb-3">
                </div>
            </section>
        </div>
        
    <script src="js/jquery-3.4.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/parallax.min.js"></script> <!-- https://pixelcog.github.io/parallax.js/ -->
    <script src="js/tooplate-script.js"></script>
    <script>
        $(document).ready(function () {
            $('#parallax-1').parallax({ imageSrc: 'img/biz-oriented-header.jpg' });
            $('#parallax-2').parallax({ imageSrc: 'img/biz-oriented-footer.jpg' });
        });
    </script>
</body>

</html>

