Hotel WebSite Project

1.Resources
…………………

EXTERNAL CSS
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

EXTERNAL JAVASCRIPT
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js

2.HTML CODE
…………………

<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>
</div>

<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>

3.CSS CODE
…………………..

@import url('https://fonts.googleapis.com/css?family=Raleway');
nav
{
z-index: 10000;
}
nav li
{
margin-left: 15%;
}
.navbar-brand
{
font-family: cursive;
}
#img_container img
{
width: 100%;
}
.corner_image
{
position: absolute; top: 7em; left: 0; max-width: 10%;
}
.amenity_holder
{
background-color: #FFF;
}
#amenities
{
margin: 0px auto;
}
.amenity-headlines
{
text-align: center; font-family: 'Raleway', sans-serif; margin: .5em 0em;
}
.amenity-descriptions
{
font-family: 'Raleway', sans-serif;
}