yashigupta4623/html-css-exercise.html

## html-css-exercise.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Weather App</title>
    <style>
      h1,
      h2,
      h3 {
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
      }

      h1 {
        color: #1a64d6;
        font-size: 34px;
        line-height: 48px;
        margin: 0;
      }

      h2 {
        margin: 0;

        font-size: 34px;
        line-height: 48px;
        font-weight: 400;
      }

      ul {
        padding: 0;
      }

      li {
        list-style: none;
        text-align: center;
        padding: 10px 0;
        border-radius: 10px;
        transition: all 200ms ease-in-out;
        max-width: 400px;
        margin: 0 auto;
      }

      li:hover {
        background: #fffbef;
      }

      p {
        font-size: 18px;
        opacity: 0.7;
        text-align: center;
        font-family: monospace;
      }

      button {
        display: block;
        margin: 20px auto;
        border: 1px solid #1a64d6;
        background: #1a64d6;
        color: #fff;
        font-size: 16px;
        line-height: 22px;
        padding: 16px 24px;
        border-radius: 30px;
        transition: all 200ms ease;
        box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0;
        cursor: pointer;
      }

      button:hover {
        background: white;
        color: #1a64d6;
        border: 1px solid #1a64d6;
      }
    </style>
  </head>
  <body>
    <h1>
      🌤
      <br />
      Currently 21° in Tokyo
    </h1>
    <h2>13° / <strong>23°</strong></h2>
    <ul>
      <li>
        <h3>
          🌧Tomorrow
        </h3>
        <p>10° / <strong>22°</strong></p>
      </li>
      <li>
        <h3>
          🌥 Saturday
        </h3>
        <p>15° / <strong>17°</strong></p>
      </li>
      <li>
        <h3>
          ☀️ Sunday
        </h3>
        <p>25° / <strong>28°</strong></p>
      </li>
    </ul>

    <button>
      Change city
    </button>
    <p>
      Coded by Matt Delac
    </p>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Weather App</title>
	<style>
	h1,
	h2,
	h3 {
	text-align: center;
	font-family: Helvetica, Arial, sans-serif;
	}

	h1 {
	color: #1a64d6;
	font-size: 34px;
	line-height: 48px;
	margin: 0;
	}

	h2 {
	margin: 0;

	font-size: 34px;
	line-height: 48px;
	font-weight: 400;
	}

	ul {
	padding: 0;
	}

	li {
	list-style: none;
	text-align: center;
	padding: 10px 0;
	border-radius: 10px;
	transition: all 200ms ease-in-out;
	max-width: 400px;
	margin: 0 auto;
	}

	li:hover {
	background: #fffbef;
	}

	p {
	font-size: 18px;
	opacity: 0.7;
	text-align: center;
	font-family: monospace;
	}

	button {
	display: block;
	margin: 20px auto;
	border: 1px solid #1a64d6;
	background: #1a64d6;
	color: #fff;
	font-size: 16px;
	line-height: 22px;
	padding: 16px 24px;
	border-radius: 30px;
	transition: all 200ms ease;
	box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0;
	cursor: pointer;
	}

	button:hover {
	background: white;
	color: #1a64d6;
	border: 1px solid #1a64d6;
	}
	</style>
	</head>
	<body>
	<h1>
	🌤
	<br />
	Currently 21° in Tokyo
	</h1>
	<h2>13° / <strong>23°</strong></h2>
	<ul>
	<li>
	<h3>
	🌧Tomorrow
	</h3>
	<p>10° / <strong>22°</strong></p>
	</li>
	<li>
	<h3>
	🌥 Saturday
	</h3>
	<p>15° / <strong>17°</strong></p>
	</li>
	<li>
	<h3>
	☀️ Sunday
	</h3>
	<p>25° / <strong>28°</strong></p>
	</li>
	</ul>

	<button>
	Change city
	</button>
	<p>
	Coded by Matt Delac
	</p>
	</body>
	</html>