I’m stuck on the Sassy Parallax banner. This, and many exercises before it in the PRO full stack developer course, simply aren’t working. I use the hints, the hints show me exactly what I’ve already typed and I’m still getting error messages. I don’t even think SCSS is compiling to CSS. It looks like everyone else has had the same problem and no one has given a solution… this is incredibly frustrating. Can anybody help?
$parallax-height: 100vh;
$center-margin: 0px auto;
@mixin parallax-background($file) {
background: url($file) no-repeat center center fixed;
@include background-size(cover);
}
@mixin background-size($size) {
-webkit-background-size: $size;
-moz-background-size: $size;
-o-background-size: $size;
background-size: $size;
}
html, body {
margin: 0;
padding: 0;
font-family: Roboto;
color: #2e3738;
}
#landscape {
width: 100%;
height: $parallax-height;
perspective: 1px;
transform: translateZ(-1px);
overflow-x: hidden;
overflow-y: auto;
@include parallax-background("https://s3.amazonaws.com/codecademy-content/projects/sass/landscape.jpg");
}
#monkeys {
width: 100%;
height: $parallax-height;
perspective: 1px;
transform: translateZ(-1px);
overflow-x: hidden;
overflow-y: auto;
@include parallax-background("https://s3.amazonaws.com/codecademy-content/projects/sass/monkeys.jpg");
}
#landscape,
#monkeys {
}
h1{
text-transform: uppercase;
font-family: 'Bitter', serif;
letter-spacing: 0.06em;
font-size: 120px;
color: #FFF;
opacity: 0.7;
text-align: center;
transform: translateZ(-2px);
}
p {
width: 70%;
padding: 5%;
margin: $center-margin;
text-align: center;
font-size: 20px;
font-weight: 200;
line-height: 1.4;
}