read below code and and design html based personal portfolio webpage, remember background is black.
<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Diego Velázquez" />
    <meta name="description"
        content="Personal Portfolio is a one page responsive Bootstrap 4 template. This is a free open source theme, you can use our theme for any purpose, even commercially. Create amazing websites with this easy to customize template.">

    <meta property="og:title" content="Personal Portfolio - Themes Bootstrap">
    <meta property="og:site_name" content="Themes Bootstrap">
    <meta property="og:type" content="website">
    <meta property="og:description"
        content="Personal Portfolio is a one page responsive Bootstrap 4 template. This is a free open source theme, you can use our theme for any purpose, even commercially. Create amazing websites with this easy to customize template.">
    <meta property="og:image" content="">
    <meta property="og:url" content="https://themesbootstrap.com.mx/templates/personal-portfolio-template/index.html">
    <meta property="og:image:alt" content="Themes Bootstrap">

    <link rel="canonical" href="https://themesbootstrap.com.mx/templates/personal-portfolio-template/index.html" />

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <!-- Custom styles -->
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Merriweather:300,400,700|Roboto:300,400,600" rel="stylesheet">

    <!-- Ionic icons -->
    <link href="https://unpkg.com/ionicons@4.2.0/dist/css/ionicons.min.css" rel="stylesheet">

    <!-- Favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.png" />

    <title>Personal Portfolio - Themes Bootstrap</title>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-68929300-2"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }
        gtag('js', new Date());

        gtag('config', 'UA-68929300-2');
    </script>

</head>

