Difference between revisions of "Team:IISER-Kolkata/style.css"

Revision as of 03:51, 30 June 2018 (view source) Prajwalp (Talk | contribs) (sponsors and contact updated) ← Older edit		Latest revision as of 05:30, 24 November 2018 (view source) Quasar (Talk | contribs)
(39 intermediate revisions by 2 users not shown)
Line 1:		Line 1:
−	.logo_2018, #firstHeading, #top_menu_under {	+	.pagelink#homeMenu a {
−	display:none;}	+	color: gold;
−		+
−	#content {	+
−	width: 100vw;	+
−	padding: 0;	+
−	margin-left:0;	+
−	}	+
−	/*fonts*/	+
−	@font-face {	+
−	src: url("https://static.igem.org/mediawiki/2018/1/14/T--IISER-Kolkata--blogger.ttf");	+
−	font-family: blogger;	+
−	}	+
−	@font-face {	+
−	src: url("https://static.igem.org/mediawiki/2018/7/7a/T--IISER-Kolkata--prime.otf");	+
−	font-family: prime;	+
−	}	+
−	@font-face {	+
−	src: url("https://static.igem.org/mediawiki/2018/5/5a/T--IISER-Kolkata--rodina.otf");	+
−	font-family: rodina;	+
−	}	+
−	@font-face {	+
−	src: url("https://static.igem.org/mediawiki/2018/f/f7/T--IISER-Kolkata--social.ttf");	+
−	font-family: social;	+
	}		}
−	/*body*/	+	.maincont#container {
−	body, html {	+	width: 100vw;
−	width: 100vw;	+
−	margin: 0;	+
−	padding: 0;	+
−	}	+
−	body {	+
	height: auto;		height: auto;
−	overflow-y: scroll;	+	display: flex;
−	overflow-x: hidden;	+	flex-direction: column;
−	margin: auto;	+
	}		}
−	body::-webkit-scrollbar-track	+
−	{	+	section.mainpage {
−	background-color: black;	+	position: relative;
−	}	+	display: flex;
−	body::-webkit-scrollbar	+	width: 100vw;
−	{	+
−	width: 1vw;	+
−	}	+
−	body::-webkit-scrollbar-thumb	+
−	{	+
−	background-color: #999999;	+
−	}	+
−	body::-webkit-scrollbar-thumb:hover	+
−	{	+
−	background-color: #777777;	+
	}		}
−	#container {	+	/*Landing*/
−	height: auto;	+	.mainpage#landing {
−	width: 100vw;	+
−	display: flex;	+
	flex-direction: column;		flex-direction: column;
−	}	+	min-height: 70vh;
−		+
−	#home_gif{	+
−	width: 55vw;	+
−	margin-left: 20vw;	+
−	margin-top: 2vh;	+
−	}	+
−	#main_title{	+
−	top: 60vh;	+
−	left: 22vw;	+
−	height: 6vw;	+
−	width: 6vw;	+
−	font-size: 4vw;	+
−	position: absolute;	+
	align-items: center;		align-items: center;
	justify-content: center;		justify-content: center;
		+	background-color: #eeeeee;
		+	padding: 10vmin 0vw 5vmin 0vw;
	}		}
−	#title_desc{	+	#landing #goldmedal {
		+	height: 20vmin;
		+	width: auto;
		+	margin: 2vw;
	position: absolute;		position: absolute;
−	left: 40vw;	+	left: 80vw;
−	top: 65vh;	+	top: 5vw;
−	height: 4vh;	+
−	width:40vw;	+
−	align-items: center;	+
−	justify-content: center;	+
	}		}
−		+	#landing #mainlogo {
−	#mascot{	+	height: 50vmin;
−	margin-left:5vw;	+	width: auto;
−	margin-top: 15vh;	+	margin: 2vw;
	}		}
−		+	#landing h3 {
−	#abstract_text{	+	width: auto;
−	height:70vh;	+	font-family: prime;
−	width:55vw;	+	font-size: 1.8vmax;
−	left:40vw;	+	margin: 2vw 0vw 1.5vw 0vw;
−	top:13vh;	+
−	justify-content: center;	+
−	align-items: center;	+
−	position: absolute;	+
	}		}
−		+	#landing p {
−	#descript  ,#details{	+	margin: 0.8vw 0vw 1.2vw 0vw;
−	height:70vh;	+	font-family: blogger;
−	width:80vw;	+	font-size: 1.5vmax;
−	top:20vh;	+
−	left:10vw;	+
	}		}
