Difference between revisions of "Template:Northeastern Boston/CSS"

 
(36 intermediate revisions by 2 users not shown)
Line 131: Line 131:
 
   margin-left: auto;
 
   margin-left: auto;
 
   margin-right: auto;
 
   margin-right: auto;
−
   padding: 0 11%;
+
   padding: 0 15%;
 
   overflow: auto;
 
   overflow: auto;
 
}
 
}
Line 230: Line 230:
  
 
.slide {
 
.slide {
−
   height: 100%;
+
   min-height: 100%;
 
   width: 100%;
 
   width: 100%;
 +
 +
  display: -webkit-box;
 +
  display: -moz-box;
 +
  display: -ms-flexbox;
 +
  display: -webkit-flex;
 +
  display: flex;
 +
 +
  -webkit-align-items: center;
 +
  align-items: center;
 +
 +
  -webkit-justify-content: center;
 +
  justify-content: center;
 
}
 
}
  
 
#slide1 {
 
#slide1 {
−
   background-color: #AE4F93;
+
   background-color: #4FAE98;
 
}
 
}
  
 
#slide2 {
 
#slide2 {
−
   background-color: #FF9900;
+
   background-color: #f9f9f9;
 
}
 
}
  
 
#slide3 {
 
#slide3 {
−
   background-color: #800F25;
+
   background-color: #292929;
 
}
 
}
  
 
#slide4 {
 
#slide4 {
−
   background-color: #2B364A;
+
   background-color: white;
 
}
 
}
  
 
#logo {
 
#logo {
−
   height: 9rem;
+
   height: 14rem;
 
   margin-top: 0;   
 
   margin-top: 0;   
 
   margin-bottom: 0;
 
   margin-bottom: 0;
Line 261: Line 273:
 
   text-align: center;
 
   text-align: center;
 
   padding-bottom: 2rem;
 
   padding-bottom: 2rem;
−
font-size: 4rem;
+
  font-size: 4rem;
 
   font-weight: 700;
 
   font-weight: 700;
−
margin: 5rem 0 5rem;
+
  margin: 5rem 0 5rem;
 +
}
  
 +
#home-header {
 +
  text-align: center;
 +
  padding-bottom: 2rem;
 +
  font-size: 3rem;
 +
  font-weight: 700;
 +
  margin: 5rem 0 5rem;
 +
  color: white;
 +
border-bottom: none;
 
}
 
}
  
 
#project_description {
 
#project_description {
−
   margin-top: 1rem;
+
   width: 100%;
−
width: 68%;
+
  background-color: white;
−
margin-left: auto;
+
  margin-left: auto;
−
margin-right: auto;
+
  margin-right: auto;
 +
  padding: 0 11%;
 +
  overflow: auto;
 
}
 
}
  
Line 403: Line 426:
 
/* Page Header */
 
/* Page Header */
 
.page-header {
 
.page-header {
−
   height: 318px;
+
   height: 400px;
 
   overflow: hidden;
 
   overflow: hidden;
 
   background-attachment: fixed;
 
   background-attachment: fixed;
Line 417: Line 440:
 
   width: 100%;
 
   width: 100%;
 
   margin-top: 125px;
 
   margin-top: 125px;
 +
}
 +
 +
#page-header__project {
 +
background-image: url(https://static.igem.org/mediawiki/2015/d/d1/IGEM_Algae_500.jpg);
 +
}
 +
 +
#page-header__collaboration {
 +
background-image: url(https://static.igem.org/mediawiki/2015/c/cb/Panoramic_Boston_iGEM_collabs.jpg);
 
}
 
}
  
 
#page-header__notebook {
 
#page-header__notebook {
−
   background-image: url(http://st3.flashrolls.net/wallpaper/2e8/21ec64c9b9441794e0e495f2c4750379.jpg);
+
   background-image: url(https://static.igem.org/mediawiki/2015/c/c6/All_Gizah_Pyramids_igem1.jpg);
 
}
 
}
  
Line 428: Line 459:
  
 
#page-header__safety {
 
