Junction- Code Instructions Followed, Doesn't look like site example


#1



Junction - PRO


My code has a white background behind the .jumbotron container section, the icons are not sized properly, the color of the text is gray naturally (I changed it to white to be like the example site.) I manually changed the margins for the navbar to be more like the example site outside of the instructions.
It still doesn't look like the site example. All instructions have been followed.


html, body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather', serif;
  background:url('https://s3.amazonaws.com/codecademy-content/projects/junction/bg.jpg') no-repeat center center fixed;
  background-size:cover;
}
.container {
  max-width:940px;
}
.container img{
  height:45px;
  width:45px;
}
.container ul li{
  display:inline;
  margin-right: 35px;
  margin-left: 35px;
}

/* Header */
.header {
  background-color: rgba(0,0,0,.5);
  color:white;
  padding: 10px 0 0 35px;
}

/* Jumbotron */
.jumbotron {
  position: relative;
  top: 50px;
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
  color:white;
  text-align:center;
}

/* Supporting */
.supporting {
  margin-top: 40px;
  margin-right:300px;
  margin-left:300px;
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
}
.download a{
  background-color:rgba(0,255,188,0.5);
  color:white;
  border: rgba(0,255,188,0.5);
  text-decoration:none;
}

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="container">
        <ul>
          <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/logo.svg" />
          <li>About</li>
          <li>Blog</li>
          <li>Help</li>
          <li>Contact</li>
        </ul>
      </div>
    </div>


    <div class="jumbotron">
      <div class="container">
        <h1>
          Meet Junction!
        </h1>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/read.svg">
            <h2>Read</h2>
            <p>Discover new stories and follow your favorite writers. </p>
          </div>
         <div class="col-md-4">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/write.svg">
           <h2>Write</h2>
           <p>Discover new stories and follow your favorite writers. </p>
          </div>
          <div class="col-md-4">
            <img src="https://s3.amazonaws.com/codecademy-content/projects/junction/talk.svg">
            <h2>Talk</h2>
            <p>Discover new stories and follow your favorite writers. </p>
          </div>
          </div>
          <div class="download">
           <div class ="container">
             <a class="btn btn-default" href="#">
            Join
             </a>
            </div>
        </div>
        </div>
    
    </div>
  </body>
</html>


#2

In this stylesheet .jumbotron background is set to #eee, so if you want to have no background then in your CSS file add to .jumbotron: background: none;


#3

Thanks for the advice. I also edited the size of the icons, the position of the icons, centered the text for h2 and p, and am still stuck on the 'Join' button styling. Here is what I have:

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather', serif;
  background:url('https://s3.amazonaws.com/codecademy-content/projects/junction/bg.jpg') no-repeat center center fixed;
  background-size:cover;
}
.container {
  max-width:940px;
}
.header .container ul li{
  display:inline;
  margin-right: 35px;
  margin-left: 35px;
}

/* Header */
.header {
  background-color: rgba(0,0,0,.5);
  color:white;
  padding: 10px 0 0 35px;
}

/* Jumbotron */
.jumbotron {
  position: relative;
  top: 30px;
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
  text-align:center;
  color:white;
  background:none;
}
.jumbotron .container h1{
  position:relative;
  margin-bottom: 30px;
}
/* Supporting */
.supporting {
  text-shadow: 0 2px 3px rgba(0,0,0,.4);
  background:none;
  margin-bottom: 30px;
}
.supporting .container .row .col-md-4 img{
  border-radius: 15px;
}

.read{
  margin: 0 auto;
  display:block;
}
.write{
 margin:0 auto;
  display:block;
}
.talk{
  margin:0 auto;
  display:block;
}
.supporting{
  margin-bottom: 40px;
}
.supporting .container .row .col-md-4 p{
 color:white;
  text-align:center;
}

.supporting .container .row .col-md-4 h2{
 color:white;
  text-align:center;
}
.download{
  position:relative;
  top:80px;
}
.download .container .btn{
  color:white;
  border: #84F8D9;
  text-decoration:none;
  text-align:center;
   background: rgba(0, 255, 188, 0.5) none repeat scroll 0 0;
    border: medium none;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    letter-spacing: 1.3px;
    margin-bottom: 100px;
    padding: 10px 60px;
}
.download .container .btn:hover{
  background-color:#53615D;
  color:white;
}


#4

I'm sorry for the late reply, Do you still need help with this ? Or have you solved it ?


#5

I'm still stuck on the Join button.


#6

Add: text-align: center; to .download{} which will center the button