Hayley jesse (Talk | contribs) (Undo revision 20782 by Hayley jesse (talk)) |
Hayley jesse (Talk | contribs) (Undo revision 20781 by Hayley jesse (talk)) |
||
Line 405: | Line 405: | ||
</style> | </style> | ||
+ | @Image Slider CSS3 { | ||
+ | 0% { | ||
+ | Left: 0; | ||
+ | } | ||
+ | |||
+ | 20% { | ||
+ | Left: 0; | ||
+ | } | ||
+ | |||
+ | |||
+ | 25% { | ||
+ | Left: -100%; | ||
+ | } | ||
+ | |||
+ | 45% { | ||
+ | Left: -100%; | ||
+ | |||
+ | } | ||
+ | |||
+ | 50% { | ||
+ | Left: -200%; | ||
+ | |||
+ | } | ||
+ | |||
+ | 70% { | ||
+ | Left: -200%; | ||
+ | } | ||
+ | |||
+ | 75% { | ||
+ | Left: -300%; | ||
+ | } | ||
+ | |||
+ | 95% { | ||
+ | Left: -400%; | ||
+ | } | ||
+ | |||
+ | 100% { | ||
+ | Left: -400%' | ||
+ | |||
+ | } | ||
+ | |||
+ | #slider { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | #slider figure img { | ||
+ | width:20%; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | #slider figure { | ||
+ | position: relative; | ||
+ | width: 500%; | ||
+ | margin: 0; | ||
+ | left: 0; | ||
+ | text-align: left; | ||
+ | font-size: 0; | ||
+ | animation: 20s slider infinite; | ||
+ | |||
+ | } | ||
Revision as of 18:24, 6 June 2017
@Image Slider CSS3 { 0% { Left: 0; } 20% { Left: 0; } 25% { Left: -100%; } 45% { Left: -100%; } 50% { Left: -200%; } 70% { Left: -200%; } 75% { Left: -300%; } 95% { Left: -400%; } 100% { Left: -400%' } #slider { overflow: hidden; } #slider figure img { width:20%; float: left; } #slider figure { position: relative; width: 500%; margin: 0; left: 0; text-align: left; font-size: 0; animation: 20s slider infinite; } /***************************************************** RESPONSIVE STYLING ****************************************************/ /* IF THE SCREEN IS LESS THAN 1200PX */ @media only screen and (max-width: 1200px) { #content {width:100%; } .igem_2017_menu_wrapper {width:15%; right:0;} .highlight {padding:10px 0px;} .igem_2017_menu_wrapper #display_menu_control { display:none; } #menu_content { display:block;} .menu_button.direct_to_page {padding-left: 17px;} } /* IF THE SCREEN IS LESS THAN 800PX */ @media only screen and (max-width: 800px) { .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;} .igem_2017_content_wrapper {width:100%; margin-left:0px;} .column.half_size {width:100%; } .column.full_size img, .column.half_size img { width: 100%; padding: 10px 0px;} .highlight {padding:15px 5px;} .igem_2017_menu_wrapper #display_menu_control { display:block; } #menu_content { display:none;} .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; } .menu_bottom_padding {display:none;} .menu_button.direct_to_page { padding-left: 36px; } } /* special class that the system uses to make sure the team wants a page to be evaluated */ .judges-will-not-evaluate { width: 96.6%; margin: 5px 15px; display: block; border: 4px solid #3399ff; font-weight: bold; }
}