Scribd
Upload
75 views14 pages

Format Fix?

The document is the code for a restaurant website. It includes HTML markup for pages, navigation, headers, images and content sections. Styling is added with Bootstrap classes. Modals and carousels are built in for features like logging in, reserving tables and displaying content slides.

Uploaded by

gorrilaz59158
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
75 views14 pages

Format Fix?

The document is the code for a restaurant website. It includes HTML markup for pages, navigation, headers, images and content sections. Styling is added with Bootstrap classes. Modals and carousels are built in for features like logging in, reserving tables and displaying content slides.

Uploaded by

gorrilaz59158
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 14

<!

DOCTYPE html>
<html lang="en">

<head>
<!--meta tags-->
<meta charset="utf-8">
<meta name="viewport"
content="width-device-width
initial-scale=1 shrink-to-fit=no">
<meta http-equiv="x-ua-
compatible" content="ie=edge">

<!--Bootstrap CSS-->
<!-- build:css css/main.css -->
<link rel="stylesheet"
href="node_modules/bootstrap/dis
t/css/bootstrap.min.css">
<link rel="stylesheet"
href="node_modules/font-
awesome/css/font-
awesome.min.css">
<link rel="stylesheet"
href="css/bootstrap-social.css">
<link rel="stylesheet"
href="css/styles.css">
<!-- endbuild -->

<title>Ristorante Con
Fusion</title>
</head>

<body>
<nav class="navbar navbar-
inverse navbar-toggleable-sm
fixed-top">
<div class="container">
<a class="navbar-brand"
href="#"><img
src="img/logo.png" height="30"
width="41"></a>
<button class="navbar-toggler"
type="button" data-
toggle="collapse" data-
target="#Navbar">
<span class="navbar-toggler-
icon"></span>
</button>
<div class="collapse navbar-
collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a
class="nav-link" href="#"><span
class="fa fa-home fa-lg"></span>
Home</a></li>
<li class="nav-item"><a
class="nav-link"
href="./aboutus.html"><span
class="fa fa-info fa-lg"></span>
About</a></li>
<li class="nav-item"><a
class="nav-link"
href="./menu.html"><span
class="fa fa-list fa-lg"></span>
Menu</a></li>
<li class="nav-item"><a
class="nav-link"
href="./contactus.html"><span
class="fa fa-address-card fa-lg">
</span> Contact</a></li>
</ul>
<span class="navbar-text"><a
id="myBtn"> <!--
datatargetandmodal-->
<span class="fa fa-sign-
in"></span>Login</a>
</span>
</div>
</div>
</nav>

<div id="loginModal"
class="modal fade"
role="dialog">
<div class="modal-dialog"
role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-
title">Login</h4>
<button id="loginClose"
type="button" class="close"><!--
dismiss in here-->
&times</button>
</div>
<div class="modal-body">
<form class="form-inline">
<div class="form-group">
<label class="sr-only"
for="exampleInputEmail3">Email
address</label>
<input type="email" class="form-
control form-control-sm mr-1"
id="exampleInputEmail3"
placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only"
for="exampleInputPassword3">Pa
ssword</label>
<input type="password"
class="form-control form-control-
sm mr-1"
id="exampleInputPassword3"
placeholder="Password">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input"
type="checkbox"> Remember me
</label>
</div>
</form>
</div>
<div class="modal-footer">
<button id="loginClose1"
type="button" class="btn btn-
default btn-
sm">Cancel</button><!--dismiss
in here-->
<button type="submit"
class="btn btn-primary btn-
sm">Sign in</button>
</div>
</div>
</div>
</div>
<div id="reserveModal"
class="modal fade"
role="dialog">
<div class="modal-dialog"
role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Reserve
a Table</h4>
<button id="reserveClose"
type="button"
class="close">&times</button>
<!--dismiss in here-->
</div>
<div class="modal-body">
<form>
<div class="row form-group">
<p class="col-12 col-sm-
3">Number of Guests</p>
<div class="form-check col-12 col-
sm-9">
<label class="radio-inline
selected"><input type="radio"
name="optradio" checked> 1
</label>
<label class="radio-inline offset-
1"><input type="radio"
name="optradio"> 2 </label>
<label class="radio-inline offset-
1"><input type="radio"
name="optradio"> 3 </label>
<label class="radio-inline offset-
1"><input type="radio"
name="optradio"> 4 </label>
<label class="radio-inline offset-
1"><input type="radio"
name="optradio"> 5 </label>
<label class="radio-inline offset-
1"><input type="radio"
name="optradio"> 6 </label>
</div>
</div>
<div class="row form-group">
<p class="col-12 col-sm-
3">Section</p>
<div class="btn-group col-12 col-
sm-9" data-toggle="buttons">
<label class="btn btn-success
active">
<input type="radio"
name="options" id="option1"
autocomplete="off" checked>
Non-Smoking
</label>
<label class="btn btn-danger">
<input type="radio"
name="options" id="option1"
autocomplete="off">
Smoking
</label>
</div>
</div>
<div class="row form-group">
<p class="col-12 col-sm-3">Date
and Time</p>
<div class="col-12 col-sm-4 input-
group">
<span class="input-group-
addon">
<i class="fa fa-calendar"></i>
</span>
<input class="form-control"
type="text" id="date"
placeholder="Date">
</div>
<div class="col-12 col-sm-4 input-
group">
<span class="input-group-
addon">
<i class="fa fa-clock-o"></i>
</span>
<input class="form-control"
type="text" id="time"
placeholder="Time">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="offset-3 col-9">
<button id="reserveClose1"
type="button" class="btn btn-
secondary col-
4">Cancel</button> <!--dismiss
in here-->
<button type="button" class="btn
btn-primary col-
4">Reserve</button>
</div>
</div>
</div>
</div>
</div>

