Difference between revisions of "Team:Penn/Overview"

Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
−
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
+
body {
−
body {
+
  margin: 0;
−
    margin: 5px 20px;
+
  padding: 0;
−
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNiIgaGVpZ2h0PSI2Ij4KPHJlY3Qgd2lkdGg9IjYiIGhlaWdodD0iNiIgZmlsbD0iI2VlZWVlZSI+PC9yZWN0Pgo8ZyBpZD0iYyI+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNlNmU2ZTYiPjwvcmVjdD4KPHJlY3QgeT0iMSIgd2lkdGg9IjMiIGhlaWdodD0iMiIgZmlsbD0iI2Q4ZDhkOCI+PC9yZWN0Pgo8L2c+Cjx1c2UgeGxpbms6aHJlZj0iI2MiIHg9IjMiIHk9IjMiPjwvdXNlPgo8L3N2Zz4=");
+
  color: rgb(50,50,50);
−
    font-family: 'Open Sans';  
+
  font-family: 'Open Sans', sans-serif;
−
    font-weight: 300;  
+
  font-size: 112.5%;
 +
  line-height: 1.6em;
 
}
 
}
  
−
h2 {
+
/* ================ The Timeline ================ */
−
    margin-bottom: 30px;
+
 
−
    color: #4679bd;
+
.timeline {
−
    font-weight: 400;
+
  position: relative;
−
    text-align: center;
+
  width: 660px;
 +
  margin: 0 auto;
 +
  margin-top: 20px;
 +
  padding: 1em 0;
 +
  list-style-type: none;
 
}
 
}
  
−
p.footer {
+
.timeline:before {
−
    margin-bottom: 20px;
+
  position: absolute;
−
    color: #999999;
+
  left: 50%;
−
    font-size: 18px;
+
  top: 0;
−
    text-align: center;
+
  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;
 
}
 
}
  
