corousel
This commit is contained in:
QkoSad
@@ -42,4 +42,18 @@ body{
|
|||||||
border-right: 1px solid #ddd;
|
border-right: 1px solid #ddd;
|
||||||
border-bottom: 1px solid #ddd;
|
border-bottom: 1px solid #ddd;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.carousel {
|
||||||
|
background:#512DA8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-item img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
+130
-33
@@ -65,46 +65,70 @@
|
|||||||
</ul>
|
</ul>
|
||||||
<span class="navbar-text">
|
<span class="navbar-text">
|
||||||
<a data-toggle="modal" data-target="#loginModal">
|
<a data-toggle="modal" data-target="#loginModal">
|
||||||
<span class="fa fa-sign-in"></span> Login</a>
|
<span class="fa fa-sign-in"></span> Login</a
|
||||||
</span>
|
>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
<div id="loginModal" class="modal fade" role="dialog">
|
<div id="loginModal" class="modal fade" role="dialog">
|
||||||
<div class="modal-dialog modal-lg" role="content">
|
<div class="modal-dialog modal-lg" role="content">
|
||||||
<!-- Modal content-->
|
<!-- Modal content-->
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="modal-header">
|
<div class="modal-header">
|
||||||
<h4 class="modal-title">Login </h4>
|
<h4 class="modal-title">Login</h4>
|
||||||
<button type="button" class="close" data-dismiss="modal">×</button>
|
<button type="button" class="close" data-dismiss="modal">
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<form>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group col-sm-4">
|
||||||
|
<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>
|
||||||
<div class="modal-body">
|
<div class="form-group col-sm-4">
|
||||||
<form>
|
<label class="sr-only" for="exampleInputPassword3"
|
||||||
<div class="form-row">
|
>Password</label
|
||||||
<div class="form-group col-sm-4">
|
>
|
||||||
<label class="sr-only" for="exampleInputEmail3">Email address</label>
|
<input
|
||||||
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail3" placeholder="Enter email">
|
type="password"
|
||||||
</div>
|
class="form-control form-control-sm mr-1"
|
||||||
<div class="form-group col-sm-4">
|
id="exampleInputPassword3"
|
||||||
<label class="sr-only" for="exampleInputPassword3">Password</label>
|
placeholder="Password"
|
||||||
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword3" placeholder="Password">
|
/>
|
||||||
</div>
|
|
||||||
<div class="col-sm-auto">
|
|
||||||
<div class="form-check">
|
|
||||||
<input class="form-check-input" type="checkbox">
|
|
||||||
<label class="form-check-label"> Remember me
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="form-row">
|
|
||||||
<button type="button" class="btn btn-secondary btn-sm ml-auto" data-dismiss="modal">Cancel</button>
|
|
||||||
<button type="submit" class="btn btn-primary btn-sm ml-1">Sign in</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-sm-auto">
|
||||||
|
<div class="form-check">
|
||||||
|
<input class="form-check-input" type="checkbox" />
|
||||||
|
<label class="form-check-label"> Remember me </label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-secondary btn-sm ml-auto"
|
||||||
|
data-dismiss="modal"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button type="submit" class="btn btn-primary btn-sm ml-1">
|
||||||
|
Sign in
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<header class="jumbotron">
|
<header class="jumbotron">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@@ -137,6 +161,79 @@
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="container">
|
<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="d-none d-sm-block">
|
||||||
|
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="d-none d-sm-block">
|
||||||
|
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">
|
||||||
|
<h4>Executive Chef</h4>
|
||||||
|
<p class="d-none d-sm-block">
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="row row-content">
|
<div class="row row-content">
|
||||||
<div class="col col-sm col-md">
|
<div class="col col-sm col-md">
|
||||||
<div class="media">
|
<div class="media">
|
||||||
|
|||||||
Reference in New Issue
Block a user