Line 2: | Line 2: | ||
{{Queens Canada/Navbar}} | {{Queens Canada/Navbar}} | ||
<html> | <html> | ||
+ | |||
+ | <head> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<style> | <style> | ||
+ | |||
+ | |||
+ | * { | ||
+ | box-sizing: border-box; | ||
+ | } | ||
+ | |||
+ | /* Create two equal columns that floats next to each other */ | ||
+ | .columns { | ||
+ | float: left; | ||
+ | width: 35%; /*Pros and Cons next to each other, within content*/ | ||
+ | padding: 10px; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | /* Clear floats after the columns */ | ||
+ | .row:after { | ||
+ | content: ""; | ||
+ | display: table; | ||
+ | clear: both; | ||
+ | } | ||
+ | |||
body { | body { | ||
background-color: white; | background-color: white; | ||
+ | font-family: Helvetica, sans-serif; | ||
+ | margin-top: 50px; | ||
max-width: 1200px; | max-width: 1200px; | ||
position: relative; | position: relative; | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
− | |||
} | } | ||
+ | |||
+ | /* The actual timeline (the vertical ruler) */ | ||
+ | .timeline { | ||
+ | max-width: 1200px; | ||
+ | position: relative; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | } | ||
+ | |||
+ | /* The actual timeline (the vertical ruler) */ | ||
+ | .timeline::after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | 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: white; | ||
+ | width: 50%; | ||
+ | } | ||
+ | |||
+ | /* The circles on the timeline | ||
+ | .container::after { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | left: 50%; | ||
+ | width: 25px; | ||
+ | height: 25px; | ||
+ | background-color: blue; | ||
+ | border: 4px solid #2ECC71; | ||
+ | top: 15px; | ||
+ | border-radius: 50%; | ||
+ | z-index: 1; | ||
+ | }*//*out for now*/ | ||
+ | |||
+ | /* Place the container to the left */ | ||
+ | .left { | ||
+ | left: -25%; | ||
+ | } | ||
+ | |||
+ | /* Place the container to the right */ | ||
+ | .right { | ||
+ | left: 25%; | ||
+ | } | ||
+ | |||
+ | /* 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 blue; | ||
+ | } | ||
+ | |||
+ | /* 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 blue transparent transparent; | ||
+ | } | ||
+ | |||
+ | /* Fix the circle for containers on the right side */ | ||
+ | .right::after { | ||
+ | left: -16px; | ||
+ | } | ||
+ | |||
+ | /* The actual content */ | ||
+ | .content { | ||
+ | padding: 20px 30px; | ||
+ | background-color: #2ECC71; | ||
+ | position: relative; | ||
+ | border-radius: 6px; | ||
+ | } | ||
+ | |||
+ | /* Media queries - Responsive timeline on screens less than 600px wide */ | ||
+ | @media screen and (max-width: 600px) { | ||
+ | /* Place the timelime to the left */ | ||
+ | .timeline::after { | ||
+ | left: 31px; | ||
+ | } | ||
+ | |||
+ | /* Full-width containers */ | ||
+ | .container { | ||
+ | width: 100%; | ||
+ | padding-left: 5px; | ||
+ | padding-right: 25px; | ||
+ | } | ||
+ | |||
+ | /* Make sure that all arrows are pointing leftwards */ | ||
+ | .container::before { | ||
+ | left: 10px; | ||
+ | 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> | ||
+ | </head> | ||
<body> | <body> | ||
− | <p> | + | <h1>Community Engagement</h1> |
+ | |||
+ | <div class="timeline"> | ||
+ | <div class="container left"> | ||
+ | <div class="content"> | ||
+ | <h2>Science Rendezvous</h2> | ||
+ | <p> intrigued.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="container right"> | ||
+ | <div class="content"> | ||
+ | <h2>Some pictures from the event</h2> | ||
+ | <p></p> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/a/a5/T--Queens_Canada--ScienceRendezvous1.jpeg" width=70% height=70% /> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/f/f2/T--Queens_Canada--ScienceRendezvous2.jpeg" width=70% height=70% /> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/e/e8/T--Queens_Canada--ScienceRendezvous3.jpeg" width=70% height=70% /> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="container left"> | ||
+ | <div class="content"> | ||
+ | <h2>CUTC</h2> | ||
+ | <p>QGEM</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="container right"> | ||
+ | <div class="content"> | ||
+ | <h2>Heading 4</h2> | ||
+ | <p>Text.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="container left"> | ||
+ | <div class="content"> | ||
+ | <h2>Heading 5</h2> | ||
+ | <p>Text.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="container right"> | ||
+ | <div class="content"> | ||
+ | <h2>Heading 6</h2> | ||
+ | <p>Text.</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 23:16, 28 July 2018
Community Engagement
Science Rendezvous
intrigued.
Some pictures from the event
CUTC
QGEM
Heading 4
Text.
Heading 5
Text.
Heading 6
Text.