arch/bootstrap4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

corousel

Browse Source
This commit is contained in:
QkoSad
2022-10-16 18:26:35 +03:00
parent b9f1c9aed0
commit efd7a6eccf
2 changed files with 144 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+14
View File
@@ -42,4 +42,18 @@ body{
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
.carousel {
background:#512DA8;
}
.carousel-item {
height: 300px;
}
.carousel-item img {
position: absolute;
top: 0;
left: 0;
min-height: 300px;
}
index.html
+130 -33
View File
@@ -65,46 +65,70 @@
</ul>
<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal">
<span class="fa fa-sign-in"></span> Login</a>
</span>
<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 modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login </h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
<div class="modal-dialog modal-lg" role="content">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Login</h4>
<button type="button" class="close" data-dismiss="modal">
&times;
</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 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 class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<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 class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword3"
>Password</label
>
<input
type="password"
class="form-control form-control-sm mr-1"
id="exampleInputPassword3"
placeholder="Password"
/>
</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>
<header class="jumbotron">
<div class="container">
@@ -137,6 +161,79 @@
</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="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="col col-sm col-md">
<div class="media">