index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Lato:wght@100;400;700&family=Poppins:wght@200&display=swap"
    />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap"
    />
    <title>Portfolio</title>
  </head>
  <body>
    <header>
      <div class="container">
        <nav class="flex items-centre justify-between">
          <div class="left flex justfiy-right">
            <div class="logo">
              <img src="./images/logo.png" width="50px" alt="logo" />
            </div>
            <div>
              <a href="#">Home</a>
              <a href="#">About</a>
              <a href="#">Services</a>
              <a href="#">Blog</a>
              <a href="#">More</a>
            </div>
          </div>
          <div class="right">
            <button class="btn btn-primary">Contact</button>
          </div>
        </nav>
      </div>
    </header>
    <div class="hero flex items-centre justify-between">
      <div class="left flex-1 justify-center">
        <img src="./images/main-image.jpeg" alt="Profile" />
      </div>
      <div class="right flex-1">
        <h6>Akshat Sharma</h6>
        <h1>
          I'm a Web<br />
          <span>Developer</span>
          <p>this a trial</p>
        </h1>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing el it. Doloremque
          illum nam nobis, minima laudantium fugit sequi nostrum quod impedit,
          beatae necessitatibus praesentium optio labore nemo!
        </p>
        <div>
          <button class="btn btn-secondary">DOWNLOAD CV</button>
        </div>
      </div>
    </div>
    <section class="about">
      <div class="container flex items-centre">
        <div class="left flex-1 justify-right">
          <img src="./images/man2.jpeg" height="400px" alt="profile pic" />
        </div>
        <div class="right flex-1">
          <h1>About <span>Me</span></h1>
          <h3>Hello! I'm Akshat Sharma</h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing el it. Atque
            adipisci distinctio obcaecati aliquid, quia tempora quis optio
            repudiandae officia earum? Lorem ipsum dolor sit amet consectetur,
            adipisicing elit.
          </p>
          <div class="socials">
            <a href="#"><img src="./images/website.jpg" width="40px" /></a>
            <a href="#"><img src="./images/facebook.jpg" width="40px" /></a>
            <a href="#"><img src="./images/instagram.jpg" width="40px" /></a>
            <a href="#"><img src="./images/media-player.jpg" width="40px" /></a>
          </div>
        </div>
      </div>
    </section>
    <section class="services">
      <div class="container">
        <h1 class="services-head">Services</h1>
        <p>All your digital needs...covered.</p>
        <div class="card-grid">
          <div class="card">
            <img src="" alt="graphic design" />
            <h2>Graphic design</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing el it.
              debitis?
            </p>
          </div>
          <div class="card">
            <img src="" alt="web development" />
            <h2>Web Development</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing el it.
              debitis?
            </p>
          </div>
          <div class="card">
            <img src="" alt="content writing" />
            <h2>Content Writing</h2>
            <p>
              Lorem ipsum dolor sit amet consectetur, adipisicing el it.
              debitis?
            </p>
          </div>
        </div>
      </div>
    </section>
  </body>
</html>