#page-header__safety {
−
   background-image: url(https://static.igem.org/mediawiki/2015/f/f6/Coatsandcoast1111.jpg);
+
   background-image: url(https://static.igem.org/mediawiki/2015/6/68/Chlamydomonas2-4.jpg);
 
}
 
}
  
 
#page-header__outreach {
 
#page-header__outreach {
−
   background-image: url(https://static.igem.org/mediawiki/2015/f/f2/NEGEMoutreachsetcsdf.jpg);
+
   background-image: url(https://static.igem.org/mediawiki/2015/7/73/Earth-space_igem_2015.jpg);
 
}
 
}
  
 
#page-header__opensource {
 
#page-header__opensource {
−
   background-image: url(https://static.igem.org/mediawiki/2015/d/de/Opensourcearticleandsoon.jpg);
+
   background-image: url(https://static.igem.org/mediawiki/2015/5/50/A_typewriter_%2810995863465%29_copy.jpg);
 
}
 
}
  
 +
#page-header__protocols {
 +
background-image: url(https://static.igem.org/mediawiki/2015/1/14/Sea-water-ocean-waves.jpg);
 +
margin-left="200px";
 +
}
  
 +
#page-header__workflow {
 +
background-image: url(https://static.igem.org/mediawiki/2015/c/c6/All_Gizah_Pyramids_igem1.jpg);
 +
}
  
 
#a-home:before { content: '\f00a'; }
 
#a-home:before { content: '\f00a'; }
Line 461: Line 499:
 
.title a {
 
.title a {
 
text-decoration: none;
 
text-decoration: none;
−
margin-above:20px;
+
border-top:20px;
 
color:white;
 
color:white;
 
}
 
}
  
 +
 +
/* Minimal Dropdown */
 +
 +
.minimal-dropdown__container {
 +
  margin-bottom: 70px;
 +
}
 +
 +
.minimal-dropdown__title {
 +
  display: inline;
 +
  border: none;
 +
  cursor: default;
 +
}
 +
 +
.minimal-dropdown__header {
 +
  padding-bottom: 20px;
 +
  border-bottom: 1px solid grey;
 +
}
 +
 +
.minimal-dropdown__content {
 +
  margin-top: 20px;
 +
 +
  -webkit-animation: fadeIn .27s;
 +
          animation: fadeIn .27s;
 +
}
 +
 +
.minimal-dropdown__arrow {
 +
  cursor: pointer;
 +
}
 +
 +
.minimal-dropdown__arrow:before {
 +
  float: right;
 +
  font: 30px fontawesome;
 +
  content: '\f078';
 +
  color: grey;
 +
}
 +
 +
.fa-flipped-arrow:before {
 +
  content: '\f077';
 +
}
 +
 +
/* animations */
 +
@-webkit-keyframes fadeIn {
 +
    from { opacity: 0; }
 +
      to { opacity: 1; }
 +
}
 +
 +
@keyframes fadeIn {
 +
    from { opacity: 0; }
 +
      to { opacity: 1; }
 +
}
 +
 +
[id^='page-header'] {
 +
  margin-bottom: 55px;
 +
}
 +
 +
.slide-content {
 +
  padding: 0 15%;
 +
  width: 100%;
 +
  color: white;
 +
}
 +
 +
.slide-content__title {
 +
  font-size: 2.8rem;
 +
  color: #22B0B7;
 +
  text-align: center;
 +
  margin-bottom: 100px;
 +
  border-bottom: 1px solid #8C8C8C;
 +
  padding-bottom: 70px;
 +
  text-transform: uppercase;
 +
  margin-top: 100px;
 +
}
 +
 +
.oval {
 +
  width: 100%;
 +
  height: 0;
 +
  border-left: 50px solid transparent;
 +
  border-right: 50px solid transparent;
 +
  border-top: 100px solid white;
 +
}
 +
 +
#pullQuote {
 +
  height: 40%;
 +
  width: 100%;
 +
  min-height: 370px;
 +
  background-color: rgb(42, 177, 134);
 +
}
 +
 +
