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

(sponsors and contact updated)
Line 27: Line 27:
 
/*body*/
 
/*body*/
 
body, html {
 
body, html {
−
width: 100vw;
+
    width: 100vw;
−
margin: 0;
+
    margin: 0;
−
padding: 0;
+
    padding: 0;
 
}
 
}
−
body {
+
body {
 
     height: auto;
 
     height: auto;
−
overflow-y: scroll;
+
    overflow-y: scroll;
−
overflow-x: hidden;
+
    overflow-x: hidden;
−
margin: auto;
+
    margin: auto;
 
}
 
}
 
body::-webkit-scrollbar-track
 
body::-webkit-scrollbar-track
 
{
 
{
−
background-color: black;
+
    background-color: black;
 
}
 
}
 
body::-webkit-scrollbar
 
body::-webkit-scrollbar
 
{
 
{
−
width: 1vw;
+
    width: 1vw;
 
}
 
}
 
body::-webkit-scrollbar-thumb
 
body::-webkit-scrollbar-thumb
 
{
 
{
−
background-color: #999999;
+
    background-color: #999999;
 
}
 
}
 
body::-webkit-scrollbar-thumb:hover
 
body::-webkit-scrollbar-thumb:hover
Line 55: Line 55:
  
 
#container {
 
#container {
−
height: auto;
+
    height: auto;
−
width: 100vw;
+
    width: 100vw;
−
display: flex;
+
    display: flex;
−
flex-direction: column;
+
    flex-direction: column;
 
}
 
}
  
Line 68: Line 68:
 
#main_title{
 
#main_title{
 
     top: 60vh;
 
     top: 60vh;
−
     left: 20vw;
+
     left: 22vw;
 
     height: 6vw;
 
     height: 6vw;
 
     width: 6vw;
 
     width: 6vw;
Line 137: Line 137:
 
     position: absolute;
 
     position: absolute;
 
}
 
}
 +
#dbt{
 +
    width:15vw;
 +
    left:10vw;
 +
    top:15vh;
 +
    position: absolute;
 +
}
 +
#dbt_des{
 +
    width:15vw;
 +
    left:10vw;
 +
    top:20vh;
 +
    position: absolute;
 +
    background-color: gray;
 +
    opacity: 0;
 +
    color: white;
 +
    text-align: center;
 +
}
 +
#dbt_des:hover{
 +
    opacity: 1;
 +
}
 +
#dbt_text{
 +
    top:45vh;
 +
    left:9vw;
 +
    position: absolute;
 +
}
 +
#gb{
 +
    width:25vw;
 +
    position: absolute;
 +
    left:30vw;
 +
    top:15vh;
 +
}
 +
#gb_text{
 +
    top:33vh;
 +
    left:38vw;
 +
    position: absolute;
 +
}
 +
#gb_des{
 +
    width:25vw;
 +
    position: absolute;
 +
    left:30vw;
 +
    top:18vh;
 +
    background-color: gray;
 +
    opacity: 0;
 +
    color: white;   
 +
    text-align: center;
 +
}
 +
#gb_des:hover{
 +
    opacity: 1;
 +
}
 +
#idt{
 +
    width:17.5vw;
 +
    left:60vw;
 +
    top:15vh;
 +
    position: absolute;
 +
}
 +
#idt_text{
 +
    top:33vh;
 +
    left:60vw;
 +
    position: absolute;
 +
}
 +
#idt_des{
 +
    width:17.5vw;
 +
    left:60vw;
 +
    top:15vh;
 +
    position: absolute;
 +
    background-color: gray;
 +
    opacity: 0;
 +
    color: white;
 +
    text-align: center;
 +
}
 +
#idt_des:hover{
 +
    opacity: 1;
 +
}
 +
#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*/
 
/*navbar*/
 
#menubar {   
 
#menubar {   
−
width: 100vw;
+
    width: 100vw;
 
     height: 3vw;
 
     height: 3vw;
 
     background-color: rgba(0,0,0,1);
 
     background-color: rgba(0,0,0,1);
