HTML // please help me #21475

brnrsln · 2020-09-07T17:28:01Z

brnrsln
Sep 7, 2020

7q-3qBwkteA1920×853 373 KB

I want to make a button “Try it for free”, on YouTube one person suggests using a modification of “nav__link–btn” (two -) in the “nav__link” class in html and “&–btn {}” (two -) in css, I use it, but the demo does not work out what I wanted … (5 and 4 in browser)

Why doesn’t the --btn modifier work for me? What should I do in this case?

=======================HTML=======================
            <nav class="nav">
                <a class="nav__link" href="#"> Home </a>
                <a class="nav__link" href="#"> Key Features</a>
                <a class="nav__link" href="#"> Pricing </a>
                <a class="nav__link" href="#"> Testiminial </a>
                <a class="nav__link" href="#"> FAQ </a>
                <a class="nav__link nav__link--btn" href="#"> Try for free </a>
            </nav>
=======================================================

========================CSS===================
.nav {
    display: flex;
    font-size:16px;
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    align-items: center
}
.nav__link {

margin-left:50px;

color: #242f51;

text-decoration: none;

opacity: 0.7;

transition: opacity .1s linear;
&amp;--btn {
padding:20px 20px ;
border:2px solid #242f51;
border-radius: 20px;
}

}

Answered by thinkverse

Sep 7, 2020

Hi there. 👋

Indenting your CSS that way isn’t supported by regular CSS, for that, you’d need a pre-processor like SASS which has support for those features.

.nav__link {
    margin-left:50px;
    color: #242f51;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity .1s linear;
}
.nav__link--btn {

padding:20px 20px ;

border:2px solid #242f51;

border-radius: 20px;

}

This should work just fine. 🙂

View full answer

thinkverse · 2020-09-07T19:04:29Z

thinkverse
Sep 7, 2020

Hi there. 👋

Indenting your CSS that way isn’t supported by regular CSS, for that, you’d need a pre-processor like SASS which has support for those features.

.nav__link {
    margin-left:50px;
    color: #242f51;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity .1s linear;
}
.nav__link--btn {

padding:20px 20px ;

border:2px solid #242f51;

border-radius: 20px;

}

This should work just fine. 🙂

0 replies

brnrsln · 2020-09-08T13:30:08Z

brnrsln
Sep 8, 2020
Author

thank you very much!) Thanks to your advice, it worked for me)

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

HTML // please help me #21475

{{title}}

}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

GitHub Community

HTML // please help me #21475

brnrsln Sep 7, 2020

}

Replies: 2 comments

thinkverse Sep 7, 2020

brnrsln Sep 8, 2020 Author

brnrsln
Sep 7, 2020

thinkverse
Sep 7, 2020

brnrsln
Sep 8, 2020
Author