#pullQuote p {
 +
  margin-bottom: 0;
 +
}
 +
 +
#home-arrow-bounce {
 +
  display: block;
 +
  margin: 0 auto;
 +
  margin-top: 145px;
 +
  margin-bottom: 100px;
 +
 +
}
 +
 +
.flex {
 +
  display: -webkit-box;
 +
  display: -moz-box;
 +
  display: -ms-flexbox;
 +
  display: -webkit-flex;
 +
  display: flex;
 +
}
 +
 +
.flex-align-items {
 +
  -webkit-align-items: center;
 +
  align-items: center;
 +
}
 +
 +
 +
.flex-justify-content {
 +
  -webkit-justify-content: center;
 +
  justify-content: center;
 +
}
 +
 +
.flex-space-around {
 +
  -webkit-justify-content: space-around;
 +
  justify-content: space-around;
 +
}
 +
 +
.triad-slide-content {
 +
  padding: 0 10%;
 +
  width: 100%;
 +
}
 +
 +
.triad__container {
 +
  width: 250px;
 +
  height: 500px;
 +
  display: inline-block;
 +
}
 +
 +
.triad__title {
 +
  display: block;
 +
  color: #2d2d2d;
 +
  text-align: center;
 +
}
 +
 +
.triad__words {
 +
  line-height: 2.0rem;
 +
  text-align: center;
 +
  color: dimgrey;
 +
}
 +
 +
.triad__image {
 +
  height: 250px;
 +
  width: 250px;
 +
  background-size: cover;
 +
  margin: 0 auto;
 +
  border-radius: 125px;
 +
 +
  -webkit-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.2);
 +
  -moz-box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.2);
 +
  box-shadow: inset 0px 0px 14px 0px rgba(0,0,0,0.2);
 +
}
 +
 +
#triad1-image1 {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/5/5d/Algaeprojecthing.jpg);
 +
}
 +
 +
#triad1-image2 {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/e/e6/Newheadercollaborations.jpg);
 +
}
 +
#triad1-image3 {
 +
  background-image: url(https://static.igem.org/mediawiki/2015/0/0a/Igeminterlabpicnortheastern.png);
 +
}
 +
 +
#slide2 {
 +
  max-height: 1065px;
 +
}
 +
 +
.big-picture {
 +
  width: 100%;
 +
  height: 700px;
 +
}
 +
 +
.big-picture__img {
 +
  background-size: cover;
 +
  display: inline-block;
 +
  height: 100%;
 +
  width: 70%;
 +
}
 +
 +
.big-picture__box {
 +
  width: 30%;
 +
  height: 100%;
 +
  display: inline-block;
 +
  float: right;
 +
  background-color: #292929;
 +
 +
}
 +
 +
.big-picture__icon {
 +
  margin-top: 30%;
 +
}
 +
 +
.big-picture__p {
 +
  color: white;
 +
  width: 100%;
 +
  text-align: center;
 +
  width: 70%;
 +
  margin: 0 auto;
 +
  margin-top: 50%;
 +
  font-size: 1.4rem;
 +
  line-height: 2rem;
 +
}
 +
 +
#slide1 {
 +
  height: 60%;
 +
  min-height: 500px;
 +
}
 +
 +
.bg-video {
 +
  text-align: center;
 +
}
 +
 +
