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

Line 547: Line 547:
 
[id^='page-header'] {
 
[id^='page-header'] {
 
   margin-bottom: 55px;
 
   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: inherit;
 +
  min-height: 500px;
 +
  width: 100%;
 +
  /*background-image: url(http://www.walldevil.com/wallpapers/w08/gradients-simple-background-light-colorful-abstract.jpg);*/
 +
  opacity: .85;
 +
  top: 9px;
 +
 +
  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;
 +
  min-height: 500px;
 +
  width: 100%;
 +
  background-color: black;
 +
  opacity: .3;
 +
  top: 9px;
 +
}
 +
 +
.bg-video video {
 +
  width: 100%;
 +
  height: 100%;
 +
  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;
 
}
 
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 03:22, 19 September 2015