Use the HTML template given below. (feel free to add / modify content)

<!DOCTYPE html>
<html>
  <head>
    <title>My Personal Website</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="UTF-8" />
  </head>
  <body style="font-family: monospace, sans-serif; margin: 0; padding: 0;">
    <header style="background-color: #673ab7; color: white; text-align: center; padding: 1rem;">
      <h1>Welcome to My Page</h1>
    </header>
    <main style="padding: 20px;">
      <section style="margin-bottom: 20px;">
        <h2>About Me</h2>
        <p>
          Hello, World! I love coding. I am here to learn CSS.
        </p>
      </section>
      <section>
        <h2>My Interests</h2>
        <ul>
          <li>Coding</li>
          <li>Coding</li>
          <li>Coding</li>
        </ul>
      </section>
    </main>
    <footer style="background-color: #673ab7; color: white; text-align: center; padding: 1rem; position: fixed; bottom: 0; width: 100%;">
      <p>&copy; 2023 My Page. All rights reserved.</p>
    </footer>
  </body>
</html>

  1. Identify all the inline css

    1. Remove all the inline css and add them to a internal css block.
    2. Use the browser inspector to check different properties that are applied and try changing the values.

  2. Add external css and check the results.

    1. https://cdn.jsdelivr.net/npm/water.css@2/out/water.css
    2. https://cdn.jsdelivr.net/npm/[email protected]
    3. https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
    4. https://latex.now.sh/style.css
    5. https://unpkg.com/chota@latest
    6. https://unpkg.com/mvp.css
    7. https://unpkg.com/[email protected]/dist/terminal.min.css
    8. https://unpkg.com/@sakun/system.css

  3. Deploy to GitHub pages