<style>
    nav li{
        display: inline-flex;
    align-items: center;
    margin-right: 10px;
    } 
    nav li i{
        color: #fff;
    }
    .no-li{
        list-style: none;
    }
    .box{
        background: #00000073;
    }
    .main-service{
        display: flex;
        justify-content: space-between;
    }
    .main-service i, .icon, .icon-2{
        background: #d63443;
        padding: 10px;
        border-radius: 100%;
        width: 50px;
        height: 50px;
        line-height: 30px;
    }
    .icon-2{
        background: #333;
        color: fff;
    }
</style>
        <!-- nav -->
        <nav class="navbar navbar-expand-md navbar-dark bg-dark" n-widget-name="Navbar" n-widget="position">
        <a class="navbar-brand" href="javascript:void(0)" style="display: flex; align-items: center;">
          <img src="http://192.168.56.1/izzhar/nblog/ndata/img/n-logo.jpg" width="50" height="50" class="d-inline-block align-top bg-light p-1 mr-3 rounded-circle" alt="">
          <span class="fs-6-b">My Portofolio</span>
        </a>
        <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarCollapse" style="">
            <ul class="navbar-nav ml-auto n-li" n-widget-name="Navbar menu" n-widget="align">
                <li class="nav-item">
                    <i class="fa fa-map-marker"></i> <a class="nav-link" href="javascript:void(0)">Jl. Cisaranten kulon No 72, Bandung</a>
                </li>
                <li class="nav-item">
                    <i class="fa fa-mobile"></i> <a class="nav-link" href="javascript:void(0)">085315069098</a>
                </li>
               
            </ul>
<!--                 <button class="btn btn-dark my-2 my-sm-0">Contact</button> -->

            <!--<form n-widget-name="Search" n-widget="show" class="m-0 form-inline mt-md-0" action="search.php" method="get">-->
            <!--    <input class="form-control mr-sm-2" type="text" name="search" placeholder="Search" aria-label="Search">-->
            <!--    <button class="btn btn-dark my-2 my-sm-0" type="submit">Search</button>-->
            <!--</form>-->
        </div>
    </nav>
        
        <!--Header-->
        <div class="jumbotron text-left" style="color: #fff; text-shadow: 2px 2px 2px #333; background: transparent url(http://192.168.56.1/izzhar/nblog/ndata/img/header-bg.jpg) no-repeat scroll center 50% / cover;margin-bottom: 0;" n-widget-name="Set" n-widget="content align">
          
          <!--<li class="no-li"><i class="fa fa-code"></i> Website Programmer & Designer</li>-->
          <div class="p-5 my-5 box" style="max-width: 450px;">
              <h1>Anjas Gumbira</h1>
              <br/>
              Memaksimalkan kesederhanaan untuk sejuta manfaat di kemudian</div>
          <a class="btn btn-danger btn-lg" ><i class="fa fa-envelope"></i> Contact Me</a>
          <a class="btn btn-dark btn-lg" ><i class="fa fa-desktop"></i> See my project</a>
        </div>
        
        <!--MAIN SERVICE-->
        <div class="container-fluid bg-dark p-5 text-light text-center main-service">
            <li class="no-li"><i class="fa fa-globe"></i> Website Programmer</li>
            <li class="no-li"><i class="fa fa-mobile"></i> Mobile Apps creator</li>
            <li class="no-li"><i class="fa fa-brush"></i> Designer</li>
        </div>
        
        <!--about-->
        <div class="container-fluid bg-secondary p-5 text-light main-about">
            <div class="row" n-widget-name="Content" n-widget="direction">
                <div class="col-sm-6">
                        <img src="http://192.168.56.1/izzhar/nblog/ndata/img/digital-marketing.webp" class="rounded mx-auto d-block w-100" alt="Responsive image">
                </div>
                <div class="col-sm-6 p-3">
                    <h3 class="display-4">Tentang Saya <i class="fa fa-user"></i></h3><hr/>
                    <p class="">
                            Nama lengkap saya <b>ANJAS GUMBIRA</b>, Saya lahir di bandung tanggal 11 November 1996.<br/>
                            Sejak awal masuk SMP ketertarikan saya kedalam dunia IT sangat besar, dan mulai mempelajari bidang pemrograman website ketika masuk di akhir SMP kelas 3. Sejak itu saya sering menggali ilmu secara otodidak mengenai PEMROGRAMAN WEBSITE. dari HTML hingga framework PHP. 
                    </p>
                </div>
            </div>
            <p class="">
                Meskipun hanya lulusan SMK dengan keahlian Tekhnik Audio Video, pengalaman, kemampuan dan pemahaman saya mengenai dunia pemrograman website sudah sangat cukup untuk menciptakan produk. Saya sudah membuat beberapa produk saya sendiri dan produk milik perusahaan tempatsaya bekerja.
            </p>
        </div>
        
        
        <!--MAIN isi-->
        <div class="container-fluid bg-dark p-5 text-light main-isi">
            <div class="row" n-widget-name="Content" n-widget="direction">
                <div class="col-sm-6 bg-secondary">
                        <div class="p-3">
                            <h2><i class="fa fa-user icon-2"></i> Karakter</h2><hr/>
                            <ul>
                                <li>Baik</li>
                                <li>Jujur</li>
                                <li>Suka dengan Hal baru</li>
                                <li>Kreatif</li>
                                <li>Inovatif</li>
                            </ul>
                        </div>
                </div>
                <div class="col-sm-6 bg-secondary">
                        <div class="p-3">
                            <h2><i class="fa fa-user icon"></i> Pendidikan</h2><hr/>
                            <ul>
                                <li>SDN Cisaranten Kulon Bandung</li>
                                <li>SMPNT 8 Bandung</li>
                                <li>SMKN 6 Bandung</li>
                            </ul>
                        </div>
                </div>
            </div>
            <div class="row mt-3">
                <div class="col-sm-6 bg-danger">
                        <div class="p-3 ">
                            <h2><i class="fa fa-star icon-2"></i> Pengalaman</h2><hr/>
                            <ul>
                                <li>Baik</li>
                                <li>Jujur</li>
                                <li>Suka dengan Hal baru</li>
                                <li>Kreatif</li>
                                <li>Inovatif</li>
                            </ul>
                        </div>
                </div>
                <div class="col-sm-6 bg-secondary">
                    <div class="p-3">
                            <h2><i class="fa fa-user icon"></i> Pendidikan</h2><hr/>
                            <ul>
                                <li>SDN Cisaranten Kulon Bandung</li>
                                <li>SMPNT 8 Bandung</li>
                                <li>SMKN 6 Bandung</li>
                            </ul>
                        </div>
                </div>
            </div>
        </div>
        