Line 1: | Line 1: | ||
{{EPFL}} | {{EPFL}} | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
<!-- Wrapper--> | <!-- Wrapper--> | ||
<div class="wrapper"> | <div class="wrapper"> | ||
<!-- Page Header--> | <!-- Page Header--> | ||
− | <section class="module-page-title bg- | + | <section class="module-page-title bg-gray"> |
<div class="container"> | <div class="container"> | ||
<div class="row align-items-center"> | <div class="row align-items-center"> | ||
<div class="col-md-6"> | <div class="col-md-6"> | ||
<div class="page-title-desc"> | <div class="page-title-desc"> | ||
− | < | + | <h1 class="page-title-heading">Modal</h1> |
<!--p This theme will shake your world.--> | <!--p This theme will shake your world.--> | ||
</div> | </div> | ||
+ | </div> | ||
+ | <div class="col-md-6"> | ||
+ | <ol class="breadcrumb"> | ||
+ | <li class="breadcrumb-item"><a href="#">Home</a></li> | ||
+ | <li class="breadcrumb-item"><a href="#">Elements</a></li> | ||
+ | <li class="breadcrumb-item active">Modal</li> | ||
+ | </ol> | ||
</div> | </div> | ||
</div> | </div> | ||
Line 31: | Line 24: | ||
</section> | </section> | ||
<!-- Page Header end--> | <!-- Page Header end--> | ||
− | + | ||
− | <!-- | + | <!-- Modal--> |
<section class="module"> | <section class="module"> | ||
<div class="container"> | <div class="container"> | ||
− | <div class="row"> | + | <div class="row align-items-center"> |
− | <div class="col- | + | <div class="col-lg-6"> |
− | < | + | <p class="m-b-30"><img src="assets/images/main/about-4.jpg" alt=""></p> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | + | <div class="col-lg-5 offset-lg-1"> | |
− | <div class="col- | + | <h2>Easy and Simple.</h2> |
− | < | + | <p class="lead m-b-30">Map where your photos were taken and discover local points of interest. Map where your photos.</p> |
− | + | <button class="btn btn-circle btn-outline-brand m-b-30" type="button" data-toggle="modal" data-target="#modal-1">Open modal</button> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | + | </div> | |
− | + | <!-- Modal--> | |
− | + | <div class="modal fade" id="modal-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> | |
− | + | <div class="modal-dialog" role="document"> | |
− | + | <div class="modal-content"> | |
− | + | <div class="modal-header"> | |
− | + | <h5 class="modal-title">Modal title</h5> | |
− | + | <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
− | + | ||
− | + | ||
</div> | </div> | ||
− | + | <div class="modal-body">...</div> | |
− | + | <div class="modal-footer"> | |
− | + | <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button> | |
− | + | <button class="btn btn-primary" type="button">Save changes</button> | |
− | <div class=" | + | |
− | + | ||
− | + | ||
− | + | ||
− | <button class="btn btn- | + | |
− | + | ||
− | + | ||
</div> | </div> | ||
− | |||
</div> | </div> | ||
</div> | </div> | ||
− | + | </div> | |
− | + | </div> | |
− | + | </section> | |
− | + | <!-- Modal--> | |
− | + | <section class="module divider-top"> | |
− | + | <div class="container"> | |
− | + | <div class="row align-items-center"> | |
− | + | <div class="col-lg-5"> | |
− | + | <h2>Easy and Simple.</h2> | |
− | + | <p class="lead m-b-30">Map where your photos were taken and discover local points of interest. Map where your photos.</p> | |
− | + | <button class="btn btn-circle btn-outline-brand m-b-30" type="button" data-toggle="modal" data-target="#modal-2">Large modal</button> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
− | <div class="col- | + | <div class="col-lg-6 offset-lg-1"> |
− | < | + | <p class="m-b-30"><img src="assets/images/main/about-4.jpg" alt=""></p> |
− | + | </div> | |
− | + | </div> | |
− | + | <!-- Modal--> | |
− | + | <div class="modal fade" id="modal-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> | |
− | + | <div class="modal-dialog modal-lg" role="document"> | |
− | + | <div class="modal-content"> | |
− | + | <div class="modal-header"> | |
− | + | <h5 class="modal-title">Modal title</h5> | |
− | + | <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
+ | <div class="modal-body">...</div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | + | </div> | |
− | <div class="modal fade" id="modal- | + | </div> |
− | <div class="modal-dialog" role="document"> | + | </section> |
+ | <!-- Modal--> | ||
+ | <section class="module module divider-top"> | ||
+ | <div class="container"> | ||
+ | <div class="row align-items-center"> | ||
+ | <div class="col-lg-6"> | ||
+ | <p class="m-b-30"><img src="assets/images/main/about-4.jpg" alt=""></p> | ||
+ | </div> | ||
+ | <div class="col-lg-5 offset-lg-1"> | ||
+ | <h2>Easy and Simple.</h2> | ||
+ | <p class="lead m-b-30">Map where your photos were taken and discover local points of interest. Map where your photos.</p> | ||
+ | <button class="btn btn-circle btn-outline-brand m-b-30" type="button" data-toggle="modal" data-target="#modal-3">Small modal</button> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!-- Modal--> | ||
+ | <div class="modal fade" id="modal-3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> | ||
+ | <div class="modal-dialog modal-sm" role="document"> | ||
<div class="modal-content"> | <div class="modal-content"> | ||
<div class="modal-header"> | <div class="modal-header"> | ||
Line 196: | Line 104: | ||
<button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | <button class="close" type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | ||
</div> | </div> | ||
− | <div class="modal-body"> | + | <div class="modal-body">...</div> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
</div> | </div> | ||
</section> | </section> | ||
− | |||
− | |||
</html> | </html> | ||
{{EPFL/Footer}} | {{EPFL/Footer}} |
Revision as of 10:42, 30 September 2019
Modal
Easy and Simple.
Map where your photos were taken and discover local points of interest. Map where your photos.
Easy and Simple.
Map where your photos were taken and discover local points of interest. Map where your photos.
Easy and Simple.
Map where your photos were taken and discover local points of interest. Map where your photos.