Home>

)

What do I want to do

I'm working on the Progate Dojo course (intermediate), and there are places where CSS errors don't go away.
If i enter CSS as [background-color: # f7f7f7] like the first image, the 124th line will be an error, and the notation like the second image will appear.
No matter how many times I try, I get an error, and I wonder if the spelling is wrong, and even if I copy and paste the answer code, the error does not disappear and I cannot proceed to the next page.
I would like to know how to process it in order to officially execute it.

The code is shown below.
↓ HTML

code
1.<! DOCTYPE html>2.<html>3.<head>4.<meta charset = "utf-8">5.<title>Progate</title>6.<link rel = "stylesheet" href = "stylesheet.css">7.<!-Load Font Awesome here->8.<link rel = "stylesheet" href = "// maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">9.
Ten.
11. 11.
12.</head>13.<body>14.<!-Let's write the code here->15.<header>16. 17. 18.       19.
20. 21.  Login 22. 23. 24.</header>25. 26. 27.  LEARN TO CODE. 28.  LEARN TO BE CREATIVE. 29.<p>Progate is an online programming learning service.</p>30.<p>Learn programming while creating web services with beginner-friendly slides and lessons.</p>31.
32. 33.  Click here for new registration 34.<p>or</p>35. 36.<span></span>37. Register on Facebook 38. 39.<span></span>40. Register on Twitter 41.
42. 43. 44. 45. 46. ​​47. 48.  Learn Where to Get Started! 49. 50.
51.<dic>52. 53. 54. 55.<p>HTML&CSS</p>56. 57.<p>The language used to create web pages. You can create static pages by combining HTML and CSS.</p>58. 59.
60.
61. 62. 63. 64.<p>jQuery</p>65. 66.<p>A JavaScript library that allows you to easily implement nice movements. You can add animation effects, read external files using Ajax, and much more.</p>67. 68.
69. 70. 71. 72.<p>Ruby</p>73. 74.<p>An open source dynamic programming language that is simple and productive. You can create a variety of software, from large web applications to small daily tools.</p>75. 76.
77. 78. 79. 80.<p>PHP</p>81. 82.<p>HTML alone cannot change the content of the page. PHP embeds a program in HTML and makes it possible.</p>83. 84.
85.</dic>86. 87. 88.
89.  90.
91.<footer></footer>92.</body>93.</html>

↓ CSS (The part corresponding to the part where the error occurs: The number of lines is given in the 122nd to 125th lines.)

Code ```
/ * CSS reset (do not erase) * /
1.html, body,
2.ul, ol, li,
3.h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
body {
font-family:'Hiragino Kaku Gothic ProN W3', sans-serif;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
/ * Let's write CSS from here * /

.container {
color: white;
text-align: center;
width: 1170px;
margin: 0 auto;
}
.top-wrapper {
background-image: url (https://prog-8.com/images/html/advanced/top.png);
background-size: cover;
text-align: center;
padding: 180px 0px 100px 0px;
}
.top-wrapper h1 {
font-size: 45px;
opacity: 0.7;
font-weight: bold;
letter-spacing: 5px;
}
.top-wrapper p {
opacity: 0.7;
}
.btn {
display: inline-block;
padding: 8px 24px;
color: white;
border-radius: 4px;
}
.btn: hover {
opacity: 1;
}
.signup {
background-color: # 239b76;
opacity: 0.8;
margin-top: 30px;
}
.btn p {
margin-top: 15px;
margin-bottom: 15px;}
.facebook {
background-color: # 3b5998;
opacity: 0.8;
margin-right: 10px;
}
.twitter {
background-color: # 55acee;
opacity: 0.8;
}
.fa {
margin-right: 5px;
}
header {
background-color: rgba (34,49,52,0.9);
height: 65px;
width: 100%;
position: fixed;
top: 0;
z-index: 10;
}
.header-left {
float: left;
}
.logo {
margin-top: 20px;
margin-bottom: 20px;
width: 124px;
}
.header-right {
float: right;
background-color: rgba (255,255,255,0.3);
transition: all 0.5s;
}
.header-right: hover {
background-color: rgba (255, 255, 255, 0.5);
}
.header-right a {
color: white;
line-height: 65px;
padding-right: 25px;
padding-left: 25px;
display: inline-block;
}
122. .lesson-wrapper {
123. height: 580px
124. background-color: # f7f7f7;
125. text-align: center;
}
.heading {
color: # 5f5d60;
padding-top: 80px;
padding-bottom: 50px;
}
.heading h2 {
font-weight: normal;
}
.lesson {
float: left;
width: 25%;
}
.lesson-icon {
position: relative;
}
.lesson-icon p {
position: absolute;
top: 90px;
width: 100%;
color: white;
}
.text-contents {
color: # b3aeb5;
width: 80%;
font-size: 13px;
display: inline-block;
padding-top: 15px;
}

URL of the completed page (sample) (https://prog-8.com/html/dojo/2/3#/)

I am very sorry to post late at night, but I would appreciate it if anyone could tell me.

css
  • Answer # 1

    Is it different that there is no semicolon on line 123?

  • Answer # 2

    height: 580px
    There is no ";".

    .lesson-wrapper {
        height: 580px
        background-color: # f7f7f7;
        text-align: center;
    }

Related articles