add glassmorph

This commit is contained in:
madarsbiss 2021-07-17 12:51:01 +03:00
parent 49c8e91266
commit 4467babc3a
2 changed files with 10 additions and 4 deletions

View File

@ -37,7 +37,7 @@ export default function Home() {
<h1 className={styles.mainTemp}> <h1 className={styles.mainTemp}>
{Math.round(weatherData.main.temp)}° {Math.round(weatherData.main.temp)}°
</h1> </h1>
<p>Feels like {weatherData.main.feels_like}°</p> <p>Feels like {Math.round(weatherData.main.feels_like)}°</p>
</> </>
)} )}
<input <input

View File

@ -1,9 +1,15 @@
.wrapper { .wrapper {
max-width: 1200px; max-width: 800px;
margin: 0 auto; margin: 30px auto;
/* border: 1px solid grey; */ /* border: 1px solid grey; */
text-align: center; text-align: center;
padding: 30px; padding: 30px;
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 8px 32px 0 rgba(83, 89, 179, 0.37);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
} }
.mainTemp { .mainTemp {
@ -14,7 +20,7 @@
margin-top: 300px; margin-top: 300px;
height: 40px; height: 40px;
width: 300px; width: 300px;
border-radius: 5px; border-radius: 25px;
border: 1px solid rgb(209, 209, 252); border: 1px solid rgb(209, 209, 252);
color: rgb(224, 237, 241); color: rgb(224, 237, 241);