Difference between revisions of "Team:ICT-Mumbai/Notebook"

Line 66: Line 66:
 
}
 
}
  
−
/* ================ The Timeline ================ */
+
html, body {
 +
    background-color: #222C32;
 +
    height: 100%;
 +
    font-family: 'Open Sans', sans-serif;
 +
    box-sizing: border-box;
 +
}
  
−
.timeline {
+
.cd-container {
−
   position: relative;
+
   width: 90%;
−
   width: 660px;
+
   max-width: 1080px;
 
   margin: 0 auto;
 
   margin: 0 auto;
−
   margin-top: 20px;
+
   background: #2B343A;
−
   padding: 1em 0;
+
   padding: 0 10%;
−
   list-style-type: none;
+
   border-radius: 2px;
 
}
 
}
−
 
+
.cd-container::after {
−
.timeline:before {
+
   content: '';
−
  position: absolute;
+
   display: table;
−
  left: 50%;
+
   clear: both;
−
  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 {
+
Main components
−
  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 {
+
#cd-timeline {
 
   position: relative;
 
   position: relative;
−
   display: inline-block;
+
   padding: 2em 0;
−
    
+
   margin-top: 2em;
−
   text-align: center;
+
   margin-bottom: 2em;
 
}
 
}
−
 
+
#cd-timeline::before {
−
.flag {
+
   content: '';
−
  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;
 
   position: absolute;
−
   top: 50%;
+
   top: 0;
−
   right: -40px;
+
   left: 25px;
−
   content: ' ';
+
   height: 100%;
−
  display: block;
+
   width: 4px;
−
   width: 12px;
+
   background: #7E57C2;
−
  height: 12px;
+
−
  margin-top: -10px;
+
−
   background: #fff;
+
−
  border-radius: 10px;
+
−
  border: 4px solid rgb(255,80,80);
+
−
  z-index: 10;
+
 
}
 
}
−
 
+
@media only screen and (min-width: 1170px) {
−
.direction-r .flag:before {
+
  #cd-timeline {
−
  left: -40px;
+
    margin-top: 3em;
 +
    margin-bottom: 3em;
 +
  }
 +
  #cd-timeline::before {
 +
    left: 50%;
 +
    margin-left: -2px;
 +
  }
 
}
 
}
  
−
.direction-l .flag:after {
+
.cd-timeline-block {
−
  content: "";
+
   position: relative;
−
   position: absolute;
+
   margin: 2em 0;
−
   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;
+
 
}
 
}
−
 
+
.cd-timeline-block:after {
−
.direction-r .flag:after {
+
 
   content: "";
 
   content: "";
−
   position: absolute;
+
   display: table;
−
   right: 100%;
+
   clear: both;
−
  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;
+
 
}
 
}
−
 
+
.cd-timeline-block:first-child {
−
.time-wrapper {
+
   margin-top: 0;
−
  display: inline;
+
−
 
+
−
  line-height: 1em;
+
−
   font-size: 0.66666em;
+
−
  color: rgb(250,80,80);
+
−
  vertical-align: middle;
+
 
}
 
}
−
 
+
.cd-timeline-block:last-child {
−
.direction-l .time-wrapper {
+
   margin-bottom: 0;
−
   float: left;
+
 
}
 
}
−
 
+
@media only screen and (min-width: 1170px) {
−
.direction-r .time-wrapper {
+
  .cd-timeline-block {
−
   float: right;
+
    margin: 4em 0;
 +
  }
 +
  .cd-timeline-block:first-child {
 +
    margin-top: 0;
 +
   }
 +
  .cd-timeline-block:last-child {
 +
    margin-bottom: 0;
 +
  }
 
}
 
}
  
−
.time {
+
.cd-timeline-img {
−
   display: inline-block;
+
   position: absolute;
−
   padding: 4px 6px;
+
   top: 8px;
−
   background: rgb(248,248,248);
+
   left: 12px;
 +
  width: 30px;
 +
  height: 30px;
 +
  border-radius: 50%;
 +
  box-shadow: 0 0 0 4px #7E57C2, inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05);
 
}
 
}
−
 
+
.cd-timeline-img {
−
.desc {
+
   background: #673AB7;
−
  margin: 1em 0.75em 0 0;
+
−
 
+
−
  font-size: 0.77777em;
+
−
  font-style: italic;
+
−
   line-height: 1.5em;
+
 
}
 
}
−
 
+
@media only screen and (min-width: 1170px) {
−
.direction-r .desc {
+
  .cd-timeline-img {
−
  margin: 1em 0 0 0.75em;
+
    width: 30px;
 +
    height: 30px;
 +
    left: 50%;
 +
    margin-left: -15px;
 +
    margin-top: 15px;
 +
    /* Force Hardware Acceleration in WebKit */
 +
    -webkit-transform: translateZ(0);
 +
    -webkit-backface-visibility: hidden;
 +
  }
 
}
 
}
  
