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

(Created page with "→‎fonts: @font-face { src: url("https://2018.igem.org/File:T--IISER-Kolkata--blogger.ttf"); font-family: blogger; } @font-face { src: url("https://2018.igem.org/Fil...")
 
Line 257: Line 257:
 
}
 
}
  
 +
/*aboutUs page*/
 
#aboutUs {
 
#aboutUs {
 
background-color: chartreuse;
 
background-color: chartreuse;
−
}
 
−
/*aboutUs page*/
 
−
#aboutUs .sidekick {
 
−
height: 100vh;
 
−
width: 15vw;
 
−
position: absolute;
 
−
top: 0vh;
 
−
background-color: white;
 
−
transition: 0.5s ease;
 
−
z-index: 1;
 
−
opacity: 0.5;
 
−
}
 
−
.sidekick#sk1 {
 
−
left: -15vw;
 
−
}
 
−
.sidekick#sk2 {
 
−
left: 100vw;
 
 
}
 
}
 +
  
 
/*events page*/
 
/*events page*/
 
#events {
 
#events {
−
    background: white;
+
     background-color: yellow;
−
}
+
−
#events .tab {
+
−
    position: absolute;
+
−
     background-color: white;
+
−
    display: flex;
+
−
    align-items: center;
+
−
    justify-content: center;
+
−
    height: 100vh;
+
−
    width: 50vw;
+
−
    cursor: pointer;
+
−
    -webkit-transition: 0.2s linear;
+
−
    -moz-transition: 0.2s linear;
+
−
    -o-transition: 0.2s linear;
+
−
    transition: 0.2s linear;
+
−
}
+
−
.tab#left-tab {   
+
−
    left: 0vw;
+
−
    top: 0vh;
+
−
}
+
−
.tab#right-tab {
+
−
    left: 50vw;
+
−
    top: 0vh;
+
−
}
+
−
.tab .tab-text {
+
−
    height: 6vw;
+
−
    width: 18vw;
+
−
    padding: 1vw;
+
−
    font-family: prime;
+
−
    font-size: 2vw;
+
−
    color: #000040;
+
−
    background-color: white;
+
−
    border: 0.5vw solid #000040;
+
−
    text-align: center;
+
−
    display: flex;
+
−
    align-items: center;
+
−
    -webkit-transition: 0.2s linear;
+
−
    -moz-transition: 0.2s linear;
+
−
    -o-transition: 0.2s linear;
+
−
    transition: 0.2s linear;
+
−
}
+
−
#left-tab #gamecomp {
+
−
   
+
−
}
+
−
#right-tab #workexhib {
+
−
   
+
−
}
+
−
#events .pop {
+
−
    position: absolute;
+
−
    display: flex;
+
−
    height: 100vh;
+
−
    width: 100vw;
+
−
    z-index: 5;
+
−
    -webkit-transition: 0.2s linear;
+
−
    -moz-transition: 0.2s linear;
+
−
    -o-transition: 0.2s linear;
+
−
    transition: 0.2s linear;
+
−
}
+
−
.pop#gamecomp-pop {
+
−
    left: 100vw;
+
−
    top: 0vh;
+
−
}
+
−
.pop#workexhib-pop {
+
−
    left: 100vw;
+
−
    top: 0vh;
