Weather Card

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* Optional: a container to center the card on the page for demonstration */
.demo-container-weather {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

/* === Weather Card Styles === */
.weather-card {
    --weather-radius: 12px;
    --weather-shadow: 0 4px 10px rgba(0,0,0,0.06);
    /* Colors for a 'sunny'/'clear' theme */
    --weather-bg-gradient: linear-gradient(135deg, #7dd3fc, #0ea5e9); /* Sky Blue */
    --weather-text-color: #ffffff;
    --weather-accent-color: #fde047; /* Bright Yellow for sun */

background: var(--weather-bg-gradient);
    color: var(--weather-text-color);
    border-radius: var(--weather-radius);
    box-shadow: var(--weather-shadow);
    max-width: 320px;
    width: 100%;
    padding: 2rem;
    position: relative;
    overflow: hidden; /* For containing decorative elements */
}

.weather-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.weather-card-location {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.weather-card-date {
    font-size: 0.9rem;
    opacity: 0.9;
    margin: 0.25rem 0 0;
}

.weather-icon-wrapper {
    flex-shrink: 0;
}
.weather-icon-wrapper svg {
    width: 64px;
    height: 64px;
    color: var(--weather-accent-color);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

.weather-card-main {
    margin-top: 1.5rem;
    text-align: center;
}

.weather-temperature {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}
.weather-condition {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0.5rem 0 0;
}

.weather-card-footer {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    font-size: 0.95rem;
    opacity: 0.9;
}
</style>

<div class="demo-container-weather">
    <article class="weather-card" aria-labelledby="weather-location">
        <header class="weather-card-header">
            <div>
                <h3 class="weather-card-location" id="weather-location">Kyoto, Japan</h3>
                <p class="weather-card-date">Wednesday, Oct 2, 2025</p>
            </div>
            <div class="weather-icon-wrapper">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                    <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.106a.75.75 0 010 1.06l-1.591 1.59a.75.75 0 11-1.06-1.06l1.59-1.591a.75.75 0 011.06 0zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5h2.25a.75.75 0 01.75.75zM16.5 16.5a.75.75 0 011.06 0l1.59 1.591a.75.75 0 11-1.06 1.06l-1.59-1.59a.75.75 0 010-1.061zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM5.106 17.894a.75.75 0 010-1.06l1.59-1.591a.75.75 0 011.06 1.06l-1.59 1.59a.75.75 0 01-1.06 0zM3 12a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H3.75A.75.75 0 013 12zM5.106 6.106a.75.75 0 011.06 0l1.59 1.591a.75.75 0 11-1.06 1.06l-1.59-1.59a.75.75 0 010-1.06z" />
                </svg>                
            </div>
        </header>
        <div class="weather-card-main">
            <p class="weather-temperature">21&deg;C</p>
            <p class="weather-condition">Mostly Sunny</p>
        </div>
        <footer class="weather-card-footer">
            <span>H: 24&deg;C</span>
            <span>L: 18&deg;C</span>
        </footer>
    </article>
</div>