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

Line 55: Line 55:
  
  
−
/* The actual timeline (the vertical ruler) */
+
body {
 +
  margin: 0;
 +
  padding: 0;
 +
  background: rgb(230,230,230);
 +
 
 +
  color: rgb(50,50,50);
 +
  font-family: 'Open Sans', sans-serif;
 +
  font-size: 112.5%;
 +
  line-height: 1.6em;
 +
}
 +
 
 +
/* ================ The Timeline ================ */
 +
 
 
.timeline {
 
.timeline {
−
    position: absolute;
+
  position: relative;
−
    max-width: 1200px;
+
  width: 660px;
−
    margin: 0 auto;
+
  margin: 0 auto;
−
    colour: black;
+
  margin-top: 20px;
 +
  padding: 1em 0;
 +
  list-style-type: none;
 
}
 
}
  
−
/* The actual timeline (the vertical ruler) */
+
.timeline:before {
−
.timeline::after {
+
  position: absolute;
−
    content: '';
+
  left: 50%;
−
    position: absolute;
+
  top: 0;
−
    width: 6px;
+
  content: ' ';
−
    background-color: white;
+
  display: block;
−
    top: 0;
+
  width: 6px;
−
    bottom: 0;
+
  height: 100%;
−
    left: 50%;
+
  margin-left: -3px;
−
    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;
 
}
 
}
  
−
body {
+
.timeline li {
−
    background-color: white;
+
  padding: 1em 0;
−
    font-family: Helvetica, sans-serif;
+
 
}
 
}
  
−
/* Container around content */
+
.timeline li:after {
−
.container {
+
  content: "";
−
    padding: 10px 40px;
+
  display: block;
−
    position: relative;
+
  height: 0;
−
    background-color: inherit;
+
  clear: both;
−
    width: 50%;
+
  visibility: hidden;
 
}
 
}
  
−
/* The circles on the timeline */
+
.direction-l {
−
.container::after {
+
  position: relative;
−
    content: '';
+
  width: 300px;
−
    position: absolute;
+
  float: left;
−
    width: 25px;
+
  text-align: right;
−
    height: 25px;
+
−
    right: -17px;
+
−
    background-color: white;
+
−
    border: 4px solid #FF9F55;
+
−
    top: 15px;
+
−
    border-radius: 50%;
+
−
    z-index: 1;
+
 
}
 
}
  
−
/* Place the container to the left */
+
.direction-r {
−
.left {
+
  position: relative;
−
    left: 0;
+
  width: 300px;
 +
  float: right;
 
}
 
}
  
−
/* Place the container to the right */
+
.flag-wrapper {
−
.right {
+
  position: relative;
−
    left: 50%;
+
  display: inline-block;
 +
 
 +
  text-align: center;
 
}
 
}
  
−
/* Add arrows to the left container (pointing right) */
+
.flag {
−
.left::before {
+
  position: relative;
−
    content: " ";
+
  display: inline;
−
    height: 0;
+
  background: rgb(248,248,248);
−
    position: absolute;
+
  padding: 6px 10px;
−
    top: 22px;
+
  border-radius: 5px;
−
    width: 0;
+
 
−
    z-index: 1;
+
  font-weight: 600;
−
    right: 30px;
+
  text-align: left;
−
    border: medium solid white;
+
−
    border-width: 10px 0 10px 10px;
+
−
    border-color: transparent transparent transparent white;
+
 
}
 
}
  
−
/* Add arrows to the right container (pointing left) */
+
.direction-l .flag {
−
.right::before {
+
  -webkit-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
−
    content: " ";
+
  -moz-box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
−
    height: 0;
+
  box-shadow: -1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
−
    position: absolute;
+
−
    top: 22px;
+
−
    width: 0;
+
−
    z-index: 1;
+
−
    left: 30px;
+
−
    border: medium solid white;
+
−
    border-width: 10px 10px 10px 0;
+
−
    border-color: transparent white transparent transparent;
+
 
}
 
}
  
−
/* Fix the circle for containers on the right side */
+
.direction-r .flag {
−
.right::after {
+
  -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
−
    left: -16px;
+
  -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);
 
}
 
}
  
