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

 
(54 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
.logo_2018, #firstHeading, #top_menu_under {
+
.pagelink#homeMenu a {
−
display:none !important;}
+
     color: gold;
−
 
+
−
#content {
+
−
width: 100vw !important;
+
−
padding: 0 !important;
+
−
margin-left:0 !important;
+
−
}
+
−
/*fonts*/
+
−
@font-face {
+
−
    src: url("https://static.igem.org/mediawiki/2018/1/14/T--IISER-Kolkata--blogger.ttf") !important;
+
−
    font-family: blogger !important;
+
−
}
+
−
@font-face {
+
−
    src: url("https://static.igem.org/mediawiki/2018/7/7a/T--IISER-Kolkata--prime.otf") !important;
+
−
    font-family: prime !important;
+
−
}
+
−
@font-face {
+
−
    src: url("https://static.igem.org/mediawiki/2018/5/5a/T--IISER-Kolkata--rodina.otf") !important;
+
−
    font-family: rodina !important;
+
−
}
+
−
@font-face {
+
−
    src: url("https://static.igem.org/mediawiki/2018/f/f7/T--IISER-Kolkata--social.ttf") !important;
+
−
     font-family: social !important;
+
 
}
 
}
  
−
/*body*/
+
.maincont#container {
−
body, html {
+
width: 100vw;
−
width: 100vw !important;
+
     height: auto;
−
margin: 0 !important;
+
display: flex;
−
padding: 0 !important;
+
flex-direction: column;
−
}
+
−
body {
+
−
     height: 1200vh !important;
+
−
overflow-y: scroll !important;
+
−
overflow-x: hidden !important;
+
−
margin: auto !important;
+
−
}
+
−
body::-webkit-scrollbar-track
+
−
{
+
−
background-color: black !important;
+
−
}
+
−
body::-webkit-scrollbar
+
−
{
+
−
width: 1vw !important;
+
−
}
+
−
body::-webkit-scrollbar-thumb
+
−
{
+
−
background-color: #999999 !important;
+
−
}
+
−
body::-webkit-scrollbar-thumb:hover
+
−
{
+
−
    background-color: #777777 !important;
+
 
}
 
}
  
−
#container {
+
section.mainpage {  
−
height: 1200vh !important;
+
position: relative;
−
width: 100vw !important;
+
display: flex;
−
display: flex !important;
+
width: 100vw;
−
flex-direction: column !important;
+
 
}
 
}
  
−
#home_gif{
+
/*Landing*/
−
     height: 60vh !important;  
+
.mainpage#landing {
−
     width: 60vw !important;
+
     flex-direction: column;
−
     margin-left: 20vw !important;
+
    min-height: 70vh;
−
     margin-top: 2vh !important;
+
     align-items: center;
 +
     justify-content: center;
 +
     background-color: #eeeeee;
 +
    padding: 10vmin 0vw 5vmin 0vw;
 
}
 
}
−
#main_title{
+
#landing #goldmedal {
−
    top: 57vh !important;
+
     height: 20vmin;
−
    left: 20vw !important;
+
     width: auto;  
−
     height: 6vw !important;
+
     margin: 2vw;  
−
     width: 6vw !important;
+
     position: absolute;
−
     font-size: 4vw !important;
+
     left: 80vw;
−
     position: absolute !important;
+
     top: 5vw;
−
     align-items: center !important;
+
−
     justify-content: center !important;
+
 
}
 
}
−
#title_desc{
+
#landing #mainlogo {
−
    position: absolute !important;
+
     height: 50vmin;
−
    left: 40vw !important;
+
     width: auto;  
−
    top: 65vh !important;
+
     margin: 2vw;  
−
     height: 4vh !important;
+
−
     width:40vw !important;
+
−
    align-items: center !important;
+
−
     justify-content: center !important;
+
 
}
 
}
−
 
+
#landing h3 {
−
#mascot{
+
     width: auto;
−
     margin-left:5vw !important;
+
    font-family: prime;
−
     margin-top: 15vh !important;
+
     font-size: 1.8vmax;
 +
    margin: 2vw 0vw 1.5vw 0vw;
 
}
 
}
−
 
+
#landing p {
−
#abstract_text{
+
     margin: 0.8vw 0vw 1.2vw 0vw;
−
     height:70vh !important;
+
     font-family: blogger;
−
     width:55vw !important;
+
     font-size: 1.5vmax;
−
    left:40vw !important;
+
−
    top:15vh !important;
+
−
    justify-content: center !important;
+
−
     align-items: center !important;
+
−
    position: absolute !important;
+
 
}
 
}
−
 
+
#homeflex {
−
#descript  ,#details{
+
    width: 100%;
