168 lines
3.1 KiB
CSS
168 lines
3.1 KiB
CSS
@import url("https://fonts.googleapis.com/css?family=Montserrat:200,400,700,900");
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: "Montserrat", sans-serif;
|
|
background-color: #2a2b2f;
|
|
}
|
|
|
|
a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 20px;
|
|
font-size: 12px;
|
|
text-decoration: none;
|
|
background: #f7f7f7;
|
|
padding: 4px 8px;
|
|
z-index: 10;
|
|
color: #3B425A;
|
|
}
|
|
a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
|
|
background: #7B46FE;
|
|
color: #FDFA75;
|
|
}
|
|
|
|
.lookat-target {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
z-index: 2;
|
|
}
|
|
.lookat-target:before {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
content: "";
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 80px;
|
|
top: -40px;
|
|
left: -40px;
|
|
}
|
|
.lookat-target:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 86px;
|
|
height: 86px;
|
|
border-radius: 86px;
|
|
top: -45px;
|
|
left: -45px;
|
|
border: 2px solid #F7F7F7;
|
|
}
|
|
|
|
.head {
|
|
z-index: 100;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
text-align: center;
|
|
width: 600px;
|
|
margin: 0 auto;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
.head h1 {
|
|
font-size: 70px;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
color: #F7F7F7;
|
|
}
|
|
.head h3 {
|
|
font-size: 30px;
|
|
font-weight: 100;
|
|
margin: 0;
|
|
color: #F7F7F7;
|
|
}
|
|
.head a, .head a:link, .head a:visited, .head a:active {
|
|
color: #F7F7F7;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
font-size: 20px;
|
|
font-weight: 400;
|
|
border-bottom: 1px solid #7B46FE;
|
|
position: relative;
|
|
}
|
|
.head a:hover, .head a:link:hover, .head a:visited:hover, .head a:active:hover {
|
|
color: #7B46FE;
|
|
}
|
|
|
|
.item_container {
|
|
position: absolute;
|
|
}
|
|
|
|
.donut {
|
|
position: absolute;
|
|
display: block;
|
|
width: 60px;
|
|
height: 60px;
|
|
border: 16px solid #4C90F5;
|
|
border-radius: 100%;
|
|
border-left-color: transparent;
|
|
border-top-color: transparent;
|
|
transform-origin: 50% 50%;
|
|
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
|
|
.sausage {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 100px;
|
|
height: 2px;
|
|
background: #FFFFFF;
|
|
border-radius: 2px;
|
|
transform-origin: 100% 50%;
|
|
transform: translateX(-100%) translateY(-50%);
|
|
top: 50%;
|
|
}
|
|
|
|
.square {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 2px solid #3BB15D;
|
|
transform-origin: 50% 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
|
|
.diamond {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
display: block;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: #ED4D3C;
|
|
transform-origin: 50% 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
|
|
.plus {
|
|
position: absolute;
|
|
background: #FBC402;
|
|
height: 24px;
|
|
width: 2px;
|
|
transform-origin: 50% 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
left: 50%;
|
|
top: 50%;
|
|
}
|
|
.plus:after {
|
|
background: #FBC402;
|
|
content: "";
|
|
height: 2px;
|
|
left: -11px;
|
|
position: absolute;
|
|
top: 11px;
|
|
width: 24px;
|
|
}
|