<header class="jumbotron">
<div class="container">
<div class="row align-items-
center">
<div class="col-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the
World's best cuisines, and create a
unique fusion experience. Our
lipsmacking creations will tickle
your culinary senses!</p>
</div>
<div class="col-12 col-sm align-
self-center">
<img src="img/logo.png">
</div>
<div class="col col-sm align-self-
center">
<a role="button" class="btn btn-
block btn-warning btn-sm"
id="reserveBtn"
href="#reserveModal">Reserve
Table</button> <!--datatarget
and toggle-->
</a>
</div>
</div>
</div>

</header>
<div class="container">
<div class="row row-content">
<div class="col">
<div id="mycarousel"
class="carousel slide" data-
ride="carousel">
<div class="carousel-inner"
role="listbox">
<div class="carousel-item
active">
<img class="d-block img-fluid"
src="img/uthappizza.png"
alt="Uthappizza">
<div class="carousel-caption d-
none d-md-block">
<h2>Uthappizza
<span class="badge badge-
danger">HOT</span>
<span class="badge badge-pill
badge-default">$4.99</span>
</h2>
<p class="hidden-xs-down">A
unique combination of Indian
Uthappam (pancake) and Italian
pizza, topped with Cerignola
olives, ripe vine cherry tomatoes,
Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid"
src="img/buffet.png"
alt="Buffet">
<div class="carousel-caption d-
none d-md-block">
<h2>Weekend Grand Buffet
<span class="badge badge-
danger">NEW</span></h2>
<p class="hidden-xs-
down">Featuring mouthwatering
combinations with a choice of five
different salads, six enticing
appetizers, six main entrees and
five choicest desserts. Free flowing
bubbly and soft drinks. All for just
$19.99 per person </p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid"
src="img/alberto.png"
alt="Alberto">
<div class="carousel-caption d-
none d-md-block">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="hidden-xs-
down">Award winning three-star
Michelin chef with wide
International experience having
worked closely with whos-who in
the culinary world, he specializes
in creating mouthwatering Indo-
Italian fusion experiences.
</p>
</div>
</div>
<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>
</ol>
<a class="carousel-control-prev"
href="#mycarousel"
role="button" data-slide="prev">
<span class="carousel-control-
prev-icon"></span>
</a>
<a class="carousel-control-next"
href="#mycarousel"
role="button" data-slide="next">
<span class="carousel-control-
next-icon"></span>
</a>
<button class="btn btn-danger
btn-sm" id="carousel-button">
<span class="fa fa-
play"></span>
</button>
</div>
</div>
</div>
</div>

<div class="row row-content


