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

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
+
{
+
    background-color: black;
+
}
+
body::-webkit-scrollbar
+
{
+
    width: 1vw;
+
}
+
body::-webkit-scrollbar-thumb
+
{
+
    background-color: #999999;
+
}
+
body::-webkit-scrollbar-thumb:hover
+
{
+
    background-color: #777777;
+
}
+
#container {
+
    height: auto;
+
    width: 100vw;
+
    display: flex;
+
    flex-direction: column;
+
}
+
section {
+
    position: relative;
+
    display: flex;
+
    height: 100vh;
+
    width: 100vw;
+
}
+
#home {
+
    background: white;
+
    height: 100vh;
+
}
+
#home #iiserk {
+
    height: 6vw;
+
    width: 6vw;   
+
    display: flex;
+
    align-items: center; 
+
    position: absolute;
+
    top: 1vw;
+
    left: 1vw;
+
    z-index: 5;
+
    cursor: pointer;
+
}
+
#iiserk a img {
+
    height: 6vw;
+
    width: auto;
+
}
+
#home #pagedown {
+
    top: 90vh;
+
    left: 47vw;
+
    height: 3vw;
+
    width: 6vw;
+
    cursor: pointer;
+
    display: flex;
+
    align-items: center;
+
    justify-content: center;
+
    background-color: gray;
+
    border: solid black 0.1vw;
+
    position: absolute;
+
    font-size: 1.2vw;
+
    font-family: rodina;
+
 
}
 
}
  
/*abstract page*/
+
section.mainpage {  
#abstract {
+
position: relative;
    background-color: #D8D9E5;
+
display: flex;
 +
width: 100vw;
 
}
 
}
  
 
+
/*Landing*/
/*descr page*/
+
.mainpage#landing {
#descr {
+
     flex-direction: column;
     background-color: #B4BAC2;
+
     min-height: 70vh;
}
+
 
+
#details {
+
     background-color: #D8D9E5;
+
}
+
#interLab {
+
    height: 500vh;
+
}
+
#ourTeam {
+
    background-color: #B4BAC2;
+
}
+
#sponsors {
+
    background-color: #D8D9E5;
+
}
+
#contactUs {
+
    background-color: #B4BAC2;
+
}
+
 
+
#home_gif{
+
    width: 55vw;
+
    margin-left: 20vw;
+
    margin-top: 2vh;
+
}
+
#main_title{
+
    top: 60vh;
+
    left: 22vw;
+
    height: 6vw;
+
    width: 6vw;
+
    position: absolute;
+
 
     align-items: center;
 
     align-items: center;
 
     justify-content: center;
 
     justify-content: center;
     font-family: blogger;
+
     background-color: #eeeeee;
     font-size: 4vw ;
+
     padding: 15vmin 0vw 5vmin 0vw;
 
}
 
}
p {
+
#landing #mainlogo {
     font-size: 1.3vw !important;
+
     height: 50vmin;
     font-family: blogger !important;
+
     width: auto;  
 +
    margin: 2vw; 
 
}
 
}
span.heading {
+
#landing h3 {
     font-size: 1.5vw;
+
     width: auto;
 
     font-family: prime;
 
     font-family: prime;
 +
    font-size: 1.8vmax;
 +
    margin: 2vw 0vw 1.5vw 0vw;
 
}
 
}
#title_desc{
+
#landing p {
     position: absolute;
+
     margin: 0.8vw 0vw 1.2vw 0vw;
    left: 40vw;
+
     font-family: blogger;
    top: 65vh;
+
     font-size: 1.5vmax;
    height: 4vh;
+
    width:40vw;
+
    align-items: center;
+
    justify-content: center;
+
     font-family: sans-serif;
+
     font-size:1.2vw;
+
 
+
 
}
 
}
  
 
+
/*Sponsors*/
#mascot{
+
.mainpage#sponsors {
     position: absolute;
+
     flex-wrap: wrap;
     margin-left:5vw;
+
     height: auto;
     margin-top: 15vh;
+
    background-color: #dddddd;
 +
     justify-content: space-around;
 
}
 
}
#abstractDiv {
+
#sponsors a img {
     position: absolute;
+
     height: 20vmin;
 +
    width: auto;
 +
    margin: 2vmax;
 
}
 
}
#abstract_text{
+
 
     height:70vh;
+
/*Contact Us*/
     width:55vw;
+
.mainpage#contactUs {
     left:40vw;
