Difference between revisions of "Template:CPU CHINA/common CSS"

Revision as of 09:01, 8 October 2021 (view source) Lanchai (Talk | contribs) ← Older edit		Revision as of 16:26, 9 October 2021 (view source) Lanchai (Talk | contribs) Newer edit →
Line 172:		Line 172:
	position: -webkit-sticky;		position: -webkit-sticky;
	left: 0;		left: 0;
		+	padding-bottom: 0.5vmin;
	width: 100%;		width: 100%;
−	background-color: black;	+	background-color: #424242;
	}		}
	footer #sponsor {		footer #sponsor {
	position: relative;		position: relative;
−	top: -10px;	+	margin: 0;
		+	padding:0.5vmin;
		+	padding-bottom: 3vmin;
		+	top: -3vmin;
	width: 100%;		width: 100%;
−	border-radius: 10px;	+	border-radius: 20px;
−	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),	+	background-color: #FFFFFF;
−	0 0 40px rgba(0, 0, 0, 0.1) inset;	+	-webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
−	-moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3),	+	-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);
−	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);
−	-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;		z-index: 1;
	}		}
−		+	footer #sponsor img{
		+	width: 96%;
		+	}
	footer #connect {		footer #connect {
	position: relative;		position: relative;
−	top: -30px;	+	margin: 0;
		+	padding-top: 1vmin;
		+	top: -8vmin;
	width: 100%;		width: 100%;
−	height: 150px;	+	background-color: #424242;
−	background-color: black;	+	border-radius: 20px;
−	border-radius: 10px;	+	color: #FFFFFF;
−	-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;		z-index: 2;
		+	}
		+
		+	footer #connect #contact{
		+	display: flex;
		+	flex-wrap: wrap;
		+	align-items: center;
		+	justify-content: center;
		+	}
		+
		+	footer #connect h4{
		+	margin: 1% 0 5vmin;
		+	text-align: center;
		+	font-size: 1.5em;
		+	font-weight: bold;
		+	}
		+
		+	footer #connect #contact li{
		+	width: 25%;
		+	border:#424242 solid 10px;
		+	justify-content: center;
		+	flex-direction: column;
		+	align-items: center;
		+	text-align: center;
		+	}
		+
		+	footer #connect #contact li:hover{
		+	border: none;
		+	}
		+
		+	footer #connect li img{
		+	margin-bottom: 2vw;
		+	width: 20%;
	}		}

---

Revision as of 16:26, 9 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;

}

1. 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;

}

1. header #title {

 position: fixed;
 top: 9vw;
 font-family: "MONTSERRAT-BLACKITALIC2";
 line-height: normal;
 font-weight: bolder;
 font-size: 8vw;
 color: #fafafa;
 z-index: -1;

}

1. header #load {

 position: fixed;
 display: flex;
 width: 100%;
 height: 100%;
 background-color: white;
 align-items: center;
 justify-content: center;
 z-index: 20;

}

1. header #load img {

 width: 50vmin;

}

1. header #menu {

 z-index: 10;

}

1. header #menu #menuBack {

 position: fixed;
 width: 100%;
 height: 100%;
 box-sizing: border-box;
 z-index: 10;

}

1. header #menu .menu {

 background: #000000ad;

}

1. header #menu #logo {

 position: fixed;
 top: 3vmin;
 left: 1vmin;
 width: 25vmin;
 z-index: 11;

}

1. header #menu #menuImg {

 position: fixed;
 top: 2vmin;
 right: 1vmin;
 width: 15vmin;
 z-index: 11;

}

1. header #menu .class {

 position: fixed;
 top: 14vmin;
 z-index: 11;

}

1. 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;

}

1. header #menu #class-a {

 right: 1vmin;

}

1. header #menu #class-a li {

 width: 30vmin;
 background-color: #fafafa;
 border: #fafafa solid 3px;

}

1. header #menu #class-a li:hover {

 border: #0072fe solid 3px;

}

1. header #menu #class-a .class-a {

 background-color: #0072fe;
 border: #0072fe solid 3px;
 color: #fafafa;

}

1. header #menu #class-b {

 right: 33vmin;

}

1. header #menu #class-b li {

 border: #0072fe solid 2px;
 width: 39vmin;

}

1. header #menu #class-b li a{

   color: #FAFAFA;

}

1. header #menu #class-b li:active {

 background-color: #0000008f;

}

1. header #menu #class-b .class-b {

 background-color: #00000047;

}

footer {

 position: -webkit-sticky;
 left: 0;
 padding-bottom: 0.5vmin;
 width: 100%;
 background-color: #424242;

}

footer #sponsor {

 position: relative;
 margin: 0;
 padding:0.5vmin;
 padding-bottom: 3vmin;
 top: -3vmin;
 width: 100%;
 border-radius: 20px;
 background-color: #FFFFFF;
 -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 -o-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
 z-index: 1;

} footer #sponsor img{

 width: 96%;

} footer #connect {

 position: relative;
 margin: 0;
 padding-top: 1vmin;
 top: -8vmin;
 width: 100%;
 background-color: #424242;
 border-radius: 20px;
 color: #FFFFFF;
 z-index: 2;

}

footer #connect #contact{

 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;

}

footer #connect h4{

 margin: 1% 0 5vmin;
 text-align: center;
 font-size: 1.5em;
 font-weight: bold;

}

footer #connect #contact li{

 width: 25%;
 border:#424242 solid 10px;
 justify-content: center;
 flex-direction: column;
 align-items: center;
 text-align: center;

}

footer #connect #contact li:hover{

 border: none;

}

footer #connect li img{

 margin-bottom: 2vw;
 width: 20%;

}