HTML CSS Project: Bolt


#1

I have a few problems with this project. One is a positioning problem. The other two involve bootstrap. I have trouble using bootstrap's templates for buttons and the in-line form.

  1. I have a white gap between my
    and
    . I am not sure where the problem in the code comes from.

    1. When I follow the project directions and give a div class of "btn btn-default", the button displayed on the output does not look like the example for the exercise. When I attempt to style it using a css selector of .btn or .btn-default or .btn btn-btn-default, I can't override bootstrap's template stylings. Is there a work around for this? Could it be a browser issue. In the code below, I worked around by not using the bootstrap default button. But it would be helpful to be able to use the default, then select it in the CSS if I want to make a change to it.

    2. I have the same problem with the tag. I was having trouble customizing the length of the bottom-border. In a wider viewport, how to lengthen the bottom-border? How would I adjust the space between the form line and the button on the wider screen when the are in line horizontally? On a smaller screen, how would I adjust the space between the form bottom border and button when they are stacked vertically? Does creating my own button styling for an anchor tag change the CSS syntax for positioning as opposed to using the button tag as a child to div class="form in-line">?

    HTML Below:

    <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="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>Log in</li>
            <li><a href="#" class="button">Sign Up</a></li>
          </ul>
        </div>
      </div>
      <div class="container">
        <div class="header">
          
        </div>
    
        <div class="main">
          <h1>Watch your favorite movies, instantly.</h1>
          <a href="#">Learn More</a>
          <form class="form-inline">
            <div class="form-group">
              <label for="browseTheCollection" class="sr-only">Browse collection</label>
              <input type="text" class="form-control" id="browseTheCollection" placeholder="Browse the collection">
             </div> 
              <a href="#">Search</a>
          </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">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-avengers.jpg"/>
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/harry-potter.jpg"/>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/frozen.jpg"/>
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/iron-man.jpg"/>
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/transformers.jpg"/>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/lord-of-the-rings.jpg"/>
            </div>
          </div>
          <div class="col-md-8">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/skyfall.jpg"/>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/the-dark-knight.jpg"/>
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/pirates-of-the-caribbean.jpg"/>
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
              <img src="https://s3.amazonaws.com/codecademy-content/projects/bolt-network/toy-story-3.jpg"/>
            </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">
            <h3>Bolt</h3>
            <ul>
              <li>Careers</li>
              <li>Terms</li>
              <li>Help</li>
            </ul>
          </div>         
           <div class="col-md-3">
             <h3>More Bolt</h3>
            <ul>
              <li>Gift Cards</li>
              <li>Trailers</li>
            </ul>
          </div>
           <div class="col-md-3">
             <h3>News</h3>
            <ul>
              <li>Blog</li>
              <li>Twitter</li>
              <li>YouTube</li>
              <li>Google+</li>
              <li>Facebook</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
      </body>
    </html>

    CSS Below:

    html, body {
      font-family: "Oxygen", sans-serif; 
      font-weight: 300; 
      margin: 0;
      padding: 0;
    }
    
    .container {
      max-width: 970px;
    }
    
    
    /* jumbotron */
    .jumbotron {
      background: black;
      color: white;
    }
    
    .jumbotron img {
      max-width: 100%;
      height: 34px;
    }
    
    .jumbotron ul {
      list-style: none;
      padding-top: 20px;
    }
    
    .jumbotron li {
      display: inline;
      padding-right: 30px;
    }
    
    .button {
      color: #0393FF;
      border: 1px solid #0393FF;
      border-radius: 2px;
      padding: 10px 60px; 
    }
    
    .jumbotron a:hover {
      background-color: #0393FF;
      color: white;
      text-decoration: none;
    }
    
    /* Main */
    .main {
      text-align: center;
    }
    
    .main h1 {
      padding-top: 100px;
      padding-bottom: 50px;
    }
    
    .main a {
      color: #0393FF;
      border: 1px solid #0393FF;
      border-radius: 2px;
      padding: 10px 20px;  
    }
    
    .main form {
      padding-top: 50px;
    }
    
    .form-control {
      border: none;
      border-bottom: 1px solid white;
      border-radius: 0;
      background-color: black; 
      font-size: 18px;
      padding-right: 20px;
    }
    
    .form-control:hover {
      border-bottom: 1px solid #0393FF;
      border-radius: 0;
      background-color: black;  
    }
    
    .form-control:focus {
      border-bottom: 1px solid #0393FF;
      box-shadow: none;
      outline: 0;
    }
    
    /* Supporting */
    .supporting {
      background-image: url("diagmonds_@2X.png");
      background-size: 141px 142px;
      text-align: center;
    }
    
    h2 {
      color: #0393FF;
    }
    
    p {
      color: white;
      font-size: 16px;
      
    }
    
    .thumbnail {
      background: none;
      border: none;
    }
    
    
    /* Feature */
    .feature {
      background-image: url("https://s3.amazonaws.com/codecademy-content/projects/bolt-network/feature.jpg");
      background-size: cover;
      background-position: center;
      text-align: center;
      padding-top: 100px;
      padding-bottom: 100px;
    }
    
    /* Footer */
    .footer {
      background: black;
      color: #0393FF;
    }
    
    .footer .row {
      padding-top: 50px;
      padding-bottom: 50px;
    }
    
    .footer h3 {
      color: white;
      font-size: 18px;
    }
    
    .footer ul {
      list-style: none;
      padding: 0; 
    }

#2

Por favor usar o fórum inglês.