+
−
}
+
−
.pop .exit {
+
−
    position: absolute;
+
−
    top: 4vw;
+
−
    left: 94vw;
+
−
    height: 4vw;
+
−
    width: 4vw;
+
−
    border-radius: 100%;
+
−
    font-family: rodina;
+
−
    font-weight: bold;
+
−
    font-size: 4vw;
+
−
    cursor: pointer;
+
−
    color: #000040;
+
−
    z-index: 5;
+
−
    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;
+
−
}
+
−
.pop .exit:hover {
+
−
    background-color: #000040;
+
−
    color: white;
+
−
}
+
−
.pop .event-type {
+
−
    position: absolute;
+
−
    top: 0vh;
+
−
    left: 0vw;
+
−
    height: 100vh;
+
−
    width: 20vw;
+
−
    display: flex;
+
−
    flex-direction: column;
+
−
    align-items: center;
+
−
    justify-content: center;
+
−
    background-color: #000040;
+
−
}
+
−
.event-type .type-list {
+
−
    height: 4vw;
+
−
    width: 18vw;
+
−
    display: flex;
+
−
    align-items: center;
+
−
    justify-content: center;
+
−
    margin: 1vw 0vw 1vw 0vw;
+
−
    background-color: #000040;
+
−
    border-radius: 1vw 0vw 1vw 0vw;
+
−
    font-family: prime;
+
−
    font-size: 1.25vw;
+
−
    color: white;
+
−
    cursor: pointer;
+
−
    -webkit-transition: 0.2s linear;
+
−
    -moz-transition: 0.2s linear;
+
−
    -o-transition: 0.2s linear;
+
−
    transition: 0.2s linear;
+
−
}
+
−
.event-type .list-active {
+
−
    background-color: white;
+
−
    color: #000040;
+
−
}
+
−
.type-list:hover {
+
−
    background-color: #aaaaaa;
+
−
    color: #000040;
+
−
}
+
−
.pop .event-desc {
+
−
    position: absolute;
+
−
    top: 0vh;
+
−
    left: 20vw;
+
−
    height: 100vh;
+
−
    width: 80vw;
+
−
    display: flex;
+
−
    background-color: white;
+
−
    color: #000040;
+
−
}
+
−
.event-desc .event-head {
+
−
    display: none;
+
−
    position: absoute;
+
−
    top: 10vh;
+
−
    left: 5vw;
+
−
    height: 10vh;
+
−
    width: 55vw;
+
−
    align-items: center;
+
−
    justify-content: center;
+
−
    background-color: white;
+
−
    font-family: blogger;
+
−
    font-size: 3vw;
+
−
    font-weight: bold;
+
−
    color: #000040;
+
−
    -webkit-transition: 0.2s linear;
+
−
    -moz-transition: 0.2s linear;
+
−
    -o-transition: 0.2s linear;
+
−
    transition: 0.2s linear;
+
−
}
+
−
.event-head.head-active {
+
−
    display: flex;
+
−
    position: absolute;
+
−
}
+
−
.event-desc .indiv-event {
+
−
    display: none;
+
−
    position: absoute;
+
−
    top: 25vh;
+
−
    left: 5vw;
+
−
    height: 50vh;
+
−
    width: 70vw;
+
−
    background-color: white;
+
−
    color: #000040;
+
−
    -webkit-transition: 0.2s linear;
+
−
    -moz-transition: 0.2s linear;
+
−
    -o-transition: 0.2s linear;
+
−
    transition: 0.2s linear;
+
−
}
+
−
.indiv-event.event-active {
+
−
    display: flex;
+
−
    position: absolute;
+
−
}
+
−
.indiv-event .details {
+
−
    position: absoute;
+
−
    top: 0vh;
+
−
    left: 0vw;
+
−
    height: 50vh;
+
−
    width: 46vw;
+
−
    border: 0.2vw solid #000040;
+
−
    border-radius: 3vw 0vw 0vw 3vw;
+
−
    text-align: justify;
+
−
    overflow-y: scroll;
+
−
    overflow-x: hidden;
+
−
}
+
−
.indiv-event .details::-webkit-scrollbar-track
+
−
{
+
−
    background-color: white;
+
−
}
+
−
.indiv-event .details::-webkit-scrollbar
+
−
{
+
−
    width: 0.8vw;
+
−
}
+
−
.indiv-event .details::-webkit-scrollbar-thumb
+
−
{
+
−
    background-color: #000040;
+
−
}
+
−
.indiv-event .contact {
+
−
    position: absoute;
+
−
    left: 46vw;
+
−
    margin-left: 2vw;
+
−
    height: 50vh;
+
−
    width: 22vw;
+
−
    border: 0.2vw solid white;
+
−
    border-radius: 0vw 3vw 3vw 0vw;
+
−
    background-color: #000040;
+
−
    color: white;
+
−
    overflow-x: hidden;
+
−
}
+
−
.indiv-event .contact::-webkit-scrollbar-track
+
−
{
+
−
    background-color: #000040;
+
−
}
+
−
.indiv-event .contact::-webkit-scrollbar
+
−
{
+
−
    width: 0.8vw;
+
−
}
+
−
.indiv-event .contact::-webkit-scrollbar-thumb
+
−
{
+
−
    background-color: white;
+
−
}
+
−
.details h4 {
+
−
    font-family: rodina;
+
−
    font-size: 2.5vw;
+
−
    margin: 2vw 2.5vw 2vw 2.5vw;
+
−
}
+
−
.details h6, .contact h6 {
+
−
    font-family: rodina;
+
−
    font-size: 2vw;
+
−
    margin: 1.5vw 2.5vw 1.5vw 2.5vw;
+
−
}
+
−
.details p, .contact p {
+
−
    font-family: blogger;
+
−
    font-size: 1.5vw;
+
−
    margin: 1vw 2.5vw 1vw 2.5vw;
+
−
}
+
−
.event-desc .rem-events {
+
−
    display: none;
+
−
    position: absoute;
+
−
    top: 80vh;
+
−
    left: 5vw;
+
−
    height: 15vh;
+
−
    width: 55vw;
+
−
    background-color: white;
+
−
    color: #000040;
+
−
    -webkit-transition: 0.2s linear;
+
−
    -moz-transition: 0.2s linear;
+
−
    -o-transition: 0.2s linear;
+
−
    transition: 0.2s linear;
+
−
}
+
−
.rem-events.rem-active {
+
−
    display: flex;
+
−
    align-items: center;
+
−
    justify-content: center;
+
−
    position: absolute;
+
−
}
+
−
.rem-events .icon {
+
−
    display: flex;
+
−
    cursor: pointer;
+
−
    margin: 1vw;
+
−
    height: 6vw;
+
−
    width: 6vw;
+
−
    border-radius: 100%;
+
−
    -webkit-transition: 0.2s linear;
+
−
    -moz-transition: 0.2s linear;
+
−
    -o-transition: 0.2s linear;
+
−
    transition: 0.2s linear;
+
−
}
+
−
.icon:hover {
+
−
    height: 7vw;
+
−
    width: 7vw;
+
−
}
+
−
.icon.icon-active {
+
−
    height: 8vw;
+
−
    width: 8vw;
+
−
}
+
−
.icon img {
+
−
    height: 100%;
+
−
    width: 100%;
+
 
}
 
}
  