−	#des_left ,#det_cont{	+	#homeflex {
−	position: absolute;	+	width: 100%;
−	left:10vw;	+	height: auto;
−	top: 15vh;	+	display: flex;
−	width: 80vw;	+	flex-wrap: wrap;
		+	align-items: center;
	justify-content: center;		justify-content: center;
		+	}
		+	#homeflex .homebutton {
		+	display: flex;
	align-items: center;		align-items: center;
−	text-align: justify;	+	justify-content: center;
		+	width: auto;
		+	height: 3vmax;
		+	padding: 1vw;
		+	margin: 1vw;
		+	cursor: pointer;
		+	background-color: gold;
		+	-webkit-transition: 0.2s linear;
		+	-moz-transition: 0.2s linear;
		+	-o-transition: 0.2s linear;
		+	transition: 0.2s linear;
	}		}
−	#team_left{	+	.homebutton a {
−	width: 35vw;	+	text-decoration: none !important;
−	height: 70vh;	+	color: black;
−	left:10vw;	+
−	top:25vh;	+
−	position: absolute;	+
	}		}
−	#team_right{	+	.homebutton a p {
−	width: 35vw;	+	font-family: rodina !important;
−	height: 70vh;	+	font-size: 1.8vmax !important;
−	left:45vw;	+	-webkit-transition: 0.2s linear;
−	top:17vh;	+	-moz-transition: 0.2s linear;
−	position: absolute;	+	-o-transition: 0.2s linear;
		+	transition: 0.2s linear;
	}		}
−	#team_right2{	+	.homebutton:hover {
−	width: 35vw;	+	background-color: black !important;
−	height: 70vh;	+
−	left:75vw;	+
−	top:17vh;	+
−	position: absolute;	+
	}		}
−	#dbt{	+	.homebutton:hover a {
−	width:15vw;	+	color: gold !important;
−	left:10vw;	+
−	top:15vh;	+
−	position: absolute;	+
	}		}
−	#dbt_des{	+	.homebutton a:hover {
−	width:15vw;	+	color: white !important;
−	left:10vw;	+	text-decoration: none;
−	top:20vh;	+
−	position: absolute;	+
−	background-color: gray;	+
−	opacity: 0;	+
−	color: white;	+
−	text-align: center;	+
	}		}
−	#dbt_des:hover{	+
−	opacity: 1;	+	/*Sponsors*/
		+	.mainpage#sponsors {
		+	flex-wrap: wrap;
		+	height: auto;
		+	background-color: #dddddd;
		+	justify-content: space-around;
	}		}
−	#dbt_text{	+	#sponsors a img {
−	top:45vh;	+	height: 20vmin;
−	left:9vw;	+	width: auto;
−	position: absolute;	+	margin: 2vmax;
	}		}
−	#gb{	+
−	width:25vw;	+	/*Contact Us*/
−	position: absolute;	+	.mainpage#contactUs {
−	left:30vw;	+	flex-wrap: wrap;
−	top:15vh;	+	height: auto;
		+	background-color: #222222;
		+	justify-content: center;
	}		}
−	#gb_text{	+	#contactUs #contactLeft {
−	top:33vh;	+	display: flex;
−	left:38vw;	+	flex-direction: column;
−	position: absolute;	+	width: 40vw;
		+	margin: 2vw;
	}		}
−	#gb_des{	+	#contactUs #contactRight {
−	width:25vw;	+	display: flex;
−	position: absolute;	+	flex-direction: column;
−	left:30vw;	+	width: 30vw;
−	top:18vh;	+	margin: 2vw;
−	background-color: gray;	+
−	opacity: 0;	+
−	color: white;	+
−	text-align: center;	+
	}		}
−	#gb_des:hover{	+	#contactLeft h4,#contactRight h4 {
−	opacity: 1;	+	margin: 1.5vw 0vw 1vw 0vw;
		+	color: #dddddd;
		+	font-family: prime;
		+	font-size: 1.6vmax;
	}		}
−	#idt{	+	#contactLeft p,#contactRight p {
−	width:17.5vw;	+	margin: 0.5vw 0vw 0.5vw 0vw;
−	left:60vw;	+	color: #dddddd;
−	top:15vh;	+	font-family: blogger;
−	position: absolute;	+	font-size: 1.5vmax;
	}		}