−
/* The actual content */
+
.direction-l .flag:before,
−
.content {
+
.direction-r .flag:before {
−
    padding: 20px 30px;
+
  position: absolute;
−
    background-color: white;
+
  top: 50%;
−
    position: relative;
+
  right: -40px;
−
    border-radius: 6px;
+
  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;
 
}
 
}
  
−
/* Media queries - Responsive timeline on screens less than 600px wide */
+
.direction-r .flag:before {
−
@media all and (max-width: 600px) {
+
  left: -40px;
−
   /* Place the timelime to the left */
+
}
−
   .timeline::after {
+
 
−
    left: 31px;
+
.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;
 
    
 
    
−
   /* Full-width containers */
+
   line-height: 1em;
−
   .container {
+
   font-size: 0.66666em;
−
    width: 100%;
+
  color: rgb(250,80,80);
−
    padding-left: 70px;
+
  vertical-align: middle;
−
    padding-right: 25px;
+
}
−
  }
+
 
−
 
+
.direction-l .time-wrapper {
−
  /* Make sure that all arrows are pointing leftwards */
+
  float: left;
−
  .container::before {
+
}
−
    left: 60px;
+
 
−
    border: medium solid white;
+
.direction-r .time-wrapper {
−
    border-width: 10px 10px 10px 0;
+
  float: right;
−
    border-color: transparent white transparent transparent;
+
}
−
  }
+
 
 +
.time {
 +
  display: inline-block;
 +
  padding: 4px 6px;
 +
  background: rgb(248,248,248);
 +
}
  
−
  /* Make sure all circles are at the same spot */
+
.desc {
−
   .left::after, .right::after {
+
   margin: 1em 0.75em 0 0;
−
    left: 15px;
+
−
  }
+
 
    
 
    
−
   /* Make all right containers behave like the left ones */
+
   font-size: 0.77777em;
−
  .right {
+
  font-style: italic;
−
    left: 0%;
+
   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>
 
</body>
 
</body>
Line 260: Line 416:
 
</div>
 
</div>
  
−
<div class="timeline">
+
<!-- The Timeline -->
−
  <div class="container left">
+
−
    <div class="content">
+
−
      <h2>Week 1: Ideation</h2>
+
−
      <p>The first few weeks we ideated upon our problem statement and discussed ways to tackle
+
−
them. After long discussions and much debate, we finally decided to work upon the issue that
+
−
we think is quite relevant not only in our country but also in a lot of developing and
+
−
developed countries, the real reason why public toilets are frowned upon and not used,
+
−
despite new government policies that encourage building and usage of public toilets. For our
+
−
inspiration and project summary see ‘project abstract’.</p>
+
−
    </div>
+
−
  </div>
+
−
  <div class="container right">
+
−
    <div class="content">
+
−
      <h2>Week 2: Ground Reality</h2>
+
−
      <p>During this week, we decided to approach different NGO’s and organizations that are
+
−
involved in promoting and providing better sanitation. Sulabh International is an India-based
+
−
NGO that promotes and provides better sanitation by building public pay and use toilets and
+
−
community toilets to name a few. To understand and evaluate the feasibility
+
−
of our idea and to understand the ground reality we decided to meet with the XYZ of Sulabh
+
−
Internation. A detailed transcript of our conversation with him can be found at our ‘human
+
−
practices’ tab.</p>
+
−
<p></p>
+
  
−
    </div>
+
<ul class="timeline">
−
  </div>
+
 
−
   <div class="container left">
+
<!-- Item 1 -->
−
    <div class="content">
+
<li>
−
      <h2>Week 3: We step into the lab!</h2>
+
<div class="direction-r">
−
<p></p>
+
<div class="flag-wrapper">
−
     
+
<span class="flag">Freelancer</span>
−
      <p></p>
+
<span class="time-wrapper"><span class="time">2013 - present</span></span>
−
    </div>
+
</div>
−
  </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 -->
 +
<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>
 
</html>
 
</html>

Revision as of 10:41, 12 October 2017

ICT-Mumbai 2017

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