−
/* ================ Timeline Media Queries ================ */
+
.cd-timeline-content {
−
 
+
  position: relative;
−
@media screen and (max-width: 660px) {
+
  margin-left: 60px;
−
 
+
  margin-right: 30px;
−
.timeline {
+
  background: #333C42;
−
width: 100%;
+
  border-radius: 2px;
−
padding: 4em 0 1em 0;
+
  padding: 1em;
 +
  .timeline-content-info {
 +
    background: #2B343A;
 +
    padding: 5px 10px;
 +
    color: rgba(255,255,255,0.7);
 +
    font-size: 12px;
 +
    box-shadow:  inset 0 2px 0 rgba(0, 0, 0, 0.08);
 +
    border-radius: 2px;
 +
    i {
 +
      margin-right: 5px;
 +
    }
 +
    .timeline-content-info-title, .timeline-content-info-date { 
 +
      width: calc(50% - 2px);
 +
      display: inline-block;
 +
    }
 +
    @media (max-width: 500px) {
 +
      .timeline-content-info-title, .timeline-content-info-date {
 +
        display: block;
 +
        width:100%;
 +
      }
 +
    }
 +
  }
 +
  .content-skills {
 +
    font-size: 12px;
 +
    padding:0;
 +
    margin-bottom: 0;
 +
    display:flex;
 +
    flex-wrap: wrap;
 +
    justify-content: center;
 +
    li {
 +
      background: #40484D;
 +
      border-radius: 2px;
 +
      display: inline-block;
 +
      padding: 2px 10px;
 +
      color: rgba(255,255,255,0.7);
 +
      margin: 3px 2px;
 +
      text-align: center;
 +
      flex-grow: 1;
 +
    }
 +
  }
 
}
 
}
−
 
+
.cd-timeline-content:after {
−
.timeline li {
+
  content: "";
−
padding: 2em 0;
+
  display: table;
 +
  clear: both;
 
}
 
}
−
 
+
.cd-timeline-content h2 {
−
.direction-l,
+
  color: rgba(255,255,255,.9);
−
.direction-r {
+
  margin-top:0;
−
float: none;
+
  margin-bottom: 5px;
−
width: 100%;
+
−
 
+
−
text-align: center;
+
 
}
 
}
−
 
+
.cd-timeline-content p, .cd-timeline-content .cd-date {
−
.flag-wrapper {
+
  color: rgba(255,255,255,.7);
−
text-align: center;
+
  font-size: 13px;
 +
  font-size: 0.8125rem;
 
}
 
}
−
 
+
.cd-timeline-content .cd-date {
−
.flag {
+
  display: inline-block;
−
background: rgb(255,255,255);
+
}
−
z-index: 15;
+
.cd-timeline-content p {
 +
  margin: 1em 0;
 +
  line-height: 1.6;
 
}
 
}
  
−
.direction-l .flag:before,
+
.cd-timeline-content::before {
−
.direction-r .flag:before {
+
  content: '';
 
   position: absolute;
 
   position: absolute;
−
   top: -30px;
+
   top: 16px;
−
left: 50%;
+
  right: 100%;
−
content: ' ';
+
  height: 0;
−
display: block;
+
  width: 0;
−
width: 12px;
+
  border: 7px solid transparent;
−
height: 12px;
+
  border-right: 7px solid #333C42;
−
margin-left: -9px;
+
−
background: #fff;
+
−
border-radius: 10px;
+
−
border: 4px solid rgb(255,80,80);
+
−
z-index: 10;
+
 
}
 
}
  
−
.direction-l .flag:after,
+
@media only screen and (min-width: 768px) {
−
.direction-r .flag:after {
+
  .cd-timeline-content h2 {
−
content: "";
+
    font-size: 20px;
−
position: absolute;
+
    font-size: 1.25rem;
−
left: 50%;
+
  }
−
top: -8px;
+
  .cd-timeline-content p {
−
height: 0;
+
    font-size: 16px;
−
width: 0;
+
    font-size: 1rem;
−
margin-left: -8px;
+
  }
−
border: solid transparent;
+
  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
−
border-bottom-color: rgb(255,255,255);
+
    font-size: 14px;
−
border-width: 8px;
+
    font-size: 0.875rem;
−
pointer-events: none;
+
  }
 
}
 
}
 +
@media only screen and (min-width: 1170px) {
 +
  .cd-timeline-content {
 +
    color: white;
 +
    margin-left: 0;
 +
    padding: 1.6em;
 +
    width: 36%;
 +
    margin: 0 5%
 +
  }
 +
  .cd-timeline-content::before {
 +
    top: 24px;
 +
    left: 100%;
 +
    border-color: transparent;
 +
    border-left-color: #333C42;
 +
  }
 +
  .cd-timeline-content .cd-date {
 +
    position: absolute;
 +
    width: 100%;
 +
    left: 122%;
 +
    top: 6px;
 +
    font-size: 16px;
 +
    font-size: 1rem;
 +
  }
 +
  .cd-timeline-block:nth-child(even) .cd-timeline-content {
 +
    float: right;
 +
  }
 +
  .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
 +
    top: 24px;
 +
    left: auto;
 +
    right: 100%;
 +
    border-color: transparent;
 +
    border-right-color: #333C42;
 +
  }
 +
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
 +
    float: right;
 +
  }
 +
  .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
 +
    left: auto;
 +
    right: 122%;
 +
    text-align: right;
 +
  }
  