<body>
    <button>
        <div class="template-button">
            <a href="https://github.com/technext/personal-portfolio/archive/master.zip">Download template <i class="icon ion-md-download"></i></a>
        </div>
    </button>

    <nav class="navbar fixed-top navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="index.html"><img src="assets/images/logo.svg" class="header-logo"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <i class="icon ion-md-menu"></i>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#hero">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#portfolio">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#blog">Blog</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#call-to-action">Contact</a>
                    </li>

                </ul>
            </div>
        </div>
    </nav>

    <section id="hero">
        <div class="container">
            <div class="heading-content">
                <h1>Strategies that exponentially grow your online business.</h1>
            </div>
            <div class="hero-container margintop-lg">
                <div class="hero-details hidden-mobile">
                    <span>- Featured Project</span>
                    <a href="#">
                        <h3>Smartwatch User Interaction</h3>
                    </a>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ullamcorper dui, id molestie
                        ligula. </p>
                </div>
                <div class="hero-button hidden-mobile">
                    <a href="" class="portfolio-link">See case study <i class="icon ion-md-add-circle"></i></a>
                </div>
                <img src="assets/images/hero-01.jpg" class="img-fluid"
                    alt="Smartwatch image by Luke Chesser from Unsplash">
                <div class="mobile-only margintop-sm">
                    <span>- Featured Project</span>
                    <h3>Smartwatch User Interaction</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ullamcorper dui, id molestie
                        ligula.</p>
                </div>
                <a href="" class="primary-btn mobile-only">See case study <i class="icon ion-md-add-circle"></i></a>
            </div>
        </div>
    </section>

    <section id="portfolio">
        <div class="container">
            <div class="heading-content">
                <h2>
                    Software development that helps teams work together to accelerate the growth of your company on the
                    internet</h2>
                <p class="margintop-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ullamcorper
                    dui, id molestie ligula. Vestibulum a urna vel est rhoncus semper et sed libero.</p>
            </div>
            <div class="row margintop-lg">
                <div class="col-md-6">
                    <div class="portfolio-container">
                        <div class="portfolio-details">
                            <span>- Featured Project</span>
                            <a href="#">
                                <h3>Best Smartwatch Apps</h3>
                            </a>
                        </div>
                        <div class="portfolio-button">
                            <a href="#" class="portfolio-link">See case study <i class="icon ion-md-add-circle"></i></a>
                        </div>
                        <img src="assets/images/portfolio-02.jpg" class="img-fluid"
                            alt="Smartwatch image by Luke Chesser from Unsplash">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="portfolio-container">
                        <div class="portfolio-details">
                            <span>- Featured Project</span>
                            <a href="#">
                                <h3>Argumented Reality</h3>
                            </a>
                        </div>
                        <div class="portfolio-button">
                            <a href="#" class="portfolio-link">See case study <i class="icon ion-md-add-circle"></i></a>
                        </div>
                        <img src="assets/images/portfolio-01.jpg" class="img-fluid"
                            alt="Argumented Reality image by Samuel Zeller from Unsplash">
                    </div>
                </div>
            </div>
            <div class="row margintop-sm">
                <div class="col-md-6">
                    <div class="portfolio-container">
                        <div class="portfolio-details">
                            <span>- Featured Project</span>
                            <a href="#">
                                <h3>New Music App</h3>
                            </a>
                        </div>
                        <div class="portfolio-button">
                            <a href="#" class="portfolio-link">See case study <i class="icon ion-md-add-circle"></i></a>
                        </div>
                        <img src="assets/images/portfolio-03.jpg" class="img-fluid" alt="Laptop image by 
                        Nikita Kachanovsky from Unsplash">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="portfolio-container">
                        <div class="portfolio-details">
                            <span>- Featured Project</span>
                            <a href="#">
                                <h3>Web Applications</h3>
                            </a>
                        </div>
                        <div class="portfolio-button">
                            <a href="#" class="portfolio-link">See case study <i class="icon ion-md-add-circle"></i></a>
                        </div>
                        <img src="assets/images/portfolio-04.jpg" class="img-fluid"
                            alt="Be Creative image by Rawpixel from Unsplash">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="blog">
        <div class="container">
            <div class="heading-content">
                <h2>The best tech articles to grow your business online.</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ullamcorper dui, id molestie
                    ligula. Vestibulum a urna vel est rhoncus semper et sed libero.</p>
            </div>
            <div class="row row-flex margintop-lg">
                <div class="col-lg-4 col-md-12 d-flex">
                    <div class="blog-post col">
                        <div class="label-tag">
                            <span>Popular Article</span>
                        </div>
                        <a href="#">
                            <h4>Aesthetics & Usability </h4>
                        </a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ullamcorper dui, id
                            molestie ligula. Vestibulum a urna vel est rhoncus semper et sed libero.
                        </p>
                        <a href="#" class="blog-link">Read on Medium <i
                                class="icon ion-md-arrow-dropright-circle"></i></a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 d-flex">
                    <div class="blog-post col">
                        <div class="label-tag">
                            <span>Popular Article</span>
                        </div>
                        <a href="#">
                            <h4>Developing an App</h4>
                        </a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ullamcorper dui, id
                            molestie ligula. Vestibulum a urna vel est rhoncus semper et sed libero.</p>
                        <a href="#" class="blog-link">Read on Medium <i
                                class="icon ion-md-arrow-dropright-circle"></i></a>
                    </div>
                </div>
                <div class="col-lg-4 col-md-12 d-flex">
                    <div class="blog-post col">
                        <div class="label-tag">
                            <span>Popular Article</span>
                        </div>
                        <a href="#">
                            <h4>Becoming a Software Architect</h4>
                        </a>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ullamcorper dui, id
                            molestie ligula. Vestibulum a urna vel est rhoncus semper et sed libero.</p>
                        <a href="#" class="blog-link">Read on Medium <i
                                class="icon ion-md-arrow-dropright-circle"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section id="call-to-action">
        <div class="container">
            <div class="heading-content text-center">
                <span>Contact us</span>
                <h2>Start a new project</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae ullamcorper dui, id molestie
                    ligula. Vestibulum a urna vel est rhoncus semper et sed libero.</p>
                <a href="#" class="primary-btn">Contact us</a>
            </div>
        </div>
    </section>

    <section id="footer">
        <div class="container">
            <h6>Let's work together.</h6>
            <small>Personal Portfolio 2019 © • Created by <a href="https://themesbootstrap.com.mx/index.html">Themes
                    Bootstrap</a></small>
            <ul class="list-inline margintop-sm">
                <li class="list-inline-item"><a href="#"><i class="icon ion-logo-facebook"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="icon ion-logo-twitter"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="icon ion-logo-dribbble"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="icon ion-logo-instagram"></i></a></li>
                <li class="list-inline-item"><a href="#"><i class="icon ion-logo-linkedin"></i></a></li>
            </ul>
        </div>
    </section>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
</body>

</html>