Difference between revisions of "Team:Manchester/Description"

Line 9: Line 9:
  
  
−
<h1>Notable inventions, <span>1910–2000</span></h1>
+
<h1>Cases of Listeria Outbreaks, <span>2000-2017</span></h1>
 
<div class="flex-parent">
 
<div class="flex-parent">
 
<div class="input-flex-container">
 
<div class="input-flex-container">
Line 114: Line 114:
  
 
<style>
 
<style>
 +
 +
$numDots: 20
 +
$parentWidthBase: 0.8
 +
$parentWidth: $parentWidthBase * 100vw
 +
$parentMaxWidth: 1000px
 +
$dotWidth: 25px
 +
$dotWidthSm: 17px
 +
$active: #2C3E50
 +
$inactive: #AEB6BF
 +
 +
 +
html, body
 +
height: 100%
 +
body
 +
font-family: 'Quicksand', sans-serif
 +
font-weight: 500
 +
color: #424949
 +
background-color: #ECF0F1
 +
padding: 0 25px
 +
display: flex
 +
flex-direction: column
 +
position: relative
 +
h1
 +
text-align: center
 +
height: 38px
 +
margin: 60px 0
 +
span
 +
white-space: nowrap
 +
.flex-parent
 +
display: flex
 +
flex-direction: column
 +
justify-content: center
 +
align-items: center
 +
width: 100%
 +
height: 100%
 +
.input-flex-container
 +
display: flex
 +
justify-content: space-around
 +
align-items: center
 +
width: $parentWidth
 +
height: 100px
 +
max-width: $parentMaxWidth
 +
position: relative
 +
z-index: 0
 +
.input
 +
width: $dotWidth
 +
height: $dotWidth
 +
background-color: $active
 +
position: relative
 +
border-radius: 50%
 +
&:hover
 +
cursor: pointer
 +
&::before, &::after
 +
content: ''
 +
display: block
 +
position: absolute
 +
z-index: -1
 +
top: 50%
 +
transform: translateY(-50%)
 +
background-color: $active
 +
width: $parentWidth / $numDots
 +
height: 5px
 +
max-width: $parentMaxWidth / $numDots
 +
&::before
 +
left: calc(#{-$parentWidth / $numDots} + #{$dotWidth / 2})
 +
&::after
 +
right: calc(#{-$parentWidth / $numDots} + #{$dotWidth / 2})
 +
&.active
 +
background-color: $active
 +
&::before
 +
background-color: $active
 +
&::after
 +
background-color: $inactive
 +
span
 +
font-weight: 700
 +
&::before
 +
font-size: 13px
 +
&::after
 +
font-size: 15px
 +
&.active ~ .input
 +
&, &::before, &::after
 +
background-color: $inactive
 +
span
 +
width: 1px
 +
height: 1px
 +
position: absolute
 +
top: 50%
 +
left: 50%
 +
transform: translate(-50%, -50%)
 +
visibility: hidden
 +
&::before, &::after
 +
visibility: visible
 +
position: absolute
 +
left: 50%
 +
&::after
 +
content: attr(data-year)
 +
top: 25px
 +
transform: translateX(-50%)
 +
font-size: 14px
 +
&::before
 +
content: attr(data-info)
 +
top: -65px
 +
width: 70px
 +
transform: translateX(-5px) rotateZ(-45deg)
 +
font-size: 12px
 +
text-indent: -10px
 +
.description-flex-container
 +
width: $parentWidth
 +
font-weight: 400
 +
font-size: 22px
 +
margin-top: 100px
 +
max-width: $parentMaxWidth
 +
p
 +
margin-top: 0
 +
display: none
 +
&.active
 +
display: block
 +
 +
 +
@media (min-width: $parentMaxWidth / $parentWidthBase)
 +
.input::before
 +
left: #{-($parentMaxWidth / $numDots) + ($dotWidth / 2)}
 +
.input::after
 +
right: #{-($parentMaxWidth / $numDots) + ($dotWidth / 2)}
 +
@media (max-width: 850px)
 +
.input
 +
width: $dotWidthSm
 +
height: $dotWidthSm
 +
&::before, &::after
 +
height: 3px
 +
&::before
 +
left: calc(#{-$parentWidth / $numDots} + #{$dotWidthSm / 2})
 +
&::after
 +
right: calc(#{-$parentWidth / $numDots} + #{$dotWidthSm / 2})
 +
 +
 +
//MOBILE
 +
@media (max-width: 600px)
 +
.flex-parent
 +
justify-content: initial
 +
.input-flex-container
 +
flex-wrap: wrap
 +
justify-content: center
 +
width: 100%
 +
height: auto
 +
margin-top: 15vh
 +
.input
 +
width: 60px
 +
height: 60px
 +
margin: 0 10px 50px
 +
background-color: $inactive
 +
&::before, &::after
 +
content: none
 +
span
 +
width: 100%
 +
height: 100%
 +
display: block
 +
&::before
 +
top: calc(100% + 5px)
 +
transform: translateX(-50%)
 +
text-indent: 0
 +
text-align: center
 +
&::after
 +
top: 50%
 +
transform: translate(-50%, -50%)
 +
color: #ECF0F1
 +
.description-flex-container
 +
margin-top: 30px
 +
text-align: center
 +
 +
@media (max-width: 400px)
 +
body
 +
min-height: 950px //just so our links won't get in the way of our content
  
 
h1 {
 
h1 {

Revision as of 18:44, 18 September 2018

HOME
PROJECT
Project Description
Results
Collaborations
Cheese Making
WET LAB
InterLab
Experiments
Protocols
Lab Book
Parts
DRY LAB
Promoter Tool
Experimental Model
HUMAN PRACTICES
Intergrated Human Practices
Outreach
Burt's Cheese
Rokiškio sūris
News Feed Analysis
Gmo's and Brexit
European Commission
TEAM

Developing a Listeria monocytogenes
biosensor for soft cheeses

- Listeria Monocytogenes -

Cases of Listeria Outbreaks, 2000-2017

And future Call of Duty players would thank them.

Because every kid should get to be Tarzan for a day.

And the world rejoiced.

Because building roads is inconvenient.

Ain’t nobody got time to rake.

Because paper currency is for noobs.

Nobody likes cords. Nobody.

Brighter than glow memory.

To capitalize on an as-yet nascent market for cat photos.

Because organic search rankings take work.

What should this page contain?

  • A clear and concise description of your project.
  • A detailed explanation of why your team chose to work on this particular project.
  • References and sources to document your research.
  • Use illustrations and other visual resources to explain your project.

Inspiration

See how other teams have described and presented their projects:

Advice on writing your Project Description

We encourage you to put up a lot of information and content on your wiki, but we also encourage you to include summaries as much as possible. If you think of the sections in your project description as the sections in a publication, you should try to be concise, accurate, and unambiguous in your achievements.

References

iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you thought about your project and what works inspired you.