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

Line 55: Line 55:
  
  
 +
/* The actual timeline (the vertical ruler) */
 +
.timeline {
 +
    position: relative;
 +
    max-width: 1200px;
 +
    margin: 0 auto;
 +
}
  
 +
/* The actual timeline (the vertical ruler) */
 +
.timeline::after {
 +
    content: '';
 +
    position: absolute;
 +
    width: 6px;
 +
    background-color: white;
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 50%;
 +
    margin-left: -3px;
 +
}
  
−
html, body {
+
body2 {
−
margin: 0;
+
     background-color: #474e5d;
−
  padding: 0;
+
     font-family: Helvetica, sans-serif;
−
     background-color: #222C32;
+
−
    height: 100%;
+
−
     font-family: 'Open Sans', sans-serif;
+
−
    box-sizing: border-box;
+
−
line-height: 1.6em;
+
 
}
 
}
  
−
.cd-container {
+
/* Container around content */
−
  width: 90%;
+
.container {
−
  max-width: 1080px;
+
    padding: 10px 40px;
−
  margin: 0 auto;
+
    position: relative;
−
  background: #2B343A;
+
    background-color: inherit;
−
  padding: 0 10%;
+
    width: 50%;
−
  border-radius: 2px;
+
 
}
 
}
−
.cd-container::after {
+
 
−
  content: '';
+
/* The circles on the timeline */
−
  display: table;
+
.container::after {
−
  clear: both;
+
    content: '';
 +
    position: absolute;
 +
    width: 25px;
 +
    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 */
 +
.left {
 +
    left: 0;
 +
}
  
−
Main components
+
/* Place the container to the right */
−
 
+
.right {
−
-------------------------------- */
+
−
 
+
−
 
+
−
#cd-timeline {
+
−
  position: relative;
+
−
  padding: 2em 0;
+
−
  margin-top: 2em;
+
−
  margin-bottom: 2em;
+
−
}
+
−
#cd-timeline::before {
+
−
  content: '';
+
−
  position: absolute;
+
−
  top: 0;
+
−
  left: 25px;
+
−
  height: 100%;
+
−
  width: 4px;
+
−
  background: #7E57C2;
+
−
}
+
−
@media only screen and (min-width: 1170px) {
+
−
  #cd-timeline {
+
−
    margin-top: 3em;
+
−
    margin-bottom: 3em;
+
−
  }
+
−
  #cd-timeline::before {
+
 
     left: 50%;
 
     left: 50%;
−
    margin-left: -2px;
 
−
  }
 
 
}
 
}
  
−
.cd-timeline-block {
+
/* Add arrows to the left container (pointing right) */
−
  position: relative;
+
.left::before {
−
  margin: 2em 0;
+
    content: " ";
−
}
+
    height: 0;
−
.cd-timeline-block:after {
+
    position: absolute;
−
  content: "";
+
    top: 22px;
−
  display: table;
+
    width: 0;
−
  clear: both;
+
    z-index: 1;
−
}
+
     right: 30px;
−
.cd-timeline-block:first-child {
+
    border: medium solid white;
−
  margin-top: 0;
+
     border-width: 10px 0 10px 10px;
−
}
+
     border-color: transparent transparent transparent white;
−
.cd-timeline-block:last-child {
+
−
  margin-bottom: 0;
+
−
}
+
−
@media only screen and (min-width: 1170px) {
+
−
  .cd-timeline-block {
+
−
     margin: 4em 0;
+
−
  }
+
−
  .cd-timeline-block:first-child {
+
−
     margin-top: 0;
+
−
  }
+
−
  .cd-timeline-block:last-child {
+
−
     margin-bottom: 0;
+
−
  }
+
 
}
 
}
  
−
.cd-timeline-img {
+
/* Add arrows to the right container (pointing left) */
−
  position: absolute;
+
.right::before {
−
  top: 8px;
+
    content: " ";
−
  left: 12px;
+
    height: 0;
−
  width: 30px;
+
    position: absolute;
−
  height: 30px;
+
     top: 22px;
−
  border-radius: 50%;
+
     width: 0;
−
  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);
+
     z-index: 1;
−
}
+
     left: 30px;
−
.cd-timeline-img {
+
     border: medium solid white;
−
  background: #673AB7;
+
     border-width: 10px 10px 10px 0;
−
}
+
     border-color: transparent white transparent transparent;
−
@media only screen and (min-width: 1170px) {
+
−
  .cd-timeline-img {
+
−
     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;
+
−
  }
+
 
}
 
}
  