Line 195: Line 366:
  
 
section {
 
section {
−
position: relative;
+
    position: relative;
−
display: flex;
+
    display: flex;
−
height: 100vh;
+
    height: 100vh;
−
width: 100vw;
+
    width: 100vw;
 
}
 
}
  
Line 215: Line 386:
 
     z-index: 5;
 
     z-index: 5;
 
     cursor: pointer;
 
     cursor: pointer;
−
}
 
−
#iiserk:hover {
 
−
   
 
 
}
 
}
 
#iiserk a img {
 
#iiserk a img {
Line 240: Line 408:
 
/*aboutUs page*/
 
/*aboutUs page*/
 
#aboutUs {
 
#aboutUs {
−
background-color: #D8D9E5;
+
    background-color: #D8D9E5;
 
}
 
}
  

Revision as of 03:51, 30 June 2018

.logo_2018, #firstHeading, #top_menu_under { display:none;}

  1. 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*/ body, html { 

   width: 100vw;
   margin: 0;
   padding: 0;

} body { 

   height: auto;
   overflow-y: scroll;
   overflow-x: hidden;
   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;

}

  1. container {
   height: auto;
   width: 100vw;
   display: flex;
   flex-direction: column;

}

  1. home_gif{
   width: 55vw;
   margin-left: 20vw;
   margin-top: 2vh;

}

  1. main_title{
   top: 60vh;
   left: 22vw;
   height: 6vw;
   width: 6vw;
   font-size: 4vw;
   position: absolute;
   align-items: center;
   justify-content: center;

}

  1. title_desc{
   position: absolute;
   left: 40vw;
   top: 65vh;
   height: 4vh;
   width:40vw;
   align-items: center;
   justify-content: center;

}

  1. mascot{
   margin-left:5vw;
   margin-top: 15vh;

}

  1. abstract_text{
   height:70vh;
   width:55vw;
   left:40vw;
   top:13vh;
   justify-content: center;
   align-items: center;
   position: absolute;

}

  1. descript ,#details{
   height:70vh;
   width:80vw;
   top:20vh;
   left:10vw;

}

  1. des_left ,#det_cont{
   position: absolute;
   left:10vw;
   top: 15vh;
   width: 80vw;
   justify-content: center;
   align-items: center;
   text-align: justify;

}

  1. team_left{
   width: 35vw;
   height: 70vh;
   left:10vw;
   top:25vh;
   position: absolute;

}

  1. team_right{
   width: 35vw;
   height: 70vh;
   left:45vw;
   top:17vh;
   position: absolute;

}

  1. team_right2{
   width: 35vw;
   height: 70vh;
   left:75vw;
   top:17vh;
   position: absolute;

}

  1. dbt{
   width:15vw;
   left:10vw;
   top:15vh;
   position: absolute;

}

  1. dbt_des{
   width:15vw;
   left:10vw;
   top:20vh;
   position: absolute;
   background-color: gray;
   opacity: 0;
   color: white;
   text-align: center;

}

  1. dbt_des:hover{
   opacity: 1;

}

  1. dbt_text{
   top:45vh;
   left:9vw;
   position: absolute;

}

  1. gb{
   width:25vw;
   position: absolute;
   left:30vw;
   top:15vh;

}

  1. gb_text{
   top:33vh;
   left:38vw;
   position: absolute;

}

  1. gb_des{
   width:25vw;
   position: absolute;
   left:30vw;
   top:18vh;
   background-color: gray;
   opacity: 0;
   color: white;    
   text-align: center;

}

  1. gb_des:hover{
   opacity: 1;

}

  1. idt{
   width:17.5vw;
   left:60vw;
   top:15vh;
   position: absolute;

}

  1. idt_text{
   top:33vh;
   left:60vw;
   position: absolute;

}

  1. idt_des{
   width:17.5vw;
   left:60vw;
   top:15vh;
   position: absolute;
   background-color: gray;
   opacity: 0;
   color: white; 
   text-align: center;

}

  1. idt_des:hover{
   opacity: 1;

}

  1. ik{
   width:15vw;
   left:82vw;
   top:15vh;
   position: absolute;

}

  1. ik_des{
   width:15vw;
   left:82vw;
   top:25vh;
   position: absolute;
   background-color: gray;
   opacity: 0;
   color: white; 
   text-align: center;

}

  1. ik_des:hover{
   opacity: 1;

}

  1. ik_text{
   position: absolute;
   left:85vw;
   top:47vh;

}

  1. neb{
   width:25vw;
   left:20vw;
   top:60vh;
   position: absolute;

}

  1. neb_des{
   width:25vw;
   left:20vw;
   top:63vh;
   position: absolute;
   background-color: gray;
   opacity: 0;
   color: white; 
   text-align: center;

}

  1. neb_des:hover{
   opacity: 1;

}

  1. neb_text{
   left:26vw;
   top:80vh;
   position: absolute;

}

  1. sg{
   width: 35vw;
   left:55vw;
   top: 60vh;
   position: absolute;

}

  1. sg_des{
   width: 35vw;
   left:55vw;
   top: 65vh;
   position: absolute;
   background-color: gray;
   opacity: 0;
   color: white; 
   text-align: center;

}

  1. sg_des:hover{
   opacity: 1;

}

  1. sg_text{
   left:70vw;
   top:80vh;
   position: absolute;

}

  1. phys{
   width: 40vw;
   height:80vh;
   font-size: 1.5vw !important;
   position: absolute;
   left:10vw;
   top: 20vh;

}

  1. write{
   width: 40vw;
   height: 35vh;
   left:55vw;
   top:12vh;
   position: absolute;

}

  1. soc{
   left:55vw;
   top:70vh;
   position: absolute;
   width:40vw;
   height: 30vh;

} .ver_tab{ 

   display:inline-block; 
   width: 2vw;

}

