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 trialAry de Oliveira
28,298 PointsCSS
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,
4 Answers
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
Full Stack JavaScript Techdegree Graduate 56,501 PointsHi,
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
2,000 PointsI 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
28,298 Pointsi am safari macbook pro 17 version 10.11.1.beta i got corm too , the code no work in anyway,
Ary de Oliveira
28,298 PointsI 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.
Iain Simmons
Treehouse Moderator 32,305 PointsIain Simmons
Treehouse Moderator 32,305 PointsCan you let us know what browser and operating system you're using, and then share a Workspace Snapshot of your code?