Add Mono theme
This commit is contained in:
kbe
437
docs/Mono v10.0.1 HTML5/Mono v10.0.1/1. Home Pages/cafe.html
Normal file
437
docs/Mono v10.0.1 HTML5/Mono v10.0.1/1. Home Pages/cafe.html
Normal file
@@ -0,0 +1,437 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||
<meta name="description" content="">
|
||||
<meta name="keywords" content="">
|
||||
<title>Mono - Cafe</title>
|
||||
<!-- Favicon -->
|
||||
<link href="../assets/images/favicon.png" rel="shortcut icon">
|
||||
<!-- CSS -->
|
||||
<link href="../assets/plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.carousel.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/owl-carousel/owl.theme.default.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/magnific-popup/magnific-popup.min.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/scrollcue/scrollcue.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/swiper/swiper-bundle.min.css" rel="stylesheet">
|
||||
<link href="../assets/css/theme.css" rel="stylesheet">
|
||||
<!-- Fonts/Icons -->
|
||||
<link href="../assets/plugins/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
|
||||
<link href="../assets/plugins/font-awesome/css/all.css" rel="stylesheet">
|
||||
</head>
|
||||
<body data-preloader="1-dark">
|
||||
|
||||
<!-- Header -->
|
||||
<div class="header center header-color-black transparent-light sticky">
|
||||
<div class="container">
|
||||
<!-- Logo -->
|
||||
<div class="header-logo">
|
||||
<h3 class="uppercase letter-spacing-1"><a href="#">mono</a></h3>
|
||||
<!--
|
||||
<img class="logo-dark" src="../assets/images/your-logo-dark.png" alt="">
|
||||
<img class="logo-light" src="../assets/images/your-logo-light.png" alt="">
|
||||
-->
|
||||
</div>
|
||||
<!-- Menu -->
|
||||
<div class="header-menu">
|
||||
<ul class="nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#home">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#about">About</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#testimonial">Testimonial</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#menu">Our Menu</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#contact">Contact</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Extra -->
|
||||
<div class="header-menu-extra">
|
||||
<ul class="list-inline-sm">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-linkedin"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Menu Toggle -->
|
||||
<button class="header-toggle">
|
||||
<span></span>
|
||||
</button>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Header -->
|
||||
|
||||
<!-- Hero section -->
|
||||
<div id="home" class="section-2xl bg-image parallax" data-bg-src="../assets/images/background.jpg">
|
||||
<div class="bg-dark-06">
|
||||
<div class="container text-center">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
<h1 class="display-2 fw-medium">Mono Cafe</h1>
|
||||
<h6 class="uppercase fw-medium letter-spacing-2">Since 2017</h6>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div><!-- end bg-dark-* -->
|
||||
</div>
|
||||
<!-- end Hero section -->
|
||||
|
||||
<!-- About section -->
|
||||
<div id="about" class="section-lg bg-black">
|
||||
<div class="container">
|
||||
<div class="row g-5 align-items-center">
|
||||
<div class="col-12 col-lg-6">
|
||||
<img src="../assets/images/col-1-square.jpg" alt="">
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<h1 class="fw-normal">About Mono Cafe</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
|
||||
<a class="button button-lg button-outline-white mt-4 mt-lg-5" href="">Learn more</a>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end About section -->
|
||||
|
||||
<!-- Testimonial section -->
|
||||
<div id="testimonial" class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
|
||||
<div class="bg-dark-06">
|
||||
<div class="container">
|
||||
<div class="owl-carousel icon-3xl" data-owl-items="1" data-owl-dots="false" data-owl-nav="true" data-owl-autoplay="true">
|
||||
<!-- Testimonial box 1 -->
|
||||
<div class="testimonial-box">
|
||||
<i class="bi bi-chat-square-quote text-white mb-4"></i>
|
||||
<p class="mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
|
||||
<h4 class="fw-normal line-height-120">Emiley Haley</h4>
|
||||
<h6 class="font-small fw-normal uppercase m-0">Coffee Lover</h6>
|
||||
</div>
|
||||
<!-- Testimonial box 2 -->
|
||||
<div class="testimonial-box">
|
||||
<i class="bi bi-chat-square-quote text-white mb-4"></i>
|
||||
<p class="mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
|
||||
<h4 class="fw-normal line-height-120">Emiley Haley</h4>
|
||||
<h6 class="font-small fw-normal uppercase m-0">Coffee Lover</h6>
|
||||
</div>
|
||||
<!-- Testimonial box 3 -->
|
||||
<div class="testimonial-box">
|
||||
<i class="bi bi-chat-square-quote text-white mb-4"></i>
|
||||
<p class="mb-3">"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus."</p>
|
||||
<h4 class="fw-normal line-height-120">Emiley Haley</h4>
|
||||
<h6 class="font-small fw-normal uppercase m-0">Coffee Lover</h6>
|
||||
</div>
|
||||
</div><!-- end owl-carousel -->
|
||||
</div><!-- end container -->
|
||||
</div><!-- end bg-dark-* -->
|
||||
</div>
|
||||
<!-- end Testimonial section -->
|
||||
|
||||
<!-- Our Menu section -->
|
||||
<div id="menu" class="section-lg bg-black">
|
||||
<div class="container">
|
||||
<div class="row text-center">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
<h1 class="fw-normal">Explore Our Menu</h1>
|
||||
</div>
|
||||
</div><!-- end row(1) -->
|
||||
<!-- Tab Contents -->
|
||||
<div class="tab-content mt-5">
|
||||
<!-- Drinks -->
|
||||
<div class="tab-pane fade show active" id="drinks">
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-lg-6">
|
||||
<!-- Menu Item -->
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Cafe Latte</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$3.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Americano</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$2.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Espresso</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$2.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Cappucino</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.0</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Hot Chocolate</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.0</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<!-- Menu Item -->
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Mocha</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$3.0</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Macchiato</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.0</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Iced Coffee</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.0</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Iced Tea</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.0</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Iced Frappe</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.0</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
<!-- Desserts -->
|
||||
<div class="tab-pane fade" id="desserts">
|
||||
<div class="row g-5">
|
||||
<div class="col-12 col-lg-6">
|
||||
<!-- Menu Item -->
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Classic Cheesecake</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Chocolate Cheesecake</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Strawberry Cheesecake</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Nutella Cheesecake</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-lg-6">
|
||||
<!-- Menu Item -->
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Classic Cheesecake</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Chocolate Cheesecake</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Strawberry Cheesecake</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Menu Item -->
|
||||
<hr class="mt-3 mb-3">
|
||||
<div class="d-md-flex justify-content-between">
|
||||
<div class="d-md-inline-block me-md-3">
|
||||
<h5 class="fw-normal m-0">Nutella Cheesecake</h5>
|
||||
<p class="fw-light">Product description</p>
|
||||
</div>
|
||||
<div class="d-md-inline-block text-md-end">
|
||||
<h4 class="fw-light">$4.5</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- Nav for Tab Contents -->
|
||||
<ul class="nav nav-custom justify-content-center font-family-poppins font-small uppercase mt-5">
|
||||
<li class="nav-item">
|
||||
<button class="nav-link active" data-bs-toggle="tab" data-bs-target="#drinks">Coffee Drinks</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button class="nav-link" data-bs-toggle="tab" data-bs-target="#desserts">Desserts</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
<!-- end Our Menu section -->
|
||||
|
||||
<!-- Contact section -->
|
||||
<div id="contact" class="section-lg bg-image parallax" data-bg-src="../assets/images/background.jpg">
|
||||
<div class="bg-dark-06">
|
||||
<div class="container text-center">
|
||||
<div class="row g-4">
|
||||
<div class="col-12 col-md-10 offset-md-1 col-lg-8 offset-lg-2 col-xl-6 offset-xl-3">
|
||||
<h1 class="fw-normal">Opening Hours & Reservations</h1>
|
||||
<div class="row g-4 mt-5">
|
||||
<div class="col-12 col-sm-6">
|
||||
<ul class="list-unstyled font-large">
|
||||
<li>Mon - Thu // 9:00 - 23:00</li>
|
||||
<li>Fri - Sun // 8:00 - 24:00</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<ul class="list-unstyled font-large">
|
||||
<li>Table : +(123) 456 789 01</li>
|
||||
<li>Manager : +(123) 456 789 02</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row(inner) -->
|
||||
</div>
|
||||
</div><!-- end row(outer) -->
|
||||
</div><!-- end container -->
|
||||
</div><!-- end bg-dark-* -->
|
||||
</div>
|
||||
<!-- end Contact section -->
|
||||
|
||||
<footer>
|
||||
<div class="section-sm bg-black">
|
||||
<div class="container fw-light">
|
||||
<div class="row align-items-center g-3">
|
||||
<div class="col-12 col-md-6 text-center text-md-start">
|
||||
<ul class="list-inline-dash">
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Careers</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
<p class="mt-2">© 2025 FlaTheme, All Rights Reserved.</p>
|
||||
</div>
|
||||
<div class="col-12 col-md-6 text-center text-md-end">
|
||||
<ul class="list-inline">
|
||||
<li><a href="#"><i class="bi bi-facebook"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-twitter-x"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-pinterest"></i></a></li>
|
||||
<li><a href="#"><i class="bi bi-instagram"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- end row -->
|
||||
</div><!-- end container -->
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scroll to top button -->
|
||||
<div class="scrolltotop icon-lg">
|
||||
<a class="button-circle button-circle-md button-circle-dark" href="#"><i class="bi bi-arrow-up-short"></i></a>
|
||||
</div>
|
||||
<!-- end Scroll to top button -->
|
||||
|
||||
<!-- ***** JAVASCRIPTS ***** -->
|
||||
<script src="../assets/plugins/jquery.min.js"></script>
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
|
||||
<script src="../assets/plugins/plugins.js"></script>
|
||||
<script src="../assets/js/functions.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user