HTML网站源码-创意咖啡馆网页模板-响应式源码.zip资源-CSDN文库

共30个文件

jpg：13个

js：6个

css：4个

版权申诉

HTML

JavaScript

源码

完整网站源码

126 浏览量 2024-03-26 09:43:28 上传评论收藏 4.46MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML网站源码-创意咖啡馆网页模板-响应式源码.zip （30个子文件）

HTML网站源码-创意咖啡馆网页模板-响应式源码

html

.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

<!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>  <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>

评论收藏

内容反馈

版权申诉