<!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
![preview](https://csdnimg.cn/release/downloadcmsfe/public/img/white-bg.ca8570fa.png)
共30个文件
jpg:13个
js:6个
css:4个
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 12 浏览量
2024-03-26
09:43:28
上传
评论
收藏 4.46MB ZIP 举报
温馨提示
这套HTML源代码文件是一个完整的网页模板,适用于各种类型的网站。它采用了最新的HTML5和CSS3技术,具有响应式设计,能够适应不同设备的屏幕尺寸。此外,它还包含了丰富的JavaScript插件,可以实现各种复杂的交互效果。这套源代码文件还具有高度的可定制性。您可以根据自己的需求对页面进行布局调整、颜色更改以及内容替换,轻松打造出符合您项目风格的网站。同时,我们的代码结构清晰、注释详细,方便您学习和理解HTML、CSS和JavaScript等前端技术。您可能面临着课程设计、毕业设计等挑战。这套源代码文件将成为您的得力助手,帮助您展示自己的才华和技能。通过使用这套源代码文件,您可以轻松地完成网站搭建任务,为您的课程设计或毕业设计增添亮点。总的来说,这套HTML源代码文件是一个高效、实用、易用的工具,无论你是专业的网页设计师,还是业余的编程爱好者,都值得拥有。
资源推荐
资源详情
资源评论
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![thumb](https://img-home.csdnimg.cn/images/20210720083646.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![circ](https://img-home.csdnimg.cn/images/20210720083646.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
收起资源包目录
![package](https://csdnimg.cn/release/downloadcmsfe/public/img/package.f3fc750b.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/HTML.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/HTML.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/PNG.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/JPG.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/MP4.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
共 30 条
- 1
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/196b0ad537b04e688a2a9ae3fce83c0a_black_cat7.jpg!1)
DTcode7
- 粉丝: 2w+
- 资源: 4986
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
最新资源
- SOD123/DFN1006小体积封装恒流二极管NU505芯片应用LED灯带,COB灯条,LED照明,无需专用PCB板设计
- 关于汇川机器人的基本讲解
- 2SJ208-VB一款P-Channel沟道SOT89-3的MOSFET晶体管参数介绍与应用说明
- 2SJ207-VB一款P-Channel沟道SOT89-3的MOSFET晶体管参数介绍与应用说明
- 一款开源的软件成分分析工具,用于扫描项目的开源组件依赖、漏洞及许可证信息,为企业及个人用户提供低成本、高精度的供应链安全解决方案
- 基于Springboot和Vue的书籍学习平台源码 书籍学习平台代码,包括程序,中文注释,配置说明操作步骤
- 2SJ206-VB一款P-Channel沟道SOT89-3的MOSFET晶体管参数介绍与应用说明
- 最优雅的 Alipay/WeChat/Unipay 的支付 SDK 扩展包
- vmware安装yum
- 2SJ205-VB一款P-Channel沟道SOT89-3的MOSFET晶体管参数介绍与应用说明
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)