<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Hava Durumu</title>
<style>
body {
  background: #eee;
  font-family: Arial;
  display: flex;
  justify-content: center;
  padding: 40px;
}
.container {
  width: 600px;
  background: white;
  padding: 20px;
  text-align: center;
}
h1 { font-weight: normal; }
.main {
  background: #16c443;
  color: white;
  padding: 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.temp { font-size: 65px; }
.info { text-align: left; }
.days {
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
}
.day { color: #555; }
img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}
</style>
</head>
<body>

<div class="container">
<h1>Hava Durumu</h1>

<div class="main">
  <div>
    <img src="yağmurlu.webp">
    <div class="temp">21°C</div>
    Yağmurlu
  </div>

  <div class="info">
    <p>2.11.2026;Pazartesi</p>
    <p>Türkiye,İstanbul</p>
    <p>Nem Oranı: 83%</p>
    <p>Basınç: 1010mb</p>
  </div>
</div>

<div class="days">
  <div class="day">Pazar<br><img src="yağmurlu.webp"><br>28°C</div>
  <div class="day">Pazartesi<br><img src="yağmurlu.webp"><br>27°C</div>
  <div class="day">Salı<br><img src="yağmurlu.webp"><br>29°C</div>
  <div class="day">Çarsamba<br><img src="yağmurlu.webp"><br>31°C</div>
  <div class="day">Persembe<br><img src="yağmurlu.webp"><br>30°C</div>
  <div class="day">Cuma<br><img src="yağmurlu.webp"><br>27°C</div>
</div>

</div>
</body>
</html>