Skip to content

Instantly share code, notes, and snippets.

@cliftoncanady
Created December 4, 2014 20:52
Show Gist options
  • Save cliftoncanady/08ff711a5c0d2fe662ef to your computer and use it in GitHub Desktop.
Save cliftoncanady/08ff711a5c0d2fe662ef to your computer and use it in GitHub Desktop.
CSS: Skippr Slider
.hero {
width: 100%;
height: 80%;
min-height: 500px;
position: relative; }
.hero .container {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
z-index: 999; }
.hero .tagline {
//font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
letter-spacing: -3px;
width: 40%;
padding: 8% 0 0 0;
float: left;
color: white; }
.hero .tagline p {
font-size: 1.1rem;
line-height: 1.1rem;
margin-top: 10px; }
@media (max-width: 1450px) {
.hero .tagline p {
font-size: 1.8rem;
line-height: 1.8rem;
letter-spacing: -2px; } }
@media (max-width: 600px) {
.hero .tagline p {
font-size: 1.9rem; } }
.hero .tagline h1 {
font-weight: bold;
font-size: 2rem;
letter-spacing: -0.25rem;
line-height: 2rem; }
@media (max-width: 1450px) {
.hero .tagline h1 {
font-size: 3rem;
line-height: 3rem; } }
@media (max-width: 1450px) {
.hero .tagline {
padding: 9% 0 0 0; } }
@media (max-width: 800px) {
.hero .tagline {
float: none;
width: 100%;
margin-bottom: 70px; } }
.hero .downloads {
float: right;
width: 40%;
color: white;
//font-family: "Helvetica Neue", "HelveticaNeue", "Helvetica-Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
letter-spacing: -1px;
font-size: 1.5rem;
height: 100%;
position: relative; }
.hero .downloads .btn-container {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%; }
.hero .downloads .btn-container .btn {
float: right;
text-align: center;
margin-left: 20px; }
@media (max-width: 800px) {
.hero .downloads .btn-container .btn {
float: left;
margin: 20px 20px 0 0; } }
@media (max-width: 800px) {
.hero .downloads {
float: none;
width: 100%;
height: auto; } }
@cliftoncanady
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment