Shutterbugg


#1

how can i achieve this style?

this is my code and the result i get:



#2

a div with class container containing three divs with class col-md-4 should to the trick on screens wider then 992px

if you want to achieve the same result for smaller screen, use col-xs and col-sm, see bootstrap website


#3

I change the width but nothing happens.


#4

can you copy paste your code to the forum? Then i can actually run the code


#5

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <!-- The main section -->
    <div class="main">
      <h2> Shutterbug app</h2>
      <a class="down-btn" href="#">Download Shutterbug</a>
      <div class="container">
        
      </div>
    </div>

    <!-- The first section div -->
    <div class="section">
      
      <div class="row">
  <div class="col-md-6">
	<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/share.png">
  </div>
  <div class="col-md-6">
    <h3> Application </h3>
    <p> Download this brand new application </p>
  </div>
</div>

      <div class="container">

      </div>
    </div>

    <!-- The second section div -->
    <div class="section">
      <div class="row">
  <div class="col-md-6">
    <h3> Download at App Store</h3>
    <p> Available for ios devices</p>
  </div>
  <div class="col-md-6">
	<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/explore.png">
  </div>
</div>

      <div class="container">

      </div>
    </div>

    <!-- The third section div -->
    <div class="section">
      <div class="row">
  <div class="col-md-6">
	<img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/save.png">
  </div>
  <div class="col-md-6">
<h3> Download at App Store</h3>
    <p> Available for ios devices</p>
  </div>
</div>

      <div class="container">

      </div>
    </div>

    
    <div class="store section container">
      <h2>Available for iPhone, iPad, and Android.</h2>
      <img src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/app-store.png" width="185px" />
      <img alt="Get it on Google Play" src="https://s3.amazonaws.com/codecademy-content/projects/shutterbugg/google-play.png" width="159px" />
    </div>

    <!-- The footer div -->
    <div class="footer">
      <div class="row">
  <div class="col-md-6">
    <h2> Company</h2>
    <ul>
      <li> Carrers</li>
      <li> Terms </li>
      <li> Help </li>
    </ul>

  </div>
  <div class="col-md-6">
    <h2> Products</h2>
 <ul>
      <li> Shuterbugg</li>
      <li> Speakerboxx </li>
      
    </ul>
  </div>
   <div class="col-md-6">
     <h2> News</h2>
	 <ul>
      <li> Blog</li>
      <li> Twitter </li>
      <li> Youtube </li>
     <li> Google+ </li>
     <li> Facebook </li>
    </ul>
  </div>
</div>

      <div class="container">
        
      </div>
    </div>

  </body>
</html>

#6

each one of your images, h3 heading and paragraph should be inside one div with class col-md-4

this gives 3 div with class col-md-4


#7

do you see all the code?


#8

yes, i did see all the code. Otherwise i can't make suggestions like this:


#9

i read it. i asked you because in my screen appears with the images. sorry. I tried it but it didn't work.


#10

can you post an updated version of your code?


#11

 <!-- The footer div -->
    <div class="footer">
      <div class="row">
  <div class="col-md-4">
    <h2> Company</h2>
    <ul>
      <li> Carrers</li>
      <li> Terms </li>
      <li> Help </li>
    </ul>

  </div>
  <div class="col-md-4">
    <h2> Products</h2>
 <ul>
      <li> Shuterbugg</li>
      <li> Speakerboxx </li>
      
    </ul>
  </div>
   <div class="col-md-4">
     <h2> News</h2>
	 <ul>
      <li> Blog</li>
      <li> Twitter </li>
      <li> Youtube </li>
     <li> Google+ </li>
     <li> Facebook </li>
    </ul>
  </div>
</div>

#12

seems fine? if you want to centralize it, add a class container:

<div class="footer">
    <div class="container">

   </div>
</div>

#13

it's just fine! it responded after a logout/ login. Thanks a lot!