Revision as of 08:19, 21 June 2018

/*fonts*/ @font-face { 

   src: url("https://2018.igem.org/File:T--IISER-Kolkata--blogger.ttf");
   font-family: blogger;

} @font-face { 

   src: url("https://2018.igem.org/File:T--IISER-Kolkata--prime.otf");
   font-family: prime;

} @font-face { 

   src: url("https://2018.igem.org/File:T--IISER-Kolkata--rodina.otf");
   font-family: rodina;

} @font-face { 

   src: url("https://2018.igem.org/File: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; }

/*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: 0vh;

}

  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;
   font-size: 1.3vw; 
   color: #cccccc;

} .pagelink div:hover > p { 

   color: white !important;

}

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

}

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

   color: orange !important;

} .orangetext div:hover > p { 

   color: yellow !important;

}

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

}

  1. login .exit:hover, #register .exit:hover {
   background-color: black;
   color: white;

}

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 #social {
   height: 20vw;
   width: 3vw;    
   display: flex;
   flex-direction: column;
   align-items: center;  
   position: absolute;
   top: 50vh;
   margin-top: -10vw;
   right: 2vw;
   z-index: 5;

}

  1. social .links {
   height: 3vw;
   width: 3vw;
   margin: 1vw 0vw 1vw 0vw;
   display: flex;
   justify-content: center;
   align-items: center; 
   cursor: pointer;

}

  1. social .links a {
   font-family: social;
   font-size: 4vw;
   color: black;
   text-decoration: none;

}

  1. soc-facebook:hover > a {
   color: #3b5998;

}

  1. soc-twitter:hover > a {
   color: #00aced;

}

  1. soc-instagram:hover > a {
   color: #c32aa3;

}

  1. soc-youtube:hover > a {
   color: #bb0000;

}

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

}

/*aboutUs page*/

  1. aboutUs {

background-color: chartreuse; }


/*events page*/

  1. events {
   background-color: yellow;

}

  1. gallery {
   background-color: orange;

}

  1. ourTeam {
   background-color: darkorchid;

}

  1. sponsors {
   background-color: goldenrod;

}

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

}