108 lines
2.1 KiB
CSS
108 lines
2.1 KiB
CSS
body{
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
}
|
|
|
|
.dark{
|
|
background-color: #282c34;
|
|
width: 100%;
|
|
-webkit-box-flex: 1;
|
|
flex: 1;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
-webkit-box-align: start;
|
|
align-items: flex-start;
|
|
}
|
|
.black{
|
|
background-color: #16171d;
|
|
width: 100%;
|
|
-webkit-box-flex: 1;
|
|
flex: 1;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
-webkit-box-align: end;
|
|
align-items: flex-end;
|
|
}
|
|
.middle{
|
|
background-color: #454952;
|
|
height: 75px;
|
|
width: 100%;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
.block{
|
|
padding: 0 75px;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
}
|
|
.circle{
|
|
height: 250px;
|
|
position: relative;
|
|
display: -webkit-box;
|
|
display: flex;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
-webkit-box-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.c{
|
|
font-weight: bold;
|
|
}
|
|
|
|
.t{
|
|
padding: 10px;
|
|
}
|
|
|
|
.pink { background-color: #ff6188; }
|
|
.green { background-color: #a9dc76; }
|
|
.yellow { background-color: #ffd866; }
|
|
.orange { background-color: #fc9867; }
|
|
.violet { background-color: #ab9df2; }
|
|
.blue { background-color: #78dce8; }
|
|
|
|
.pink-text { color: #ff6188; }
|
|
.green-text { color: #a9dc76; }
|
|
.yellow-text { color: #ffd866; }
|
|
.orange-text { color: #fc9867; }
|
|
.violet-text { color: #ab9df2; }
|
|
.blue-text { color: #78dce8; }
|
|
|
|
.t1 {
|
|
color: #282c34;
|
|
}
|
|
.t2 {
|
|
color: #454952;
|
|
}
|
|
.t3 {
|
|
color: #16171d;
|
|
}
|
|
|
|
/*
|
|
* boring standards
|
|
*/
|
|
|
|
html {
|
|
box-sizing: border-box;
|
|
}
|
|
*, *:before, *:after {
|
|
box-sizing: inherit;
|
|
} |