<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Barista Cafe HTML CSS Template</title>
<!-- CSS FILES -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,400;0,600;0,700;1,200;1,700&display=swap" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-icons.css" rel="stylesheet">
<link href="css/vegas.min.css" rel="stylesheet">
<link href="css/tooplate-barista.css" rel="stylesheet">
</head>
<body>
<main>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand d-flex align-items-center" href="index.html">
<img src="images/coffee-beans.png" class="navbar-brand-image img-fluid" alt="Barista Cafe Template">
Barista
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-lg-auto">
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_2">About</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_3">Our Menu</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_4">Reviews</a>
</li>
<li class="nav-item">
<a class="nav-link click-scroll" href="#section_5">Contact</a>
</li>
</ul>
<div class="ms-lg-3">
<a class="btn custom-btn custom-border-btn" href="reservation.html">
Reservation
<i class="bi-arrow-up-right ms-2"></i>
</a>
</div>
</div>
</div>
</nav>
<section class="hero-section d-flex justify-content-center align-items-center" id="section_1">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-12 mx-auto">
<em class="small-text">welcome to Barista.co</em>
<h1>Cafe Klang</h1>
<p class="text-white mb-4 pb-lg-2">
your <em>favourite</em> coffee daily lives.
</p>
<a class="btn custom-btn custom-border-btn smoothscroll me-3" href="#section_2">
Our Story
</a>
<a class="btn custom-btn smoothscroll me-2 mb-2" href="#section_3"><strong>Check Menu</strong></a>
</div>
</div>
</div>
<div class="hero-slides"></div>
</section>
<section class="about-section section-padding" id="section_2">
<div class="section-overlay"></div>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-12">
<div class="ratio ratio-1x1">
<video autoplay="" loop="" muted="" class="custom-video" poster="">
<source src="videos/pexels-mike-jones-9046237.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="about-video-info d-flex flex-column">
<h4 class="mt-auto">We Started Since 2009.</h4>
<h4>Best Cafe in Klang.</h4>
</div>
</div>
</div>
<div class="col-lg-5 col-12 mt-4 mt-lg-0 mx-auto">
<em class="text-white">Barista.co</em>
<h2 class="text-white mb-3">Cafe KL</h2>
<p class="text-white">The café had been in the town for as long as anyone could remember, and it had become a beloved institution among the locals.</p>
<p class="text-white">The café was run by a friendly and hospitable couple, Mr. and Mrs. Johnson. Barista Cafe is free Bootstrap 5 HTML.</p>
<a href="#barista-team" class="smoothscroll btn custom-btn custom-border-btn mt-3 mb-4">Meet Baristas</a>
</div>
</div>
</div>
</section>
<section class="barista-section section-padding section-bg" id="barista-team">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-12 col-12 text-center mb-4 pb-lg-2">
<em class="text-white">Creative Baristas</em>
<h2 class="text-white">Meet People</h2>
</div>
<div class="col-lg-3 col-md-6 col-12 mb-4">
<div class="team-block-wrap">
<div class="team-block-info d-flex flex-column">
<div class="d-flex mt-auto mb-3">
<h4 class="text-white mb-0">Steve</h4>
<p class="badge ms-4"><em>Boss</em></p>
</div>
<p class="text-white mb-0">your favourite coffee daily lives tempor.</p>
</div>
<div class="team-block-image-wrap">
<img src="images/team/portrait-elegant-old-man-wearing-suit.jpg" class="team-block-image img-fluid" alt="">
</div>
</div>
</div>
HTML网站源码-创意咖啡馆网页模板-响应式源码.zip （30个子文件） 
HTML网站源码-创意咖啡馆网页模板-响应式源码 html js 
.DS_Store 6KB bootstrap.min.js 59KB jquery.sticky.js 7KB click-scroll.js 1KB custom.js 1KB jquery.min.js 84KB vegas.min.js 10KB
reservation.html 11KB css bootstrap.min.css 190KB bootstrap-icons.css 87KB tooplate-barista.css 24KB vegas.min.css 7KB index.html 34KB images 
coffee-beans.png 14KB team 
portrait-elegant-old-man-wearing-suit.jpg 210KB small-business-owner-drinking-coffee.jpg 189KB smiley-business-woman-working-cashier.jpg 142KB cute-korean-barista-girl-pouring-coffee-prepare-filter-batch-brew-pour-working-cafe.jpg 154KB happy-waitress-giving-coffee-customers-while-serving-them-coffee-shop.jpg 186KB reviews senior-man-white-sweater-eyeglasses.jpg 16KB young-woman-with-round-glasses-yellow-sweater.jpg 18KB young-beautiful-woman-pink-warm-sweater-natural-look-smiling-portrait-isolated-long-hair.jpg 21KB slides sincere-laugh-showing-picture-smartphone-casual-meeting-with-best-friends-restaurant-terrace.jpg 243KB young-female-barista-wear-face-mask-serving-take-away-hot-coffee-paper-cup-consumer-cafe.jpg 180KB barman-with-fruits.jpg 201KB mid-section-waitress-wiping-espresso-machine-with-napkin-cafa-c.jpg 82KB happy-loving-couple-bakers-drinking-coffee-looking-notebook.jpg 194KB videos 
pexels-mike-jones-9046237.mp4 2.42MB fonts bootstrap-icons.woff2 110KB bootstrap-icons.woff 147KB资源评论
