index.html

<!-- TODO 1: Create the HTML Boilerplate -->

<!-- TODO 2: Add Your previous projects' HTML into the public folder -->

<!-- TODO 3: Take screenshots of your project previews and add the images to the images folder -->

<!-- TODO 4: Add titles/subtitles etc. -->

<!-- TODO 5: Add a link to the project pages -->

<!-- TODO 6: Add images to show the project previews
HINT for TODO 6: You can use the height attribute set to 200 to make the image smaller:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-height -->

<!-- TODO 7: Add the Contact Me and About Me page links -->
<!Doctype html>
<html lang="en">
    <head>
        <meta charset="UFT-8">
        <title>Alafin's HTML Portfolio
        </title>
    </head>
    <style>
        .fit-picture {
            width: 250px;
        }
      </style>
    <body>
        <h1>Alafin's HTML Portfolio</h1>
        <hr>
        <a href="/public/birthday-invite.html"><h2>Birthday Project</h2></a>
        <img 
        class="fit-picture"
        src="/assets/images/Screenshot 2023-10-15 024314 - Copy.png"
        alt="birthday-invite project"
        />
        <br>
        <a href="/public/movie-ranking.html"><h2>Movie Ranking Project</h2></a>   
        <img 
        class="fit-picture"
        src="/assets/images/Screenshot 2023-10-15 024202 - Copy.png" 
        alt="My movie Ranking List"
        />
        <br>
        <a href="/public/about.html"><h2>About Me</h2></a>
        <a href="/public/contact.html"><h2>Contact Me</h2></a>
    </body>
</html>