−
     height:70vh !important;
+
     height: auto;
−
     width:80vw !important;
+
     display: flex;
−
     top:20vh !important;
+
     flex-wrap: wrap;
−
     left:10vw !important;
+
     align-items: center; 
 +
    justify-content: center;
 
}
 
}
−
#des_left ,#det_cont{
+
#homeflex .homebutton {
−
     position: absolute !important;
+
     display: flex;
−
     left:10vw !important;
+
     align-items: center;
−
     top: 15vh !important;
+
     justify-content: center;  
−
     width: 80vw !important;
+
     width: auto;
−
     justify-content: center !important;
+
     height: 3vmax;
−
     align-items: center !important;
+
    padding: 1vw;
−
     text-align: justify !important;
+
    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 !important;
+
     text-decoration: none !important;
−
     height: 70vh !important;
+
     color: black;
−
    left:10vw !important;
+
−
    top:25vh !important;
+
−
    position: absolute !important;
+
 
}
 
}
−
#team_right{
+
.homebutton a p {  
−
     width: 35vw !important;
+
     font-family: rodina !important;
−
     height: 70vh !important;
+
     font-size: 1.8vmax !important;      
−
     left:45vw !important;
+
     -webkit-transition: 0.2s linear;
−
     top:17vh !important;
+
     -moz-transition: 0.2s linear;
−
     position: absolute !important;
+
     -o-transition: 0.2s linear;
 +
    transition: 0.2s linear;
 
}
 
}
−
#team_right2{
+
.homebutton:hover {
−
     width: 35vw !important;
+
     background-color: black !important;
−
    height: 70vh !important;
+
−
    left:75vw !important;
+
−
    top:17vh !important;
+
−
    position: absolute !important;
+
 
}
 
}
−
/*navbar*/
+
.homebutton:hover a {
−
#menubar {
+
     color: gold !important;
−
width: 100vw !important;
+
−
     height: 3vw !important;
+
−
    background-color: rgba(0,0,0,0.7) !important;
+
−
    display: inline-flex !important;
+
−
    align-items: center !important; 
+
−
    position: absolute !important;
+
−
    top: 100vh !important;
+
−
    left: 0vw !important;
+
−
    z-index: 10 !important;
+
 
}
 
}
−
#menubar.stickymenu {
+
.homebutton a:hover {
−
     position: fixed !important;
+
     color: white !important;
−
     top: 3vh !important;
+
     text-decoration: none;
−
    left: 0vw !important;
+
 
}
 
}
−
#menubar #logo {
+
 
−
     margin-left: 1vw !important;
+
/*Sponsors*/
−
     margin-right: 1vw !important;
+
.mainpage#sponsors {
−
     display: flex !important;
+
     flex-wrap: wrap;
−
     width: 2.5vw !important;
+
     height: auto;
−
    height: 2.5vw !important;   
+
     background-color: #dddddd;
 +
     justify-content: space-around;
 
}
 
}
−
#logo img {
+
#sponsors a img {
−
     height: 100% !important;
+
     height: 20vmin;
−
     width: 100% !important;
+
     width: auto;
 +
    margin: 2vmax;
 
}
 
}
−
#menubar .pagelink {
+
 
−
     display: flex !important; 
+
/*Contact Us*/
−
    align-items: center !important;
+
.mainpage#contactUs {
−
     justify-content: center !important;  
+
     flex-wrap: wrap;
−
     height: 100% !important;
+
     height: auto;
−
     width: 8vw !important;      
+
     background-color: #222222;
 +
     justify-content: center;
 
}
 
}
−
#menubar .pagelink#registerMenu {
+
#contactUs #contactLeft {
−
     margin-left: auto !important;
+
     display: flex;
 +
    flex-direction: column;
 +
    width: 40vw;
 +
    margin: 2vw;
 
}
 
}
−
#menubar .pagelink#loginMenu {
+
#contactUs #contactRight {
−
     margin-right: 1vw !important;
+
     display: flex;
 +
    flex-direction: column;
 +
    width: 30vw;
 +
    margin: 2vw;
 
}
 
}
−
.pagelink div {
+
#contactLeft h4,#contactRight h4 {
−
     cursor: pointer !important;
+
     margin: 1.5vw 0vw 1vw 0vw;
−
     -webkit-transition: 0.2s linear !important;
+
     color: #dddddd;
−
     -moz-transition: 0.2s linear !important;
+
     font-family: prime;
−
     -o-transition: 0.2s linear !important;
+
     font-size: 1.6vmax;
−
    transition: 0.2s linear !important;
+
 
}
 
}
−
.pagelink div p {
+
#contactLeft p,#contactRight p {
−
     font-family: prime !imporant !important;
+
    margin: 0.5vw 0vw 0.5vw 0vw;
−
     font-size: 1vw !important;
+
    color: #dddddd;
−
    color: #cccccc !important;  
+
     font-family: blogger;
 +
     font-size: 1.5vmax;
 
}
 
}
−
.pagelink div:hover > p {
+
#contactLeft a,#contactRight a {
−
     color: white !important !important;
+
     color: #999999;
 +
    font-family: blogger;
 +
    font-size: 1.5vmax;
 +
    text-decoration: none;
 
}
 
}
−
 
