Design a website with bootstrap

advertisements

i'm trying to design a website with bootstrap like the course

while watching the tutorial

he typed

 <div class="container homepage">

and when he oppened the css file

he typed

.homepage{
  text-align: center;
}

but i couldn't call it

if i have

<div class="container homepage">

how can i call it in the css file to make the style !

html file :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Let's Code </title>

    <!-- this our google font and Font-awesome -->
    <link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css">

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/custom.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <!-- <script src="../../assets/js/ie-emulation-modes-warning.js"></script> -->

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

     <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="http://www.foxpic.com/V0PSDLRS.png" border="0" alt="One Million Lines" title="One Million Lines" /></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Who We Are</a></li>
            <li><a href="#about">Get involved</a></li>

          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Our goal is to inspire <br>Tallahassee to write 1,000,000<br> lines of code_</h1>
        <p>All over the country people are taking the <strong>HOUR OF CODE</strong> challenge issued by <strong>CODE.org</strong>. Millions of lines of code are being written. In the capital of Florida, Tallahassee, the community is taking the challenge and our goal is to write 1,000,000 lines of code_</p>
        <p><a class="btn btn-danger btn-lg" role="button">Learn more &raquo;</a></p>
        <img src="http://www.foxpic.com/V0ROP7Fw.png" border="0" alt="Code.org" />  

      </div>
    </div>

    <div class="container hompage">
    <h2>Get Involved</h2>
      <!-- Example row of columns -->
      <div class="row">
        <div class="col-md-4"> <!-- grid.html the bootstrap based 12 columns important -->
          <span class="fa-stack fa-4x">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-user fa-stack-1x fa-inverse"></i>
          </span>
          <h2>Students</h2>
          <p>Want to learn how to code? Want to help us get to 1,000,000 lines? Click the button below and we'll let you know how to get involved. </p>
          <p><a class="btn btn-default" href="grid.html" role="button">Start Learning &raquo;</a></p>
        </div>
        <div class="col-md-4">
          <span class="fa-stack fa-4x">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-pencil fa-stack-1x fa-inverse"></i>
          </span>
          <h2>Educators</h2>
          <p>Want to bring this initiative to your school or institution? Awesome! Click the button below and we'll make it happen. </p>
          <p><a class="btn btn-default" href="https://www.google.com" target="_blank" role="button">Join the Initiative &raquo;</a></p>
       </div>
        <div class="col-md-4">
          <span class="fa-stack fa-4x">
            <i class="fa fa-circle fa-stack-2x"></i>
            <i class="fa fa-money fa-stack-1x fa-inverse"></i>
          </span>
          <h2>Sponsors</h2>
          <p>We love all the support we get to help host more events, and empower more lives with the knowledge of coding. Click to get involved.</p>
          <p><a class="btn btn-default" href="https://docs.google.com/forms/d/1Jc5emQqf1e43PHM5US6Rrss2vXGmYNhI1o5GLIckmho/viewform?usp=send_form" target="_blank" role="button">Give Support &raquo;</a></p>
        </div>
      </div>

      <hr>

      <footer>
        <p>&copy; Company 2014</p>
      </footer>
    </div> <!-- /container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

the css file : (custom.ss)

/* Move down content because we have a fixed navbar that is 50px tall */
body {
  padding-top: 50px;
  padding-bottom: 20px;
}
ul.nav{
  font-family: 'Arvo',courier,serif;
}
ul.nav{
  font-size: 13px;
}
.jumbotron {
  text-align: center;
  background-image: url(http://www.foxpic.com/V1rV3XC8.jpg);
  color: white;

}
.jumbotron h1{
  font-family: 'Arvo', courier, serif;
}
.jumbotron h1{
  margin-top: 0px;
  margin-bottom: 50px;
}
.jumbotron p{
  margin-bottom: 30px;
  font-weight: 100;
  padding : 0 50px;
}
.btn-lg {
  font-size: 36px;
}
.homepage{
  text-align: center;
}
.homepage h2{
  color: #e74c3c;
  font-family: 'Arvo', courier ,serif;
  text-transform: uppercase;
}


You have a typo, you have:

<div class="container hompage">

It should be:

<div class="container homepage">

https://jsfiddle.net/hfxvad8d/