|
|
| Line 453: |
Line 453: |
| | .image_box{ | | .image_box{ |
| | overflow: hidden; | | overflow: hidden; |
| − | }
| |
| − |
| |
| − | /* define slider box */
| |
| − | div#slider {
| |
| − | width: 60%;
| |
| − | max-width: 1000px;
| |
| − | overflow: hidden;
| |
| − | margin: 0 auto;
| |
| − | border: 3px solid #c1002a;
| |
| − | border-radius: 30px 60px;
| |
| − | }
| |
| − |
| |
| − | div#slider figure{
| |
| − | position: relative;
| |
| − | width: 500%;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | font-size: 0;
| |
| − | text-align: left;
| |
| − | }
| |
| − |
| |
| − | div#slider figure img{
| |
| − | width: 20%;
| |
| − | height: auto;
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − | /* animate slider */
| |
| − | @keyframes slidy {
| |
| − | 0% { left: 0%; }
| |
| − | 20% { left: 0%; }
| |
| − | 25% { left: -100%; }
| |
| − | 45% { left: -100%; }
| |
| − | 50% { left: -200%; }
| |
| − | 70% { left: -200%; }
| |
| − | 75% { left: -300%; }
| |
| − | 95% { left: -300%; }
| |
| − | 100% { left: -400%; }
| |
| − | }
| |
| − |
| |
| − | div#slider figure {
| |
| − | left: 0;
| |
| − | text-align: left;
| |
| − | animation: 30s slidy infinite;
| |
| − | }
| |
| − |
| |
| − | /* ##### define images with caption ##### */
| |
| − |
| |
| − | .flexbox{
| |
| − | display: flex;
| |
| − | flex-direction: row;
| |
| − | margin: 10px 0;
| |
| | } | | } |
| | | | |