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

(Created page with "<html> <title>ICT-Mumbai 2017</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://www.w3sc...")
 
Line 4: Line 4:
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
−
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300">
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  
Line 17: Line 17:
  
  
−
body,h1,h2,h3,h4,h5,h6 {font-family: "Source Sans Pro", sans-serif;}
+
body,h1,h2,h3,h4,h5,h6 {font-family: "Lato:300", sans-serif;}
  
 
body, html {
 
body, html {
 
     height: 100%;
 
     height: 100%;
 
     color: rgba(255,255,255);
 
     color: rgba(255,255,255);
 +
    background-color: white;
 +
 
}
 
}
  
Line 35: Line 37:
 
/* First image (Logo. Full height) */
 
/* First image (Logo. Full height) */
 
.bgimg-1 {
 
.bgimg-1 {
−
     background-image: url("https://2017.igem.org/File:ICT-Mumbai_PROTOCOLS_BG_image.png");
+
     background-image: url("https://static.igem.org/mediawiki/2017/d/d1/ICT-Mumbai_PROTOCOLS_BG_image.png");
 
     min-height: 1000px;
 
     min-height: 1000px;
 
      
 
      
Line 50: Line 52:
 
}
 
}
  
 +
* {
 +
    box-sizing: border-box;
 +
}
  
 +
body {
 +
    background-color: #474e5d;
 +
    font-family: "Lato", sans-serif;
 +
}
 +
 +
/* 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;
 +
height:2000px;   
 +
width: 6px;
 +
    background-color: black;
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 50%;
 +
    margin-left: -3px;
 +
}
 +
 +
/* Container around content */
 +
.container {
 +
    padding: 10px 40px;
 +
    position: relative;
 +
    background-color: inherit;
 +
    width: 50%;
 +
    top:100px;
 +
}
 +
 +
/* The circles on the timeline */
 +
.container::after {
 +
    content: '';
 +
    position: absolute;
 +
    width: 25px;
 +
    height: 25px;
 +
    right: -17px;
 +
    background-color: white;
 +
    border: 4px solid #FF9F55;
 +
    top: 53px;
 +
    border-radius: 50%;
 +
    z-index: 1;
 +
}
 +
 +
/* Place the container to the left */
 +
.left {
 +
    left: 0;
 +
}
 +
 +
/* Place the container to the right */
 +
.right {
 +
    left: 50%;
 +
}
 +
 +
/* Add arrows to the left container (pointing right) */
 +
.left::before {
 +
    content: " ";
 +
    height: 0;
 +
    position: absolute;
 +
    top: 22px;
 +
    width: 0;
 +
    z-index: 1;
 +
    right: 30px;
 +
    border: medium solid white;
 +
    border-width: 10px 0 10px 10px;
 +
    border-color: transparent transparent transparent white;
 +
}
 +
 +
/* Add arrows to the right container (pointing left) */
 +
.right::before {
 +
    content: " ";
 +
    height: 0;
 +
    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 */
 +
.right::after {
 +
    left: -12px;
 +
}
 +
 +
/* Fix the circle for containers on the right side */
 +
.left::after {
 +
    right: -12px;
 +
}
 +
 +
/* The actual content */
 +
.content {
 +
    padding: 20px 30px;
 +
    background-color: #fae7e7;
 +
    position: relative;
 +
    border-radius: 6px;
 +
}
 +
 +
/* Media queries - Responsive timeline on screens less than 600px wide */
 +
@media all and (max-width: 600px) {
 +
  /* Place the timelime to the left */
 +
  .timeline::after {
 +
    left: 31px;
 +
  }
 +
 
 +
  /* Full-width containers */
 +
  .container {
 +
    width: 100%;
 +
    padding-left: 70px;
 +
    padding-right: 25px;
 +
  }
 +
 
 +
  /* 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;
 +
  }
 +
 +
  /* Make sure all circles are at the same spot */
 +
  .left::after, .right::after {
 +
    left: 15px;
 +
  }
 +
 
 +
  /* Make all right containers behave like the left ones */
 +
  .right {
 +
    left: 0%;
 +
  }
 +
}
 
</style>
 
</style>
 
</body>
 
</body>
Line 124: Line 265:
 
   </div>
 
   </div>
 
</div>
 
</div>
−
 
−
 
 
−
 
−
 
−
 
  
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 14:47, 29 October 2017

ICT-Mumbai 2017