【免费】满汉全席美食网站模板是一款超级大气简洁的美食行业HTML5单页模板.rar资源-CSDN文库

共46个文件

js：19个

jpg：12个

css：5个

需积分: 0 34 浏览量更新于2023-09-10 收藏 3.28MB RAR 举报

满汉全席美食网站模板是一款专为美食行业设计的HTML5单页模板，以其超级大气且简洁的风格吸引眼球。这款模板充分利用了HTML5的新特性，旨在为餐饮业的在线展示提供一个高质量的平台，提升用户体验，吸引更多的访问者。我们来看看模板的核心组成部分。在压缩包中，我们可以看到几个CSS文件：bootstrap.css、animate.css、font-awesome.css、theme.css和styles.css。这些文件是模板的样式表，它们负责定义页面的布局、色彩、字体等视觉元素。 1. **Bootstrap.css**：这是一个基于Twitter Bootstrap框架的样式文件。Bootstrap是目前最流行的前端开发框架之一，它提供了响应式布局和一系列预先设计的组件，使得开发者可以快速构建美观且适应不同设备的网页。 2. **Animate.css**：这个文件包含了一套动画效果，用于在用户交互时增加页面动态感和吸引力。它可以轻松地添加如淡入淡出、滑动等效果，提高用户对网站的兴趣。 3. **Font-awesome.css**：这是一个图标库，提供了一系列矢量图形的图标，可以轻松地在网页上使用，无需处理图片大小和分辨率的问题，适应各种屏幕尺寸。 4. **Theme.css** 和 **styles.css**：这两个文件通常包含模板特有的样式，比如颜色主题、布局调整和其他定制的设计元素，让模板更具个性化。此外，压缩包还包含了fontawesome-webfont.eot，这是一个Web字体文件，用于在网页上显示Font Awesome图标。加载.gif是一个加载动画图像，通常在页面内容加载时显示，给用户一个等待的提示，提升用户体验。 index.html是模板的主页面文件，包含了整个网站的结构和内容。slide1.jpg和slide3.jpg是幻灯片图片，用于首页展示，吸引用户的眼球，展示美食的魅力。满汉全席美食网站模板利用了现代Web技术，如HTML5、Bootstrap和CSS3，来打造一个既美观又功能齐全的美食网站。无论是展示菜品、介绍餐厅还是发布活动信息，这个模板都能提供一个优秀的平台，帮助美食行业的企业在互联网上树立专业形象。

收起资源包目录

满汉全席美食网站模板是一款超级大气简洁的美食行业HTML5单页模板.rar （46个子文件）

bootstrap.js 31KB

sep.png 683B

FontAwesome.otf 84KB

slide2.jpg 334KB

masonry.js 25KB

wow.js 7KB

img6.jpg 198KB

fontawesome-webfont.eot 55KB

loading.gif 24KB

logo.png 26KB

img2.jpg 194KB

img5.jpg 99KB

font-awesome.css 21KB

gallery.js 14KB

pattern.png 3KB

colorfinder.js 4KB

menustick.js 4KB

imgloaded.js 7KB

slide1.jpg 582KB

fontawesome-webfont.woff 64KB

modernizr.js 8KB

img4.jpg 186KB

animate.css 71KB

bootstrap.css 107KB

img1.jpg 180KB

slide3.jpg 471KB

img7.jpg 124KB

easing.js 8KB

img3.jpg 172KB

theme.css 20KB

img8.jpg 103KB

classie.js 2KB

gridscroll.js 12KB

index.html 19KB

fontawesome-webfont.svg 280KB

smoothscroll.js 14KB

dummy1.jpg 252KB

parallax.js 2KB

jquery.nav.js 7KB

fontawesome-webfont.ttf 110KB

custom.js 2KB

jquery.easing.1.3.js 8KB

styles.css 18KB

jquery.js 94KB

jquery-scrolltofixed.js 20KB

contact.js 2KB

资源推荐

资源预览

资源评论

