<!-- In today's project I'll be using HTML, CSS, Bootstrap, and perhaps a small amount of Javascript/jQuery. In this project I'll aim to utilize the Bootstrap grid system much more effectively than in the last project.

This should result in a webpage that's much more friendly. That's the goal at least, we'll see how things play out. Let's get to work! 

###
I believe it took 3 days, but this project is finally finished. It's not perfect, but I'm really proud of the website I just built. It's the first thing I've built that's somewhat sellable.

I know there's some problems here, but I wouldn't be surprised if I would be able to sell a website like this to some of the small family owned restaurants or inns in the US.

This project taught me a lot about responsive design, and working with Bootstrap's awesome carousel and dropdown menus. I also learned the importance of resizing photos, and how to use bootstrap's grid system more effectively to not have to rely on absolute positioning so much.

The only error I'm seeing with this website now is that it jumps to the top of the screen on my iPhone everytime the picture in the carousel changes. This makes viewing this page a pain on iPhone.

Strangely enough, however, I don't seem to have that same problem on my Mac even if I shrink the viewport. It only happens on my iPhone. I'd assume this means I have some small logical error in my code, but it could also mean there's just some small problem with codepen on iPhone.

I don't know. I've learned as much as I could from this project, so now I'll share it and move on to the next one. That looks like it's going to be getting familiar with webpack and running a local host on my computer so that I'll be able to practice development even with an unreliable internet connection.

How exciting!

It's not amazing by world class developer standards, but I couldn't be more proud of what I've produced here. With each day, I'm becoming one step closer to being a kickass developer.

(Project completed June 2017)
-->
<title>Basic Hotel Website With Bootstrap </title>
 <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
     <span class= "navbar-brand">Barcelona Boutique</span>
  <div class="collapse navbar-collapse" id="navbarText">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#amenities">Amenities</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#myCarousel">Photos</a>
      </li>
    </ul>
  </div>
</nav>
<div id="img_container">
<img src="http://res.cloudinary.com/doooz7ytu/image/upload/v1496823067/swimming-828795_1280_dl3zmp.jpg" alt ="hotelView">
  <img class="corner_image" src="http://res.cloudinary.com/doooz7ytu/image/upload/v1496830708/stars-720213_1280_wrn3kl.png" alt="reviewers_award"
</div>
  <div class="container-fluid">
    <div class="row">
      <div class="amenity_holder col-6 col-md-3">
        <h2 class="amenity-headlines"> <a name="amenities">Pool</a> </h2>
        <img class="amenity_photo" src="http://res.cloudinary.com/doooz7ytu/image/upload/c_crop,h_720,w_1080/v1496896324/water-103817_1280_vxcxco.jpg">
        <p class="amenity-descriptions"> Enjoy a serene view of the mountains as you enjoy dipping and diving in the waters of our beautiful pool. </p>
  </div>
      <div class="amenity_holder col-6 col-md-3">
        <h2 class="amenity-headlines"> Coffee </h2>
        <img class="amenity_photo" src="http://res.cloudinary.com/doooz7ytu/image/upload/c_scale,h_720/v1496919390/coffee-563797_1280_wjbif4.jpg">
        <p class="amenity-descriptions"> A coffee maker, sugar, and a bag containing coffee beans of only the highest quality will be waiting for you in the cupboard. </p>
  </div>
      <div class="amenity_holder col-6 col-md-3">
        <h2 class="amenity-headlines">Luxury </h2>
        <img class="amenity_photo" src="http://res.cloudinary.com/doooz7ytu/image/upload/c_scale,h_720,w_1080/v1496919390/eat-1237431_1280_wrlgrc.jpg">
        <p class="amenity-descriptions"> Wine and fine from the comfort of your room. A wide variety of items are available to accomodate any diet. </p>
  </div>
      <div class="amenity_holder col-6 col-md-3">
        <h2 class="amenity-headlines"> Wifi </h2>
        <img class="amenity_photo" src="http://res.cloudinary.com/doooz7ytu/image/upload/c_crop,h_720,w_1080/v1496919387/wifi-1371030_1280_yyniiv.jpg">
        <p class="amenity-descriptions"> High speed Wifi with a strong signal from your room is another wonderful convenience Barcelona Boutique provides. </p>
  </div>
    </div> <!-- Closing div tag for row -->    
  </div> <!-- Closing div tag for container-fluid -->
    
    
    
    
    
    
    
    
    
    
    
  <!-- Carousel code begins below -->
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
       <ol class="carousel-indicators">
  <li class="active" data-target="#myCarousel" data-slide-to = "0"> </li>
  <li data-target="#myCarousel" data-slide-to = "1"> </li>
  <li data-target="#myCarousel" data-slide-to = "2"> </li>
  </ol>
    
    <div class="carousel-inner" role="listbox">
      <div class="carousel-item active">
        <img src="http://res.cloudinary.com/doooz7ytu/image/upload/v1496976556/hotel-1330846_1280_njbrnl.jpg" alt="firstpicture" class="img-responsive">
      </div>
      <div class="carousel-item">
        <img src="http://res.cloudinary.com/doooz7ytu/image/upload/c_crop,h_832,w_1280/v1496976567/hotel-1330841_1280_or5ugz.jpg" alt="secondpicture" class="img-responsive">
      </div>
      <div class="carousel-item">
        <img src="http://res.cloudinary.com/doooz7ytu/image/upload/c_crop,h_832,w_1280/v1496976565/hotel-1330845_1280_jotts2.jpg" alt="thirdpicture" class="img-responsive">
      </div>
  </div>
    <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
    </a>
</div>