Design a weather app interface with current conditions, forecasts, and location features.
This project will guide you through creating a modern weather app interface using CSS. You'll learn to design weather cards, forecast displays, and responsive layouts.
Intermediate: 2-3 hours | Advanced: 1-2 hours
Difficulty Level: Intermediate
<div class="weather-app">
<header class="weather-header">
<div class="location-search">
<input type="text" placeholder="Enter city name...">
<button><i class="fas fa-search"></i></button>
</div>
<div class="current-location">
<i class="fas fa-map-marker-alt"></i>
<span>New York, NY</span>
</div>
</header>
<main class="weather-main">
<div class="current-weather">
<div class="weather-icon">
<i class="fas fa-sun"></i>
</div>
<div class="weather-info">
<h2>72°F</h2>
<p>Sunny</p>
<p>Feels like 75°F</p>
</div>
<div class="weather-details">
<div class="detail">
<i class="fas fa-tint"></i>
<span>Humidity: 65%</span>
</div>
<div class="detail">
<i class="fas fa-wind"></i>
<span>Wind: 8 mph</span>
</div>
</div>
</div>
<div class="forecast">
<h3>5-Day Forecast</h3>
<div class="forecast-cards">
<div class="forecast-card">
<span class="day">Mon</span>
<i class="fas fa-cloud-sun"></i>
<span class="temp">68°F</span>
</div>
<div class="forecast-card">
<span class="day">Tue</span>
<i class="fas fa-cloud"></i>
<span class="temp">72°F</span>
</div>
<div class="forecast-card">
<span class="day">Wed</span>
<i class="fas fa-sun"></i>
<span class="temp">75°F</span>
</div>
<div class="forecast-card">
<span class="day">Thu</span>
<i class="fas fa-cloud-rain"></i>
<span class="temp">70°F</span>
</div>
<div class="forecast-card">
<span class="day">Fri</span>
<i class="fas fa-sun"></i>
<span class="temp">78°F</span>
</div>
</div>
</div>
</main>
</div>
.weather-app {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: white;
}
.weather-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 1rem;
}
.location-search {
display: flex;
align-items: center;
background: rgba(255,255,255,0.2);
border-radius: 25px;
padding: 0.5rem;
backdrop-filter: blur(10px);
}
.location-search input {
background: none;
border: none;
color: white;
padding: 0.5rem 1rem;
outline: none;
width: 200px;
}
.location-search input::placeholder {
color: rgba(255,255,255,0.8);
}
.location-search button {
background: rgba(255,255,255,0.3);
border: none;
color: white;
padding: 0.5rem;
border-radius: 50%;
cursor: pointer;
transition: background 0.2s;
}
.location-search button:hover {
background: rgba(255,255,255,0.4);
}
.current-location {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.1rem;
}
.current-weather {
background: rgba(255,255,255,0.1);
border-radius: 20px;
padding: 2rem;
text-align: center;
backdrop-filter: blur(10px);
margin-bottom: 2rem;
}
.weather-icon {
font-size: 4rem;
margin-bottom: 1rem;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
.weather-info h2 {
font-size: 3rem;
margin: 0;
font-weight: 300;
}
.weather-info p {
margin: 0.5rem 0;
font-size: 1.2rem;
opacity: 0.9;
}
.weather-details {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
flex-wrap: wrap;
}
.detail {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
}
.forecast {
background: rgba(255,255,255,0.1);
border-radius: 20px;
padding: 2rem;
backdrop-filter: blur(10px);
}
.forecast h3 {
margin-bottom: 1.5rem;
text-align: center;
font-size: 1.5rem;
}
.forecast-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
.forecast-card {
background: rgba(255,255,255,0.1);
border-radius: 15px;
padding: 1.5rem;
text-align: center;
transition: transform 0.2s;
}
.forecast-card:hover {
transform: translateY(-5px);
}
.forecast-card .day {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
}
.forecast-card i {
font-size: 2rem;
margin: 0.5rem 0;
display: block;
}
.forecast-card .temp {
font-size: 1.2rem;
font-weight: 500;
}
@media (max-width: 768px) {
.weather-app {
padding: 1rem;
}
.weather-header {
flex-direction: column;
text-align: center;
}
.location-search input {
width: 150px;
}
.weather-details {
flex-direction: column;
gap: 1rem;
}
.forecast-cards {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
}
.weather-icon.sunny {
animation: rotate 20s linear infinite;
}
.weather-icon.rainy {
animation: rain 2s ease-in-out infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes rain {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(5px); }
}