<!DOCTYPE html>      <html class="no-js" lang="en">  <head> <meta charset="UTF-8"/> <title>Home</title> <meta name="description" content="Eat Restaurant Bootstrap Template"> <meta name="author" content="webthemez"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/animate.css"> <link rel="stylesheet" href="css/styles.css"> <link href='#css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'> <link href='#css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> </head> <body>  <div class="wrapper">  <header id="header"> <div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">  <div class="overlay"></div>  <ol class="carousel-indicators"> <li data-target="#bs-carousel" data-slide-to="0" class="active"></li> <li data-target="#bs-carousel" data-slide-to="1"></li> <li data-target="#bs-carousel" data-slide-to="2"></li> </ol>  <div class="carousel-inner"> <div class="item slides active"> <div class="slide-1"></div> <div class="hero"> <hgroup> <img src="img/logo.png" alt="logo"/> <h1>We are creative</h1> <h3>Get start your next awesome project</h3> </hgroup> <a class="btn btn-hero btn-lg" href="#service">Eat & Chat</a> </div> </div> <div class="item slides"> <div class="slide-2"></div> <div class="hero"> <hgroup> <img src="img/logo.png" alt="logo"/> <h1>We are smart</h1> <h3>Get start your next awesome project</h3> </hgroup> <a class="btn btn-hero btn-lg" href="#service">Eat & Chat</a> </div> </div> <div class="item slides"> <div class="slide-3"></div> <div class="hero"> <hgroup> <img src="img/logo.png" alt="logo"/> <h1>We are amazing</h1> <h3>Get start your next awesome project</h3> </hgroup> <a class="btn btn-hero btn-lg" href="#service">Eat & Chat</a> </div> </div> </div> <div class="menu"> <nav class="navbar navbar-wrapper"> <div class="container"> <div class="navbar-header"> <button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="main-nav" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#header" class="scroll-link">Home</a></li> <li><a href="#service" class="scroll-link">Our Services</a></li> <li><a href="#aboutUs" class="scroll-link">About Us</a></li> <li><a href="#gallery" class="scroll-link">Gallery</a></li> <li><a href="#feedback" class="scroll-link">Feedback</a></li> <li><a href="#contact" class="scroll-link">Contact</a></li> </ul> </div> </div> </nav> </div> </header> <section class="service page-section" id="service"> <div class="container text-center"> <div class="heading"> <h2>Eat & Chat</h2> <h3>Phasellus non dolor nibh. Nullam elementum tellus pretium feugiat.<br> Cras dictum tellus dui, vitae sollicitudin ipsum tincidunt in. Sed tincidunt tristique enim sed sollcitudin.</h3> </div> <div class="row"> <div class="col-md-4"> <div class="box-area"> <div class="box-area-icon"> <i class="fa fa-heart"></i> </div> <h3>Streets Best</h3> <div class="box-area-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</div> </div> </div> <div class="col-md-4"> <div class="box-area"> <div class="box-area-icon"> <i class="fa fa-users"></i> </div> <h3>Continental</h3> <div class="box-area-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</div> </div> </div> <div class="col-md-4"> <div class="box-area"> <div class="box-area-icon"> <i class="fa fa-fire"></i> </div> <h3>Daily Dishes</h3> <div class="box-area-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</div> </div> </div> <div class="col-md-4"> <div class="box-area"> <div class="box-area-icon"> <i class="fa fa-film"></i> </div> <h3>Cookies</h3> <div class="box-area-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</div> </div> </div> <div class="col-md-4"> <div class="box-area"> <div class="box-area-icon"> <i class="fa fa-cubes"></i> </div> <h3>Cakes</h3> <div class="box-area-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</div> </div> </div> <div class="col-md-4"> <div class="box-area"> <div class="box-area-icon"> <i class="fa fa-envelope"></i> </div> <h3>Meeting point</h3> <div class="box-area-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat.</div> </div> </div> </div> </div> </section>  <section class="aboutus page-section" id="aboutUs"> <div class="container"> <div class="heading"> <h2>Who we are</h2> <h3>Phasellus non dolor nibh. Nullam elementum tellus pretium feugiat.<br> Cras dictum tellus dui, vitae sollicitudin ipsum tincidunt in. Sed tincidunt tristique enim sed sollcitudin.</h3> </div> <div class="content"> <p>Then I'll write a little about yourself, your brief biography and why I started doing this and still continue.</p><p> I love to travel and are constantly taking pictures and doing all the sketches, I'm madly in love because our world is so beautiful;)</p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare sem sit amet mauris bibendum, ac fringilla quam eleifend. Praesent elit tellus, venenatis in lorem ac, porta accumsan sapien. Cras malesuada feugiat magnum.</p><p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ornare sem sit amet mauris b