Cohort 2 Warmup Videos/3. Basic CSS/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- adding favicon of zerodha -->
    <link
      rel="shortcut icon"
      href="./images/zerodha-favicon.png"
      type="image/x-icon"
    />
    <title>Zerodha - Online Stock Trading</title>
  </head>
  <body style="font-family: sans-serif">
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 100px;
        padding-right: 100px;
        box-shadow: 2px 1px 2px #eee;
      "
    >
      <img
        src="./images/zerodha-logo.svg"
        alt="zerodha-logo"
        width="120"
        height="20px"
        style="cursor: pointer"
      />
      <div style="display: flex; align-items: center">
        <div style="padding: 20px; color: #666; cursor: pointer">Signup</div>
        <div style="padding: 20px; color: #666; cursor: pointer">About</div>
        <div style="padding: 20px; color: #666; cursor: pointer">Products</div>
        <div style="padding: 20px; color: #666; cursor: pointer">Pricing</div>
        <div style="padding: 20px; color: #666; cursor: pointer">Support</div>
      </div>
    </div>

    <div style="display: flex; justify-content: center; padding-top: 50px">
      <img
        src="./images/zerodha-landing-page.png"
        alt="zerodha-landing-page"
        width="50%"
      />
    </div>

    <h1 style="padding-top: 30px; display: flex; justify-content: center; font-size: 40px; font-weight: 500;">
      Invest in everything
    </h1>
      <h4 style="text-align: center; font-weight: 500; font-size: 20px;">
        Online platform to invest in stocks, derivatives, mutual funds, ETFs,
        bonds, and more.
        </h4>
        <div style="display: flex; justify-content: center; margin-top: 25px; margin-bottom: 30px;">

            <span style="background-color: #387ed1; padding: 10px 30px; border-radius: 3px; color: white; font-weight: 500; font-size: 20px; cursor: pointer;">Sign up now</span>
        </div>
  </body>
</html>