Difference between revisions of "Team:IIT Kharagpur/style"

Line 47: Line 47:
 
background:#142D2D url("https://static.igem.org/mediawiki/2015/5/5a/IIT_Kharagpur_home_jumbo_background.jpg") center center;
 
background:#142D2D url("https://static.igem.org/mediawiki/2015/5/5a/IIT_Kharagpur_home_jumbo_background.jpg") center center;
 
background-size: cover;
 
background-size: cover;
−
height:100% !important;
+
height:1200px !important;
 
width:100%;
 
width:100%;
 
}
 
}

Revision as of 18:15, 17 September 2015

@font-face { font-family:'Harabara'; src:url(../fonts/Harabara.otf); }

@font-face { font-family:'Boycott'; src:url(../fonts/Boycott.ttf); }

@font-face { font-family:'MyriadPro'; src:url(../fonts/MYRIADPRO-SEMIBOLD.woff); }

@font-face { font-family:'Lato-Regular'; src:url(../fonts/Lato-Regular.ttf); }

@font-face { font-family:'Lato-Semibold'; src:url(../fonts/Lato-Semibold.ttf); }


.header1{ position:fixed; width:100%; z-index:1000; border:2px solid; padding: 20px; }

.menu-show { margin-top:-20px; background-color:rgba(0,0,0,0.80); -moz-box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.25); -webkit-box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.25); box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.25); }