+
     flex-wrap: wrap;
    top:13vh;
+
     height: auto;
 +
     background-color: #222222;
 
     justify-content: center;
 
     justify-content: center;
    align-items: center;
 
    position: absolute;
 
    font-size: 1.2vw;
 
    font-family: sans-serif;
 
 
}
 
}
 
+
#contactUs #contactLeft {
 
+
     display: flex;
#descript  ,#detdiv{
+
     flex-direction: column;
     position: absolute;
+
     width: 40vw;
     height:70vh;
+
     margin: 2vw;
     width:80vw;
+
    top:15vh;
+
     left:10vw;
+
 
}
 
}
 
+
#contactUs #contactRight {
 
+
     display: flex;
#des_left ,#det_cont{
+
     flex-direction: column;
     position: absolute;
+
     width: 30vw;
     left:2vw;
+
     margin: 2vw;
    top: 2vh;
+
     width: 80vw;
+
     justify-content: center;
+
    align-items: center;
+
    text-align: justify;
+
    font-family: sans-serif;
+
 
}
 
}
 
+
#contactLeft h4,#contactRight h4 {
 
+
     margin: 1.5vw 0vw 1vw 0vw;
#interDiv {
+
     color: #dddddd;
     position: absolute;
+
     font-family: prime;
     padding: 3vw;
+
     font-size: 1.6vmax;
    width: 80vw;
+
    height: auto;
+
     left: 10vw;
+
     top: 10vh;
+
 
}
 
}
table.table {
+
#contactLeft p,#contactRight p {
     font-size: 1.3vw;
+
     margin: 0.5vw 0vw 0.5vw 0vw;
     border: 0.1vw solid black;  
+
     color: #dddddd;
 
     font-family: blogger;
 
     font-family: blogger;
}
+
     font-size: 1.5vmax;
.table td {
+
     padding: 0.2vw;
+
 
}
 
}
.table th {
+
#contactLeft a,#contactRight a {
    padding: 0.2vw;
+
     color: #999999;
    font-weight: bold;
+
     font-family: blogger;
}
+
     font-size: 1.5vmax;
 
+
     text-decoration: none;
 
+
#team {
+
    position: absolute;
+
}
+
#team_left{
+
     width: 35vw;
+
    height: 70vh;
+
    left:10vw;
+
    top:25vh;
+
    position: absolute;
+
}
+
#team_right{
+
    width: 35vw;
+
    height: 70vh;
+
    left:45vw;
+
    top:17vh;
+
    position: absolute;
+
}
+
#team_right2{
+
    width: 35vw;
+
    height: 70vh;
+
    left:75vw;
+
    top:17vh;
+
    position: absolute;
+
}
+
span.instructName {
+
     font-size: 2vw;
+
}
+
span.studentName {
+
     font-size: 1.2vw;
+
}
+
 
+
 
+
#spon {
+
     position: absolute;
+
}
+
#dbt{
+
    width:15vw;
+
    left:10vw;
+
    top:15vh;
+
    position: absolute;
+
    font-size:1.2vw;
+
 
}
 
}
#dbt_des{
+
#contactLeft a:hover,#contactRight a:hover {
    width:15vw;
+
    left:10vw;
+
    top:20vh;
+
    position: absolute;
+
    background-color: gray;
+
    opacity: 0;
+
 
     color: white;
 
     color: white;
    text-align: center;
 
    font-size:1.2vw;
 
 
}
 
}
#dbt_des:hover{
+
#contactUs #social {
     opacity: 1;
+
     display: flex; 
 +
    width: 100vw;
 +
    margin: 1vmax 0vmax 1vmax 0vmax;
 +
    justify-content: center;  
 
}
 
}
#dbt_text{
+
#social .links {
     top:45vh;
+
     font-family: social;
     left:10vw;
+
     font-size: 4vmax;
     position: absolute;
+
     margin: 1vmax;
     font-size:1.2vw;
+
     color: #999999;
 +
    text-decoration: none;
 +
    -webkit-transition: 0.2s linear;
 +
    -moz-transition: 0.2s linear;
 +
    -o-transition: 0.2s linear;
 +
    transition: 0.2s linear;  
 
}
 
}
#gb{
+
#socFacebook:hover {
     width:25vw;
+
     color: #3b5998;
    position: absolute;
+
    left:30vw;
+
    top:15vh;
+
 
}
 
}
#gb_text{
+
#socTwitter:hover {
     top:33vh;
