Difference between revisions of "Team:IIT Delhi/labs"
| Line 1,250: | Line 1,250: | ||
<style> | <style> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| Line 1,604: | Line 1,474: | ||
<meta name="description" content="" /> | <meta name="description" content="" /> | ||
<meta name="keywords" content="" /> | <meta name="keywords" content="" /> | ||
| − | + | <style> | |
| + | <!-- --> | ||
| + | * { | ||
| + | box-sizing: border-box; | ||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | /* The actual timeline (the vertical ruler) */ | ||
| + | .timeline1 { | ||
| + | position: relative; | ||
| + | max-width: 1200px; | ||
| + | margin: 0 auto; | ||
| + | } | ||
| + | |||
| + | /* The actual timeline (the vertical ruler) */ | ||
| + | .timeline1::after { | ||
| + | content: ''; | ||
| + | position: absolute; | ||
| + | width: 6px; | ||
| + | background-color: white; | ||
| + | top: 0; | ||
| + | bottom: 0; | ||
| + | left: 50%; | ||
| + | margin-left: -3px; | ||
| + | } | ||
| + | |||
| + | /* Container around content */ | ||
| + | .container1 { | ||
| + | padding: 10px 40px; | ||
| + | position: relative; | ||
| + | background-color: inherit; | ||
| + | width: 50%; | ||
| + | } | ||
| + | |||
| + | /* The circles on the timeline */ | ||
| + | .container1::after { | ||
| + | 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 */ | ||
| + | .left1 { | ||
| + | left: 0; | ||
| + | } | ||
| + | |||
| + | /* Place the container to the right */ | ||
| + | .right1 { | ||
| + | left: 50%; | ||
| + | } | ||
| + | |||
| + | /* Add arrows to the left container (pointing right) */ | ||
| + | .left1::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) */ | ||
| + | .right1::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 */ | ||
| + | .right1::after { | ||
| + | left: -16px; | ||
| + | } | ||
| + | |||
| + | /* The actual content */ | ||
| + | .content1 { | ||
| + | padding: 20px 30px; | ||
| + | background-color: white; | ||
| + | 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 */ | ||
| + | .container1 { | ||
| + | width: 100%; | ||
| + | padding-left: 70px; | ||
| + | padding-right: 25px; | ||
| + | } | ||
| + | |||
| + | /* Make sure that all arrows are pointing leftwards */ | ||
| + | .container1::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 */ | ||
| + | .left1::after, .right1::after { | ||
| + | left: 15px; | ||
| + | } | ||
| + | |||
| + | /* Make all right containers behave like the left ones */ | ||
| + | .right1 { | ||
| + | left: 0%; | ||
| + | } | ||
| + | </style> | ||
<script> | <script> | ||
/* | /* | ||
Revision as of 20:38, 29 October 2017
march
Lorem ipsum..
april
Lorem ipsum..
may
Lorem ipsum..
june
Lorem ipsum..
july
Lorem ipsum..
august
Lorem ipsum..
september
Lorem ipsum..
october
Lorem ipsum..
