src/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
  <link rel="stylesheet" href="main.css">
  <title>HTML Portfolio</title>
</head>
<body>
  <header>
    <div class="container">
        <h1>Shaik Rasool</h1>
        <div class="image">
        <img src="https://res.cloudinary.com/dd20dakdu/image/upload/v1715845852/download_kftkvo.jpg" alt="shaik-rasool" height="100" width="100">
        </div>
        <nav>
            <ul>
                <li><a href="#about">About Me</a></li>
                <li><a href="#skills">Skills</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

<section id="about" class="about-section">
    <div class="container">
        <h2>About Me</h2>
        <p>I am a student with experience in web development (HTML, CSS, JavaScript) and C programming. Passionate about playing badminton and online games, I have a strong background in developing responsive websites and writing efficient code.</p>
    </div>
</section>

<section id="skills" class="skills-section">
    <div class="eff">
        <h2>Skills</h2>
    </div>
    <div class="effect">
        <ul>
            <li>HTML & CSS</li>
            <li>JavaScript</li>
            <li>c programming(basic)</li>
        </ul>
    </div>
</section>

<section id="projects" class="projects-section">
    <div class="container">
        <h2>Projects</h2>
        <div class="project">
            <h3>Project One</h3>
            <p>I developed a personal project that allows users to check the weather and air quality by inputting their longitude and latitude coordinates. This project utilizes APIs to fetch real-time weather data and air quality indices, providing users with up-to-date environmental information. The technologies used include HTML, CSS, JavaScript, and API integration. The outcome was a fully functional web application that enhances user awareness of environmental conditions in their specific location.</p>
            <a href=" https://merasool.github.io/weather.com/" class="btn">View Project</a>
        </div>
        <div class="project">
            <h3>Project Two</h3>
            <p>Description of your project, its technologies, and outcomes.</p>
            <a href="#" class="btn">View Project</a>
        </div>
    </div>
</section>

<section id="contact" class="contact-section">
    <div class="container">
        <h2>Contact</h2>
        <p>If you'd like to get in touch, feel free to reach out via email or connect with me on LinkedIn.</p>
        <img src="https://res.cloudinary.com/dd20dakdu/image/upload/v1723321629/360_F_497386968_dqjeA07m8bhT9156WbUseVqrqhOBjgYB_prgm9i.jpg" alt="mail"href="https://mail.google.com/mail/u/0/?tab=rm&ogbl#inbox" class="btn" height="20" width="20"></img>

        <img src="https://res.cloudinary.com/dd20dakdu/image/upload/v1723832770/linkiedin_ryrgob.png" href="https://www.linkedin.com/in/shaik-rasool/" class="btn" height="20" weidth="20"></img>
        <img src="https://res.cloudinary.com/dd20dakdu/image/upload/v1723832989/github_1_evvqnp.png" href="https://github.com/merasool" class="btn" height="20" weidth="20"></img>

    </div>
</section>

</body>
</html>