<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>
<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/learn-sass/projects/sass-bar-chart
<In what way does your code behave incorrectly? Include ALL error messages.>
The bars are not showing up in the browser. What’s going wrong? Similar thing happened in the last project. Getting no support from Codecademy team so far despite paying for pro.
index.html
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<h1>Top Ten Most Produced Foods in the World, by Tonnes</h1>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
<rect></rect>
</body>
main.scss
```
$top-foods: (“Sugar Cane” 1898),
(“Corn” 1017),
(“Rice” 738),
(“Wheat” 711),
(“Cow Milk” 635),
(“Potatoes” 374),
(“Vegetables” 279),
(“Soy Beans” 278),
(“Cassava” 263),
(“Sugar Beets” 247);
@each $food, $tons-produced in $top-foods{
$i: index($top-foods,($food $tons-produced))
rect:nth-child(#{$i + 1}) {
height: #{$tons-produced} / 3px;
@if($i % 2 == 0){
color: fade-out($sea-green, $i5/100);
}
@else if($i % 3 == 0){
color: fade-out($pale-green, $i5/100);
}
@else{
background-color: fade-out($diamond-blue, $i*5/100);
}
&:before {
content: $food;
}
&:after {
content : $tons-produced + “m”;
}
}
}
$diamond-blue: rgba(0, 159, 255, .6);
$sea-green: rgba(10, 165, 153, .6);
$pale-green: rgba(167, 240, 213, .6);
h1 {
font-family: ‘Montserrat’, sans-serif;
font-size: 18px;
padding-bottom: 20px;
color: #434444;
}
span {
display: block;
}
rect {
width: 24px;
float: left;
padding-left: 25px;
padding-top: 7px;
white-space: nowrap;
word-break: break-all;
position: relative;
bottom: 0px;
font-size: 12px;
color: #707070;
font-family: ‘Montserrat’, sans-serif;
&:before {
display: inline-block;
-webkit-transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
&:after {
position: absolute;
top: -15px;
left: 0px;
}
}
<do not remove the three backticks above>