PHP Classes

File: styles/slider.css

Recommend this page to a friend!
  Classes of Ann   Purp Project   styles/slider.css   Download  
File: styles/slider.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Purp Project
Application to manage photo albums
Author: By
Last change: Update of styles/slider.css
Date: 1 year ago
Size: 2,220 bytes
 

Contents

Class file image Download
.rotating-slider-container { position: absolute; width: 100%; height: 500px; margin: 20px 200px; overflow: hidden; } .rotating-slider{ margin: 40px auto 0 auto; position: relative; } .rotating-slider ul.direction-controls { list-style: none; margin: 0; padding: 0; position: absolute; bottom: -90px; display: flex; width: 100%; justify-content: center; } .rotating-slider ul.direction-controls li button{ background: rgba(138, 60, 161, 0.8); border: none; outline: none; color: white; cursor: pointer; font-size: 40px; font-weight: bold; height: 60px; width: 60px; padding-bottom: 6px; text-align: center; transition: background 0.35s; } .rotating-slider ul.direction-controls li button:hover{ background: rgba(125, 54, 146, 0.8); } .rotating-slider ul.direction-controls li.left-arrow button{ border-radius: 100% 0 0 100%; } .rotating-slider ul.direction-controls li.right-arrow button{ border-radius: 0 100% 100% 0; } .rotating-slider ul.slides { border-radius: 50%; height: 100%; margin: 0; overflow: hidden; padding: 0; position: relative; top: 0; left: 50%; transform: translateX(-50%) rotate(0); transform-origin: center center; width: 100%; /* text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.7); */ color: #FFF; font-family: 'Century Gothic'; font-weight: bold; } .rotating-slider ul.slides .slide-inner { /* position: absolute; */ margin-top: 15%; bottom: 80px; right: 190px; } .rotating-slider ul.slides .slide-inner div { font-size: 36px; text-transform: uppercase; } .rotating-slider ul.slides .slide-inner p { font-size: 22px; margin-top: 10px; } .rotating-slider ul.slides li{ background-color: #ecf0f1; background-position: center; background-size: cover; display: block; list-style: none; position: absolute; top: 0; left: 50%; text-align: center; transform-origin: bottom center; width: 100%; box-sizing: content-box; }