Difference between revisions of "Team:Queens Canada/Market"
| Line 2: | Line 2: | ||
{{Queens Canada/Navbar}} | {{Queens Canada/Navbar}} | ||
<html> | <html> | ||
| − | |||
| − | |||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<style> | <style> | ||
| − | |||
| − | |||
* { | * { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| Line 13: | Line 9: | ||
body { | body { | ||
| − | background-color: | + | background-color: #474e5d; |
font-family: Helvetica, sans-serif; | font-family: Helvetica, sans-serif; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
/* The actual timeline (the vertical ruler) */ | /* The actual timeline (the vertical ruler) */ | ||
.timeline { | .timeline { | ||
| + | position: relative; | ||
max-width: 1200px; | max-width: 1200px; | ||
| − | + | margin: 0 auto; | |
| − | + | ||
| − | margin | + | |
} | } | ||
| Line 35: | Line 25: | ||
position: absolute; | position: absolute; | ||
width: 6px; | width: 6px; | ||
| − | background-color: | + | background-color: white; |
top: 0; | top: 0; | ||
bottom: 0; | bottom: 0; | ||
| Line 46: | Line 36: | ||
padding: 10px 40px; | padding: 10px 40px; | ||
position: relative; | position: relative; | ||
| − | background-color: | + | background-color: inherit; |
width: 50%; | width: 50%; | ||
} | } | ||
| − | /* The circles on the timeline*/ | + | /* The circles on the timeline */ |
.container::after { | .container::after { | ||
content: ''; | content: ''; | ||
position: absolute; | position: absolute; | ||
| − | |||
width: 25px; | width: 25px; | ||
height: 25px; | height: 25px; | ||
| − | background-color: | + | right: -17px; |
| − | border: 4px solid # | + | background-color: white; |
| + | border: 4px solid #FF9F55; | ||
top: 15px; | top: 15px; | ||
border-radius: 50%; | border-radius: 50%; | ||
z-index: 1; | z-index: 1; | ||
| − | } | + | } |
/* Place the container to the left */ | /* Place the container to the left */ | ||
.left { | .left { | ||
| − | left: | + | left: 0; |
} | } | ||
/* Place the container to the right */ | /* Place the container to the right */ | ||
.right { | .right { | ||
| − | left: | + | left: 50%; |
} | } | ||
/* Add arrows to the left container (pointing right) */ | /* Add arrows to the left container (pointing right) */ | ||
| − | .left::before { | + | .left::before { |
content: " "; | content: " "; | ||
height: 0; | height: 0; | ||
| Line 85: | Line 75: | ||
border: medium solid white; | border: medium solid white; | ||
border-width: 10px 0 10px 10px; | border-width: 10px 0 10px 10px; | ||
| − | border-color: transparent transparent transparent | + | border-color: transparent transparent transparent white; |
} | } | ||
| Line 99: | Line 89: | ||
border: medium solid white; | border: medium solid white; | ||
border-width: 10px 10px 10px 0; | border-width: 10px 10px 10px 0; | ||
| − | border-color: transparent | + | border-color: transparent white transparent transparent; |
} | } | ||
| Line 110: | Line 100: | ||
.content { | .content { | ||
padding: 20px 30px; | padding: 20px 30px; | ||
| − | background-color: | + | background-color: white; |
position: relative; | position: relative; | ||
border-radius: 6px; | 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 */ | /* Full-width containers */ | ||
.container { | .container { | ||
width: 100%; | width: 100%; | ||
| − | padding-left: | + | padding-left: 70px; |
padding-right: 25px; | padding-right: 25px; | ||
} | } | ||
| Line 125: | Line 121: | ||
/* Make sure that all arrows are pointing leftwards */ | /* Make sure that all arrows are pointing leftwards */ | ||
.container::before { | .container::before { | ||
| − | left: | + | left: 60px; |
border: medium solid white; | border: medium solid white; | ||
border-width: 10px 10px 10px 0; | border-width: 10px 10px 10px 0; | ||
| Line 137: | Line 133: | ||
/* Make all right containers behave like the left ones */ | /* Make all right containers behave like the left ones */ | ||
| − | .right { | + | .right { |
left: 0%; | left: 0%; | ||
} | } | ||
} | } | ||
| − | |||
</style> | </style> | ||
</head> | </head> | ||
Revision as of 17:03, 8 August 2018
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.