* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #990000 0%, #764ba2 100%);
min-height: 100vh;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: white;
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 0.5rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.header p {
font-size: 1.125rem;
opacity: 0.9;
}
.weather-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1400px;
width: 100%;
}
.weather-card {
background: white;
padding: 2.5rem 2rem;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
text-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.weather-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.25);
}
.icon-container {
width: 120px;
height: 120px;
margin: 0 auto 1.5rem;
position: relative;
}
.weather-title {
font-size: 1.5rem;
color: #2c3e50;
margin-bottom: 0.5rem;
font-weight: 600;
}
.weather-temp {
font-size: 2.5rem;
font-weight: 700;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
}
.weather-desc {
color: #6c757d;
font-size: 0.95rem;
}
/* Sunny Animation */
.sun {
width: 80px;
height: 80px;
background: #ffd700;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
animation: sunPulse 3s ease-in-out infinite;
}
.sun::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
background: transparent;
border-radius: 50%;
box-shadow: 0 0 0 2px #ffd700;
animation: sunRays 8s linear infinite;
}
@keyframes sunPulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); }
50% { transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes sunRays {
0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 0.8; }
100% { transform: translate(-50%, -50%) rotate(360deg); opacity: 0.8; }
}
/* Cloudy Animation */
.cloud {
width: 70px;
height: 30px;
background: #e0e0e0;
border-radius: 100px;
position: absolute;
animation: cloudFloat 4s ease-in-out infinite;
}
.cloud::before {
content: '';
width: 40px;
height: 40px;
background: #e0e0e0;
border-radius: 50%;
position: absolute;
top: -20px;
left: 10px;
}
.cloud::after {
content: '';
width: 50px;
height: 50px;
background: #e0e0e0;
border-radius: 50%;
position: absolute;
top: -25px;
right: 10px;
}
.cloud-1 {
top: 20px;
left: 15px;
}
.cloud-2 {
top: 50px;
left: 35px;
transform: scale(0.8);
animation-delay: 0.5s;
}
@keyframes cloudFloat {
0%, 100% { transform: translateX(0) translateY(0); }
50% { transform: translateX(10px) translateY(-5px); }
}
/* Rainy Animation */
.rain {
position: absolute;
width: 2px;
height: 15px;
background: linear-gradient(to bottom, #4a90e2, transparent);
animation: rainFall 0.8s linear infinite;
}
.rain:nth-child(1) { left: 20px; animation-delay: 0s; }
.rain:nth-child(2) { left: 40px; animation-delay: 0.2s; }
.rain:nth-child(3) { left: 60px; animation-delay: 0.1s; }
.rain:nth-child(4) { left: 80px; animation-delay: 0.3s; }
.rain:nth-child(5) { left: 100px; animation-delay: 0.15s; }
@keyframes rainFall {
0% { top: 40px; opacity: 1; }
100% { top: 110px; opacity: 0; }
}
/* Snowy Animation */
.snowflake {
position: absolute;
width: 8px;
height: 8px;
background: white;
border-radius: 50%;
animation: snowFall 3s linear infinite;
opacity: 0.8;
}
.snowflake:nth-child(1) { left: 15px; animation-delay: 0s; animation-duration: 2.5s; }
.snowflake:nth-child(2) { left: 35px; animation-delay: 0.5s; animation-duration: 3s; }
.snowflake:nth-child(3) { left: 55px; animation-delay: 1s; animation-duration: 2.8s; }
.snowflake:nth-child(4) { left: 75px; animation-delay: 1.5s; animation-duration: 3.2s; }
.snowflake:nth-child(5) { left: 95px; animation-delay: 0.8s; animation-duration: 2.7s; }
@keyframes snowFall {
0% { top: 0; opacity: 0; }
10% { opacity: 0.8; }
90% { opacity: 0.8; }
100% { top: 120px; opacity: 0; }
}
/* Stormy Animation */
.lightning {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 40px solid #ffd700;
transform: translate(-50%, -20%);
animation: lightningFlash 2s ease-in-out infinite;
opacity: 0;
}
@keyframes lightningFlash {
0%, 90%, 100% { opacity: 0; }
92%, 94%, 96% { opacity: 1; }
}
/* Windy Animation */
.wind-line {
position: absolute;
height: 3px;
background: linear-gradient(to right, #a0a0a0, transparent);
border-radius: 2px;
animation: windBlow 2s ease-in-out infinite;
}
.wind-line:nth-child(1) {
width: 60px;
top: 30px;
left: -20px;
}
.wind-line:nth-child(2) {
width: 80px;
top: 50px;
left: -30px;
animation-delay: 0.3s;
}
.wind-line:nth-child(3) {
width: 70px;
top: 70px;
left: -25px;
animation-delay: 0.6s;
}
@keyframes windBlow {
0%, 100% { transform: translateX(0); opacity: 0.3; }
50% { transform: translateX(100px); opacity: 1; }
}
/* Foggy Animation */
.fog-layer {
position: absolute;
width: 100px;
height: 20px;
background: linear-gradient(to right, transparent, #d0d0d0, transparent);
border-radius: 10px;
animation: fogMove 4s ease-in-out infinite;
}
.fog-layer:nth-child(1) {
top: 30px;
left: -10px;
}
.fog-layer:nth-child(2) {
top: 55px;
left: 5px;
animation-delay: 1s;
}
.fog-layer:nth-child(3) {
top: 80px;
left: -5px;
animation-delay: 2s;
}
@keyframes fogMove {
0%, 100% { transform: translateX(0); opacity: 0.5; }
50% { transform: translateX(15px); opacity: 0.8; }
}
/* Partly Cloudy */
.sun-cloud {
width: 60px;
height: 60px;
background: #ffd700;
border-radius: 50%;
position: absolute;
top: 15px;
left: 15px;
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
animation: sunPulse 3s ease-in-out infinite;
}
No comments yet. Be the first!