<!-- SVG Intro -->

<svg

     data-name="Layer 1"

     xmlns="http://www.w3.org/2000/svg"

     viewBox="0 0 1440 320"

     preserveAspectRatio="none"

     class="svg position-absolute d-none d-lg-block fade"

     style="height: 1100px; width: 100%; z-index: -10"

     >

  <defs>

    <linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0">

      <stop stop-color="hsl(217, 81%, 98.1%)" offset="0%"></stop>

      <stop stop-color="hsl(217, 81%, 94.1%)" offset="100%"></stop>

    </linearGradient>

  </defs>

  <path

        fill="url(#sw-gradient-0)"

        d="M 0.351 264.418 C 0.351 264.418 33.396 268.165 47.112 270.128 C 265.033 301.319 477.487 325.608 614.827 237.124 C 713.575 173.504 692.613 144.116 805.776 87.876 C 942.649 19.853 1317.845 20.149 1440.003 23.965 C 1466.069 24.779 1440.135 24.024 1440.135 24.024 L 1440 0 L 1360 0 C 1280 0 1120 0 960 0 C 800 0 640 0 480 0 C 320 0 160 0 80 0 L 0 0 L 0.351 264.418 Z"

        ></path>

</svg>

​

<!--Main Navigation-->

<header class="mb-5 fade">

  <!-- Navbar-->

  <nav class="navbar navbar-expand-lg navbar-light shadow-0">

    <div class="container">

      <!-- Left elements -->

      <ul class="navbar-nav flex-row d-flex">

        <li class="nav-item me-3 me-lg-1">

          <a class="nav-link fw-bold" href="#"> Works </a>

        </li>

​

        <li class="nav-item me-3 me-lg-1">

          <a class="nav-link fw-bold" href="#"> Contact </a>

        </li>

      </ul>

      <!-- Left elements -->

​

      <!-- Center elements -->

      <div class="d-flex">

        <!-- Brand -->

        <a

           class="

                  navbar-brand

                  me-2

                  mt-lg-3 mt-1

                  mb-1

                  d-flex

                  align-items-center

                  "

           href="#"

           >

          <img

               src="https://mdbootstrap.com/img/logo/mdb-transaprent-noshadows.png"

               height="30"

               alt=""

               loading="lazy"

               style="filter: grayscale(100%)"

               />

        </a>

      </div>

      <!-- Center elements -->

​

      <!-- Right elements -->

      <ul class="navbar-nav flex-row">

        <li class="nav-item me-3 me-lg-1">

          <a class="nav-link" href="#">

            <span><i class="fab fa-facebook"></i></span>

          </a>

        </li>

        <li class="nav-item me-3 me-lg-1">

          <a class="nav-link" href="#">

            <span><i class="fab fa-twitter"></i></span>

          </a>

        </li>

        <li class="nav-item me-3 me-lg-1">

          <a class="nav-link" href="#">

            <span><i class="fab fa-github"></i></span>

          </a>

        </li>

        <li class="nav-item me-3 me-lg-1">

          <a class="nav-link" href="#">

            <span><i class="fab fa-dribbble"></i></span>

          </a>

        </li>

      </ul>

      <!-- Right elements -->

    </div>

  </nav>

  <!-- Navbar -->

</header>

<!--Main Navigation-->

​

<!--Main layout-->

<main>

  <div class="container">

    <!-- Section: Intro -->

    <section class="text-center text-black mb-8 fade fade-delay-1">

      <h1 class="mb-4">John Doe</h1>

      <h2>Web Developer, UX/UI Designer</h2>

    </section>

    <!-- Section: Intro -->

​

    <!-- Section: Content -->

    <section class="">

      <div class="row gx-lg-5 align-items-center">

        <div

             class="

                    col-lg-3 col-md-12

                    mb-4 mb-lg-0

                    text-center text-lg-start

                    fade fade-delay-2

                    "

             >

          <p class="text-muted text-uppercase ls-wide mb-2">Biography</p>

          <p class="mb-5">

            Lorem ipsum dolor sit, amet consectetur adipisicing elit.

            Repellat maxime ad, accusantium corrupti voluptate beatae

            sapiente explicabo neque numquam doloribus iste aut. Eligendi

            molestias possimus aut, rem id architecto quam.

          </p>

​

          <p class="text-muted text-uppercase ls-wide mb-2">Contact</p>

          <p class="mb-5">

            New York, <br />

            myemail@example.com <br />

            +12 345 678 901

          </p>

​

          <p class="text-muted text-uppercase ls-wide mb-2">Services</p>

          <p class="mb-5">

            Web design <br />

            Web development <br />

            Consulting

          </p>

        </div>

​

        <div class="col-lg-6 mb-4 mb-lg-0 fade fade-delay-3">

          <img

               src="https://images.unsplash.com/photo-1594759845217-e9c99af2b6a4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=946&q=80"

               class="w-100 main-image"

               alt=""

               />

        </div>

​

        <div

             class="

                    col-lg-3

                    mb-4 mb-lg-0

                    text-center text-lg-end

                    fade fade-delay-4

                    "

             >

          <p class="text-muted text-uppercase ls-wide mb-2">

            Years of experience

          </p>

          <p class="mb-5 h1">6</p>

​

          <p class="text-muted text-uppercase ls-wide mb-2">

            Satisfied customers

          </p>

          <p class="mb-5 h1">54</p>

​

          <p class="text-muted text-uppercase ls-wide mb-2">

            Commercial projects

          </p>

          <p class="mb-5 h1">167</p>

​

          <p class="text-muted text-uppercase ls-wide mb-2">

            Side projects

          </p>

          <p class="mb-5 h1">84</p>

        </div>

      </div>

    </section>

    <!-- Section: Content -->

  </div>

</main>

<!--Main layout-->