|
|
|
*{
|
|
font-family: 'Lato', sans-serif;
|
|
}
|
|
body{
|
|
height: 90vh;
|
|
display: flex;
|
|
background:aliceblue;
|
|
}
|
|
a{
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
ul{
|
|
list-style: none;
|
|
}
|
|
|
|
// variables
|
|
$yellow: #feb103;
|
|
$gray: #f6f8fa;
|
|
$black: #444;
|
|
$text-gray: #9e9e9e;
|
|
$text-gray2: #858d9f;
|
|
$blue1: #3976f6;
|
|
$blue2: #59a2fb;
|
|
$switchOff: #ff574e;
|
|
// helper class
|
|
.f{
|
|
display: flex;
|
|
}
|
|
.fe{
|
|
align-items: flex-end;
|
|
}
|
|
// start
|
|
body{
|
|
background-color: rgba(89, 162, 251, 0.61);
|
|
}
|
|
.dashboard{
|
|
background-color: $gray;
|
|
width: 420px;
|
|
border-radius: 0 0 20px -15px black;
|
|
margin: auto;
|
|
}
|
|
|
|
.Temp{
|
|
align-items: center;
|
|
background: rgb(20,150,180) none repeat scroll 0 0;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
transition: all 1s ease 0s;
|
|
box-shadow: 0 -5px 27px 0 rgba(128,128,128,0.15);
|
|
}
|
|
.Hygro{
|
|
align-items: center;
|
|
background: rgb(20,220,100) none repeat scroll 0 0;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
transition: all 2s ease 0s;
|
|
box-shadow: 0 -5px 27px 0 rgba(128,128,128,0.15);
|
|
}
|
|
.Lum{
|
|
align-items: center;
|
|
background: rgb(100,60,200) none repeat scroll 0 0;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
transition: all 4s ease 0s;
|
|
box-shadow: 0 -5px 27px 0 rgba(128,128,128,0.15);
|
|
}
|
|
|
|
|
|
header{
|
|
background-color: white;
|
|
overflow: hidden;
|
|
border-radius: 0 0 50px 50px;
|
|
padding: 40px 40px 20px;
|
|
box-shadow: 0 -5px 27px 0 rgba(128,128,128,0.15);
|
|
}
|
|
.mesures{
|
|
margin-top: 40px;
|
|
width: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
sup{
|
|
font-size: 11px;
|
|
position: relative;
|
|
top: -11px;
|
|
}
|
|
&::before{
|
|
content: '';
|
|
position: absolute;
|
|
width: 130px;
|
|
height: 60px;
|
|
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.5) 50%, rgba(255,255,255,1) 100%);
|
|
right: 0;
|
|
bottom: 14px;
|
|
}
|
|
>div{
|
|
white-space: nowrap;
|
|
}
|
|
>div+div{
|
|
margin-left: 30px;
|
|
}
|
|
>div>strong{
|
|
font-size: 20px;
|
|
}
|
|
>div>p{
|
|
color: $text-gray;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
.category{
|
|
overflow: hidden;
|
|
width: 1000px;
|
|
ul{
|
|
display: flex;
|
|
}
|
|
}
|
|
.appliances{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
width: 340px;
|
|
margin: 50px auto;
|
|
}
|
|
.appliance{
|
|
position: relative;
|
|
height: 170px;
|
|
width: 45%;
|
|
margin: 10px 0;
|
|
span{
|
|
position: relative;
|
|
&::before,
|
|
&::after{
|
|
text-transform: uppercase;
|
|
font-size: 12px;
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
&::before{
|
|
content: attr(data-o);
|
|
opacity: 0;
|
|
}
|
|
&::after{
|
|
content: attr(data-c);
|
|
}
|
|
}
|
|
strong{
|
|
margin: 70px 0 10px;
|
|
display: block;
|
|
font-size: 18px;
|
|
}
|
|
label{
|
|
position: absolute;
|
|
width: 74%;
|
|
height: 71%;
|
|
cursor: pointer;
|
|
padding: 20px;
|
|
box-shadow: 1px 0 10px 10px rgba(black, 0.03);
|
|
border-radius: 30px;
|
|
&::before{
|
|
border-radius: 30px;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
background-color: white;
|
|
content: '';
|
|
}
|
|
*{
|
|
position: relative;
|
|
transition: 200ms;
|
|
}
|
|
small{
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: $switchOff;
|
|
border-radius: 10px;
|
|
top: 30px;
|
|
right: 20px;
|
|
transition: 200ms;
|
|
&::after,
|
|
&::before{
|
|
content: '';
|
|
}
|
|
}
|
|
.f{
|
|
width: 16px;
|
|
height: 22px;
|
|
background-color: $blue1;
|
|
display: block;
|
|
position: absolute;
|
|
border-radius: 2px;
|
|
top: 30px;
|
|
background-image: linear-gradient(0deg, white 2px, transparent 2px), linear-gradient(0deg, white 12px, transparent 0);
|
|
background-size: 17px 9px, 2px 15px;
|
|
background-position: 0 0, 3px 0;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.a{
|
|
width: 23px;
|
|
height: 10px;
|
|
background-color: $blue1;
|
|
display: block;
|
|
position: absolute;
|
|
border-radius: 2px;
|
|
top: 30px;
|
|
background-image: linear-gradient(0deg, white 2px, transparent 2px);
|
|
background-size: 17px 9px;
|
|
background-position: 3px -2px;
|
|
background-repeat: no-repeat;
|
|
&::after,
|
|
&::before{
|
|
content: '';
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-width: 3px;
|
|
border-style: solid;
|
|
border-color: transparent transparent $blue1;
|
|
top: 10px;
|
|
border-radius: 50%;
|
|
transform: rotate(72deg);
|
|
display: block;
|
|
}
|
|
&::after{
|
|
left: 14px;
|
|
}
|
|
&::before{
|
|
left: 6px;
|
|
}
|
|
}
|
|
.r{
|
|
width: 23px;
|
|
height: 9px;
|
|
background-color: $blue1;
|
|
display: block;
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
top: 30px;
|
|
&::after,
|
|
&::before{
|
|
content: '';
|
|
border-width: 2px;
|
|
border-style: solid;
|
|
border-color: rgba($blue1, .61) transparent transparent;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
display: block;
|
|
}
|
|
&::after{
|
|
width: 22px;
|
|
height: 20px;
|
|
top: -11px;
|
|
left: -2px;
|
|
}
|
|
&::before{
|
|
width: 16px;
|
|
height: 20px;
|
|
top: -6px;
|
|
left: 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.heading .title{
|
|
margin: 0;
|
|
font-size: 36px;
|
|
}
|
|
.heading .date{
|
|
margin: 10px 0;
|
|
font-size: 16px;
|
|
}
|
|
}
|