Difference between revisions of "Team:UB Indonesia/Notebook"

Line 173: Line 173:
 
   border-style: none;
 
   border-style: none;
 
}
 
}
 +
 +
.timeline {
 +
  position: relative;
 +
  width: 660px;
 +
  margin: 0 auto;
 +
  margin-top: 20px;
 +
  padding: 1em 0;
 +
  list-style-type: none;
 +
}
 +
 +
.timeline:before {
 +
  position: absolute;
 +
  left: 50%;
 +
  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;
 +
}
 +
 +
.timeline li {
 +
  padding: 1em 0;
 +
}
 +
 +
.timeline li:after {
 +
  content: "";
 +
  display: block;
 +
  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;
 +
  display: inline-block;
 +
 
 +
  text-align: center;
 +
}
 +
 +
.flag {
 +
  position: relative;
 +
  display: inline;
 +
  background: rgb(248,248,248);
 +
  padding: 6px 10px;
 +
  border-radius: 5px;
 +
 
 +
  font-weight: 600;
 +
  text-align: left;
 +
}
 +
 +
.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);
 +
}
 +
 +
.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 {
 +
  float: left;
 +
}
 +
 +
.direction-r .time-wrapper {
 +
  float: right;
 +
}
 +
 +
.time {
 +
  display: inline-block;
 +
  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;
 +
}
 +
 +
}
 +
 
</style>
 
</style>
 
      
 
      
Line 227: Line 503:
 
</head>
 
</head>
 
<body style="background-color:#DCEDC8">
 
<body style="background-color:#DCEDC8">
−
<h1> Test </h1>
+
 
−
<div class="footer">
+
<ul class="timeline">
−
<p>
+
 
−
This page still on progress, please be patience :)
+
    <!-- Item 1 -->
−
</p>
+
    <li>
−
    <p>
+
        <div class="direction-r">
−
This page still on progress, please be patience :)
+
            <div class="flag-wrapper">
−
</p>
+
                <span class="flag">Freelancer</span>
−
     <p>
+
                <span class="time-wrapper"><span class="time">2013 - present</span></span>
−
This page still on progress, please be patience :)
+
            </div>
−
</p><p>
+
            <div class="desc">My current employment. Way better than the position before!</div>
−
This page still on progress, please be patience :)
+
        </div>
−
</p>
+
     </li>
−
     <p>
+
 
−
This page still on progress, please be patience :)
+
    <!-- Item 2 -->
−
</p>
+
    <li>
−
     <p>
+
        <div class="direction-l">
−
This page still on progress, please be patience :)
+
            <div class="flag-wrapper">
−
</p>
+
                <span class="flag">Apple Inc.</span>
−
</div>
+
                <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>
 +
 
  
 
</body>
 
</body>

Revision as of 22:18, 18 September 2015

Brawijaya University - Detection on Dengue Fever

BRAWIJAYA UNIVERSITY

  • 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?