Artes TCG

Artes TCG Site

Hover over or click on sections of code to see annotations!

.slider { margin:10px auto 0; } .slider img { width:100%; } .slider div { position:absolute; bottom:0; max-height:45%; padding:10px 15px 30px; background:hsla(0, 0%, 100%, 0.75); } This CSS was used to style the contents of the front page slider. This way, information contained within the slides are not lost as images and can be easily changed within the HTML.
.slider div h2 { font-size:1.2em; margin:0 0 5px; } .slider div p { float:left; width:90%; } This CSS styles the non-image content of the slider. Doing so this way allows the slider to be more responsive as the text is able to be easily adjusted to suit different viewport sizes without the need for different images for each size.
.slider div button { margin:0 0 0 3%; border:1px solid blue; border-radius:5px; width:7%; background:#3F72D8; } .slider div button a { display:inline-block; color:#fff; font-weight:bold; line-height:3em; width:100%; text-decoration:none; } This CSS styles the button that shows up in the slider's text area, allowing for the button to be easily customized without the need to create a new image every time a new button style is desired.