/*navbar*/

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

}

  1. menubar.stickymenu {
   position: fixed;
   top: 16px;
   left: 0vw;

}

  1. menubar #logo {
   margin-left: 1vw;
   margin-right: 1vw;
   display: flex;
   width: 2.5vw;
   height: 2.5vw;

}

  1. logo img {
   height: 100%;
   width: 100%;

}

  1. menubar .pagelink {
   display: flex;  
   align-items: center;
   justify-content: center;   
   height: 100%;
   width: 8vw;

}

  1. menubar .pagelink#registerMenu {
   margin-left: auto;

}

  1. menubar .pagelink#loginMenu {
   margin-right: 1vw;

} .pagelink div { 

   cursor: pointer;
   -webkit-transition: 0.2s linear;
   -moz-transition: 0.2s linear;
   -o-transition: 0.2s linear;
   transition: 0.2s linear;

} .pagelink div p { 

   font-family: prime !important;
   font-size: 1.2vw !important; 
   color: #cccccc;

} .pagelink div:hover > p { 

   color: white !important;

}

section { 

   position: relative;
   display: flex;
   height: 100vh;
   width: 100vw;

}

  1. home {
   background: white;
   height: 100vh;

}

  1. home #iiserk {
   height: 6vw;
   width: 6vw;    
   display: flex;
   align-items: center;  
   position: absolute;
   top: 1vw;
   left: 1vw;
   z-index: 5;
   cursor: pointer;

}

  1. iiserk a img {
   height: 6vw;
   width: auto;

}

  1. home #pagedown {
   top: 90vh;
   left: 47vw;
   height: 3vw;
   margin-left: 6vw;
   margin-top: 7vh;
   width: 6vw;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: gray;
   border: solid black 0.1vw;

}

/*aboutUs page*/

  1. aboutUs {
   background-color: #D8D9E5;

}


/*events page*/

  1. events {
   background-color: #B4BAC2;

}

  1. gallery {
   background-color: #D8D9E5;

}

  1. ourTeam {
   background-color: #B4BAC2;

}

  1. sponsors {
   background-color: #D8D9E5;

}

  1. reachUs {
   background-color: #B4BAC2;
   height: 100vh;

}