Difference between revisions of "Team:Queens Canada/Market"
| Line 2: | Line 2: | ||
{{Queens Canada/Navbar}} | {{Queens Canada/Navbar}} | ||
<html> | <html> | ||
| − | < | + | <head> |
<style> | <style> | ||
* { | * { | ||
| Line 8: | Line 8: | ||
} | } | ||
| − | |||
body { | body { | ||
| − | + | background-color: white; | |
| − | + | max-width: 1200px; | |
| + | position: relative; | ||
| + | margin-left: auto; | ||
| + | margin-right: auto; | ||
} | } | ||
/* The actual timeline (the vertical ruler) */ | /* The actual timeline (the vertical ruler) */ | ||
.timeline { | .timeline { | ||
| − | + | position: relative; | |
| − | + | max-width: 1200px; | |
| − | + | margin: 0 auto; | |
} | } | ||
/* The actual timeline (the vertical ruler) */ | /* The actual timeline (the vertical ruler) */ | ||
.timeline::after { | .timeline::after { | ||
| − | + | content: ''; | |
| − | + | position: absolute; | |
| − | + | width: 6px; | |
| − | + | background-color: white; | |
| − | + | top: 0; | |
| − | + | bottom: 0; | |
| − | + | left: 50%; | |
| − | + | margin-left: -3px; | |
} | } | ||
/* Container around content */ | /* Container around content */ | ||
.container { | .container { | ||
| − | + | padding: 10px 40px; | |
| − | + | position: relative; | |
| − | + | background-color: inherit; | |
| − | + | width: 50%; | |
} | } | ||
/* The circles on the timeline */ | /* The circles on the timeline */ | ||
.container::after { | .container::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 */ | /* Place the container to the left */ | ||
.left { | .left { | ||
| − | + | left: 0; | |
} | } | ||
/* Place the container to the right */ | /* Place the container to the right */ | ||
.right { | .right { | ||
| − | + | left: 50%; | |
} | } | ||
/* Add arrows to the left container (pointing right) */ | /* Add arrows to the left container (pointing right) */ | ||
.left::before { | .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) */ | /* Add arrows to the right container (pointing left) */ | ||
.right::before { | .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 */ | /* Fix the circle for containers on the right side */ | ||
.right::after { | .right::after { | ||
| − | + | left: -16px; | |
} | } | ||
/* The actual content */ | /* The actual content */ | ||
.content { | .content { | ||
| − | + | padding: 20px 30px; | |
| − | + | background-color: white; | |
| − | + | position: relative; | |
| − | + | border-radius: 6px; | |
} | } | ||
| − | /* Full-width containers */ | + | /* 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 { | .container { | ||
width: 100%; | width: 100%; | ||
| Line 112: | Line 121: | ||
padding-right: 25px; | padding-right: 25px; | ||
} | } | ||
| − | + | ||
| − | /* Make sure that all arrows are pointing leftwards */ | + | /* Make sure that all arrows are pointing leftwards */ |
.container::before { | .container::before { | ||
left: 60px; | left: 60px; | ||
| Line 121: | Line 130: | ||
} | } | ||
| − | /* Make sure all circles are at the same spot */ | + | /* Make sure all circles are at the same spot */ |
.left::after, .right::after { | .left::after, .right::after { | ||
left: 15px; | left: 15px; | ||
} | } | ||
| − | + | ||
| − | /* Make all right containers behave like the left ones */ | + | /* Make all right containers behave like the left ones */ |
.right { | .right { | ||
left: 0%; | left: 0%; | ||
| Line 135: | Line 144: | ||
<body> | <body> | ||
| + | |||
| + | <div class="timeline"> | ||
| + | <div class="container left"> | ||
| + | <div class="content"> | ||
| + | <h2>2017</h2> | ||
| + | <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="container right"> | ||
| + | <div class="content"> | ||
| + | <h2>2016</h2> | ||
| + | <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="container left"> | ||
| + | <div class="content"> | ||
| + | <h2>2015</h2> | ||
| + | <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="container right"> | ||
| + | <div class="content"> | ||
| + | <h2>2012</h2> | ||
| + | <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="container left"> | ||
| + | <div class="content"> | ||
| + | <h2>2011</h2> | ||
| + | <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | <div class="container right"> | ||
| + | <div class="content"> | ||
| + | <h2>2007</h2> | ||
| + | <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
<div class="timeline"> | <div class="timeline"> | ||
Revision as of 17:18, 8 August 2018
2017
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2016
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2015
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2012
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2011
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2007
Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.
2017
Lorem ipsum..
2016
Lorem ipsum..
Heading
Use by parents to monitor child’s stress levels and general well-being
Useful in the early detection of illness & Prevention of Sudden Infant Death Syndrome
Will lead to more anxiety on the parental end
Use by adults for quantitative self care
Difficulty in differentiating between what is normal and what is a cause of concern.
Insurance privacy concerns
QGEM
QGEM
Heading 4
Text.
Heading 5
Text.
Heading 6
Text.
Heading 5
Text.
Heading 6
Text.