−	#idt_text{	+	#contactLeft a,#contactRight a {
−	top:33vh;	+	color: #999999;
−	left:60vw;	+	font-family: blogger;
−	position: absolute;	+	font-size: 1.5vmax;
		+	text-decoration: none;
	}		}
−	#idt_des{	+	#contactLeft a:hover,#contactRight a:hover {
−	width:17.5vw;	+	color: white;
−	left:60vw;	+
−	top:15vh;	+
−	position: absolute;	+
−	background-color: gray;	+
−	opacity: 0;	+
−	color: white;	+
−	text-align: center;	+
	}		}
−	#idt_des:hover{	+	#contactUs #social {
−	opacity: 1;	+	display: flex;
−	}	+
−	#ik{	+
−	width:15vw;	+
−	left:82vw;	+
−	top:15vh;	+
−	position: absolute;	+
−	}	+
−	#ik_des{	+
−	width:15vw;	+
−	left:82vw;	+
−	top:25vh;	+
−	position: absolute;	+
−	background-color: gray;	+
−	opacity: 0;	+
−	color: white;	+
−	text-align: center;	+
−	}	+
−	#ik_des:hover{	+
−	opacity: 1;	+
−	}	+
−	#ik_text{	+
−	position: absolute;	+
−	left:85vw;	+
−	top:47vh;	+
−	}	+
−	#neb{	+
−	width:25vw;	+
−	left:20vw;	+
−	top:60vh;	+
−	position: absolute;	+
−	}	+
−	#neb_des{	+
−	width:25vw;	+
−	left:20vw;	+
−	top:63vh;	+
−	position: absolute;	+
−	background-color: gray;	+
−	opacity: 0;	+
−	color: white;	+
−	text-align: center;	+
−	}	+
−	#neb_des:hover{	+
−	opacity: 1;	+
−	}	+
−	#neb_text{	+
−	left:26vw;	+
−	top:80vh;	+
−	position: absolute;	+
−	}	+
−	#sg{	+
−	width: 35vw;	+
−	left:55vw;	+
−	top: 60vh;	+
−	position: absolute;	+
−	}	+
−	#sg_des{	+
−	width: 35vw;	+
−	left:55vw;	+
−	top: 65vh;	+
−	position: absolute;	+
−	background-color: gray;	+
−	opacity: 0;	+
−	color: white;	+
−	text-align: center;	+
−	}	+
−	#sg_des:hover{	+
−	opacity: 1;	+
−	}	+
−	#sg_text{	+
−	left:70vw;	+
−	top:80vh;	+
−	position: absolute;	+
−	}	+
−	#phys{	+
−	width: 40vw;	+
−	height:80vh;	+
−	font-size: 1.5vw !important;	+
−	position: absolute;	+
−	left:10vw;	+
−	top: 20vh;	+
−	}	+
−	#write{	+
−	width: 40vw;	+
−	height: 35vh;	+
−	left:55vw;	+
−	top:12vh;	+
−	position: absolute;	+
−	}	+
−	#soc{	+
−	left:55vw;	+
−	top:70vh;	+
−	position: absolute;	+
−	width:40vw;	+
−	height: 30vh;	+
−	}	+
−	.ver_tab{	+
−	display:inline-block;	+
−	width: 2vw;	+
−	}	+
−		+
−	/*navbar*/	+
−	#menubar {	+
	width: 100vw;		width: 100vw;
−	height: 3vw;	+	margin: 1vmax 0vmax 1vmax 0vmax;
−	background-color: rgba(0,0,0,1);	+	justify-content: center;
−	display: inline-flex;	+
−	align-items: center;	+
−	position: absolute;	+
−	top: 100vh;	+
−	left: 0vw;	+
−	z-index: 10;	+
	}		}
−	#menubar.stickymenu {	+	#social .links {
−	position: fixed;	+	font-family: social;
−	top: 16px;	+	font-size: 4vmax;
−	left: 0vw;	+	margin: 1vmax;
−	}	+	color: #999999;
−	#menubar #logo {	+	text-decoration: none;
−	margin-left: 1vw;	+
−	margin-right: 1vw;	+
−	display: flex;	+
−	width: 2.5vw;	+
−	height: 2.5vw;	+
−	}	+
−	#logo img {	+
−	height: 100%;	+
−	width: 100%;	+
−	}	+
−	#menubar .pagelink {	+
−	display: flex;	+
−	align-items: center;	+
−	justify-content: center;	+
−	height: 100%;	+
−	width: 8vw;	+
−	}	+
−	#menubar .pagelink#registerMenu {	+
−	margin-left: auto;	+
−	}	+
−	#menubar .pagelink#loginMenu {	+
−	margin-right: 1vw;	+
−	}	+
−	.pagelink div {	+
−	cursor: pointer;	+
	-webkit-transition: 0.2s linear;		-webkit-transition: 0.2s linear;
	-moz-transition: 0.2s linear;		-moz-transition: 0.2s linear;
	-o-transition: 0.2s linear;		-o-transition: 0.2s linear;
−	transition: 0.2s linear;	+	transition: 0.2s linear;
	}		}
