Byłabym zachwycona otrzymać wskazówki co mogłabym napisać lepiej :) Za wszystkie uwagi serdecznie dziękuje <3
Edit:
https://codepen.io/zuzjk/pen/bGwRqEE?editors=1100
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<div class="frame">
<div class="center">
<div class="card">
<div class="weather-landscape">
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="drop"></div>
<div class="moon">
<div class="dots dots-1"></div>
<div class="dots dots-2"></div>
<div class="dots dots-3"></div>
<div class="dots dots-4"></div>
<div class="dots dots-5"></div>
<div class="dots dots-6"></div>
<div class="dots dots-7"></div>
<div class="dots dots-8"></div>
<div class="dots dots-9"></div>
<div class="dots dots-10"></div>
</div>
<div>
<div class="hill"></div>
<div class="hill "></div>
<div class="hill"></div>
<div class="hill"></div>
<div class="hill"></div>
</div>
</div>
<div class="weather-details">
<p class="temperature">12°</p>
<p>
<span>Wind: E 7 km/h</span><br>
<span>Humidity: 87%</span>
</p>
<p>
<time>TUE</time> 21° / 9°<br>
<time>WED</time> 23° / 10°
</p>
</div>
</div>
</div>
</div>
$navy : #1A2238;
$yellow: #F6EDBD;
$shadowMoon:#8D8C7D;
$hillColor:#303C5D;
@mixin round($width){
width:$width;
height:$width;
border-radius:50%;
}
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
font-family: 'Open Sans', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.center {
height:100%;
}
.card{
height:100%;
}
.weather-landscape{
height:80%;
background-color: $navy;
position:relative;
overflow:hidden;
}
.drop{
position: absolute;
top: -50px;
width: 10px;
height:10px;
transform:rotate(-37deg);
background-color:rgb(158, 202, 255);
border-radius:100% 0% 60% 40% / 60% 0% 100% 40% ;
animation: rain linear infinite;
z-index:9;
@for $i from 1 through 25{
&:nth-child(#{$i}){
left:random(390) + px;
animation-delay: random(20)/10 +s;
animation-duration: random(5)/10 +0.9 +s;
transform:scale(random(10)/10+.5)rotate(-37deg);
}
}
}
.moon{
@include round(75px);
box-shadow: 0 0 15px 5px $shadowMoon;
background-color:$yellow;
position:relative;
top:250px;
left:70px;
overflow:hidden;
animation: moonRise 1s forwards;
}
.dots{
@include round(12px);
background-color:darken($yellow,10%);
position:absolute;
@for $i from 1 through 10{
&-#{$i}{
top:random(70)+px;
left:random(70)+px;
transform:scale(random(20)/20+0.5);
}
}
}
.hill{
width: 300px;
height:150px;
background-color:red;
border-radius: 50%;
position:absolute;
&:nth-child(1){
left:-2%;
bottom:-5%;
}
&:nth-child(2){
left:62%;
bottom:-5%;
}
&:nth-child(3){
left:-42%;
bottom:-25%;
}
&:nth-child(4){
left:22%;
border-radius: 100%/100%;
bottom:-11%;
}
&:nth-child(5){
left:75%;
bottom:-23%;
}
&:nth-child(-n+2){
background-color:darken($hillColor,5%);
}
&:nth-child(n+3){
background-color:$hillColor;
}
}
.weather-details{
height:20%;
display: flex;
justify-content: space-around;
align-items: center;
}
.temperature{
font-size:2.3em;
}
@keyframes rain{
100%{
transform:translate(-40px,370px)rotate(-37deg);
}
}
@keyframes moonRise{
100%{
transform:translateY(-200px);
}
}