Weather Card block css html example
Free example Weather Card block css html

Weather Card block css html example
<div class="conteiner" style="width: 600px;">
<div class="row">
<div class="col-6">
<div class="card" style="border-radius: 18px;">
<div class="otap">
<div class="pogoda pt-1 pb-1 pr-2 pl-2">
<span class="iconka"><img src="https://mm.aiircdn.com/3/712243.png" style="width: 42px;"/></span>
<div class="row pt-3 ml-2">
<div class="telo col-5">15<span class="gr">℃</span></div>
<div class="pr"><div class="tt pt-4">
<div class="col-12 line">Calm</div>
<div class="col-12 tem">16℃<span class="te"></span> - 13℃</div></div>
</div>
</div>
<div class="telotitle col-12 pt-1 pb-1">NEW YORK NY</div>
<div class="col-12 podval">
<div class="row">
<div class="col-4">wind<p style="border-top: 1px solid rgba(255, 252, 252, 0.8);font-size: small;">12m/s</p></div>
<div class="col-4">humidity<p style="border-top: 1px solid rgba(255, 252, 252, 0.8);font-size: small;">12m/s</p></div>
<div class="col-4">visibility<p style="border-top: 1px solid rgba(255, 252, 252, 0.8);font-size: small;">12m/s</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card" style="border-radius: 18px;">
<div class="otapa">
<div class="pogodaa pt-1 pb-1 pr-2 pl-2">
<span class="iconka"><img src="https://mm.aiircdn.com/3/712243.png" style="width: 42px;"/></span>
<div class="row pt-3 ml-2">
<div class="telo col-5">10<span class="gr">℃</span></div>
<div class="pr"><div class="tt pt-4">
<div class="col-12 line">Calm</div>
<div class="col-12 tem">11℃<span class="te"></span> - 10℃</div></div>
</div>
</div>
<div class="telotitle col-12 pt-1 pb-1">MOSCOW MO</div>
<div class="col-12 podval">
<div class="row">
<div class="col-4">wind<p style="border-top: 1px solid rgba(255, 252, 252, 0.8);font-size: small;">12m/s</p></div>
<div class="col-4">humidity<p style="border-top: 1px solid rgba(255, 252, 252, 0.8);font-size: small;">12m/s</p></div>
<div class="col-4">visibility<p style="border-top: 1px solid rgba(255, 252, 252, 0.8);font-size: small;">12m/s</p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.pogoda {
width: 100%;
background: linear-gradient(125deg, #5705A7 0%, #13230E 100%);
border-radius: 18px;
opacity: 0.8;
}
.golova {
color:#FFFFFF;
}
.telotitle{
font-size: x-large;
font-weight: 700;
color: aliceblue;
text-align: -webkit-center;
}
.telo{
font-size: -webkit-xxx-large;
font-weight: 500;
color: aliceblue;
border: 1px solid rgba(255, 252, 252, 0.8);
text-align: -webkit-center;
}
.line {
border-bottom: 1px solid rgba(255, 252, 252, 0.8);
color: #FFFB5D;
font-size: small;
text-align: -webkit-left;
}
.pr {
flex: 0 0 58.333333%;
max-width: 50%;
}
.tem {
color: aliceblue;
font-size: 16px;
}
.podval {
text-align: -webkit-center;
font-size: x-small;
color: aliceblue;
}
.gr {
font-size: x-large;
}
.otap {
background: url(https://img5.goodfon.ru/wallpaper/nbig/9/1d/caio-perez-by-caio-perez-city-backgrounds-game-art-illustr-3.jpg);
border-radius: 18px;
background-size: cover;
}
.otapa {
background: url(https://www.ubackground.com/_ph/7/504586084.jpg) no-repeat;
border-radius: 18px;
background-size: cover;
}
.iconka {
position: absolute;
margin-left: 75%;
margin-top: 10px;
}
.pogodaa {
width: 100%;
background: linear-gradient(125deg, #151D21 0%, rgba(237, 19, 93, 0.7) 100%);
border-radius: 18px;
opacity: 0.8;
}
Comments (0)