Weather Card block css html example

Free example Weather Card block css html

Weather Card block css html example
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;
}

 



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.