Difference between revisions of "Team:Penn/Overview"

Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
body {
+
body {
−
   margin: 0;
+
   font-family: 'Libre Baskerville',
−
  padding: 0;  
+
    serif;
−
   color: rgb(50,50,50);
+
   background: rgb(38, 37, 48);
−
   font-family: 'Open Sans', sans-serif;
+
   text-align: center;
−
  font-size: 112.5%;
+
  -webkit-font-smoothing: antialiased;
−
  line-height: 1.6em;
+
-moz-osx-font-smoothing: grayscale;
 
}
 
}
  
−
/* ================ The Timeline ================ */
+
#dust {
−
 
+
−
.timeline {
+
−
  position: relative;
+
−
  width: 660px;
+
−
  margin: 0 auto;
+
−
  margin-top: 20px;
+
−
  padding: 1em 0;
+
−
  list-style-type: none;
+
−
}
+
−
 
+
−
.timeline:before {
+
 
   position: absolute;
 
   position: absolute;
−
   left: 50%;
+
   width: 100%;
 
   top: 0;
 
   top: 0;
−
  content: ' ';
 
−
  display: block;
 
−
  width: 6px;
 
−
  height: 100%;
 
−
  margin-left: -3px;
 
−
  background: rgb(80,80,80);
 
−
  background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
 
−
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1)));
 
−
  background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
 
−
  background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
 
−
  background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
 
−
  background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
 
−
 
 
−
  z-index: 5;
 
 
}
 
}
−
 
+
.title {
−
.timeline li {
+
    transform: scale(0);
−
  padding: 1em 0;
+
    filter: blur(10px);
 
}
 
}
−
 
+
h1 {
−
.timeline li:after {
+
   font-size: 2em;
−
   content: "";
+
   margin-top: 50px;
−
  display: block;
+
   opacity: 1;
−
  height: 0;
+
−
  clear: both;
+
−
  visibility: hidden;
+
−
}
+
−
 
+
−
.direction-l {
+
−
  position: relative;
+
−
   width: 300px;
+
−
  float: left;
+
−
  text-align: right;
+
−
}
+
−
 
+
−
.direction-r {
+
−
   position: relative;
+
−
  width: 300px;
+
−
  float: right;
+
−
}
+
−
 
+
−
.flag-wrapper {
+
 
   position: relative;
 
   position: relative;
 +
  color: #E3E3EB;
 +
  font-weight: 400;
 +
  text-align: center;
 +
  margin-right: 10px;
 +
  padding-bottom: 10px;
 
   display: inline-block;
 
   display: inline-block;
−
    
+
   border-bottom: 3px solid #E3E3EB;
−
   text-align: center;
+
   letter-spacing: 10px;
−
}
+
  
−
.flag {
+
  > div {
−
  position: relative;
+
    position: relative;
−
  display: inline;
+
    display: inline-block;
−
  background: rgb(248,248,248);
+
    + div {
−
   padding: 6px 10px;
+
      display: block;
−
  border-radius: 5px;
+
    }
−
 
+
   }
−
  font-weight: 600;
+
  span {
−
  text-align: left;
+
    letter-spacing: normal;
 +
    display: block;
 +
    margin-bottom: 10px;
 +
    font-size: .5em;
 +
    font-style: italic;
 +
    position: relative;
 +
    z-index: 2;
 +
    &:before, &:after {
 +
      content: "";
 +
      width: 43%;
 +
      height: 3px;
 +
      border-radius: 5px;
 +
      background: #E3E3EB;
 +
      position: absolute;
 +
      right: 0;
 +
      z-index: 1;
 +
      top: .5em;
 +
    }
 +
    &:after {
 +
      left: 0;
 +
    }
 +
  }
 
}
 
}
−
 
+
p {
−
.direction-l .flag {
+
font-family: 'Josefin Sans', sans-serif;
−
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+
   text-transform: uppercase;
−
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+
   color: #fff;
−
   box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+
   margin-top: 14px;
−
}
+
   letter-spaceing: 5px;
−
 
+
   line-height:1.2em;
−
.direction-r .flag {
+
−
   -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+
−
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+
−
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
+
−
}
+
−
 
+
−
.direction-l .flag:before,
+
−
.direction-r .flag:before {
+
−
  position: absolute;
+
−
  top: 50%;
+
−
  right: -40px;
+
−
  content: ' ';
+
−
  display: block;
+
−
  width: 12px;
+
−
  height: 12px;
+
−
  margin-top: -10px;
+
−
  background: #fff;
+
−
  border-radius: 10px;
+
−
  border: 4px solid rgb(255,80,80);
+
−
  z-index: 10;
+
−
}
+
−
 
+
−
.direction-r .flag:before {
+
−
  left: -40px;
+
−
}
+
−
 
+
−
.direction-l .flag:after {
+
−
  content: "";
+
−
  position: absolute;
+
−
  left: 100%;
+
−
  top: 50%;
+
−
  height: 0;
+
−
  width: 0;
+
−
   margin-top: -8px;
+
−
   border: solid transparent;
+
−
  border-left-color: rgb(248,248,248);
+
−
   border-width: 8px;
+
−
  pointer-events: none;
+
−
}
+
−
 
+
−
.direction-r .flag:after {
+
−
  content: "";
+
−
  position: absolute;
+
−
  right: 100%;
+
−
  top: 50%;
+
−
  height: 0;
+
−
  width: 0;
+
−
  margin-top: -8px;
+
−
  border: solid transparent;
+
−
  border-right-color: rgb(248,248,248);
+
−
  border-width: 8px;
+
−
  pointer-events: none;
+
−
}
+
−
 
+
−
.time-wrapper {
+
−
  display: inline;
+
 
    
 
    
−
  line-height: 1em;
 
−
  font-size: 0.66666em;
 
−
  color: rgb(250,80,80);
 
−
  vertical-align: middle;
 
 
}
 
}
  
−
.direction-l .time-wrapper {
+
/*ANimation stuff*/
−
  float: left;
+
.title {
−
}
+
   animation-name: zoomIn;
−
 
+
   animation-duration: 1.5s;
−
.direction-r .time-wrapper {
+
   animation-timing-function: ease-out;
−
   float: right;
+
  animation-delay: 2s;
−
}
+
  animation-direction: alternate;
−
 
+
   animation-iteration-count: 1;
−
.time {
+
   animation-fill-mode: forwards;
−
  display: inline-block;
+
   animation-play-state: running;
−
  padding: 4px 6px;
+
−
   background: rgb(248,248,248);
+
−
}
+
−
 
+
−
.desc {
+
−
  margin: 1em 0.75em 0 0;
+
−
 
+
−
  font-size: 0.77777em;
+
−
  font-style: italic;
+
−
  line-height: 1.5em;
+
−
}
+
−
 
+
−
.direction-r .desc {
+
−
   margin: 1em 0 0 0.75em;
+
−
}
+
−
 
+
−
/* ================ Timeline Media Queries ================ */
+
−
 
+
−
@media screen and (max-width: 660px) {
+
−
 
+
−
.timeline {
+
−
width: 100%;
+
−
padding: 4em 0 1em 0;
+
−
}
+
−
 
+
−
.timeline li {
+
−
padding: 2em 0;
+
−
}
+
−
 
+
−
.direction-l,
+
−
.direction-r {
+
−
float: none;
+
−
width: 100%;
+
−
 
+
−
text-align: center;
+
−
}
+
−
 
+
−
.flag-wrapper {
+
−
text-align: center;
+
−
}
+
−
 
+
−
.flag {
+
−
background: rgb(255,255,255);
+
−
z-index: 15;
+
−
}
+
−
 
+
−
.direction-l .flag:before,
+
−
.direction-r .flag:before {
+
−
  position: absolute;
+
−
   top: -30px;
+
−
left: 50%;
+
−
content: ' ';
+
−
display: block;
+
−
width: 12px;
+
−
height: 12px;
+
−
margin-left: -9px;
+
−
background: #fff;
+
−
border-radius: 10px;
+
−
border: 4px solid rgb(255,80,80);
+
−
z-index: 10;
+
−
}
+
−
 
+
−
.direction-l .flag:after,
+
−
.direction-r .flag:after {
+
−
content: "";
+
−
position: absolute;
+
−
left: 50%;
+
−
top: -8px;
+
−
height: 0;
+
−
width: 0;
+
−
margin-left: -8px;
+
−
border: solid transparent;
+
−
border-bottom-color: rgb(255,255,255);
+
−
border-width: 8px;
+
−
pointer-events: none;
+
−
}
+
−
 
+
−
.time-wrapper {
+
−
display: block;
+
−
position: relative;
+
−
margin: 4px 0 0 0;
+
−
z-index: 14;
+
−
}
+
−
 
+
−
.direction-l .time-wrapper {
+
−
float: none;
+
−
}
+
−
 
+
−
.direction-r .time-wrapper {
+
−
float: none;
+
−
}
+
−
 
+
−
.desc {
+
−
position: relative;
+
−
margin: 1em 0 0 0;
+
−
padding: 1em;
+
−
background: rgb(245,245,245);
+
−
-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
+
−
-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
+
−
box-shadow: 0 0 1px rgba(0,0,0,0.20);
+
−
+
−
   z-index: 15;
+
−
}
+
−
 
+
−
.direction-l .desc,
+
−
.direction-r .desc {
+
−
position: relative;
+
−
margin: 1em 1em 0 1em;
+
−
padding: 1em;
+
−
+
−
   z-index: 15;
+
−
}
+
−
 
+
−
}
+
−
 
+
−
@media screen and (min-width: 400px ?? max-width: 660px) {
+
−
 
+
−
.direction-l .desc,
+
−
.direction-r .desc {
+
−
margin: 1em 4em 0 4em;
+
 
}
 
}
  
 +
@keyframes zoomIn {
 +
  0% {
 +
    transform: scale(.3);
 +
    filter: blur(10px);
 +
  }
 +
  40% {
 +
    transform: scale(1);
 +
  }
 +
  100% {
 +
    filter: blur(0);
 +
    transform: scale(1);
 +
  }
 
}
 
}
 