−
/* -----------------------------------------------
+
.timeline li {
−
* Timeline
+
  padding: 1em 0;
−
* --------------------------------------------- */
+
−
.timeline {
+
−
    list-style: none;
+
−
    padding: 10px 0;
+
−
    position: relative;
+
−
    font-weight: 300;
+
 
}
 
}
−
.timeline:before {
+
 
−
    top: 0;
+
.timeline li:after {
−
    bottom: 0;
+
  content: "";
−
    position: absolute;
+
  display: block;
−
    content:" ";
+
  height: 0;
−
    width: 2px;
+
  clear: both;
−
    background: #ffffff;
+
  visibility: hidden;
−
    left: 50%;
+
−
    margin-left: -1.5px;
+
 
}
 
}
−
.timeline > li {
+
 
−
    margin-bottom: 20px;
+
.direction-l {
−
    position: relative;
+
  position: relative;
−
    width: 50%;
+
  width: 300px;
−
    float: left;
+
  float: left;
−
    clear: left;
+
  text-align: right;
 
}
 
}
−
.timeline > li:before, .timeline > li:after {
+
 
−
    content:" ";
+
.direction-r {
−
    display: table;
+
  position: relative;
 +
  width: 300px;
 +
  float: right;
 
}
 
}
−
.timeline > li:after {
+
 
−
    clear: both;
+
.flag-wrapper {
 +
  position: relative;
 +
  display: inline-block;
 +
 
 +
  text-align: center;
 
}
 
}
−
.timeline > li:before, .timeline > li:after {
+
 
−
    content:" ";
+
.flag {
−
    display: table;
+
  position: relative;
 +
  display: inline;
 +
  background: rgb(248,248,248);
 +
  padding: 6px 10px;
 +
  border-radius: 5px;
 +
 
 +
  font-weight: 600;
 +
  text-align: left;
 
}
 
}
−
.timeline > li:after {
+
 
−
    clear: both;
+
.direction-l .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);
 
}
 
}
−
.timeline > li > .timeline-panel {
+
 
−
    width: calc(100% - 25px);
+
.direction-r .flag {
−
    width: -moz-calc(100% - 25px);
+
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
−
    width: -webkit-calc(100% - 25px);
+
  -moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
−
    float: left;
+
  box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
−
    border: 1px solid #dcdcdc;
+
−
    background: #ffffff;
+
−
    position: relative;
+
 
}
 
}
−
.timeline > li > .timeline-panel:before {
+
 
−
    position: absolute;
+
.direction-l .flag:before,
−
    top: 26px;
+
.direction-r .flag:before {
−
    right: -15px;
+
  position: absolute;
−
    display: inline-block;
+
  top: 50%;
−
    border-top: 15px solid transparent;
+
  right: -40px;
−
    border-left: 15px solid #dcdcdc;
+
  content: ' ';
−
    border-right: 0 solid #dcdcdc;
+
  display: block;
−
    border-bottom: 15px solid transparent;
+
  width: 12px;
−
    content:" ";
+
  height: 12px;
 +
  margin-top: -10px;
 +
  background: #fff;
 +
  border-radius: 10px;
 +
  border: 4px solid rgb(255,80,80);
 +
  z-index: 10;
 
}
 
}
−
.timeline > li > .timeline-panel:after {
+
 
−
    position: absolute;
+
.direction-r .flag:before {
−
    top: 27px;
+
  left: -40px;
−
    right: -14px;
+
−
    display: inline-block;
+
−
    border-top: 14px solid transparent;
+
−
    border-left: 14px solid #ffffff;
+
−
    border-right: 0 solid #ffffff;
+
−
    border-bottom: 14px solid transparent;
+
−
    content:" ";
+
 
}
 
}
−
.timeline > li > .timeline-badge {
+
 
−
    color: #ffffff;
+
.direction-l .flag:after {
−
    width: 24px;
+
  content: "";
−
    height: 24px;
+
  position: absolute;
−
    line-height: 50px;
+
  left: 100%;
−
    text-align: center;
+
  top: 50%;
−
    position: absolute;
+
  height: 0;
−
    top: 16px;
+
  width: 0;
−
    right: -12px;
+
  margin-top: -8px;
−
    z-index: 100;
+
  border: solid transparent;
 +
  border-left-color: rgb(248,248,248);
 +
  border-width: 8px;
 +
  pointer-events: none;
 
}
 
}
−
.timeline > li.timeline-inverted > .timeline-panel {
+
 
−
    float: right;
+
.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;
 
}
 
}
−
.timeline > li.timeline-inverted > .timeline-panel:before {
+
 
−
    border-left-width: 0;
+
.time-wrapper {
−
    border-right-width: 15px;
+
  display: inline;
−
    left: -15px;
+
 
−
    right: auto;
+
  line-height: 1em;
 +
  font-size: 0.66666em;
 +
  color: rgb(250,80,80);
 +
  vertical-align: middle;
 
}
 
}
−
.timeline > li.timeline-inverted > .timeline-panel:after {
+
 
−
    border-left-width: 0;
+
.direction-l .time-wrapper {
−
    border-right-width: 14px;
+
  float: left;
−
    left: -14px;
+
−
    right: auto;
+
 
}
 
}
−
.timeline-badge > a {
+
 
−
    color: #ffffff !important;
+
.direction-r .time-wrapper {
 +
  float: right;
 
}
 
}
−
.timeline-badge a:hover {
+
 
−
    color: #dcdcdc !important;
+
.time {
 +
  display: inline-block;
 +
  padding: 4px 6px;
 +
  background: rgb(248,248,248);
 
}
 
}
−
.timeline-title {
+
 
−
    margin-top: 0;
+
.desc {
−
    color: inherit;
+
  margin: 1em 0.75em 0 0;
 +
 
 +
  font-size: 0.77777em;
 +
  font-style: italic;
 +
  line-height: 1.5em;
 
}
 
}
−
.timeline-heading h4 {
+
 
−
    font-weight: 400;
+
.direction-r .desc {
−
    padding: 0 15px;
+
  margin: 1em 0 0 0.75em;
−
    color: #4679bd;
+
 
}
 
}
−
.timeline-body > p, .timeline-body > ul {
+
 
−
    padding: 10px 15px;
+
/* ================ Timeline Media Queries ================ */
−
    margin-bottom: 0;
+
 
 +
@media screen and (max-width: 660px) {
 +
 
 +
.timeline {
 +
width: 100%;
 +
padding: 4em 0 1em 0;
 
}
 
}
−
.timeline-footer {
+
 
−
    padding: 5px 15px;
+
.timeline li {
−
    background-color:#f4f4f4;
+
padding: 2em 0;
 
}
 
}
−
.timeline-footer p { margin-bottom: 0; }
+
 
−
.timeline-footer > a {
+
.direction-l,
−
    cursor: pointer;
+
.direction-r {
−
    text-decoration: none;
+
float: none;
 +
width: 100%;
 +
 
 +
text-align: center;
 
}
 
}
−
.timeline > li.timeline-inverted {
+
 
−
    float: right;
+
.flag-wrapper {
−
    clear: right;
+
text-align: center;
 
}
 
}
−
.timeline > li:nth-child(2) {
+
 
−
    margin-top: 60px;
+
.flag {
 +
background: rgb(255,255,255);
 +
z-index: 15;
 
}
 
}
−
.timeline > li.timeline-inverted > .timeline-badge {
+
 
−
    left: -12px;
+
.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;
 
}
 
}
−
.no-float {
+
 
−
    float: none !important;
+
.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;
 
}
 
}
−
@media (max-width: 767px) {
+
 
−
    ul.timeline:before {
+
.time-wrapper {
−
        left: 40px;
+
display: block;
−
    }
+
position: relative;
−
    ul.timeline > li {
+
margin: 4px 0 0 0;
−
        margin-bottom: 0px;
+
z-index: 14;
−
        position: relative;
+
}
−
        width:100%;
+
 
−
        float: left;
+
.direction-l .time-wrapper {
−
        clear: left;
+
float: none;
−
    }
+
}
−
    ul.timeline > li > .timeline-panel {
+
 
−
        width: calc(100% - 65px);
+
.direction-r .time-wrapper {
−
        width: -moz-calc(100% - 65px);
+
float: none;
−
        width: -webkit-calc(100% - 65px);
+
}
−
    }
+
 
−
    ul.timeline > li > .timeline-badge {
+
.desc {
−
        left: 28px;
+
position: relative;
−
        margin-left: 0;
+
margin: 1em 0 0 0;
−
        top: 16px;
+
padding: 1em;
−
    }
+
background: rgb(245,245,245);
−
    ul.timeline > li > .timeline-panel {
+
-webkit-box-shadow: 0 0 1px rgba(0,0,0,0.20);
−
        float: right;
+
-moz-box-shadow: 0 0 1px rgba(0,0,0,0.20);
−
    }
+
box-shadow: 0 0 1px rgba(0,0,0,0.20);
−
    ul.timeline > li > .timeline-panel:before {
+
−
        border-left-width: 0;
+
  z-index: 15;
−
        border-right-width: 15px;
+
}
−
        left: -15px;
+
 
−
        right: auto;
+
.direction-l .desc,
−
    }
+
.direction-r .desc {
−
    ul.timeline > li > .timeline-panel:after {
+
position: relative;
−
        border-left-width: 0;
+
margin: 1em 1em 0 1em;
−
        border-right-width: 14px;
+
padding: 1em;
−
        left: -14px;
+
−
        right: auto;
+
  z-index: 15;
−
    }
+
}
−
    .timeline > li.timeline-inverted {
+
 
−
        float: left;
+
}
−
        clear: left;
+
 
−
        margin-top: 30px;
+
@media screen and (min-width: 400px ?? max-width: 660px) {
−
        margin-bottom: 30px;
+
 
−
    }
+
.direction-l .desc,
−
    .timeline > li.timeline-inverted > .timeline-badge {
+
.direction-r .desc {
−
        left: 28px;
+
margin: 1em 4em 0 4em;
−
    }
+
}
 +
 
 
}
 
}
 
