Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Create a Fullscreen Slider with CSS

Posted by Ary de Oliveira
Ary de Oliveira
28,298 Points

CSS

Create a Fullscreen Slider with CSS with David Conner:

Hi David Conner I followed your tool-box about the fullscreen slider," not that I want to paste your work", but I tried in various ways. I personally typed the code, pasted from codepen, and in my platform but not work... My question following what secret?

Your final product was fantastic, but here not work !!!

Thank you,

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Can you let us know what browser and operating system you're using, and then share a Workspace Snapshot of your code?

4 Answers

Ary de Oliveira
Ary de Oliveira
28,298 Points 
@import url(http://fonts.googleapis.com/css?family=Audiowide);
//mixins
@mixin bp($bp, $min-max: min-width) {
    $em: $bp/16;
    @media(#{$min-max}: #{$em}em) {
        @content;
    }
}

html {
    box-sizing: border-box;
    font-family: Arial, sans-serif;
    font-size: 16px; 
    font-weight: normal;
    line-height: 1.4;
}

*,
*:before,
*:after  { box-sizing: inherit; }

h1 { 
    color: #fff;
    font-family: "Audiowide", cursive;
    font-size: 2em;
    font-size: 6vw;
    line-height: 1.2;
    margin: 0.5em 0 3em;
    text-shadow: 1px 1px 1px #333;
}

@include bp(1075) { h1 { font-size: 4em; } }

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.wrap {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #120103;
    color: #fff;
    text-align: center;
}

header {
    background: #3E474F;
    box-shadow: 0 .5em 1em #111;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;

    label {
        color: #788188;
        cursor: pointer;
        display: inline-block;
        line-height: 4.25em;
        font-size: .75em;
        font-weight: bold;
        padding: 0 1em;
    }
}

header label:hover {
    background: #2e353b;
}

.slide {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 10;
    padding:  8em 1em 0;
    background-color: #120103;
    background-position: 50% 50%;
    background-size: cover;
    transition: left 0s .75s;        

    &-one { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/65463/starryFarm.jpg'); }

    &-two { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/65463/campusDarkDays.jpg'); }

    &-three { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/65463/autumn.jpg'); }

    &-four { background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/65463/lakehouse.jpg'); }

    h1 {
        opacity: 0;
        transform: translateY(100%);
        transition: transform .5s .5s, opacity .5s;
    }
}

[id^="slide"]:checked + .slide {
    left: 0;
    z-index: 100;
    transition: left .65s ease-out;

    & h1 {
        opacity: 1;
        transform: translateY(0);
        transition: all .5s .5s;
    }
}
Alan McClenaghan
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Alan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,501 Points
Alan McClenaghan
.a{fill-rule:evenodd;}techdegree seal-36
Alan McClenaghan
Full Stack JavaScript Techdegree Graduate 56,501 Points

Hi,

I forked this to Workspaces and I was encountering problems with the horizontal.css file not working.

When I cut and pasted the css into the head of the html, I noticed that the horizontal styles were now working but the style.css was not working. It was then that I noticed that the links had the CSS folder in capitasl:

<link rel="stylesheet" href="CSS/style.css"/> <link rel="stylesheet" href="CSS/horizontal.css"/>

It's subtle and not obvious to spot but was easy to resolve by changing CSS to css.

I hope this will help save some frustration.

Tania Romano
Tania Romano
2,000 Points
Tania Romano
Tania Romano
2,000 Points

I had the same problem. I even watched the video three times to check if I was doing everything right. Turns out this was the problem all along.

Thanks!

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

i am safari macbook pro 17 version 10.11.1.beta i got corm too , the code no work in anyway,

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

I typed the code again, but did not work. copied from codepen, did not work. I have the impression that this code taking pictures of my screen, when changes anything it takes screen shot.