</style>
 
</style>
−
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
+
<div id="dust">
−
 
+
</div>
−
<!-- The Timeline -->
+
<div class="title">
−
 
+
   <h1>
−
<ul class="timeline">
+
    <div>
−
 
+
      <span>the</span>  
−
<!-- Item 1 -->
+
      THEORY
−
<li>
+
      <span>of</span>
−
<div class="direction-r">
+
    </div>
−
<div class="flag-wrapper">
+
    <div>EVERYTHING</div>
−
<span class="flag">Freelancer</span>
+
  </h1>
−
<span class="time-wrapper"><span class="time">2013 - present</span></span>
+
  <p>Tim Bevan, Eric Fellner,
−
</div>
+
    <br />Lisa Bruce & Anthony McCarten </p>
−
<div class="desc">My current employment. Way better than the position before!</div>
+
</div>
−
</div>
+
−
</li>
+
−
    
+
−
<!-- Item 2 -->
+
−
<li>
+
−
<div class="direction-l">
+
−
<div class="flag-wrapper">
+
−
<span class="flag">Apple Inc.</span>
+
−
<span class="time-wrapper"><span class="time">2011 - 2013</span></span>
+
−
</div>
+
−
<div class="desc">My first employer. All the stuff I've learned and projects I've been working on.</div>
+
−
</div>
+
−
</li>
+
−
 
+
−
<!-- Item 3 -->
+
−
<li>
+
−
<div class="direction-r">
+
−
<div class="flag-wrapper">
+
−
<span class="flag">Harvard University</span>
+
−
<span class="time-wrapper"><span class="time">2008 - 2011</span></span>
+
−
</div>
+
−
<div class="desc">A description of all the lectures and courses I have taken and my final degree?</div>
+
−
</div>
+
−
</li>
+
−
 
+
−
</ul>
+
−
 
+
 
</html>
 
</html>

Revision as of 01:16, 29 August 2015

the THEORY of
EVERYTHING

Tim Bevan, Eric Fellner,
Lisa Bruce & Anthony McCarten