−	.pagelink div p {	+	#socFacebook:hover {
−	font-family: prime !important;	+	color: #3b5998;
−	font-size: 1.2vw !important;	+
−	color: #cccccc;	+
	}		}
−	.pagelink div:hover > p {	+	#socTwitter:hover {
−	color: white !important;	+	color: #00aced;
	}		}
−		+	#footer {
−	section {	+
−	position: relative;	+
	display: flex;		display: flex;
−	height: 100vh;	+	align-items: center;
−	width: 100vw;	+	justify-content: flex-end;
		+	min-height: 2vmax;
		+	width: 90vw;
		+	}
		+	#footer p {
		+	margin: 1vw 0vh 0vw 0vh;
		+	padding: 0.5vw 0 0.5vw 0;
		+	border-top: 0.1vw solid white;
		+	font-size: 1.5vmax;
		+	font-family: rodina;
		+	color: #dddddd;
	}		}
−	#home {	+	/*Abstract and Description*/
−	background: white;	+	#homecontainer {
−	height: 100vh;	+	position: relative;
−	}	+	top: 2vmax;
−	#home #iiserk {	+	width: 100%;
−	height: 6vw;	+	height: auto;
−	width: 6vw;	+
	display: flex;		display: flex;
−	align-items: center;	+	flex-direction: column;
−	position: absolute;	+	background-color: #eeeeee;
−	top: 1vw;	+
−	left: 1vw;	+
−	z-index: 5;	+
−	cursor: pointer;	+
	}		}
−	#iiserk a img {	+	section.submainpage {
−	height: 6vw;	+	padding: 2.5vw 7.5vw 2.5vw 7.5vw;
−	width: auto;	+	position: relative;
−	}	+
−	#home #pagedown {	+
−	top: 90vh;	+
−	left: 47vw;	+
−	height: 3vw;	+
−	margin-left: 6vw;	+
−	margin-top: 7vh;	+
−	width: 6vw;	+
−	cursor: pointer;	+
	display: flex;		display: flex;
		+	flex-direction: column;
	align-items: center;		align-items: center;
−	justify-content: center;	+	min-height: 100vh;
−	background-color: gray;	+	width: auto;
−	border: solid black 0.1vw;	+
	}		}
−		+	.submainpage h1.subheading {
−	/*aboutUs page*/	+	width: auto;
−	#aboutUs {	+	font-family: rodina !important;
−	background-color: #D8D9E5;	+	font-size: 3vmax !important;
		+	margin: 2.5vw 0vw 2.5vw 0vw !important;
		+	border-bottom: 0.3vw solid gold !important;
	}		}
−		+	.submainpage p {
−		+	width: auto;
−	/*events page*/	+	align-self: flex-start;
−	#events {	+	font-family: blogger !important;
−	background-color: #B4BAC2;	+	font-size: 1.5vmax !important;
−	}	+	text-align: justify !important;
−		+	margin: 0.8vw 0vw 1.2vw 0vw !important;
−	#gallery {	+
−	background-color: #D8D9E5;	+
−	}	+
−	#ourTeam {	+
−	background-color: #B4BAC2;	+
−	}	+
−	#sponsors {	+
−	background-color: #D8D9E5;	+
−	}	+
−	#reachUs {	+
−	background-color: #B4BAC2;	+
−	height: 100vh;	+
	}		}

---

Latest revision as of 05:30, 24 November 2018

.pagelink#homeMenu a {

   color: gold;

}

.maincont#container { width: 100vw;

   height: auto;

display: flex; flex-direction: column; }

section.mainpage { position: relative; display: flex; width: 100vw; }

/*Landing*/ .mainpage#landing {

   flex-direction: column;
   min-height: 70vh;
   align-items: center;
   justify-content: center;
   background-color: #eeeeee;
   padding: 10vmin 0vw 5vmin 0vw;

}

