Weather Card block css html example

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;
}