Adventure #1: D+B Super Discount

chooseyouradventure

You are a freelance web designer and currently working on the following projects, you aren't getting paid for any of them, but hey you're learning super fast, in no time you will be landing larger clients with breeze, in the mean time lets get started on these before they write you a bad yelp review! ( geez )

D+B Super Discounts is looking for some sort of web presence, let's help them out by creating a nice 1-page website so they can be internet famouz

View Demo Download Assets

This is what we're going to be building

See the Pen D&B Super Discount by Andrew (@ngandrew) on CodePen.

Okay Let's start with the Hello World site we've already built

<!DOCTYPE html>
<html>
  <head>
    <title>Learning HTML w/ ngandrew</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </body>
</html>

Let's change out the title - to D&B Super Discount

<title>D&B Super Discount</title>

Next, Let's go ahead and add a navbar, Lets go ahead and take a look at Bootstrap's documentation and grab the navbar they provide. We'll also remove that "Hello World" Text, We're going to add in the navbar right after the body tag

<body>
  <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="#">D+B Super Discount</a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </div>

We should endup with something like this

navbar-before

Now time for some CSS, We're gonna replace the text for their logo in the navbar, We'll do that by manipulating the a.brand tag

a.brand{
  background:url('logo.png') no-repeat;
  background-position-y: 4px;
  margin-right:8px;
  height:40px;
  width:260px;
  text-indent:-9999px;
  }

Our navbar should look something like this -

db-nav

Nice! You've just written your first few lines of CSS! Let's go ahead and keep moving. We're going to add a carousel next, again we're going to refrence back to Bootstrap's documentation and copy their example there.

<!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img src="store-front.jpg" alt="First slide">
        </div>
      <div class="item">
          <img src="store.jpg" alt="Second slide">
        </div>
        <div class="item">
          <img src="store-front.jpg" alt="Second slide">
        </div>
        <div class="item">
          <img src="store.jpg">
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- /.carousel -->
  

navbar-before

<!DOCTYPE html>
<html>
  <head>
    <title>D&B Super Discount</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <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="#"></a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </div>
<!-- Carousel
    ================================================== -->
    <div id="myCarousel" class="carousel slide">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
        <li data-target="#myCarousel" data-slide-to="3"></li>
      </ol>
      <div class="carousel-inner">
        <div class="item active">
          <img src="store.jpg" alt="First slide">
        </div>
      <div class="item">
          <img src="store-front.jpg" alt="Second slide">
        </div>
        <div class="item">
          <img src="store.jpg" alt="Second slide">
        </div>
        <div class="item">
          <img src="store.jpg">
        </div>
      </div>
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
      <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- /.carousel -->
    <div class="container">
      <div class="jumbotron">
        <h1>Welcome to D+B Super Discounts!</h1>
        <p class="lead">
        We are a family owned business in the city of Azusa, We've been in buisness for the past 15 years suppling your needs of general merchandise, gifts, snacks, and other knick nack items. Please have a look at our store and let us know how we can help you. If there is anything you are interested feel free to give us a call or shoot us an email, and we will respond as soon as possible! Thanks & Enjoy!!!
        </p>
    </div>
    <div class="row stuff">    
      <div class="col-xs-4">
        <h2>Chips</h2>
         <img src="chips.jpg" class="img-circle">
         <p>With a large selection from Fritos Lays, We carry a diverse amount of chips and snacks for all your munchies</p>
      </div>
      <div class="col-xs-4">
        <h2>Ice Cream</h2>
         <img src="cream.jpg" class="img-circle">
         <p>Are you sweating balls? Need to cool down a bit? Why not grab an Ice Cream Bar! We serve all selections from Blue Bunny so you know their nice and tasty!</p>
      </div>
      <div class="col-xs-4">
       <h2>Family Owned</h2>
       <img src="front.jpg" class="img-circle">
       <p>None of that corporation stuff here, we've been a family owned buisness for over 15 years, Customer Service is our priority and our regulars know and love us!</p>
      </div>
    </div>
    <hr />
    </div><!-- End Container-->
    <!-- Contact -->
    <div class="contact">
    <h2>Visit Us</h2>
    <iframe src="https://www.google.com/maps/embed?pb=!1m24!1m12!1m3!1d3303.492936250925!2d-117.9166253!3d34.1081281!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m9!1i0!3e0!4m0!4m5!1s0x80c327fd86d936a5%3A0x8493d45f8cecebd!2s843+S+Lark+Ellen+Ave%2C+Azusa%2C+CA+91702!3m2!1d34.1081281!2d-117.91662529999999!5e0!3m2!1sen!2sus!4v1388034585886" width="100%" height="270" frameborder="0" style="border:0"></iframe>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </body>
</html>

Select your client below