Bolt Network - Stuck!


#1


https://www.codecademy.com/courses/web-ext/projects/html-css-prj_bolt-network?user_id=5684227a86f5529ac7000727


Good Evening,

I have completed the Bolt Network project to the best of my ability, however, there are a couple of refinements that my final result needs. I have tried all I can to correct these issues but just cannot seem to sort them out.:scream:

1). My Search box for the form "browse the collection" is in the wrong position, I cannot get it to go to the end of the line as displayed in the actual page.

2). In my Supporting section, my images are all in place, however they all appear with a white, solid border around them and despite using a number of CSS declarations, I cannot remove the white border.

I've tried .supporting a {
border: none;

            .supporting img {
                 border: 0;

              .thumbnail {
                      border: none;

3). My final issue, I am struggling to get my heading and list items to align straight in the columns. Both are set as text-align: center;

Please see my code as follows.

Thank you


<!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=Oxygen:300,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>

    <div class="jumbotron">
      <div class="container">
        <div class="header">
          
          <div class="row">
            
            <div class="col-md-2">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/logo.svg"/>
              
            </div>
            
            <div class="pull-right">
              <ul>
                <li>Login</li>
                <li><a href="#" class="btn btn-default" active role="button">Sign Up</a></li>
              </ul>
              
            </div>
            
          </div>

        </div>

        <div class="main">
          <h1>Watch your favourite movies,instantly.</h1>
          
          <a href="#" class="btn btn-default">Learn More</a>
          
          <form class="form-inline" role="form">
           <div class="form-group">
             
             <input type="text" class="form-control" id="search" placeholder="Browse the collection"/>             
            </div>
            
            <button type="submit" class="btn btn-submit">Search</button>
          </form>
          
        </div>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        
        <h2>A world of movies at your fingertips.</h2>
        <p>Choose from the latest titles, with new movies added every day.</p>
        
        <div class="row">
          <div class="col-md-8">
           <div class="thumbnail"><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-avengers.jpg"/></a></div>
          </div>
          
          <div class="col-md-4">
            <div class="thumbnail"><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/harry-potter.jpg"/></a></div>
            
          </div>
        </div>
        
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail"><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/frozen.jpg"/></a></div>
          </div>
          
          <div class="col-md-4">
            <div class="thumbnail"><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/iron-man.jpg"/></a></div>
          </div>
          
          <div class="col-md-4">
            <div class="thumbnail"><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/transformers.jpg"/></a></div>
          </div>
        </div>
        
        <div class="row">
          
          <div class="col-md-4">
            
            <div class="thumbnail"><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/lord-of-the-rings.jpg"/></a></div>
            
          </div>
          
          <div class="col-md-8">
            
            <div class="thumbnail"><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/skyfall.jpg"/></a></div>
            
          </div>
          
        </div>
        
        <div class="row">
          
          <div class="col-md-4">
            <div class="thumbnail"><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-dark-knight.jpg"/></a></div>
          </div>
          
          <div class="col-md-4">
            <div class="thumbnail"><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/pirates-of-the-caribbean.jpg"/></a></div>
          </div>
          
          <div class="col-md-4">
            <div class="thumbnail"><a href="#"><img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/toy-story-3.jpg"/></a></div>
          </div>
        </div>

      </div>
    </div>

    <div class="feature">
      <div class="container">
        <h2>Available everywhere</h2>
        <p>Start watching on one device, and pick up where you left off on another device.</p>
        
      </div>
    </div>

    <div class="footer">
      <div class="container">
        
        <div class="row">
          
          <div class="col-md-3">
            <h4>Bolt</h4>
            <ul>
              <li>Careers</li>
              <li>Terms</li>
              <li>Help</li>
             </ul>
          </div>
          
          <div class="col-md-3">
            <h4>More Bolt</h4>
            <ul>
              <li>Gift Cards</li>
              <li>Trailers</li>
             </ul>
          </div>
          
          <div class="col-md-3">
            <h4>News</h4>
            <ul>
              <li>Blog</li>
              <li>Twitter</li>
              <li>YouTube</li>
              <li>Google+</li>
              <li>Facebook</li>
             </ul>
          </div>
        </div>
        
      </div>
    </div>

  </body>
</html>


html, body {
  font-family: "Oxygen", sans-serif; 
  font-weight: 300; 
  margin: 0;
  padding: 0;
}
/*Jumbotron*/
.jumbotron {
  background: #000000;
  height: 500px;
}
.jumbotron h1 {
  text-align: center;
  color: #fff;
  margin-bottom: 60px;
  margin-top: 40px;
  display: block;
}

.jumbotron .btn {
  background: transparent;
  border: solid 1px #0393FF;
  color: #0393FF;
  border-radius: 2px;
  padding: 8px 20px;
}

.jumbotron a:hover {
  background-color: #0393FF;
  color: #fff;
 }

.btn {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

#search {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid white;
  margin-top: 40px;
  width: 200%;
}

.form-control {
  display: block;
}

/*Header*/
.header {
  color: #fff;
}

.pull-right li {
  display: inline;
  padding: 15px;
}

/*Main*/
.main {
  text-align: center;
}

.container {
  max-width: 970px;
}

/*Supporting*/
.supporting {
  background-image: url(http://s3.amazonaws.com/codecademy-content/projects/bolt-network/diagmonds_@2X.png);
  background-size: 141px 142px;
  margin-top: -30px;
}

.supporting h2 {
  text-align: center;
  color: #0393FF;
  margin-top: 100px;
}
.supporting p {
  text-align: center;
  color: #fff;
  margin-bottom: 60px;
}

.img a {
  border: none;
}

/*Feature*/
.feature {
  background:url(https://s3.amazonaws.com/codecademy-content/projects/bolt-network/feature.jpg) no-repeat center center;
  background-size: cover;
  height: 350px;
}

.feature h2 {
  text-align: center;
  color: #0393FF;
  margin-top: 150px;
}

.feature p {
  text-align: center;
  color: #FFF;
}

/*Footer*/
.footer {
  background: black;
  text-align: center;
}

.footer h4 {
  color: #FFF;
  text-align: center;
}
.footer ul {
  list-style: none;
}

.footer li {
  display: list-item;
  color: #0393FF;
  text-align: center;
}


#2

That's a white background, resetting the background to none like how you did with border will do the job :slight_smile:

I will have to see your CSS please

This will automatically align right cos of the class, I'm not sure what you're aiming at and what you're seeing,

Please include a screenshot of the results and you full CSS and also explain what you're aiming at.


#3

Hi there!!

Thank you for my response. My CSS is posted above in my original post. It follows the HTML. I will repost it for you though.

html, body {
  font-family: "Oxygen", sans-serif; 
  font-weight: 300; 
  margin: 0;
  padding: 0;
}
/*Jumbotron*/
.jumbotron {
  background: #000000;
  height: 500px;
}
.jumbotron h1 {
  text-align: center;
  color: #fff;
  margin-bottom: 60px;
  margin-top: 40px;
  display: block;
}

.jumbotron .btn {
  background: transparent;
  border: solid 1px #0393FF;
  color: #0393FF;
  border-radius: 2px;
  padding: 8px 20px;
}

.jumbotron a:hover {
  background-color: #0393FF;
  color: #fff;
 }

.btn {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

#search {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid white;
  margin-top: 40px;
  width: 200%;
}

.form-control {
  display: block;
}

/*Header*/
.header {
  color: #fff;
}

.pull-right li {
  display: inline;
  padding: 15px;
}

/*Main*/
.main {
  text-align: center;
}

.container {
  max-width: 970px;
}

/*Supporting*/
.supporting {
  background-image: url(http://s3.amazonaws.com/codecademy-content/projects/bolt-network/diagmonds_@2X.png);
  background-size: 141px 142px;
  margin-top: -30px;
}

.supporting h2 {
  text-align: center;
  color: #0393FF;
  margin-top: 100px;
}
.supporting p {
  text-align: center;
  color: #fff;
  margin-bottom: 60px;
}

.img a {
  border: none;
}

/*Feature*/
.feature {
  background:url(https://s3.amazonaws.com/codecademy-content/projects/bolt-network/feature.jpg) no-repeat center center;
  background-size: cover;
  height: 350px;
}

.feature h2 {
  text-align: center;
  color: #0393FF;
  margin-top: 150px;
}

.feature p {
  text-align: center;
  color: #FFF;
}

/*Footer*/
.footer {
  background: black;
  text-align: center;
}

.footer h4 {
  color: #FFF;
  text-align: center;
}
.footer ul {
  list-style: none;
}

.footer li {
  display: list-item;
  color: #0393FF;
  text-align: center;
}

Please see attached screenshots of what I am referring too. :slight_smile:

Thanking you :slight_smile:


#4

Hi,

So when I set the background to none, this is how the page appears (see screen shot attached please).

Should it not appear with the correct background like so? (Please see screen shot attached). :confused:
P.S. See the white border appearing around the images?


#5

You need to remove the .thumbnail background:

.thumbnail{
  border: none;
  background: none;
}

^your code

this of mine works perfectly.

#search {
        background:transparent; 
        border:0px; 
        border-radius:0; 
        border-bottom:1px solid #fff;
        color:#fff;
        font-size:18px; 
        margin:0 20px; 
        width:400px;
      }

What is making the big difference is the margin and width.


#6

Hi there!!

Thank you again for your response.

I'm going to give these a try! :slight_smile:


#7

Thank you for your help Zainabrawat!!!

It's all ok now!! :relaxed:


#8

Great!

Glad I could help :slight_smile:


#9