.jumbo-home { overflow: hidden; background-blend-mode: overlay; background:#142D2D url("IIT_Kharagpur_home_jumbo_background.jpg") center center; background-size: cover; height:1200px !important; width:100%; }

.menu { 

 top:20px;
 height:55px;
 display: block;
 margin-left: auto;
 margin-right: auto;
 padding: 0px 5px 0px 5px;
 position: fixed;
 width: 100%;
 z-index: 1000;
 transition:all .5s ease;

}

.menu > ul { 

 position: relative;
 width:auto;
 /*border:2px solid #fff;*/
 text-align: center;
 margin-left: auto ;
 margin-right: auto;
 list-style: none;

} .menu-li { 

 font: bold 12px/18px sans-serif;
 display: inline-block;
 height:35px;
 border:2px solid transparent;
 text-transform: uppercase;
 line-height: 13px;
 cursor:pointer;
 padding: 5px 10px 10px 10px;
 font-size: 15px;
 letter-spacing: .2em;
 color: #fff;
 margin-bottom: 7px;
 margin-left: 1px;
 margin-right: 1px;
 position: relative;
 font-weight:bold;
 
 transition: all 0.5s ease;

}


ul li a{ 

 text-decoration: none;
 color:#fff;
 transition: all 0.4s ease;

}

.menu-div { 

 width:auto;

}

.menu-img { 

 float: left;
 height:23px;
 margin-right: 5px;

}

.menu-logo { text-align: center; display: inline-block; height:auto; 

 /*border:2px solid transparent;*/
 text-transform: uppercase;
 line-height: 20px;
 cursor:pointer;
 padding:3px 0 2px 0;
 font-size: 15px;
 font-weight: bold;
 font: sans-serif;
 text-align: left;
 letter-spacing: .15em;
 color: #fff;
 transition: all 0.5s ease;
 margin-left: -50px;

} .menu-logo-img { height:40px; float: left; margin-right: 10px; margin-top: 4px }

.menu-logo-text { text-align: center; float:right; margin-top: 5px; }

.menu-text { 

 float:right;
 margin-top: 4px;

}

.menu-li:hover { 

 color:#17bcb8;
 border:2px solid;

}

ul li:hover a { 

 color:#17bcb8;

}

.menu > ul > li > ul { 

 padding: 0;
 position: absolute;
 background-color:rgba(0,0,0,0.80);
 top: 33px;
 left: -15%;
 width: 200px;
 /*border-top:5px solid transparent;*/
 height: auto;
 transition: all 0.5s ease;
 box-shadow: none;
 display: none;
 opacity: 0;
 visibility: hidden;
 border-radius: 2px;
 z-index: 1;

}

.menu > ul > li > ul::before { 

 content: "";
 width: 0px;
 height: 0px;
 border: 0.8em solid transparent;
 position: absolute;
 left: 45%;
 top: -22px;
 border-bottom: 10px solid rgba(0,0,0,0.80);

}

.menu > ul > li > ul > li { 

 border-bottom:5px solid transparent;
 display: block; 
 padding:10px;
 color: #fff;
 height:auto;
 transition: all 0.2s linear;

}

.menu > ul > li > ul > li:hover { 

 color:#17bcb8;
 background: #F1F1F2; 
 border-bottom:5px solid #17bcb8;

}

.menu ul li:hover ul { 

 display: block;
 opacity: 1;
 visibility: visible;

}


.logo { width:650px; height:200px; position: absolute; top:45%; left:50%; margin-left: -325px; margin-top: -100px;

}

.logo-text { width:auto; margin-left: auto; margin-right: auto; font-size: 50px; color:#fff; padding:5px; text-align: center;

}

.logo-text a { color:#fff; font-family:'Harabara'; letter-spacing: .1em; text-decoration:none; font-weight:bold; transition: all 0.5s ease; }

.logo-text:hover a { color:#17bcb8; }

.team-logo-outer { position: absolute; top:40%; left:15%; margin-left: -90px; margin-top: -90px; width:180px; height: 180px; 

   -webkit-animation-name: spin;
   -webkit-animation-duration: 20000ms;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-timing-function: linear;
   -moz-animation-name: spin;
   -moz-animation-duration: 20000ms;
   -moz-animation-iteration-count: infinite;
   -moz-animation-timing-function: linear;
   -ms-animation-name: spin;
   -ms-animation-duration: 20000ms;
   -ms-animation-iteration-count: infinite;
   -ms-animation-timing-function: linear;
   -o-transition: rotate(3600deg);

}

@-moz-keyframes spin { 

   from { -moz-transform: rotate(0deg); }
   to { -moz-transform: rotate(360deg); }

} @-webkit-keyframes spin { 

   from { -webkit-transform: rotate(0deg); }
   to { -webkit-transform: rotate(360deg); }

} @keyframes spin { 

   from {transform:rotate(0deg);}
   to {transform:rotate(360deg);}

}

.team-logo-inner { position: absolute; top:40%; left:15%; width:100px; height: 100px; margin-left: -50px; margin-top:-50px; }

.home-text { position: absolute; top:40%; left:55%; width:420px; height: 100px; margin-left: -150px; margin-top: -50px; }

.home-text-icon { position: absolute; top:75%; left:50%; width:450px; height:100px; margin-left: -225px; margin-top: -100px; transition:all 0.4s ease; }

.home-text-icon:hover { width:430px; height:80px; margin-left: -215px; margin-top: -90px; }


.scroller1 { width:60px; height:60px; border-radius:6px; margin-top:9%; margin-left:93%; background-color: #17bcb8 ; text-align: center; padding-top:20px; cursor:pointer; text-decoration:none; }

.color-rail { 

 margin-top: -30px;
 height: 10px;
 left: 0;
 width: 100%;
 }

.color-rail div { float:left; width:12.5%; height:10px; }

.white { background: #ebeef4; }

.light-gray { 

 background: #aab9c0;

}

.gray { 

 background: #2b3842;

}

.dark-gray { 

 background: #212835;

}

.black { 

 background: #0c1116;

}

.dark-teal { 

 background: #1c6060;

}

.teal { 

 background: #1e7c7a;

}

.orange { 

 background: #f44e04;

}

.main-mid1 { height:auto; padding-top:10px; padding-bottom:20px; overflow: hidden; }

.project-heading { text-align:center; }

.project-description { font-size:17px;

}

.main-mid1 img { display: block; margin-left: auto; margin-right: auto; }

.main-mid2{ height:800px; padding:0; }

.carousel-caption { font-size: 40px; }

.main-mid3{

}

.details { margin-top: 10px; margin-bottom:10px; display:block; width: 100%; height: 200px; margin-left:2%; border:2px solid; cursor:pointer; text-align: center; font-size: 20px; font-weight: bold; padding: 80px; }

@media screen and (max-width: 800px) { 

   .details {
   	width: 80%;
   	margin-left:auto;
   	margin-right: auto;
           }

   .scroller2 {
   	width:40px;
   	height:40px;
   }

   .menu {
   	margin-top:-10px;
   }

   .menu-items > ul >li {
   	font-size: 20px;
   }

} .details:hover { background:linear-gradient(to bottom, rgba(54, 100, 139, 0.6) 0%, rgba(54, 100, 139, 0.6) 100%);

}

.main-mid4 {

}

.main-video { margin:40px 8% 0 5%; width:90%; padding:10px 10px 10px 10px; }

.scroller2 {

float:right; margin-right: -2%; width:60px; height:60px; border-radius:6px; background-color: #17bcb8 ; text-align: center; padding-top:20px; cursor:pointer; text-decoration:none; }


.footer1 { position: absolute; display: block; height: auto; background-color:rgba(0,0,0,0.80); z-index: 1000; width:100%; }

.footer2 { background-color: rgba(0,0,0,0.90); position: absolute; width: 100%; margin-top: 120px;

}

.footer-content { display: block; margin-left: auto; margin-right: auto; padding:15px; height:120px; max-width: 1200px; }

.footer-content a { font-size: 1.4em; line-height: 1.2em; text-decoration: none; color:#fff; font-weight: 600; }

.footer1 h3 { color:#fff; }

.footer-cr { padding: 20px float:left; color: #fff; }

.social { float:left; margin-right: 10px; width:40px; height:40px; }

.mail-button { background-color: #17bcb8 !important; -webkit-tap-highlight-color: transparent; will-change: opacity, transform; -webkit-transition: all .3s ease-out; 

   -moz-transition: all .3s ease-out;
   -o-transition: all .3s ease-out;
   -ms-transition: all .3s ease-out;
   transition: all .3s ease-out;
   border: none;
   border-radius: 2px;
   
   height: 39px;
   line-height: 39px;
   outline: 0;
   padding: 0 2rem;
   text-transform: uppercase;
   box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);

}

.mail-button a { font-size: 1.1em; 

   font-weight: bold;
   color:#fff;

}


/*Project Page*/

.project-mid1,.modeling-mid1 { padding:20px 0 20px 0; }



/* Team Page */

.jumbo-team { position: relative; background-blend-mode: overlay; overflow: hidden; background: #335353 url("../img/team-img1.jpg") center center; background-size: cover; height:99%; width:100%; }

.team-text-div1 { position: absolute; width:1000px; 

   top:50%;
   left: 50%;
   margin-left: -500px;
   margin-top: -100px;

}

.team-text1 { display: block; margin-right: auto; margin-left: auto; width:60%; }

.team-text-div2 { position: absolute; width:400px; top:70%; left:50%; margin-left:-200px; transition:all 0.3s ease; }

.team-text-div2:hover { width:380px; margin-left: -190px; }

.team-text2 { display: block; margin-right: auto; margin-left: auto; width:100%;

}

.team-mid2{

}

.team-heading { text-align:center; }

.team-description { padding:20px; }

.member-div { border:3px solid #17bcb8; margin:10px 2% 10px 2%; padding: 10px; border-radius: 3%; width:29% ; height:auto; overflow: hidden; }

@media screen and (max-width: 992px) { .member-div { width:auto;

}

}


.member-photo-div { overflow: hidden; display: block; margin-right: auto; margin-left: auto; background-blend-mode: multiply; border-radius: 50%; border:5px solid #17bcb8; width:250px; height:250px; transition: all .4s linear; }

.harsheel { background: hsl(200,50%,50%) url("../img/harsheel.png"); background-size: cover; }

.harsheel:hover { background: url("../img/harsheel.png"); border:10px solid #17bcb8; background-size: cover; }

.krishna { background: #80B2B2 url("../img/krishna.png"); background-size: cover; }

.krishna:hover { background: url("../img/krishna.png"); background-size: cover; border:10px solid #17bcb8; }

.yogesh { background: #80B2B2 url("../img/yogesh.png"); background-size: cover; }

.yogesh:hover { background: url("../img/yogesh.png"); background-size: cover; border:10px solid #17bcb8; }

.vivek:hover { background: url("../img/vivek.png"); background-size: cover; border:10px solid #17bcb8; }

.vivek { background: #80B2B2 url("../img/vivek.png"); background-size: cover; }

.roshan:hover { background: url("../img/roshan.png"); background-size: cover; border:10px solid #17bcb8; }

.roshan { background: #80B2B2 url("../img/roshan.png"); background-size: cover; }

.sriram:hover { background: url("../img/sriram.png"); background-size: cover; border:10px solid #17bcb8; }

.sriram { background: #80B2B2 url("../img/sriram.png"); background-size: cover; }

.varshit:hover { background: url("../img/varshit.png"); background-size: cover; border:10px solid #17bcb8; }

.varshit { background: #80B2B2 url("../img/varshit.png"); background-size: cover; }


.swati { background: #80B2B2 url("../img/swati.png"); background-size: cover; }

.swati:hover { background: url("../img/swati.png"); background-size: cover; border:10px solid #17bcb8; }

.ashutosh { background: #80B2B2 url("../img/ashutosh.png"); background-size: cover; }

.ashutosh:hover { background: url("../img/ashutosh.png"); background-size: cover; border:10px solid #17bcb8; }


.member-desc-div { display:block; margin-right:auto; margin-left: auto; padding:15px; color:#000; text-align: center;

}

.member-desc-div h4 { text-align: center; color:#17bcb8; font-weight: bold; }

.prof-div { margin-top: 10px; margin-bottom: 10px; border:3px solid #17bcb8 ; border-radius: 4px; display:block; width:100%; padding:10px; overflow: hidden; }

.prof-pic-div { border:5px solid #17bcb8; float:left; border-radius: 50%; display:block; width:240px; height:240px; margin-left: 20px; margin-top:20px; background-blend-mode: multiply; transition: all .4s linear; }

.prof-desc-div { padding:10px; display:block; float:right; width:70%; margin:20px 50px 0 20px; }

.prof-desc-div h4 { color:#17bcb8; font-weight: bold; } .prof-desc-div h5 { color:#17bcb8; font-weight: bold; }

.agneyo { background: #80B2B2 url("../img/agneyo.jpg"); background-size: cover; }

.agneyo:hover { background: url("../img/agneyo.jpg"); background-size: cover; border:10px solid #17bcb8; }

.sdey { background: #80B2B2 url("../img/sdey.png"); background-size: cover; }

.sdey:hover { background: url("../img/sdey.png"); background-size: cover; border:10px solid #17bcb8; }

.team-mid3 { padding:10px; }

.team-mid3 h2 { text-align: center; font-weight: bold; }

.team-mid3 h3 { text-align: center; font-weight: bold; }

.sponsor1 { display: block; border-radius: 4px; width:100%; height:180px; background-color: #80B2B2; padding:30px; margin-top: 10px; margin-bottom: 10px; }

.sponsor1 img { display: block; margin-left: auto; margin-right: auto; }

.sponsor2 { padding:30px; border-radius: 4px; display:block; height:180px; color:#fff; background-color: #80B2B2; margin-top: 10px; margin-bottom: 10px; }

/* Project Page */

.jumbo-project { position: relative; overflow: hidden; background: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; width:100%; }

.project-text-div1 { position: absolute; width:1100px; 

   top:50%;
   left: 50%;
   margin-left: -550px;
   margin-top: -100px;

}

.project-text1 { display: block; margin-right: auto; margin-left: auto; width:60%; }

.project-text-div2 { position: absolute; width:500px; 

   top:70%;
   left: 50%;
   margin-left: -250px;
   margin-top: -50px;
   transition:all 0.3s ease;

}

.project-text-div2:hover { width:480px; margin-left: -240px; }

.project-text2 { display: block; margin-right: auto; margin-left: auto; width:100%; transition:all 0.3s ease; }

.jumbo-achievements { position: relative; overflow: hidden; background: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; width:100%; }

.achievements-text-div1 { position: absolute; width:1100px; 

   top:50%;
   left: 50%;
   margin-left: -550px;
   margin-top: -100px;

}

.achievements-text1 { display: block; margin-right: auto; margin-left: auto; width:60%; }

.achievements-text-div2 { position: absolute; width:500px; 

   top:70%;
   left: 50%;
   margin-left: -250px;
   margin-top: -20px;
   transition:all 0.3s ease;

}

.achievements-text2 { display: block; margin-right: auto; margin-left: auto; width:100%;

}

.achievements-text-div2:hover { width:480px; margin-left: -240px; }

.jumbo-safety { position: relative; overflow: hidden; background: #335353 url("../img/background1.jpg") center center; background-size: cover; height:80%; width:100%; }

.safety-text-div1 { position: absolute; width:600px; 

   top:40%;
   left: 35%;
   margin-left: -300px;
   margin-top: -100px;
   color: #fff;
   font-size: 3em;
   font-family: "Boycott";
   word-spacing: 1px;

}

h2 { text-align: center; }

.safety-text1 { display: block; margin-right: auto; margin-left: auto; width:100%; }

.safety-text-div2 { position: absolute; width:600px; 

   top:55%;
   left: 50%;
   margin-left: -300px;
   margin-top: -50px;

}


.safety-text2 { display: block; margin-right: auto; margin-left: auto; width:100%; transition:all 0.3s ease;

}

.safety-text2:hover { /*width:95%;*/

}

.safety-mid1 { padding:20px 0 20px 0; }

.safety-desc { width:auto; font-size: 1.3em; margin-top: 5px; margin-bottom: 5px; font-family: 'Lato-Semibold'; }

.safety-desc-img { margin-top: 5px; width:100%; height:400px; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); -webkit-transition: opacity .4s; 

   -moz-transition: opacity .4s;
   -o-transition: opacity .4s;
   -ms-transition: opacity .4s;

transition: opacity .4s; }

.lab-training { margin-top: 10px; padding: 10px 10px 10px 10px; width:auto; height:auto; background-color: #FCFCFC; font-size: 1.2em; font-family: 'Lato-Semibold'; line-height: 2em; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.lab-training-img { width:100%; height:auto; }

.lab-training-img-div { margin-top: 10px; width:auto; height:auto; background-color: #FCFCFC; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); }

.jumbo-modeling { position: relative; overflow: hidden; background: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; width:100%; }

.modeling-text-div1 { position: absolute; width:600px; 

   top:50%;
   left: 50%;
   margin-left: -300px;
   margin-top: -100px;

}

.modeling-text1 { display: block; margin-right: auto; margin-left: auto; width:100%; }

.modeling-text-div2 { position: absolute; width:500px; 

   top:70%;
   left: 50%;
   margin-left: -250px;
   margin-top: -50px;
   transition:all 0.3s ease;

}


.modeling-text2 { display: block; margin-right: auto; margin-left: auto; width:100%;


}

.modeling-text-div2:hover { width:480px; margin-left: -240px; }

.jumbo-notebook { position: relative; overflow: hidden; background: #335353 url("../img/common-bg.jpg") center center; background-size: cover; height:99%; width:100%; }

.notebook-text-div1 { position: absolute; width:600px; 

   top:50%;
   left: 50%;
   margin-left: -300px;
   margin-top: -100px;

}

.notebook-text1 { display: block; margin-right: auto; margin-left: auto; width:100%; }

.notebook-text-div2 { position: absolute; width:500px; height:100px; 

   top:70%;
   left: 50%;
   margin-left: -250px;
   margin-top: -50px;
   transition:all 0.3s ease;

}


.notebook-text2 { display: block; margin-right: auto; margin-left: auto; width:100%;


}

.notebook-text-div2:hover { width:480px; margin-left: :-240px; }