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="css/style.css" />
    <link rel="icon" href="favicon.ico" />
    <link
      href="https://fonts.googleapis.com/css?family=Merriweather|Sacramento&display=swap|Source+Code+Pro&display=swap"
      rel="stylesheet"
    />
    <title>Shyam Sundar</title>
  </head>
  <body>
    <div class="top-container">
      <img class="top-cloud" src="images/cloud.png" alt="cloud-img" />
      <h1>I'm Shyam Sundar</h1>
      <h2>a <span class="pro-text">pro</span>grammer</h2>
      <img class="bottom-cloud" src="images/cloud.png" alt="cloud-img" />
      <img src="images/mountain.png" alt="mountain-img" />
    </div>
    <div class="middle-container">
      <div class="profile">
        <img class="profile-img" src="images/profilePic.png" alt="profile-img" />
        <h2>Hello</h2>
        <p class="intro-text">
          Energetic ❤️ when it comes to code and football. 
        </p>
      </div>
      <hr />
      <div class="skills">
        <h2>My Skills.</h2>
        <div class="skill-row">
          <img class="programming-img" src="images/programming.png" alt="programming-img" />
          <h3>Development and programming</h3>
          <p>
            I love slapping keyboard. I can work for code war for making an outcome creative and productive.
          </p>
        </div>
        <div class="skill-row">
          <img class="soccer-img" src="images/soccer.png" alt="soccer-img" />
          <h3>Football</h3>
          <p>
            I love playing football, I just need some time for it then it gives me different level of energy to start work with.
          </p>
        </div>
      </div>
      <hr />
      <div class="contact-me">
        <h2>Get In Touch</h2>
        <h3>Want to be become my family ?</h3>
        <p>
          You can send me mail and start your journey to work with me.
        </p>
        <a class="btn" href="mailto:shyamsundarhacker@gmail.com">CONTACT ME</a>
      </div>
    </div>

    <div class="bottom-container">
      <a class="footer-link" href="https://www.linkedin.com/in/s4sundar/">LinkedIn</a>
      <a class="footer-link" href="https://github.com/ssundar0/">Github</a>
      <a class="footer-link" href="https://www.instagram.com/blacksundar/">Instagram</a>
      <a class="footer-link" href="http://mayhsundar.github.io/dogmatch">DogMatch</a>
      <p class="copyright">© 2020 Shyam Sundar</p>
    </div>
  </body>
</html>