add glassmorph
This commit is contained in:
parent
49c8e91266
commit
4467babc3a
@ -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
|
||||||
|
@ -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);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user