Difference between revisions of "Template:TPHS San Diego"

Line 228: Line 228:
 
     display: inline-block;
 
     display: inline-block;
 
}
 
}
 +
 +
slider {
 +
                display:block;
 +
                width:100%;
 +
                height:100%;
 +
                background-color:#1f1f1f;
 +
                overflow:hidden;
 +
                position:absolute;
 +
            }
 +
           
 +
            slider > * {
 +
                position:absolute;
 +
                display:block;
 +
                width:100%;
 +
                height:100%;
 +
                background:#1f1f1f;
 +
                animation: slide 12s infinite;
 +
                overflow:hidden;
 +
            }
 +
           
 +
            slide:nth-child(1){
 +
                left:0%;
 +
                animation-delay: -1s;
 +
                background-image: url("https://i.pinimg.com/originals/fc/37/f9/fc37f9b7711cf1f5da4953657067c17d.jpg");
 +
                background-size:cover;
 +
                background-position:center;
 +
            }
 +
           
 +
            slide:nth-child(2){
 +
                left:0%;
 +
                animation-delay: 2s;
 +
                background-image: url("https://i.pinimg.com/originals/64/7c/ad/647cad975f25bcbeafbd555d3a410730.jpg");
 +
                background-size:cover;
 +
                background-position:center;
 +
            }
 +
           
 +
            slide:nth-child(3){
 +
                animation-delay: 5s;
 +
                background-image: url("https://easylife-online.com/wp-content/uploads/data/2018/1/10/best-cool-scenery-nature-best-hd-wallpaper-PIC-WSW2094197.jpg");
 +
                background-size:cover;
 +
                background-position:center;
 +
            }
 +
           
 +
            slide:nth-child(4){
 +
                left:0%;
 +
                animation-delay: 8s;
 +
                background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSSaGlQQUA9Fnsxymdw7dknUxYLkVjUa4_LE0niwwc0TlyNZJiP");
 +
                background-size:cover;
 +
                background-position:center;
 +
            }
 +
           
 +
            slide p {
 +
                font-family:Comfortaa;
 +
                font-size:70px;
 +
                text-align:center;
 +
                display:inline-block;
 +
                width:100%;
 +
                margin-top:340px;
 +
                color:#fff;
 +
            }
 +
           
 +
            @keyframes slide {
 +
                0% {left: 100%; width:100%;}
 +
                5% {left: 0%; }
 +
                25% {left: 0%;}
 +
                30%{left :-100%; width:100%;}
 +
                30.001%{left:-100%; width:0%;}
 +
                100% {left:100%; width:0%;}
 +
            }
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 23:34, 13 October 2018