.bg-video__overlay {
 +
  position: absolute;
 +
  height: 500px;
 +
  width: 100%;
 +
  /*background-image: url(http://www.walldevil.com/wallpapers/w08/gradients-simple-background-light-colorful-abstract.jpg);*/
 +
  opacity: .85;
 +
  top: 0px;
 +
 +
  background: #398235; /* Old browsers */
 +
  background: -moz-linear-gradient(left, #398235 0%, #6ab599 39%, #6ab599 61%, #398235 100%); /* FF3.6+ */
 +
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#398235), color-stop(39%,#6ab599), color-stop(61%,#6ab599), color-stop(100%,#398235)); /* Chrome,Safari4+ */
 +
  background: -webkit-linear-gradient(left, #398235 0%,#6ab599 39%,#6ab599 61%,#398235 100%); /* Chrome10+,Safari5.1+ */
 +
  background: -o-linear-gradient(left, #398235 0%,#6ab599 39%,#6ab599 61%,#398235 100%); /* Opera 11.10+ */
 +
  background: -ms-linear-gradient(left, #398235 0%,#6ab599 39%,#6ab599 61%,#398235 100%); /* IE10+ */
 +
  background: linear-gradient(to right, #398235 0%,#6ab599 39%,#6ab599 61%,#398235 100%); /* W3C */
 +
}
 +
 +
.bg-video__overlay-black {
 +
  position: absolute;
 +
  height: inherit;
 +
  height: 500px;
 +
  width: 100%;
 +
  background-color: black;
 +
  opacity: .3;
 +
  top: 0px;
 +
}
 +
 +
.bg-video video {
 +
  width: 100%;
 +
  height: 500px;
 +
  object-fit: inherit;
 +
 +
  box-shadow: 0px 22px 8px -14px #d6d6d6;
 +
}
 +
 +
.bg-video .slide-content {
 +
  position: absolute;
 +
  top: 8%;
 +
  padding: 0;
 +
  width: 100%;
 +
  display: block;
 +
  left: 8rem;
 +
 +
}
 +
 +
.left-triangle {
 +
  width: 0;
 +
  height: 0;
 +
  position: relative;
 +
  float: left;
 +
  margin-top: -283px;
 +
  border-style: solid;
 +
  border-width: 300px 0 0 400px;
 +
  border-color: transparent transparent transparent #ffffff;
 +
}
 +
 +
.right-triangle {
 +
  width: 0;
 +
  height: 0;
 +
  position: relative;
 +
  float: right;
 +
  margin-top: -283px;
 +
  border-style: solid;
 +
  border-width: 0 0 300px 400px;
 +
  border-color: transparent transparent #ffffff transparent;
 +
 +
}
 +
 +
.bounce {
 +
width: 60px;
 +
height: 60px ;
 +
-webkit-border-radius:50%;
 +
-moz-border-radius:50%;
 +
-ms-border-radius:50%;
 +
border-radius:50%;
 +
animation: bounce 2s;
 +
-webkit-animation: bounce 2s;
 +
-moz-animation: bounce 2s;
 +
-o-animation: bounce 2s;
 +
-webkit-animation-iteration-count: 3; /* Chrome, Safari, Opera */
 +
    a    nimation-iteration-count: 3;
 +
}
 +
 +
@-webkit-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
 +
40% {-webkit-transform: translateY(-30px);}
 +
60% {-webkit-transform: translateY(-15px);}
 +
}
 +
 +
@-moz-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 +
40% {-moz-transform: translateY(-30px);}
 +
60% {-moz-transform: translateY(-15px);}
 +
}
 +
 +
@-o-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
 +
40% {-o-transform: translateY(-30px);}
 +
60% {-o-transform: translateY(-15px);}
 +
}
 +
@keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 +
40% {transform: translateY(-30px);}
 +
60% {transform: translateY(-15px);}
 +
}
 +
 +
#home-page {
 +
  background-color: white;
 +
}
 +
 +
.triad__container-a {
 +
  text-decoration: none;
 +
}
 +
 +
.triad__container-a:hover {
 +
  text-decoration: none;
 +
}
 +
 +
#neu-logo {
 +
  margin: 0 auto;
 +
}
 +
 +
#home-video-2 {
 +
  width: 70%;
 +
  height: 100%;
 +
}
 +
 +
#slide4 {
 +
  height: 50%;
 +
  min-height: 500px;
 +
}
 +
 +
#slide4 img {
 +
  width: 65%;
 +
  margin: 0 auto;
 +
}
 +
 +
.triads {
 +
margin-bottom: 80px;
 +
}
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 19:12, 4 October 2015