</style>
 
</style>
−
<h2>Super Simple Bootstrap Responsive Timeline</h2>
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
 +
 
 +
<!-- The Timeline -->
  
 
<ul class="timeline">
 
<ul class="timeline">
−
    <li>
+
 
−
        <div class="timeline-badge">
+
<!-- Item 1 -->
−
          <a><i class="fa fa-circle" id=""></i></a>
+
<li>
−
        </div>
+
<div class="direction-r">
−
        <div class="timeline-panel">
+
<div class="flag-wrapper">
−
            <div class="timeline-heading">
+
<span class="flag">Freelancer</span>
−
                <h4>Timeline Event</h4>
+
<span class="time-wrapper"><span class="time">2013 - present</span></span>
−
            </div>
+
</div>
−
            <div class="timeline-body">
+
<div class="desc">My current employment. Way better than the position before!</div>
−
                <p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
+
</div>
−
            </div>
+
</li>
−
            <div class="timeline-footer">
+
 
−
                <p class="text-right">Feb-21-2014</p>
+
<!-- Item 2 -->
−
            </div>
+
<li>
−
        </div>
+
<div class="direction-l">
−
    </li>
+
<div class="flag-wrapper">
−
   
+
<span class="flag">Apple Inc.</span>
−
    <li class="timeline-inverted">
+
<span class="time-wrapper"><span class="time">2011 - 2013</span></span>
−
        <div class="timeline-badge">
+
</div>
−
            <a><i class="fa fa-circle invert" id=""></i></a>
+
<div class="desc">My first employer. All the stuff I've learned and projects I've been working on.</div>
−
        </div>
+
</div>
−
        <div class="timeline-panel">
+
</li>
−
            <div class="timeline-heading">
+
 
−
                <h4>Timeline Event</h4>
+
<!-- Item 3 -->
−
            </div>
+
<li>
−
            <div class="timeline-body">
