Line 1: | Line 1: | ||
− | + | @font-face { | |
− | + | font-family: MONTSERRAT-BLACK1; | |
− | + | src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff") | |
− | + | format("woff"); | |
− | + | ||
− | + | ||
} | } | ||
− | + | @font-face { | |
− | + | font-family: MONTSERRAT-BLACKITALIC2; | |
− | + | src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff") | |
− | + | format("woff"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | @font-face { | |
− | + | font-family: CABIN-REGULAR; | |
− | + | src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff") | |
− | + | format("woff"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | @font-face { | |
− | + | font-family: CABIN-ITALIC; | |
− | + | src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff") | |
− | + | format("woff"); | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | @font-face { | |
− | + | font-family: BLACKITALIC; | |
− | + | src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff") format("woff"); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | body { | |
− | + | background-color: #fafafa; | |
} | } | ||
− | + | * { | |
− | + | box-sizing: border-box; | |
− | + | ||
} | } | ||
− | #contain | + | #contain { |
− | + | margin-top: -12px; | |
− | + | padding: 0 3% 10%; | |
+ | width: 100%; | ||
+ | background-color: #fafafa; | ||
+ | z-index: 1; | ||
+ | text-align: left; | ||
+ | box-sizing: border-box; | ||
} | } | ||
− | + | .background { | |
− | + | position: fixed; | |
+ | width: 100%; | ||
+ | top: 0; | ||
+ | z-index: -1; | ||
+ | box-sizing: border-box; | ||
} | } | ||
− | # | + | #header #title { |
− | + | position: fixed; | |
− | + | top: 9vw; | |
− | + | font-family: "MONTSERRAT-BLACKITALIC2"; | |
− | + | line-height: normal; | |
− | + | font-weight: bolder; | |
− | + | font-size: 8vw; | |
− | + | color: #fafafa; | |
− | + | z-index: -1; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | # | + | #header #load { |
− | + | position: fixed; | |
− | + | display: flex; | |
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | background-color: white; | |
− | + | align-items: center; | |
+ | justify-content: center; | ||
+ | z-index: 20; | ||
} | } | ||
− | # | + | #header #load img { |
− | + | width: 50vmin; | |
} | } | ||
− | # | + | #header #menu { |
− | + | z-index: 10; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #header #menu #menuBack { | |
− | # | + | position: fixed; |
− | + | width: 100%; | |
− | + | height: 100%; | |
+ | box-sizing: border-box; | ||
+ | z-index: 10; | ||
} | } | ||
− | # | + | #header #menu .menu { |
− | + | background: #000000ad; | |
} | } | ||
− | + | #header #menu #logo { | |
− | # | + | position: fixed; |
− | + | top: 3vmin; | |
− | + | left: 1vmin; | |
+ | width: 25vmin; | ||
+ | z-index: 11; | ||
} | } | ||
− | # | + | #header #menu #menuImg { |
− | + | position: fixed; | |
+ | top: 2vmin; | ||
+ | right: 1vmin; | ||
+ | width: 15vmin; | ||
+ | z-index: 11; | ||
} | } | ||
− | # | + | #header #menu .class { |
− | + | position: fixed; | |
− | + | top: 14vmin; | |
− | + | z-index: 11; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #header #menu .class li { | |
− | + | padding: 6% 0; | |
− | + | margin: 2vmin; | |
− | + | border-radius: 30px; | |
− | + | text-align: center; | |
− | + | font-family: "MONTSERRAT-BLACKITALIC2"; | |
− | + | font-size: 1.5em; | |
− | + | font-weight: bolder; | |
} | } | ||
− | # | + | #header #menu #class-a { |
− | + | right: 1vmin; | |
} | } | ||
− | # | + | #header #menu #class-a li { |
− | + | width: 30vmin; | |
− | + | background-color: #fafafa; | |
− | + | border: #fafafa solid 3px; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | #header #menu #class-a li:hover { | |
− | + | border: #0072fe solid 3px; | |
} | } | ||
− | . | + | #header #menu #class-a .class-a { |
− | + | background-color: #0072fe; | |
+ | border: #0072fe solid 3px; | ||
+ | color: #fafafa; | ||
} | } | ||
− | # | + | #header #menu #class-b { |
− | + | right: 33vmin; | |
− | + | ||
} | } | ||
− | + | #header #menu #class-b li { | |
− | # | + | border: #0072fe solid 2px; |
− | + | width: 39vmin; | |
} | } | ||
− | + | #header #menu #class-b li a{ | |
− | # | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
color: #FAFAFA; | color: #FAFAFA; | ||
− | |||
} | } | ||
− | # | + | #header #menu #class-b li:active { |
− | + | background-color: #0000008f; | |
} | } | ||
− | + | #header #menu #class-b .class-b { | |
− | # | + | background-color: #00000047; |
− | + | ||
} | } | ||
− | + | footer { | |
− | + | position: -webkit-sticky; | |
+ | left: 0; | ||
+ | width: 100%; | ||
+ | background-color: black; | ||
} | } | ||
− | # | + | footer #sponsor { |
− | + | position: relative; | |
− | + | top: -10px; | |
− | + | width: 100%; | |
− | + | border-radius: 10px; | |
− | + | -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), | |
− | + | 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
− | + | -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), | |
− | + | 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
− | + | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
− | + | -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
− | + | z-index: 1; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | footer #connect { | |
− | + | position: relative; | |
− | + | top: -30px; | |
− | + | width: 100%; | |
− | + | height: 150px; | |
− | + | background-color: black; | |
− | + | border-radius: 10px; | |
− | + | -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), | |
− | + | 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
− | + | -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), | |
− | + | 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
− | + | box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
− | + | -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; | |
− | + | z-index: 2; | |
− | + | ||
− | + | ||
} | } |
Revision as of 08:10, 5 October 2021
@font-face {
font-family: MONTSERRAT-BLACK1; src: url("https://static.igem.org/mediawiki/2021/0/04/T--CPU_CHINA--MONTSERRAT-BLACK1.woff") format("woff");
}
@font-face {
font-family: MONTSERRAT-BLACKITALIC2; src: url("https://static.igem.org/mediawiki/2021/d/d4/T--CPU_CHINA--MONTSERRAT-BLACKITALIC2.woff") format("woff");
}
@font-face {
font-family: CABIN-REGULAR; src: url("https://static.igem.org/mediawiki/2021/b/b3/T--CPU_CHINA--CABIN-REGULAR.woff") format("woff");
}
@font-face {
font-family: CABIN-ITALIC; src: url("https://static.igem.org/mediawiki/2021/7/75/T--CPU_CHINA--CABIN-ITALIC.woff") format("woff");
}
@font-face {
font-family: BLACKITALIC; src: url("https://static.igem.org/mediawiki/2021/6/67/T--CPU_CHINA--BLACKITALIC.woff") format("woff");
}
body {
background-color: #fafafa;
}
- {
box-sizing: border-box;
}
- contain {
margin-top: -12px; padding: 0 3% 10%; width: 100%; background-color: #fafafa; z-index: 1; text-align: left; box-sizing: border-box;
}
.background {
position: fixed; width: 100%; top: 0; z-index: -1; box-sizing: border-box;
}
- header #title {
position: fixed; top: 9vw; font-family: "MONTSERRAT-BLACKITALIC2"; line-height: normal; font-weight: bolder; font-size: 8vw; color: #fafafa; z-index: -1;
}
- header #load {
position: fixed; display: flex; width: 100%; height: 100%; background-color: white; align-items: center; justify-content: center; z-index: 20;
}
- header #load img {
width: 50vmin;
}
- header #menu {
z-index: 10;
}
- header #menu #menuBack {
position: fixed; width: 100%; height: 100%; box-sizing: border-box; z-index: 10;
}
- header #menu .menu {
background: #000000ad;
}
- header #menu #logo {
position: fixed; top: 3vmin; left: 1vmin; width: 25vmin; z-index: 11;
}
- header #menu #menuImg {
position: fixed; top: 2vmin; right: 1vmin; width: 15vmin; z-index: 11;
}
- header #menu .class {
position: fixed; top: 14vmin; z-index: 11;
}
- header #menu .class li {
padding: 6% 0; margin: 2vmin; border-radius: 30px; text-align: center; font-family: "MONTSERRAT-BLACKITALIC2"; font-size: 1.5em; font-weight: bolder;
}
- header #menu #class-a {
right: 1vmin;
}
- header #menu #class-a li {
width: 30vmin; background-color: #fafafa; border: #fafafa solid 3px;
}
- header #menu #class-a li:hover {
border: #0072fe solid 3px;
}
- header #menu #class-a .class-a {
background-color: #0072fe; border: #0072fe solid 3px; color: #fafafa;
}
- header #menu #class-b {
right: 33vmin;
}
- header #menu #class-b li {
border: #0072fe solid 2px; width: 39vmin;
}
- header #menu #class-b li a{
color: #FAFAFA;
}
- header #menu #class-b li:active {
background-color: #0000008f;
}
- header #menu #class-b .class-b {
background-color: #00000047;
}
footer {
position: -webkit-sticky; left: 0; width: 100%; background-color: black;
}
footer #sponsor {
position: relative; top: -10px; width: 100%; border-radius: 10px; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; z-index: 1;
}
footer #connect {
position: relative; top: -30px; width: 100%; height: 150px; background-color: black; border-radius: 10px; -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; z-index: 2;
}