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

(temp page for 29-6 deadline. completed till team)
Line 1: Line 1:
 
.logo_2018, #firstHeading, #top_menu_under {
 
.logo_2018, #firstHeading, #top_menu_under {
 
display:none;}
 
display:none;}
−
 
−
#HQ_page p{
 
−
}
 
  
 
#content {
 
#content {
Line 64: Line 61:
 
}
 
}
  
 +
#home_gif{
 +
    height: 60vh;
 +
    width: 60vw;
 +
    margin-left: 20vw;
 +
    margin-top: 2vh;
 +
}
 +
#main_title{
 +
    top: 57vh;
 +
    left: 20vw;
 +
    height: 6vw;
 +
    width: 6vw;
 +
    font-size: 4vw;
 +
    position: absolute;
 +
    align-items: center;
 +
    justify-content: center;
 +
}
 +
#title_desc{
 +
    position: absolute;
 +
    left: 40vw;
 +
    top: 65vh;
 +
    height: 4vh;
 +
    width:40vw;
 +
    align-items: center;
 +
    justify-content: center;
 +
}
 +
 +
#mascot{
 +
    margin-left:5vw;
 +
    margin-top: 15vh;
 +
}
 +
 +
#abstract_text{
 +
    height:70vh;
 +
    width:55vw;
 +
    left:40vw;
 +
    top:15vh;
 +
    justify-content: center;
 +
    align-items: center;
 +
    position: absolute;
 +
}
 +
 +
#descript  ,#details{
 +
    height:70vh;
 +
    width:80vw;
 +
    top:20vh;
 +
    left:10vw;
 +
}
 +
#des_left ,#det_cont{
 +
    position: absolute;
 +
    left:10vw;
 +
    top: 15vh;
 +
    width: 80vw;
 +
    justify-content: center;
 +
    align-items: center;
 +
    text-align: justify;
 +
}
 +
#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;
 +
}
 
/*navbar*/
 
/*navbar*/
 
#menubar {   
 
#menubar {   
Line 113: Line 187:
 
}
 
}
 
.pagelink div p {
 
.pagelink div p {
−
     font-family: prime !important;
+
     font-family: prime !imporant;
−
     font-size: 1.3vw;  
+
     font-size: 1vw;  
 
     color: #cccccc;   
 
     color: #cccccc;   
 
}
 
}
Line 120: Line 194:
 
     color: white !important;
 
     color: white !important;
 
}
 
}
−
#register {
+
 
−
    position: fixed;
+
−
    display: flex;
+
−
    height: 40vw;
+
−
    width: 40vw;
+
−
    left: -45vw;
+
−
    top: 50vh;
+
−
    margin-top: -20vw;
+
−
    background-color: white;
+
−
    border: 0.2vw solid black;
+
−
    border-radius: 2vw;
+
−
    z-index: 10;
+
−
    -webkit-transition: 0.2s linear;
+
−
    -moz-transition: 0.2s linear;
+
−
    -o-transition: 0.2s linear;
+
−
    transition: 0.2s linear;
+
−
}
+
−
#login {
+
−
    position: fixed;
+
−
    display: flex;
+
−
    height: 20vw;
+
−
    width: 30vw;
+
−
    left: -35vw;
+
−
    top: 50vh;
+
−
    margin-top: -10vw;
+
−
    background-color: white;
+
−
    border: 0.2vw solid black;
+
−
    border-radius: 2vw;
+
−
    z-index: 10;
+
−
    -webkit-transition: 0.2s linear;
+
−
    -moz-transition: 0.2s linear;
+
−
    -o-transition: 0.2s linear;
+
−
    transition: 0.2s linear;
+
−
}
+
 
.orangetext div p {
 
.orangetext div p {
 
     color: orange !important;
 
     color: orange !important;
Line 159: Line 200:
 
.orangetext div:hover > p {
 
.orangetext div:hover > p {
 
     color: yellow !important;
 
     color: yellow !important;
−
}
 
−
#login .exit, #register .exit {
 
−
    position: absolute;
 
−
    top: 1vw;
 
−
    right: 1vw;
 
−
    height: 3vw;
 
−
    width: 3vw;
 
−
    border-radius: 100%;
 
−
    font-family: rodina;
 
−
    font-weight: bold;
 
−
    font-size: 3vw;
 
−
    cursor: pointer;
 
−
    color: black;
 
−
    z-index: 1;
 
−
    display: flex;
 
−
    align-items: center;
 
−
    justify-content: center;
 
−
    -webkit-transition: 0.2s linear;
 
−
    -moz-transition: 0.2s linear;
 
−
    -o-transition: 0.2s linear;
 
−
    transition: 0.2s linear;
 
−
}
 
−
#login .exit:hover, #register .exit:hover {
 
−
    background-color: black;
 
−
    color: white;
 
 
}
 
}
  
Line 216: Line 232:
 
}
 
}
 
#home #pagedown {
 
#home #pagedown {
−
    position: absolute;
+
     top: 90vh;
−
     top: 80vh;
+
 
     left: 47vw;
 
     left: 47vw;
 
     height: 3vw;
 
     height: 3vw;
 +
    margin-left: 6vw;
 +
    margin-top: 7vh;
 
     width: 6vw;
 
     width: 6vw;
−
    font-size: 2vw;
 
 
     cursor: pointer;
 
     cursor: pointer;
 
     display: flex;
 
     display: flex;
Line 232: Line 248:
 
/*aboutUs page*/
 
/*aboutUs page*/
 
#aboutUs {
 
#aboutUs {
−
background-color: chartreuse;
+
background-color: D8D9E5;
 
}
 
}
  
Line 238: Line 254:
 
/*events page*/
 
/*events page*/
 
#events {
 
#events {
−
     background-color: yellow;
+
     background-color: B4BAC2;
 
}
 
}
  
 
#gallery {
 
#gallery {
−
     background-color: orange;
+
     background-color: D8D9E5;
 
}
 
}
 
#ourTeam {
 
#ourTeam {
−
     background-color: darkorchid;
+
     background-color: B4BAC2;
 
}
 
}
 
#sponsors {
 
#sponsors {
−
     background-color: goldenrod;
+
     background-color: D8D9E5;
 
}
 
}
 
#reachUs {
 
#reachUs {
−
     background-color: pink;
+
     background-color: B4BAC2;
 
     height: 100vh;
 
     height: 100vh;
 
}
 
}

Revision as of 12:59, 29 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: 1200vh;

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: 1200vh; width: 100vw; display: flex; flex-direction: column; }

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

}

  1. main_title{
   top: 57vh;
   left: 20vw;
   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:15vh;
   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;

} /*navbar*/

  1. menubar {

width: 100vw; 

   height: 3vw;
   background-color: rgba(0,0,0,0.7);
   display: inline-flex;
   align-items: center;  
   position: absolute;
   top: 100vh;
   left: 0vw;
   z-index: 10;

}

  1. menubar.stickymenu {
   position: fixed;
   top: 3vh;
   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 !imporant;
   font-size: 1vw; 
   color: #cccccc;

} .pagelink div:hover > p { 

   color: white !important;

}

.orangetext div p { 

   color: orange !important;

} .orangetext div:hover > p { 

   color: yellow !important;

}

section { position: relative; display: flex; height: 200vh; 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:hover {

}

  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;

}