+
<div class="direction-r">
−
                <p>Stranguillione in deinde cepit roseo commendavit patris super color est se sed. Virginis plus plorantes abscederem assignato ipsum ait regem Ardalio nos filiae Hellenicus mihi cum. Theophilo litore in lucem in modo invenit quasi nomen magni ergo est se est Apollonius, habet clementiae venit ad nomine sed dominum depressit filia navem.</p>
+
<div class="flag-wrapper">
−
            </div>
+
<span class="flag">Harvard University</span>
−
            <div class="timeline-footer">
+
<span class="time-wrapper"><span class="time">2008 - 2011</span></span>
−
                <p class="text-right">Feb-23-2014</p>
+
</div>
−
            </div>
+
<div class="desc">A description of all the lectures and courses I have taken and my final degree?</div>
−
        </div>
+
</div>
−
    </li>
+
</li>
−
   
+
 
−
    <li>
+
−
        <div class="timeline-badge">
+
−
            <a><i class="fa fa-circle" id=""></i></a>
+
−
        </div>
+
−
        <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
                <h4>Timeline Event</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
                <p>Advenientibus aliorum eam ad per te sed. Facere debetur aut veneris accedens.</p>
+
−
            </div>
+
−
            <div class="timeline-footer">
+
−
                <p class="text-right">Feb-23-2014</p>
+
−
            </div>
+
−
        </div>
+
−
    </li>
+
−
   
+
−
    <li class="timeline-inverted">
+
−
        <div class="timeline-badge">
+
−
            <a><i class="fa fa-circle invert" id=""></i></a>
+
−
        </div>
+
−
        <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
                <h4>Timeline Event</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
                <p>Volvitur ingreditur id ait mea vero cum autem quod ait Cumque ego illum vero cum unde beata. Commendavi si non dum est in. Dionysiadem tuos ratio puella ut casus, tunc lacrimas effunditis magister cives Tharsis. Puellae addita verbaque' capellam sanctissima quid, apollinem existimas filiam rex cum autem quod tamen adnuente rediens eam est se in. Peracta licet ad nomine Maria non ait in modo compungi mulierem volutpat.</p>
+
−
            </div>
+
−
            <div class="timeline-footer">
+
−
                <p class="text-right">Feb-27-2014</p>
+
−
            </div>
+
−
        </div>
+
−
    </li>
+
−
   
+
−
    <li>
+
−
        <div class="timeline-badge">
+
−
            <a><i class="fa fa-circle" id=""></i></a>
+
−
        </div>
+
−
        <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
                <h4>Timeline Event</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
                <p>Adfertur guttae sapientiae ducitur est Apollonius ut a a his domino Lycoridem in lucem. Theophile atque bona dei cenam veniebant est cum. Iusto opes mihi Tyrum in modo compungi mulierem ubi augue eiusdem ordo quos vero diam omni catervis famulorum. Bene dictis ut diem finito servis unde.</p>
+
−
            </div>
+
−
            <div class="timeline-footer">
+
−
                <p class="text-right">Mar-01-2014</p>
+
−
            </div>
+
−
        </div>
+
−
    </li>
+
−
   
+
−
    <li  class="timeline-inverted">
+
−
        <div class="timeline-badge">
+
−
            <a><i class="fa fa-circle invert" id=""></i></a>
+
−
        </div>
+
−
        <div class="timeline-panel">
+
−
            <div class="timeline-heading">
+
−
                <h4>Timeline Event</h4>
+
−
            </div>
+
−
            <div class="timeline-body">
+
−
                <p>Crede respiciens loco dedit beneficio ad suis alteri si puella eius in. Acceptis codicello lenonem in deinde plectrum anni ipsa quod eam est Apollonius.</p>
+
−
            </div>
+
−
            <div class="timeline-footer primary">
+
−
                <p class="text-right">Mar-02-2014</p>
+
−
            </div>
+
−
        </div>
+
−
    </li>
+
−
    <li class="clearfix no-float"></li>
+
 
</ul>
 
</ul>
  
−
<p class="footer">Icons by <a href="http://fortawesome.github.io/Font-Awesome/">FontAwesome 4.1 Icons</a>.<br />
 
−
  Created by <a href="http://jenniferperrin.com">Jennifer Perrin</a>
 
−
</p>
 
 
</html>
 
</html>

Revision as of 01:09, 29 August 2015

  • Freelancer 2013 - present
    My current employment. Way better than the position before!
  • Apple Inc. 2011 - 2013
    My first employer. All the stuff I've learned and projects I've been working on.
  • Harvard University 2008 - 2011
    A description of all the lectures and courses I have taken and my final degree?