−
.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;
 
−
}
 
  
 
}
 
}
Line 416: Line 384:
 
</div>
 
</div>
  
−
<!-- The Timeline -->
+
<section id="cd-timeline" class="cd-container">
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-picture">
 +
</div>
  
−
<ul class="timeline">
+
<div class="cd-timeline-content">
 +
<h2>Penta Consulting</h2>
 +
        <div class="timeline-content-info">
 +
          <span class="timeline-content-info-title">
 +
            <i class="fa fa-certificate" aria-hidden="true"></i>
 +
            Front End Developer
 +
          </span>
 +
          <span class="timeline-content-info-date">
 +
            <i class="fa fa-calendar-o" aria-hidden="true"></i>
 +
            June 2016 - Present
 +
          </span>
 +
        </div>
 +
<p>Working alongside the designer team implementing the designs, also developing custom solutions to address team necessities.</p>
 +
        <ul class="content-skills">
 +
        <li>HTML5</li>
 +
        <li>CSS3</li>
 +
        <li>JavaScript</li>
 +
        <li>jQuery</li>
 +
        <li>Wordpress</li>
 +
        </ul>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
−
<!-- Item 1 -->
+
<div class="cd-timeline-block">
−
<li>
+
<div class="cd-timeline-img cd-movie">
−
<div class="direction-r">
+
</div> <!-- cd-timeline-img -->
−
<div class="flag-wrapper">
+
−
<span class="flag">Freelancer</span>
+
−
<span class="time-wrapper"><span class="time">2013 - present</span></span>
+
−
</div>
+
−
<div class="desc">My current employment. Way better than the position before!</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 -->
+
<div class="cd-timeline-content">
−
<li>
+
<h2>Title of section 2</h2>
−
<div class="direction-r">
+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?</p>
−
<div class="flag-wrapper">
+
<span class="cd-date">Jan 18</span>
−
<span class="flag">Harvard University</span>
+
</div> <!-- cd-timeline-content -->
−
<span class="time-wrapper"><span class="time">2008 - 2011</span></span>
+
</div> <!-- cd-timeline-block -->
−
</div>
+
 
−
<div class="desc">A description of all the lectures and courses I have taken and my final degree?</div>
+
<div class="cd-timeline-block">
−
</div>
+
<div class="cd-timeline-img cd-picture">
−
</li>
+
</div> <!-- cd-timeline-img -->
−
 
+
 
−
</ul>
+
<div class="cd-timeline-content">
 +
<h2>Title of section 3</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.</p>
 +
<span class="cd-date">Jan 24</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
 +
 
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-location">
 +
</div> <!-- cd-timeline-img -->
 +
 
 +
<div class="cd-timeline-content">
 +
<h2>Title of section 4</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.</p>
 +
<span class="cd-date">Feb 14</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
 +
 
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-location">
 +
</div>
 +
 
 +
<div class="cd-timeline-content">
 +
<h2>Title of section 5</h2>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.</p>
 +
<span class="cd-date">Feb 18</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
 +
 
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-movie">
 +
</div> <!-- cd-timeline-img -->
 +
 
 +
<div class="cd-timeline-content">
 +
<h2>Final Section</h2>
 +
<p>This is the content of the last section</p>
 +
<span class="cd-date">Feb 26</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
 +
</section> <!-- cd-timeline -->
 
    
 
    
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 12:46, 12 October 2017

ICT-Mumbai 2017

Penta Consulting

Front End Developer June 2016 - Present

Working alongside the designer team implementing the designs, also developing custom solutions to address team necessities.

  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • Wordpress

Title of section 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde?

Jan 18

Title of section 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi, obcaecati, quisquam id molestias eaque asperiores voluptatibus cupiditate error assumenda delectus odit similique earum voluptatem doloremque dolorem ipsam quae rerum quis. Odit, itaque, deserunt corporis vero ipsum nisi eius odio natus ullam provident pariatur temporibus quia eos repellat consequuntur perferendis enim amet quae quasi repudiandae sed quod veniam dolore possimus rem voluptatum eveniet eligendi quis fugiat aliquam sunt similique aut adipisci.

Jan 24

Title of section 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum aut hic quasi placeat iure tempora laudantium ipsa ad debitis unde? Iste voluptatibus minus veritatis qui ut.

Feb 14

Title of section 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, optio, dolorum provident rerum.

Feb 18

Final Section

This is the content of the last section

Feb 26