align-items-center">
<div class="col-sm-4 col-md-3
flex-last">
<h3>Our Lipsmacking Culinary
Creations</h3>
</div>
<div class="col-sm col-md flex-
first">
<div class="media">
<img class="d-flex mr-3 img-
thumbnail align-self-center"
src="img/uthappizza.png"
alt="Uthappizza">
<div class="media-body">
<h2 class="mt-0">Uthappizza
<span class="badge badge-
danger">HOT</span>
<span class="badge badge-pill
badge-default">$4.99</span>
</h2>
<p class="hidden-xs-down">A
unique combination of Indian
Uthappam (pancake) and Italian
pizza, topped with Cerignola
olives, ripe vine cherry tomatoes,
Vidalia onion, Guntur chillies and
Buffalo Paneer.</p>
</div>
</div>
</div>
</div>
<div class="row row-content
align-items-center">
<div class="col-sm-4 col-md-3">
<h3>This Month's
Promotions</h3>
</div>
<div class="col-sm col-md">
<h2 class="mt-0">Weekend
Grand Buffet <span class="badge
badge-
danger">NEW</span></h2>
<p class="hidden-xs-
down">Featuring mouthwatering
combinations with a choice of five
different salads, six enticing
appetizers, six main entrees and
five choicest desserts. Free flowing
bubbly and soft drinks. All for just
$19.99 per person </p>
</div>
<div class="media">
<img class="d-flex ml-3 img-
thumbnail align-self-center"
src="img/buffet.png"
alt="Buffet">
<div class="media-body">
</div>
</div>

<div class="row row-content


align-items-center">
<div class="col-sm-4 col-md-3
flex-last">
<h3>Meet our Culinary
Specialists</h3>
</div>
<div class="col-sm col-md flex-
first">
<div class="media">
<img class="d-flex mr-3 img-
thumbnail align-self-center"
src="img/alberto.png"
alt="Alberto Somayya">
<div class="media-body">
<h2 class="mt-0">Alberto
Somayya</h2>
<h4>Executive Chef</h4>
<p class="hidden-xs-
down">Award winning three-star
Michelin chef with wide
International experience having
worked closely with whos-who in
the culinary world, he specializes
in creating mouthwatering Indo-
Italian fusion experiences.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-5 offset-1 col-sm-
2">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="#">Home</a></li>
<li><a
href="./aboutus.html">About</a>
</li>
<li><a href="#">Menu</a></li>
<li><a
href="#">Contact</a></li>
</ul>
</div>
<div class="col-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<span class="fa fa-phone fa-
lg"></span>: +852 1234
5678<br>
<span class="fa fa-fax fa-
lg"></span>: +852 8765
4321<br>
<span class="fa fa-envelope fa-
lg"></span>: <a
href="mailto:[email protected]"
>[email protected]</a>
</address>
</div>
<div class="col col-sm-4 align-
self-center">
<div style="text-align: center">
<a class="btn btn-social-icon btn-
google-plus"
href="http://google.com/+"><i
class="fa fa-google-
plus"></i></a>
<a class="btn btn-social-icon btn-
facebook"
href="http://www.facebook.com/pr
ofile.php?id="><i class="fa fa-
facebook"></i></a>
<a class="btn btn-social-icon btn-
linkedin"
href="http://www.linkedin.com/in/"
><i class="fa fa-
linkedin"></i></a>
<a class="btn btn-social-icon btn-
twitter"
href="http://twitter.com/"><i
class="fa fa-twitter"></i></a>
<a class="btn btn-social-icon btn-
youtube"
href="http://youtube.com/"><i
class="fa fa-youtube"></i></a>
<a class="btn btn-social-icon"
href="mailto:"><i class="fa fa-
envelope-o"></i></a>
</div>
</div>
</div>
<div class="row justify-content-
center">
<div class="col-auto">
<p>© Copyright 2015 Ristorante
Con Fusion</p>
</div>
</div>
</div>
</footer>

<!--Jquery, Tether, JS Rel-->


<!-- build:js js/main.js -->
<script
src="node_modules/jquery/dist/jqu
ery.min.js"></script>
<script
src="node_modules/tether/dist/js/t
ether.min.js"></script>
<script
src="node_modules/bootstrap/dist
/js/bootstrap.min.js"></script>
<script
src="js/scripts.js"></script>
<!-- endbuild -->
</body>
</html>

You might also like