x39OME/100-project-100-days-website
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
Sam 2023-05-29 08:54:19 +03:00 committed by GitHub
parent c33e27644a
commit c9352247c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 124 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
100_projects/97-weather-glassmorphism/Glassmorphism-Background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 608 KiB

BIN
100_projects/97-weather-glassmorphism/cloud.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

47
100_projects/97-weather-glassmorphism/index.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="content_wrapper">
<div class="card_bg">
<div class="card 1st_card">
<div class="card-content">
<p class="location">Riyadh</p>
<h1 class="degree">20<sup>o</sup></h1>
<p class="weather-status">Thumber</p>
</div>
<div class="card-image">
<img src="cloud.png" alt="cloud" border="0">
</div>
</div>
<div class="card 2nd_card">
<div class="card-content">
<p class="location">Jeddah</p>
<h1 class="degree">18<sup>o</sup></h1>
<p class="weather-status">Rain</p>
</div>
<div class="card-image">
<img src="rain.png" alt="rain" border="0">
</div>
</div>
<div class="card 3rd_card">
<div class="card-content">
<p class="location">Mecca</p>
<h1 class="degree">32<sup>o</sup></h1>
<p class="weather-status">Wind</p>
</div>
<div class="card-image">
<img src="wind.png" alt="wind" border="0">
</div>
</div>
</div>
</div>
</body>
</html>

BIN
100_projects/97-weather-glassmorphism/rain.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

77
100_projects/97-weather-glassmorphism/style.css Normal file
View File

@ -0,0 +1,77 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family:'Poppins',sans-serif;
overflow-x:hidden;
height:100vh;
background-image: linear-gradient(to bottom, #ebcdfc, #fdcdec, #ffd0de, #ffd5d4, #ffdcd0, #ffdccf, #ffdcce, #ffdccd, #ffd5ce, #ffced5, #ffc9e0, #ffc6ef);
}
.content_wrapper{
display:flex;
justify-content:center;
align-items:center;
margin:0 auto;
}
.card_bg{
background: url(Glassmorphism-Background.png);
background-size:cover;
padding:2rem;
width:310px;
height:640px;
background-color:#eee;
}
.card{
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
padding:1.5rem;
height:105px;
border-radius:30px;
margin:15px 0;
background: rgba( 255, 255, 255, 0.05 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 16.5px );
-webkit-backdrop-filter: blur( 16.5px );
border-radius: 30px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
sup{
font-family: Poppins;
font-style: normal;
font-weight: 600;
font-size: 15px;
line-height: 22px;
text-transform: capitalize;
}
.location{
font-family: Poppins;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 33px;
text-transform: capitalize;
color: #000;
}
.degree{
font-size: 28px;
line-height: 10px;
text-transform: capitalize;
color: #23226B;
}
.weather-status{
font-style: normal;
font-weight: 400;
font-size: 13px;
line-height: 20px;
text-transform: uppercase;
color:#ffad1c;
margin-top: 15px;
}
.card-image img{
width:100px;
height:100px;
}

BIN
100_projects/97-weather-glassmorphism/wind.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
100_projects/97-weather-glassmorphism/‏‏glassmorphism-background.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 608 KiB