Elegant Weather Card Template for Your Website

<div class="main-body d-flex justify-content-center align-items-center vh-100">
    <div class="container">
        <div class="card mx-auto border-0 shadow rounded-1" style="width: 19rem;">
            <div class="card-body">
                <h5>Warsaw</h5>
                <p class="weather-description">Mon, 12:30 PM - Mostly Sunny</p>
                <div class="temperature d-flex">23<span class="temperature-unit">°<i class="fa-light fa-c"></i></span>
                </div>
                <div class="weather-condition d-flex">
                    <div class="water-description"><i class="fa-solid fa-droplet water-color"></i>3% Precipitation</div>
                    <div class="wind-description"><i class="fa-solid fa-leaf"></i>21 km/h Winds</div>
                </div>

<div class="weather-day ml-4 d-flex">
                    <p>
                        Tuesday
                    </p>
                    <p>
                        <i class="fa-solid fa-sun text-warning"></i>
                    </p>
                    <div class="d-flex">
                        <b>24°</b>/<p class="text-gray">12°</p>
                    </div>
                </div>
                <div class="weather-day ml-4 d-flex">
                    <p>
                        Tuesday
                    </p>
                    <p>
                        <i class="fa-solid fa-cloud-sun-rain water-color"></i>
                    </p>
                    <div class="d-flex">
                        <b>24°</b>/<p class="text-gray">12°</p>
                    </div>
                </div>
                <div class="weather-day ml-4 d-flex">
                    <p>
                        Tuesday
                    </p>
                    <p>
                        <i class="fa-solid fa-sun text-warning"></i>
                    </p>
                    <div class="d-flex">
                        <b>24°</b>/<p class="text-gray">12°</p>
                    </div>
                </div>
                <div class="weather-day ml-4 d-flex">
                    <p>
                        Tuesday
                    </p>
                    <p>
                        <i class="fa-solid fa-cloud-sun-rain water-color"></i>
                    </p>
                    <div class="d-flex">
                        <b>24°</b>/<p class="text-gray">12°</p>
                    </div>
                </div>
                <hr class="text-gray">

</div>
        </div>
    </div>
</div>

.main-body {
  background-color: whitesmoke;
}

.card {
  width: 18rem;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}

.card-header {
  color: #fff;
  padding: 10px;
  text-align: center;
}

.card-body {
  padding: 10px;
}

.temperature {
  font-size: 4rem;
  font-weight: 350;
}

.temperature-unit {
  font-size: 1.5rem;
  margin-top: 15px;
  margin-left: 3px;
}

.weather-description {
  color: gray;
  margin-top: 10px;
}

.water-color {
  color: #74ccf4;
}

.water-description {
  color: gray;
  margin-top: 10px;
}

.wind-description {
  color: gray;
  margin-top: 10px;
  margin-left: 20px;
  display: flex;
}

.fa-leaf {
  color: gray;
  margin-top: 5px;
}

.weather-condition i {
  font-size: 14px;
  padding-right: 5px;
}

.horizontal-line {
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, black 50%, whitesmoke 50%);
  margin: 20px 0;
}

.weather-time {
  justify-content: space-around;
}

.weather-time p {
  color: gray;
}

.weather-day {
  margin-left: 15px;
  justify-content: space-between;
}

.text-gray {
  color: gray;
}

CDN

ACTION

https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Copy CDN

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css

Copy CDN

BootStrap 5

Weather Card

AdBlock Detected!