+
#contactLeft a:hover,#contactRight a:hover {
−
.orangetext div p {
+
     color: white;
−
     color: orange !important !important;
+
 
}
 
}
−
.orangetext div:hover > p {
+
#contactUs #social {
−
     color: yellow !important !important;
+
     display: flex; 
 +
    width: 100vw;
 +
    margin: 1vmax 0vmax 1vmax 0vmax;
 +
    justify-content: center;  
 
}
 
}
−
 
+
#social .links {
−
section {
+
    font-family: social;
−
position: relative !important;
+
    font-size: 4vmax;
−
display: flex !important;
+
    margin: 1vmax;
−
height: 200vh !important;
+
    color: #999999;
−
width: 100vw !important;
+
    text-decoration: none;
 +
    -webkit-transition: 0.2s linear;
 +
    -moz-transition: 0.2s linear;
 +
    -o-transition: 0.2s linear;
 +
    transition: 0.2s linear;  
 
}
 
}
−
 
+
#socFacebook:hover {
−
#home {
+
     color: #3b5998;
−
     background: white !important;
+
−
    height: 100vh !important;
+
 
}
 
}
−
#home #iiserk {
+
#socTwitter:hover {
−
     height: 6vw !important;
+
     color: #00aced;
−
    width: 6vw !important;   
+
−
    display: flex !important;
+
−
    align-items: center !important; 
+
−
    position: absolute !important;
+
−
    top: 1vw !important;
+
−
    left: 1vw !important;
+
−
    z-index: 5 !important;
+
−
    cursor: pointer !important;
+
 
}
 
}
−
#iiserk:hover {
+
#footer {
−
      
+
     display: flex;
 +
    align-items: center;
 +
    justify-content: flex-end;
 +
    min-height: 2vmax;
 +
    width: 90vw;
 
}
 
}
−
#iiserk a img {
+
#footer p {
−
     height: 6vw !important;
+
     margin: 1vw 0vh 0vw 0vh;
−
     width: auto !important;
+
     padding: 0.5vw 0 0.5vw 0;
−
}
+
     border-top: 0.1vw solid white;
−
#home #pagedown {
+
     font-size: 1.5vmax;
−
     top: 90vh !important;
+
     font-family: rodina;
−
    left: 47vw !important;
+
     color: #dddddd;
−
    height: 3vw !important;
+
−
    margin-left: 6vw !important;
+
−
    margin-top: 7vh !important;
+
−
     width: 6vw !important;
+
−
    cursor: pointer !important;
+
−
    display: flex !important;
+
−
    align-items: center !important;
+
−
     justify-content: center !important;
+
−
     background-color: gray !important;
+
−
    border: solid black 0.1vw !important;
+
 
}
 
}
  
−
/*aboutUs page*/
+
/*Abstract and Description*/
−
#aboutUs {
+
#homecontainer {
−
background-color: #D8D9E5 !important;
+
    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;
−
/*events page*/
+
    position: relative;
−
#events {
+
    display: flex;
−
     background-color: #B4BAC2 !important;
+
     flex-direction: column;
 +
    align-items: center;
 +
    min-height: 100vh;
 +
    width: auto;
 
}
 
}
−
 
+
.submainpage h1.subheading {
−
#gallery {
+
     width: auto;
−
     background-color: #D8D9E5 !important;
+
    font-family: rodina !important;
 +
    font-size: 3vmax !important;
 +
    margin: 2.5vw 0vw 2.5vw 0vw !important;
 +
    border-bottom: 0.3vw solid gold !important;
 
}
 
}
−
#ourTeam {
+
.submainpage p {
−
     background-color: #B4BAC2 !important;
+
     width: auto;
−
}
+
    align-self: flex-start;
−
#sponsors {
+
    font-family: blogger !important;
−
     background-color: #D8D9E5 !important;
+
     font-size: 1.5vmax !important;
−
}
+
     text-align: justify !important;
−
#reachUs {
+
     margin: 0.8vw 0vw 1.2vw 0vw !important;
−
     background-color: #B4BAC2 !important;
+
−
     height: 100vh !important;
+
 
}
 
}

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;

}