S.a.s.s 5/9 - Stuck


#1



5/9 - In main.scss, nest the following properties inside of .banner:

border : {
top: 4px solid black;
bottom: 4px solid black;
}

Error message:
expected div.banner to have its border-bottom style equal to 4px solid black but got 0px none #000000


@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:

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: 4px solid black;
  	top: 200px;
  	left: 25%;
  	width: 50%;
  	height: 200px;
    
    span {
  		position: absolute;
  		text-align: center;
  		line-height: 200px; 
		} // span
    
    border : {
    top: 4px solid black;
    bottom: 4px solid black;
		}
    
	} // slogan
} // banner

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

The error says I defined the border-bottom as 0px none #000000 (which any of these are nowhere to be found), while it's clearly defined as 4px solid black. How can I move forward or what am I supposed to do?

Even when I change the code to look like the span div it doesn't work

border {
top: 4px solid black;
bottom: 4px solid black; }


#2

So I found the solution for my own problem. Found out I was copying the code at the wrong place.

@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:

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

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

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

#3

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