1. landing #goldmedal {

   height: 20vmin;
   width: auto; 
   margin: 2vw; 
   position: absolute;
   left: 80vw;
   top: 5vw;  

}

1. landing #mainlogo {

   height: 50vmin;
   width: auto; 
   margin: 2vw;   

}

1. landing h3 {

   width: auto;
   font-family: prime;
   font-size: 1.8vmax;
   margin: 2vw 0vw 1.5vw 0vw;

}

1. landing p {

   margin: 0.8vw 0vw 1.2vw 0vw;
   font-family: blogger;
   font-size: 1.5vmax;

}

1. homeflex {

   width: 100%;
   height: auto;
   display: flex;
   flex-wrap: wrap;
   align-items: center;  
   justify-content: center;

}

1. homeflex .homebutton {

   display: flex;  
   align-items: center;
   justify-content: center;   
   width: auto;
   height: 3vmax; 
   padding: 1vw;
   margin: 1vw;
   cursor: pointer;
   background-color: gold;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;     

} .homebutton a {

   text-decoration: none !important;
   color: black;

} .homebutton a p {

   font-family: rodina !important;
   font-size: 1.8vmax !important;        
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;

} .homebutton:hover {

   background-color: black !important;

} .homebutton:hover a {

   color: gold !important;

} .homebutton a:hover {

   color: white !important;
   text-decoration: none;

}

/*Sponsors*/ .mainpage#sponsors {

   flex-wrap: wrap;
   height: auto;
   background-color: #dddddd;
   justify-content: space-around;

}

1. sponsors a img {

   height: 20vmin;
   width: auto;
   margin: 2vmax;

}

/*Contact Us*/ .mainpage#contactUs {

   flex-wrap: wrap;
   height: auto;
   background-color: #222222;
   justify-content: center;

}

1. contactUs #contactLeft {

   display: flex;
   flex-direction: column;
   width: 40vw;
   margin: 2vw;

}

1. contactUs #contactRight {

   display: flex;
   flex-direction: column;
   width: 30vw;
   margin: 2vw;

}

1. contactLeft h4,#contactRight h4 {

   margin: 1.5vw 0vw 1vw 0vw;
   color: #dddddd;
   font-family: prime;
   font-size: 1.6vmax;

}

1. contactLeft p,#contactRight p {

   margin: 0.5vw 0vw 0.5vw 0vw;
   color: #dddddd;
   font-family: blogger;
   font-size: 1.5vmax;

}

1. contactLeft a,#contactRight a {

   color: #999999;
   font-family: blogger;
   font-size: 1.5vmax;
   text-decoration: none;

}

1. contactLeft a:hover,#contactRight a:hover {

   color: white;

}

1. contactUs #social {

   display: flex;   
   width: 100vw;
   margin: 1vmax 0vmax 1vmax 0vmax;
   justify-content: center; 

}

1. social .links {

   font-family: social;
   font-size: 4vmax;
   margin: 1vmax;
   color: #999999;
   text-decoration: none;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;   

}

1. socFacebook:hover {

   color: #3b5998;

}

1. socTwitter:hover {

   color: #00aced;

}

1. footer {

   display: flex;
   align-items: center;
   justify-content: flex-end;
   min-height: 2vmax;
   width: 90vw;

}

1. footer p {

   margin: 1vw 0vh 0vw 0vh;
   padding: 0.5vw 0 0.5vw 0;
   border-top: 0.1vw solid white;
   font-size: 1.5vmax;
   font-family: rodina;
   color: #dddddd;

}

/*Abstract and Description*/

1. homecontainer {

   position: relative;
   top: 2vmax;
   width: 100%;
   height: auto;
   display: flex;
   flex-direction: column;
   background-color: #eeeeee;

} section.submainpage {

   padding: 2.5vw 7.5vw 2.5vw 7.5vw;
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
   width: auto;

} .submainpage h1.subheading {

   width: auto;
   font-family: rodina !important;
   font-size: 3vmax !important;
   margin: 2.5vw 0vw 2.5vw 0vw !important;
   border-bottom: 0.3vw solid gold !important;

} .submainpage p {

   width: auto;
   align-self: flex-start;
   font-family: blogger !important;
   font-size: 1.5vmax !important;
   text-align: justify !important;
   margin: 0.8vw 0vw 1.2vw 0vw !important;

}