Build a Product Landing Page (Nesting CSS not workong)

HTML-CSS
1

Tell us what’s happening:
Hello my friends, help me please, i doing project for manual learning, but i have trouble. I write CSS code and want have nesting, but i get not working nesting. Why?

This code:
http://joxi.ru/brRaxeKuJ9w8bA

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page/

3

Hey friend, in example which gave freecodecamp nesting work. O_o
http://joxi.ru/EA4QYK4cwVdMzr

4

Sorry for that i didn’t know that.
:pray:

5

okay friend, thank you!

6

But i will still recommend using
ol > li {

}
or applying style separately to them.

7

This is not always convenient since it will be applied to all Ol > LI (

8

Man, I’m doing tasks on the site, namely a web application, but how to check whether I did it correctly or not?

9
  1. Look at your first example, the Pen from FCC and watch closely at the line CSS... at the top, above the comment // pricing
  2. Look at the Pen of your Code and compare your line CSS... with it.
10

Friend, i must do nestin after ID or Class?

#example {
        color: red;
        ol {
               color: white;
               li {
                     color: blue
              }
        }
}
11

Did you follow my instructions?

12

yes, my code not have nesting after ID or Class, true?

13

So please give me your answer to my questions 1 and 2.

Answer 1:
Answer 2:
14

i dont understand you((( so i doing mini code for example, one second please

15

For example did code, nesting not work, why friend?

http://joxi.ru/bmoxKYJhxJ6Ew2

16

No problem.

Question 1: Look at this screenshot: http://joxi.net/EA4QYK4cwVdMzr.
Above your red drawing, there is a heading above // pricing, that starts with CSS.
Write down the complete line, starting with CSS.

Question 2: Do this also for http://joxi.net/brRaxeKuJ9w8bA.
Write down the complete line, starting with CSS.

17

understand, but much line, can tell me on the this code example?
http://joxi.ru/bmoxKYJhxJ6Ew2

18

Answer your qeustions:
their code - https://codepen.io/freeCodeCamp/pen/RKRbwL/
my code - https://codepen.io/xandr2410/pen/djeJbB

so it will be easier to give references to projects

19

Can you please describe, which step you do not understand?

  1. Look at this screenshot: http://joxi.net/EA4QYK4cwVdMzr.
  2. Look above your red drawing, there is a heading above // pricing, that starts with CSS
  3. Write down the complete line, starting with CSS
20

ok, this all code (this example from freecode site):
/** global element styling **/

@import ‘https://fonts.googleapis.com/css?family=Lato:400,700’;

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

body {
background-color: #eee;
font-family: ‘Lato’, sans-serif;
}

#page-wrapper {
position: relative;
}

li {
list-style: none;
}

a {
color: #000;
text-decoration: none;
}

/** global classes styling **/

.container {
max-width: 1000px;
width: 100%;
margin: 0 auto;
}

.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px black solid;
border-radius: 2px;
background: transparent;
cursor: pointer;
}

.grid {
display: flex;
}

// navigation bar

header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 20px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #eee;
@media (max-width: 600px) {
flex-wrap: wrap;
}
}

.logo {
width: 60vw;

@media (max-width: 650px) {
margin-top: 15px;
width: 100%;
position: relative;
}

img {
width: 100%;
height: 100%;
max-width: 300px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
@media (max-width: 650px) {
margin: 0 auto;
}
}
}

nav {
font-weight: 400;

@media (max-width: 650px) {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;

li {
 padding-bottom: 5px; 
}

}

ul {
width: 35vw;
display: flex;
flex-direction: row;
justify-content: space-around;

@media (max-width: 650px) {
  flex-direction: column;
}

}
}

// hero

#hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 200px;
margin-top: 50px;
h2 {
margin-bottom: 20px;
word-wrap: break-word;
}

input[type=“email”] {
max-width: 275px;
width: 100%;
padding: 5px;
}

input[type=“submit”] {
max-width: 150px;
width: 100%;
height: 30px;
margin: 15px 0;
border: 0;
background-color: #f1c40f;

&:hover {
  background-color: orange;
  transition: background-color 1s;
}

}

@media (max-width: 650px) {
margin-top: 120px;
}
}

// features

#features {
margin-top: 30px;
.icon {
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;

@media (max-width: 550px) {
  display: none;
}

}

.desc {
display: flex;
flex-direction: column;
justify-content: center;
height: 125px;
width: 80vw;
padding: 5px;

@media (max-width: 550px) {
  width: 100%;
  text-align: center;
  padding: 0;
  height: 150px;
}

}

@media (max-width: 650px) {
margin-top: 0;
}
}

// how it works

#how-it-works {
margin-top: 50px;
display: flex;
justify-content: center;

iframe {
max-width: 560px;
width: 100%;
}
}

// pricing

#pricing {
margin-top: 60px;
display: flex;
flex-direction: row;
justify-content: center;

#tenor, #bass, #valve {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: calc(100% / 3);
margin: 10px;
border: 1px solid #000;
border-radius: 3px;

.level {
  background-color: #ddd;
  color: black;
  padding: 15px 0;
  width: 100%;
  text-transform: uppercase;
  font-weight: 700;
}

h2 {
  margin-top: 15px;
}

ol {
  margin: 15px 0;
  
  li { padding: 5px 0; }
}

button {
  border: 0;
  margin: 15px 0;
  background-color: #f1c40f;
  font-weight: 400;
  
  &:hover {
    background-color: orange;
    transition: background-color 1s;
  }
}

}

@media (max-width: 800px) {
flex-direction: column;

#tenor, #bass, #valve { max-width: 300px; width: 100%; margin: 0 auto; margin-bottom: 10px; }

}
}

// footer

footer {
margin-top: 30px;
background-color: #ddd;
padding: 20px;

ul {
display: flex;
justify-content: flex-end;

li {
  padding: 0 10px;
}

}

span {
margin-top: 5px;
display: flex;
justify-content: flex-end;
font-size: 0.9em;
color: #444;
}
}

21

I did not ask for the code,
I asked for the complete line above your red drawing, starting with CSS