−
.cd-timeline-content {
+
/* Fix the circle for containers on the right side */
−
  position: relative;
+
.right::after {
−
  margin-left: 60px;
+
     left: -16px;
−
  margin-right: 30px;
+
−
  background: #333C42;
+
−
  border-radius: 2px;
+
−
  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 {
+
−
  content: "";
+
−
  display: table;
+
−
  clear: both;
+
−
}
+
−
.cd-timeline-content h2 {
+
−
  color: rgba(255,255,255,.9);
+
−
  margin-top:0;
+
−
  margin-bottom: 5px;
+
−
}
+
−
.cd-timeline-content p, .cd-timeline-content .cd-date {
+
−
  color: rgba(255,255,255,.7);
+
−
  font-size: 13px;
+
−
  font-size: 0.8125rem;
+
−
}
+
−
.cd-timeline-content .cd-date {
+
−
  display: inline-block;
+
−
}
+
−
.cd-timeline-content p {
+
−
  margin: 1em 0;
+
−
  line-height: 1.6;
+
 
}
 
}
  
−
.cd-timeline-content::before {
+
/* The actual content */
−
  content: '';
+
.content {
−
  position: absolute;
+
    padding: 20px 30px;
−
  top: 16px;
+
    background-color: white;
−
  right: 100%;
+
    position: relative;
−
  height: 0;
+
    border-radius: 6px;
−
  width: 0;
+
−
  border: 7px solid transparent;
+
−
  border-right: 7px solid #333C42;
+
 
}
 
}
  
−
@media only screen and (min-width: 768px) {
+
/* Media queries - Responsive timeline on screens less than 600px wide */
−
   .cd-timeline-content h2 {
+
@media all and (max-width: 600px) {
−
     font-size: 20px;
+
  /* Place the timelime to the left */
−
    font-size: 1.25rem;
+
   .timeline::after {
 +
     left: 31px;
 
   }
 
   }
−
   .cd-timeline-content p {
+
    
−
    font-size: 16px;
+
   /* Full-width containers */
−
    font-size: 1rem;
+
   .container {
−
   }
+
−
  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
+
−
    font-size: 14px;
+
−
    font-size: 0.875rem;
+
−
  }
+
−
}
+
−
@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%;
 
     width: 100%;
−
     left: 122%;
+
     padding-left: 70px;
−
    top: 6px;
+
     padding-right: 25px;
−
    font-size: 16px;
+
−
     font-size: 1rem;
+
 
   }
 
   }
−
   .cd-timeline-block:nth-child(even) .cd-timeline-content {
+
 
−
     float: right;
+
  /* Make sure that all arrows are pointing leftwards */
 +
   .container::before {
 +
     left: 60px;
 +
    border: medium solid white;
 +
    border-width: 10px 10px 10px 0;
 +
    border-color: transparent white transparent transparent;
 
   }
 
   }
−
   .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
+
 
−
    top: 24px;
+
  /* Make sure all circles are at the same spot */
−
     left: auto;
+
   .left::after, .right::after {
−
    right: 100%;
+
     left: 15px;
−
    border-color: transparent;
+
−
    border-right-color: #333C42;
+
 
   }
 
   }
−
   .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
+
    
−
    float: right;
+
  /* Make all right containers behave like the left ones */
−
  }
+
   .right {
−
   .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
+
     left: 0%;
−
     left: auto;
+
−
    right: 122%;
+
−
    text-align: right;
+
 
   }
 
   }
 +
}
  
−
 
−
}
 
 
</style>
 
</style>
 
</body>
 
</body>
Line 350: Line 231:
 
</div>
 
</div>
  
−
<a href="https://2017.igem.org/Team:ICT-Mumbai/safety" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-flag" aria-hidden="true"></i>
+
<a href="#safety" class="w3-bar-item w3-button w3-hide-small"><i class="fa fa-flag" aria-hidden="true"></i>
 
  Safety</a>
 
  Safety</a>
  
Line 378: Line 259:
 
</div>
 
</div>
  
−
<section id="cd-timeline" class="cd-container">
+
<div class="timeline">
−
<div class="cd-timeline-block">
+
  <div class="container left">
−
<div class="cd-timeline-img cd-picture">
+
    <div class="content">
−
</div>
+
      <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 class="cd-timeline-content">
+
    </div>
−
<h2>Penta Consulting</h2>
+
  </div>
−
        <div class="timeline-content-info">
+
  <div class="container left">
−
          <span class="timeline-content-info-title">
+
    <div class="content">
−
            <i class="fa fa-certificate" aria-hidden="true"></i>
+
      <h2>Week 3: We step into the lab!</h2>
−
            Front End Developer
+
<p></p>
−
          </span>
+
     
−
          <span class="timeline-content-info-date">
+
      <p></p>
−
            <i class="fa fa-calendar-o" aria-hidden="true"></i>
+
    </div>
−
            June 2016 - Present
+
  </div>
−
          </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 -->
+
−
 
+
−
<div class="cd-timeline-block">
+
−
<div class="cd-timeline-img cd-movie">
+
−
</div> <!-- cd-timeline-img -->
+
−
 
+
−
<div class="cd-timeline-content">
+
−
<h2>Title of section 2</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?</p>
+
−
<span class="cd-date">Jan 18</span>
+
−
</div> <!-- cd-timeline-content -->
+
−
</div> <!-- cd-timeline-block -->
+
−
 
+
−
<div class="cd-timeline-block">
+
−
<div class="cd-timeline-img cd-picture">
+
−
</div> <!-- cd-timeline-img -->
+
−
 
+
−
<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 06:57, 13 October 2017

ICT-Mumbai 2017

Week 1: Ideation

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’.

Week 2: Ground Reality

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.

Week 3: We step into the lab!