forked from rainzoneg/proyek-SBD
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
78 lines (61 loc) · 16.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"><title>Home - Brand</title><link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan+Script"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css"><link rel="stylesheet" href="assets/css/styles.min.css"></head><body id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav" data-bs-offset="54"><nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-dark" id="mainNav"><div class="container"><a class="navbar-brand" href="#page-top">XX2</a><button data-bs-toggle="collapse" data-bs-target="#navbarResponsive" class="navbar-toggler navbar-toggler-right" type="button" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button><div class="collapse navbar-collapse" id="navbarResponsive"><ul class="navbar-nav ms-auto text-uppercase"><li class="nav-item"><a class="nav-link" href="#services">Film</a></li><li class="nav-item"><a class="nav-link" href="#portfolio">event</a></li><li class="nav-item"><a class="nav-link" href="#team">about</a></li><li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li></ul></div></div></nav><header class="masthead" style="background: url("assets/img/cover1.jpg");"><img><div class="container"><div class="intro-text"><div class="intro-lead-in"><span>Welcome To Our Cinema!</span></div><div class="intro-heading text-uppercase"><span style="/*color: rgb(183,86,86);*/">the biggest film collection</span></div><a class="btn btn-primary btn-xl text-uppercase" role="button" href="#services">Book now</a></div></div></header><section class="bg-light" id="portfolio"><div class="container"><div class="row"><div class="col-lg-12 text-center"><h2 class="text-uppercase section-heading">top highest rating</h2><h3 class="text-muted section-subheading">Enam Film mendapat rating terbaik di Indonesia</h3></div></div><div class="row"><div class="col-sm-6 col-md-4 portfolio-item"><a class="portfolio-link" href="#portfolioModal1" data-bs-toggle="modal"><div class="text-center zoomin frame" style="width: 100%;height: 100%;"><img class="img-fluid" src="assets/img/portfolio/1-thumbnail.jpg"></div></a><div class="portfolio-caption"><h4>Dora</h4><p class="text-muted">Illustration</p></div></div><div class="col-sm-6 col-md-4 portfolio-item"><a class="portfolio-link" href="#portfolioModal2" data-bs-toggle="modal"><div class="text-center zoomin frame" style="width: 100%;height: 100%;"><img class="img-fluid" src="assets/img/portfolio/2-thumbnail.jpg"></div></a><div class="portfolio-caption"><h4>Diego</h4><p class="text-muted">Graphic Design</p></div></div><div class="col-sm-6 col-md-4 portfolio-item"><a class="portfolio-link" href="#portfolioModal3" data-bs-toggle="modal"><div class="text-center zoomin frame" style="width: 100%;height: 100%;"><img class="img-fluid" src="assets/img/portfolio/3-thumbnail.jpg"></div></a><div class="portfolio-caption"><h4>Mobil</h4><p class="text-muted">Identity</p></div></div><div class="col-sm-6 col-md-4 portfolio-item"><a class="portfolio-link" href="#portfolioModal4" data-bs-toggle="modal"><div class="portfolio-hover"><div class="portfolio-hover-content"><i class="fa fa-plus fa-3x"></i></div></div><img class="img-fluid" src="assets/img/portfolio/4-thumbnail.jpg"></a><div class="portfolio-caption"><h4>Wood</h4><p class="text-muted">Branding</p></div></div><div class="col-sm-6 col-md-4 portfolio-item"><a class="portfolio-link" href="#portfolioModal5" data-bs-toggle="modal"><div class="portfolio-hover"><div class="portfolio-hover-content"><i class="fa fa-plus fa-3x"></i></div></div><img class="img-fluid" src="assets/img/portfolio/5-thumbnail.jpg"></a><div class="portfolio-caption"><h4>Lal</h4><p class="text-muted">Website Design</p></div></div><div class="col-sm-6 col-md-4 portfolio-item"><a class="portfolio-link" href="#portfolioModal6" data-bs-toggle="modal"><div class="portfolio-hover"><div class="portfolio-hover-content"><i class="fa fa-plus fa-3x"></i></div></div><img class="img-fluid" src="assets/img/portfolio/6-thumbnail.jpg"></a><div class="portfolio-caption"><h4>App</h4><p class="text-muted">Photography</p></div></div></div></div></section><section id="services"><div class="container"><div class="row"><div class="col-lg-12 text-center"><h2 class="text-uppercase section-heading">Services</h2><h3 class="text-muted section-subheading">Lorem ipsum dolor sit amet consectetur</h3></div></div><div class="row text-center"><div class="col-md-4"><span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fa fa-shopping-cart fa-stack-1x fa-inverse"></i></span><h4 class="section-heading">E-Commerce</h4><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p></div><div class="col-md-4"><span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fa fa-laptop fa-stack-1x fa-inverse"></i></span><h4 class="section-heading">Responsive Design</h4><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p></div><div class="col-md-4"><span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fa fa-lock fa-stack-1x fa-inverse"></i></span><h4 class="section-heading">Web Security</h4><p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p></div></div></div></section><!-- Paradise Slider -->
<div style="color:rgb(229, 188, 49);"class="x_002_lcd_main_wrap"> <!-- Lcd Main Wrapper -->
<div class="row"> <!-- .row -->
<div class="col-lg"> <!-- .col-lg -->
<h1 style="color:rgb(229, 188, 49);">Film on House</h1>
<p>Sekarang tanpa perlu khawatir ke bioskop dalam kondisi pandemi. Cinema XX2 membuka layanan film on house yang membuat suasana bioskop tetap ada walau di Rumah</p>
<ul>
<li><span class="fa fa-check-square-o" style="color:rgb(229, 188, 49);"></span>Protokol kesehatan tetap terjaga</li>
<li><span class="fa fa-check-square-o" style="color:rgb(229, 188, 49);"></span>Jasa pembuatan popcorn</li>
<li><span class="fa fa-check-square-o" style="color:rgb(229, 188, 49);"></span>Menggunakan proyektor LCD</li>
</ul>
<a href="#">Pesan</a>
</div> <!-- /.col-lg -->
<div class="col-lg"> <!-- .col-lg -->
<div class="x_002_lcd_inner_wrap"> <!-- Lcd Inner Wrapper -->
<!-- Lcd Image -->
<img src="assets/img/x_002_lcd_img.png" alt="x_002_lcd_img">
<!-- Slider -->
<div id="x_002_lcd" class="carousel slide x_002_lcd_indicators x_002_lcd_control_button thumb_scroll_x swipe_x ps_easeOutCirc" data-bs-ride="carousel" data-bs-pause="hover" data-bs-interval="8000" data-bs-duration="2000">
<!-- Indicators -->
<ol class="carousel-indicators" >
<li data-bs-target="#x_002_lcd" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#x_002_lcd" data-bs-slide-to="1"></li>
<li data-bs-target="#x_002_lcd" data-bs-slide-to="2"></li>
</ol>
<!-- Wrapper For Slides -->
<div class="carousel-inner" role="listbox">
<!-- First Slide -->
<div class="carousel-item active">
<!-- Image -->
<img src="assets/img/x_002_lcd_01.jpg" alt="x_002_lcd_01">
</div> <!-- /item -->
<!-- End of First Slide -->
<!-- Second Slide -->
<div class="carousel-item">
<!-- Image -->
<img src="assets/img/x_002_lcd_02.jpg" alt="x_002_lcd_02">
</div> <!-- /item -->
<!-- End of Second Slide -->
<!-- Third Slide -->
<div class="carousel-item">
<!-- Image -->
<img src="assets/img/x_002_lcd_03.jpg" alt="x_002_lcd_03">
</div> <!-- /item -->
<!-- End of Third Slide -->
</div> <!-- End of Wrapper For Slides -->
<!-- Left Control -->
<a class="carousel-control-prev" href="#x_002_lcd" data-bs-slide="prev">
<span class="fa fa-angle-left"></span>
</a>
<!-- Right Control -->
<a class="carousel-control-next" href="#x_002_lcd" data-bs-slide="next">
<span class="fa fa-angle-right"></span>
</a>
</div> <!-- End Slider -->
</div> <!-- /Lcd Inner Wrapper -->
</div> <!-- /.col-md-6 -->
</div> <!-- /.row -->
</div> <!-- /Lcd Wrapper -->
<!-- End Paradise Slider -->
<!-- End --><section class="py-5"><div class="container"><div class="row"><div class="col-sm-6 col-md-3"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/clients/creative-market.jpg"></a></div><div class="col-sm-6 col-md-3"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/clients/designmodo.jpg"></a></div><div class="col-sm-6 col-md-3"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/clients/envato.jpg"></a></div><div class="col-sm-6 col-md-3"><a href="#"><img class="img-fluid d-block mx-auto" src="assets/img/clients/themeforest.jpg"></a></div></div></div></section><footer class="footer-dark"><div class="container"><div class="row"><div class="col-sm-6 col-md-3 item"><h3>Services</h3><ul><li><a href="#">Web design</a></li><li><a href="#">Development</a></li><li><a href="#">Hosting</a></li></ul></div><div class="col-sm-6 col-md-3 item"><h3>About</h3><ul><li><a href="#">Company</a></li><li><a href="#">Team</a></li><li><a href="#">Careers</a></li></ul></div><div class="col-md-6 item text"><h3>Company Name</h3><p>Praesent sed lobortis mi. Suspendisse vel placerat ligula. Vivamus ac sem lacus. Ut vehicula rhoncus elementum. Etiam quis tristique lectus. Aliquam in arcu eget velit pulvinar dictum vel in justo.</p></div><div class="col item social"><a href="#"><i class="icon ion-social-facebook"></i></a><a href="#"><i class="icon ion-social-twitter"></i></a><a href="#"><i class="icon ion-social-snapchat"></i></a><a href="#"><i class="icon ion-social-instagram"></i></a></div></div><p class="copyright">Company Name © 2021</p></div></footer><div class="modal fade text-center portfolio-modal" role="dialog" tabindex="-1" id="portfolioModal1"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="container"><div class="row"><div class="col-lg-8 mx-auto"><div class="modal-body"><h2 class="text-uppercase">Project Name</h2><p class="text-muted item-intro">Lorem ipsum dolor sit amet consectetur.</p><img class="img-fluid d-block mx-auto" src="assets/img/portfolio/1-full.jpg"><p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p><ul class="list-unstyled"><li>Date: January 2017</li><li>Client: Threads</li><li>Category: Illustration</li></ul><button class="btn btn-primary" type="button" data-bs-dismiss="modal"><i class="fa fa-times"></i><span> Close Project</span></button></div></div></div></div></div></div></div><div class="modal fade text-center portfolio-modal" role="dialog" tabindex="-1" id="portfolioModal2"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="container"><div class="row"><div class="col-lg-8 mx-auto"><div class="modal-body"><h2 class="text-uppercase">Project Name</h2><p class="text-muted item-intro">Lorem ipsum dolor sit amet consectetur.</p><img class="img-fluid d-block mx-auto" src="assets/img/portfolio/2-full.jpg"><p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p><ul class="list-unstyled"><li>Date: January 2017</li><li>Client: Threads</li><li>Category: Illustration</li></ul><button class="btn btn-primary" type="button" data-bs-dismiss="modal"><i class="fa fa-times"></i><span> Close Project</span></button></div></div></div></div></div></div></div><div class="modal fade text-center portfolio-modal" role="dialog" tabindex="-1" id="portfolioModal3"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="container"><div class="row"><div class="col-lg-8 mx-auto"><div class="modal-body"><h2 class="text-uppercase">Project Name</h2><p class="text-muted item-intro">Lorem ipsum dolor sit amet consectetur.</p><img class="img-fluid d-block mx-auto" src="assets/img/portfolio/3-full.jpg"><p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p><ul class="list-unstyled"><li>Date: January 2017</li><li>Client: Threads</li><li>Category: Illustration</li></ul><button class="btn btn-primary" type="button" data-bs-dismiss="modal"><i class="fa fa-times"></i><span> Close Project</span></button></div></div></div></div></div></div></div><div class="modal fade text-center portfolio-modal" role="dialog" tabindex="-1" id="portfolioModal4"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="container"><div class="row"><div class="col-lg-8 mx-auto"><div class="modal-body"><h2 class="text-uppercase">Project Name</h2><p class="text-muted item-intro">Lorem ipsum dolor sit amet consectetur.</p><img class="img-fluid d-block mx-auto" src="assets/img/portfolio/4-full.jpg"><p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p><ul class="list-unstyled"><li>Date: January 2017</li><li>Client: Threads</li><li>Category: Illustration</li></ul><button class="btn btn-primary" type="button" data-bs-dismiss="modal"><i class="fa fa-times"></i><span> Close Project</span></button></div></div></div></div></div></div></div><div class="modal fade text-center portfolio-modal" role="dialog" tabindex="-1" id="portfolioModal5"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="container"><div class="row"><div class="col-lg-8 mx-auto"><div class="modal-body"><h2 class="text-uppercase">Project Name</h2><p class="text-muted item-intro">Lorem ipsum dolor sit amet consectetur.</p><img class="img-fluid d-block mx-auto" src="assets/img/portfolio/5-full.jpg"><p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p><ul class="list-unstyled"><li>Date: January 2017</li><li>Client: Threads</li><li>Category: Illustration</li></ul><button class="btn btn-primary" type="button" data-bs-dismiss="modal"><i class="fa fa-times"></i><span> Close Project</span></button></div></div></div></div></div></div></div><div class="modal fade text-center portfolio-modal" role="dialog" tabindex="-1" id="portfolioModal6"><div class="modal-dialog modal-lg" role="document"><div class="modal-content"><div class="container"><div class="row"><div class="col-lg-8 mx-auto"><div class="modal-body"><h2 class="text-uppercase">Project Name</h2><p class="text-muted item-intro">Lorem ipsum dolor sit amet consectetur.</p><img class="img-fluid d-block mx-auto" src="assets/img/portfolio/6-full.jpg"><p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p><ul class="list-unstyled"><li>Date: January 2017</li><li>Client: Threads</li><li>Category: Illustration</li></ul><button class="btn btn-primary" type="button" data-bs-dismiss="modal"><i class="fa fa-times"></i><span> Close Project</span></button></div></div></div></div></div></div></div><script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0/js/bootstrap.bundle.min.js"></script><script src="assets/js/script.min.js"></script></body></html>