SASS Lesson 8


#1




I have tried everything to get past this. I've mangled, reconstructed, then mangled again all of my code. I keep getting this error.

Did you add a border of 4px solid inside a variable to .slogan, and to .banner top and bottom borders?

I've checked the output, it's correct. It's being transpiled correctly, but the validation is failing and for the life of me I can't figure out why.


@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:
$icon-square-length: 300px;

$standard-border: 4px solid black;


h1 {
  font-family: Roboto, sans-serif;
  text-align: center;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url("lemonade.jpg");
  .slogan {
    position: absolute;
    border: $standard-border;
    top: 200px;
    left: 25%;
    width: 50%;
    height: 200px;
    text-align: center;
    span {
      font-size: 24px;
      line-height: 200px;
    }
	}
  border : {
    top: $standard-border;
    bottom: $standard-border;
	}
}

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
  .icon {
    display: inline-block;
    margin: 2%;
    border: 4px solid black;
    font-size: 32px;
    width: $icon-square-length;
		height: $icon-square-length;
	}
}


#2

So this is what worked for me and why:

.banner {
font-family: 'Pacifico', cursive;
height: 400px;
background-image: url("lemonade.jpg");
border : {
top: $standard-border;
bottom: $standard-border;
}
}

The reason being is that the error stated that the top and bottom borders were inside .banner so I changed the code accordingly.


#3

Nope. Still not working for me. And I still can't get the code, either.

Could someone possibly just post the code that worked for you? I'm obviously encountering some strange validation problem.


#4

type a new line of code inside the .slogan,

border: $standard-border;

it worked for me


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.