Code : Tout sélectionner
@import url('https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.9/css/weather-icons.min.css');
*,
*::before,
*::after {
box-sizing: border-box;
}
.ww-wrapper {
width: 220px;
height: 100%;
margin: 0 auto;
background-color: rgba(0,0,0,0.25);
}
.ww-row {
display: flex;
justify-content: space-around;
}
.weatherCard {
flex: 0 1 220px;
height: 290px;
box-shadow: 0px 2px 11px 1px rgba(0,0,0,0.15);
line-height: 1.5;
}
.cityContainer {
width: 100%;
height: 150px;
padding: 12px 15px;
}
.cityName {
position: relative;
font-size: 18px;
text-align: right;
}
.iconTempWrapper {
display: block;
margin-bottom: 4px;
text-align: right;
justify-content: space-between;
}
.weatherIcon {
position: absolute;
top: 30px;
padding: 0;
font-size: 60px;
}
.weatherTemp {
position: relative;
opacity: 1;
font-weight: normal;
font-size: 45px;
transition: 0.2s ease-out;
}
.weatherTempMinMax{
margin-top:-10px !important;
margin-bottom: 5px !important;
font-size:15px;
font-weight: normal;
}
.tempAndCity {
text-align: right;
}
.tempAndCity p {
padding: 0;
margin: 0;
}
.weatherDesc {
padding-top: 3px;
font-size: 14px;
text-transform: capitalize;
text-align: right;
}
.weatherForecast {
height: 140px;
width: 100%;
background-color: rgba(255,255,255,1);
text-align: center;
}
.weatherForecast .forecastCard {
position: relative;
display: inline-block;
width: 52px;
margin: 2px;
padding: 5px 8px;
color: #444;
}
.forecastCard p {
margin: 0;
padding: 0;
font-size: 18px;
line-height: 1.5;
}
.forecastCard .forecastIcons {
font-size: 25px;
}
.forecastCard .forecastMin {
color: #b3b3b3;
}
.sunny-class {
background: rgba(255,232,161,1);
background: radial-gradient(ellipse at center, rgba(255,232,161,1) 0%, rgba(245,202,101,1) 100%);
color: #997300;
}
.night-class {
background: rgba(250,250,250,1);
background: radial-gradient(ellipse at center, rgba(150,150,150,1) 0%, rgba(100,100,100,1) 100%);
color: #dddddd;
}
.cloudy-class {
background: rgba(250,250,250,1);
background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(185, 192, 193, 1) 100%);
color: #6d7f87;
}
.rainy-class {
background: rgba(213,240,250,1);
background: radial-gradient(ellipse at center, rgba(213,240,250,1) 0%, rgba(150,209,230,1) 100%);
color: #006b99;
}
.stormy-class {
background: #ABB6BB;
background: radial-gradient(ellipse at center, rgb(199, 222, 230) 0%, rgb(155, 170, 175) 100%);
color: #37474F;
}
.snow-class {
background: rgba(153, 181, 191, 1);
background: radial-gradient(ellipse at center, rgb(199, 212, 230) 0%, rgb(139, 164, 173) 100%);
color: #395c6b;
}