Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Hello. Can someone explain to me why I can’t set the font size and background color of my #choose element whereas I can set its margin? Is it because my :not pseudo selector? It’s on CSS line 16

Your code so far

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="styleshet" href="styles.css"></link>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>My Personal Portofolio</title>
  </head>
  <body>
    
    <main>
      <section id="connect-with-me">
        <div>Let's work together</div>
        <div id="choose">How do you take your coffe?</div>
        <div id="connect">
          <a id="profile-link" href="https://github.com/RatuBS" target="_blank">
            <i class="fa fa-github" style="font-size:36px"></i>
            Github 
          </a>
          <a href="https://twitter.com/RatuBS27158">
            <i class="fa fa-twitter" style="font-size:36px"></i>
            Twitter
          </a>
          <a href="mailto:raaatubs@gmail.com">
            <i class="fa fa-at" style="font-size:36px"></i>
            Send an email
          </a>
          <a href="tel:-91300080090">
            <i class="fa fa-mobile-phone" style="font-size:36px"></i>
            Call me
          </a>
        </div>
      </section>
    </main>
  </body>
</html>


#connect-with-me{
  height: 100vh;
  padding: 40vh 0;
  text-align: center
}

#connect-with-me div:not(#connect){
  background-image: url(https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1827&q=80);
  padding: 2rem 0;
  font-size: 2rem;
  color: white;
}

#choose{
  margin-bottom: 2rem;
  font-size: 1rem;
}

#connect{
  display: flex;
  justify-content: center;
  gap: 70px;
  margin-bottom: 3rem;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Look at it in the browser’s dev tools inspector. It will show you which rule set is setting the font size for #choose. You will see that the #choose rule set is being overwritten by another rule set that is setting the font size.

3

Hope can help spent some extra time trying to fix code and can be fun not knowing how to fix but tried some things. Found something hope can help first can be missing letter “e” in link for rel styelseet on html. It is the #connect-with-me div:not that is making font size not be able to change for #choose. This is what me did I made extra div in the section and put the first div and div with id=choose in that div to make seperate from the div with
< a >'s the div with id #connect and put the name id #connect-with-me for the new div, you can try and erase the div:not not really need it and just put a background drawing for the new #connect -with-me part only and use flex flex direction column than change font size of #choose in this new div can be also add #choose to the first

that has lets work together or can give it another name id if you want different color or text size.
Hope this can help a little coding is not easy but you did most of the webpage all people get some problems when trying to finish something . It was some trouble to figure out but that is the fun in html css and all languages here is what me changed hope this can help you figure out what you want the page to be like and start continue to change the html from here thank you take care gn gm fren

      <section id="newconnect">
        <div id="connect-with-me">
          <div id="choose">Let's work together</div>
          <div id="choose">How do you take your coffe?</div>
        </div>
        
        <div id="connect">
          <a id="profile-link" href="https://github.com/RatuBS" target="_blank">
            <i class="fa fa-github" style="font-size:36px"></i>
            Github 
          </a>
          <a href="https://twitter.com/RatuBS27158">
            <i class="fa fa-twitter" style="font-size:36px"></i>
            Twitter
          </a>
          <a href="mailto:raaatubs@gmail.com">
            <i class="fa fa-at" style="font-size:36px"></i>
            Send an email
          </a>
          <a href="tel:-91300080090">
            <i class="fa fa-mobile-phone" style="font-size:36px"></i>
            Call me
          </a>
        </div>
      </section>

body {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

#newconnect {
  padding: 40vh 0;
  text-align: center;
}

#connect-with-me{
  background-image: url(https://images.unsplash.com/photo-1518531933037-91b2f5f229cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1827&q=80);
  padding: 2rem 0;
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#choose{
  font-size: 28px;
  color: lightblue;
}

#connect{
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 70px;
  margin-bottom: 3rem;
}