+
     color: #00aced;
    left:39vw;
+
    position: absolute;
+
    font-size:1.2vw;
+
 
}
 
}
#gb_des{
+
#footer {
    width:25vw;
+
    position: absolute;
+
    left:30vw;
+
    top:18vh;
+
    background-color: gray;
+
    opacity: 0;
+
    color: white;   
+
    text-align: center;
+
    font-size:1.2vw;
+
}
+
#gb_des:hover{
+
    opacity: 1;
+
}
+
#idt{
+
    width:17.5vw;
+
    left:60vw;
+
    top:15vh;
+
    position: absolute;
+
}
+
#idt_text{
+
    top:33vh;
+
    left:61vw;
+
    position: absolute;
+
    font-size:1.2vw;
+
}
+
#idt_des{
+
    width:17.5vw;
+
    left:60vw;
+
    top:15vh;
+
    position: absolute;
+
    background-color: gray;
+
    opacity: 0;
+
    font-size:1.2vw;
+
    color: white;
+
    text-align: center;
+
}
+
#idt_des:hover{
+
    opacity: 1;
+
}
+
#ik{
+
    width:15vw;
+
    left:82vw;
+
    top:15vh;
+
    position: absolute;
+
}
+
#ik_des{
+
    font-size:1.2vw;
+
    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:86vw;
+
    font-size:1.2vw !importan;
+
    top:47vh;
+
}
+
#neb{
+
    width:25vw;
+
    left:20vw;
+
    top:60vh;
+
    position: absolute;
+
}
+
#neb_des{
+
    width:25vw;
+
    left:20vw;
+
    font-size:1.2vw;
+
    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;
+
    font-size:1.2vw;
+
    position: absolute;
+
}
+
#sg{
+
    width: 35vw;
+
    left:55vw;
+
    top: 60vh;
+
    position: absolute;
+
}
+
#sg_des{
+
    width: 35vw;
+
    left:55vw;
+
    font-size:1.2vw;
+
    top: 65vh;
+
    position: absolute;
+
    background-color: gray;
+
    opacity: 0;
+
    color: white;
+
    text-align: center;
+
}
+
#sg_des:hover{
+
    opacity: 1;
+
}
+
#sg_text{
+
    left:70vw;
+
    font-size:1.2vw;
+
    top:80vh;
+
    position: absolute;
+
}
+
 
+
 
+
#contactDiv {
+
    position: absolute;
+
}
+
#phys{
+
    width: 40vw;
+
    height:80vh;
+
    font-size: 1.5vw;
+
    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;
+
    height: 3vw;
+
    background-color: rgba(0,0,0,1);
+
    display: inline-flex;
+
    align-items: center; 
+
    position: absolute;
+
    top: 100vh;
+
    left: 0vw;
+
    z-index: 10;
+
}
+
#menubar.stickymenu {
+
    position: fixed;
+
    top: 16px;
+
    left: 0vw;
+
}
+
#menubar #logo {
+
    margin-left: 1vw;
+
    margin-right: 1vw;
+
 
     display: flex;
 
     display: flex;
    width: 2.5vw;
 
    height: 2.5vw;   
 
}
 
#logo img {
 
    height: 100%;
 
    width: 100%;
 
}
 
#menubar .pagelink {
 
    display: flex; 
 
 
     align-items: center;
 
     align-items: center;
     justify-content: center;  
+
     justify-content: flex-end;
     height: 100%;
+
     min-height: 2vmax;
     width: 8vw;      
+
     width: 90vw;
 
}
 
}
 
+
#footer p {
.pagelink div {
+
     margin: 1vw 0vh 0vw 0vh;
     cursor: pointer;
+
     padding: 0.5vw 0 0.5vw 0;
     -webkit-transition: 0.2s linear;
+
     border-top: 0.1vw solid white;
    -moz-transition: 0.2s linear;
+
     font-size: 1.5vmax;
     -o-transition: 0.2s linear;
+
     font-family: rodina;
     transition: 0.2s linear;
+
     color: #dddddd;
}
+
.pagelink div p {
+
     font-family: prime !important;
+
    font-size: 1.2vw !important;  
+
     color: #cccccc; 
+
}
+
.pagelink div:hover > p {
+
    color: white !important;
+
 
}
 
}

Revision as of 05:03, 10 October 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: 15vmin 0vw 5vmin 0vw;

}

  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;

}

/*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;

}