index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HR's Blog</title>
  <link rel="icon" type="image/x-icon" href="Images/hr2.jpg">
</head>

<body>

  <header>
    <h1 style="text-align: center;">___________HR___________</h1>
    <h2 style="text-align: center;">Welcome to My Personal Blog.</h2>

    <nav>
      <ul>
        <li><a href="#aboutme"><i>About Me</i></a></li>
        <li><a href="#gallery"><i>Gallery</i></a></li>
        <li><a href="#contactme"><i>Contact Information</i></a></li>
      </ul>
    </nav>
  </header>

  <div>
    <img src="Images/hrbg.png" alt="Cover Photo" style="width: 100%;">
  </div>

  <main id="aboutme">
    <article>
      <h2><b>_About Me_</b></h2>
      <p>I am Heshan Randika Karanayaka.I'm 23 years old now and pursuing a degree program at CINEC Campus, a private
        university in Sri Lanka. I am a second-year student studying BSc (Hons) in Software Engineering. I didn't
        hesitate to choose this degree program because I have had a passion for the field of computing since I was a
        child, and I am interested in the new computer technology in the new world.</p>

      <p>In the degree program I am studying, we are taught different modules related to different fields. Among them, I
        am very eager for the Web Architecture module. Because I am a bit more interested in the emerging field of Web
        Development related to HTML, CSS and JavaScript.These days I am studying the basic level subjects required to
        study that field. The Coursera platform helps me a lot to learn those things. I am currently getting the basic
        knowledge I need through Coursera. The service that comes from it cannot be overstated. I certify that the
        Coursera platform is an ideal learning environment for anyone.</p>
    </article>

    <section id="gallery">
      <h2><b>_Gallery_</b></h2>
      <p>Here are some images of me:</p>
      <div>
        <img src="Images/hr1.png" alt="HR's image 1" style="height: 49%; width: 49%;">
        <img src="Images/hr2.jpg" alt="HR's image 2" style="height: 49%; width: 49%;">
      </div>
      <div>
        <img src="Images/hr3.jpg" alt="HR's image 3" style="height: 49%; width: 49%;">
        <img src="Images/hr4.png" alt="HR's image 4" style="height: 49%; width: 49%;">
      </div>


    </section>
  </main>

  <br><br>

  <h2 id="contactme"><b>_Contact Information_</b></h2>

  <details>
    <summary>For more details visit my,</summary>

    <ul>
      <li><a href="https://www.facebook.com/hrk2001?mibextid=JRoKGi" target="_blank">Facebook</a></li>
      <li><a href="https://www.instagram.com/randika__hr?igsh=Ymx6YmExaDl5OTYw" target="_blank">Instagram</a></li>
      <li><a href="https://www.linkedin.com/in/heshan-randika-0a1885287" target="_blank">LinkedIn</a></li>
      <li><a href="https://x.com/HeshanHr" target="_blank">X(Twitter)</a></li>
    </ul>

  </details>

  <br><br>

  <footer style="background-color: black; height: 100px; margin: -8px -8px;">
    <p style="color: white; padding-top: 45px; text-align: center;">&copy; 2024 My Personal Blog. All rights reserved.
    </p>
  </footer>
</body>

</html>