100-project-100-days-website/100_projects/42-alarm-clock/css/style.css
2023-04-04 01:20:16 +03:00
Ask

104 lines
2.0 KiB
CSS

{78ad0b9910c7bfee5971b6efef1e55ab64c61f01 true 2094 style.css 0xc001e3c9a0}

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, .alram, .content{
display: flex;
align-items: center;
justify-content: center;
color: #FFF;
}
body{
background: #E86357;
}
.alram{
position: relative;
width: 350px;
min-height: 400px;
background: rgba(255, 255, 255, .1);
box-shadow: 0 25px 45px rgba(0, 0, 0, .1);
border: 1px solid rgba(255, 255, 255, .5);
padding: 50px;
border-radius: 15px;
flex-direction: column;
margin-top: 80px;
}
.alram::after{
content: '';
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
top: 0;
left: 20%;
background:linear-gradient(315deg,#ffbc00,#ff0058);
filter: blur(30px);
z-index: -1;
}
.alram::before{
content: '';
width: 300px;
height: 300px;
border-radius: 50%;
position: absolute;
bottom: -70%;
right: 20%;
background:linear-gradient(315deg,#ffbc00,#B6D6C8);
filter: blur(20px);
z-index: -1;
}
.alram img{
max-width:103px;
border-bottom: 2px solid #fff
}
.alram h1{
font-size: 35px;
font-weight: 600;
margin: 30px 0;
}
.alram .content{
width: 100%;
justify-content: space-between;
gap: 3px;
}
.alram .content.disable{
opacity: .6;
pointer-events: none;
}
.content .count{
border-radius: 5px;
border: 1px solid rgba(255, 255, 255, .5);
}
.count select{
outline: none;
border: none;
background: rgba(255, 255, 255, .1);
box-shadow: 0 25px 45px rgba(0, 0, 0, .1);
color: #fff;
padding: 10px 15px;
width: 100%;
font-size: 14px;
transition: ease-in .1s;
text-align: center;
}
.count select:hover{
background: rgba(255, 255, 255, .5);
}
.alram button{
margin-top: 20px;
font-size: 14px;
text-transform: uppercase;
padding: 10px 20px;
border-radius: 4px;
background: rgba(255, 255, 255, .1);
box-shadow: 0 25px 45px rgba(0, 0, 0, .1);
border: 1px solid rgba(255, 255, 255, .5);
color: #fff;
cursor: pointer;
transition: .1s;
}
.alram button:hover{
background: rgba(255, 255, 255, .5);
}