index.html

<!DOCTYPE html>
<html>

<head>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <link type="text/css" rel="stylesheet" href="./node_modules/materialize-css/dist/css/materialize.min.css" media="screen,projection" />

    <link href="https://fonts.googleapis.com/css?family=Trade+Winds" rel="stylesheet">

    <link type="text/css" rel="stylesheet" href="stylesheet.css" />

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
    <nav class="nav-extended">
        <div class="nav-wrapper">
            <img src="pictures/small_blue_fist.png" class="responsive-img icon">
            <ul class="right hide-on-med-and-down">
                <li><a href="sign_up.html">Sign up</a></li>
                <li><a>Log In</a></li>
            </ul>
        </div>
        <div class="nav-content">
            <span class="nav-title">BroSpace © </span>
            <ul class="tabs tabs-transparent">
                <li class="tab"><a>Entertainment</a></li>
                <li class="tab"><a>Video Games</a></li>
                <li class="tab"><a>Sports</a></li>
                <li class="tab"><a>Celebraties</a></li>
                <li class="tab"><a>Technology</a></li>
                <li class="tab"><a>Politics</a></li>
                <li class="tab"><a>Health</a></li>
                <li class="tab"><a>World Relations</a></li>
            </ul>
        </div>
    </nav>
    <div class="container">
     <div class="row">
        <div class="col s6">
          <div class="card">
            <div class="card-image">
              <img src="pictures/buildings.JPG">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
         <div class="col s6">
          <div class="card">
            <div class="card-image">
              <img src="pictures/street.JPG">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
        <div class="col s6">
          <div class="card">
            <div class="card-image">
              <img src="pictures/yellow_house.JPG">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
         <div class="col s6">
          <div class="card">
            <div class="card-image">
              <img src="pictures/graffiti.JPG">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>

        <div class="col s4">
          <div class="card">
            <div class="card-image">
              <img src="pictures/beach_dock.JPG">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
         <div class="col s4">
          <div class="card">
            <div class="card-image">
              <img src="pictures/beach_people.JPG">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
             <div class="col s4">
          <div class="card">
            <div class="card-image">
              <img src="pictures/beach_waves.JPG">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
          <div class="col s12">
          <div class="card">
            <div class="card-image">
              <img src="pictures/church.JPG">
              <span class="card-title">Card Title</span>
            </div>
            <div class="card-content">
              <p>I am a very simple card. I am good at containing small bits of information.
              I am convenient because I require little markup to use effectively.</p>
            </div>
            <div class="card-action">
              <a href="#">This is a link</a>
            </div>
          </div>
        </div>
        </div>
      </div>

      <div class="footer-copyright">
        <div class="container">
            <center>Made by Eric Weiss</center>
        </div>
    </div>

    <!--Import jQuery before materialize.js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="./node_modules/materialize-css/dist/js/materialize.min.js"></script>
</body>

</html>