实例介绍
【实例简介】
HTML5响应式设计公司模板
【实例截图】
【核心代码】
<!DOCTYPE html>
<html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="format-detection" content="telephone=no"/>
<meta name="renderer" content="webkit">
<meta name="baidu-site-verification" content="HuKZbEtsCC" />
<title>果实 | guoshi</title>
<link type="text/css" rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/theme.css">
<link rel="stylesheet" href="css/main.min.css" />
<link rel="stylesheet" href="css/gainseestyle.css" />
<script src="js/main.min.js"></script>
<!--[if lt IE 9]>
<script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="js/webplate.min.js"></script>
<script src="js/script.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/headroom.min.js"></script>
<script src="js/script.js"></script>
<script async src="js/analytics.js"></script>
</head>
<body ryt12934="1">
<script>
$(document).ready(function(){
$("button").click(function(){
$(".navbar-inverse").toggleClass("navbar-bg");
});
$(".news-item").click(function(){
window.location=$(this).find("a").attr("href");
return false;
});
});
</script>
<nav class="absolute">
<div >
<nav class="navbar navbar-inverse navbar-static-top ">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand logoaa" href="index.html">
VI
</a>
</div>
<div id="navbar" class="navbar-collapse collapse daohang">
<ul class="nav navbar-nav navbar-right">
<li><a href='index.html'>首页</a></li>
<li><a href='anli.html' rel='dropmenu1'><span>案例</span></a></li>
<li><a href='about.html' ><span>关于</span></a></li>
<li><a href='contact.html' ><span>联系</span></a></li>
</ul>
</div>
<div class="navbar-iphone">
<span>010</span>-8888888
</div>
</div>
</nav>
</div></nav>
<header class="stripe full">
<div class="contain">
<div class="text-center-tight"><div class="inner">
<h2>Welcome to guoshi Design...</h2>
<h6>让我们和您一起见证品牌的力量。</h6>
</div></div>
<a href="javascript:;" class="anchor scroll-down fadeInDown"></a>
</div>
<div class="bg-image" style="background-image:url(img/index/1-160519102031223.jpg)"></div>
</header>
<div class="stripe">
<div class="container1 anchor-scroll">
<div class="row featurette">
<div class="col-md-12" data-show="on-scroll">
<h2>果实品牌设计有限公司 品牌创新整合设计服务商</h2>
<p class="lead">十年行业深耕，让我们成长为一家具有独特主张的品牌创新设计整合服务商；十年来，我们专注品牌整合设计与体验创新研究，在品牌多元化的移动互联时代，为您提供更加有效的品牌策划和设计服务。</p>
<a href="http://www.guoshi.com/about" class="btn-outline">查看详细介绍</a>
</div>
</div>
</div>
<div class="container-fluid">
<section class="work-list" >
<div class="inner" id="work-feed">
<article class="work-item " data-show="on-scroll" >
<a href="">
<picture>
<img src='img/index/1-160309134I30-L.jpg' border='0' width='120' height='120' alt='树时光绿茶品牌全案策划设计'>
</picture>
<div class="content">
<div>
<div>
<h1>树时光 TreeTime</h1>
<h2>树时光绿茶品牌全案策划设计</h2>
</div>
</div>
</div></a>
</article>
</div>
</section>
<section class="work-list" >
<div class="inner" id="work-feed">
<article class="work-item " data-show="on-scroll" >
<a href="">
<picture>
<img src='img/index/1-16030G544460-L.jpg' border='0' width='120' height='120' alt='宜和宜美定制家具全案设计'>
</picture>
<div class="content">
<div>
<div>
<h1>济南宜和宜美家居</h1>
<h2>宜和宜美定制家具全案设计</h2>
</div>
</div>
</div></a>
</article>
</div>
</section>
<section class="work-list" >
<div class="inner" id="work-feed">
<article class="work-item " data-show="on-scroll" >
<a href="">
<picture>
<img src='img/index/1-1604211K2050-L.jpg' border='0' width='120' height='120' alt='品町音乐餐厅品牌整合设计'>
</picture>
<div class="content">
<div>
<div>
<h1>品町音乐餐厅</h1>
<h2>品町音乐餐厅品牌整合设计</h2>
</div>
</div>
</div></a>
</article>
</div>
</section>
<section class="work-list" >
<div class="inner" id="work-feed">
<article class="work-item " data-show="on-scroll" >
<a href="">
<picture>
<img src='img/index/1-1603251TG70-L.jpg' border='0' width='120' height='120' alt='金晔食品品牌全案设计'>
</picture>
<div class="content">
<div>
<div>
<h1>济南金晔食品有限</h1>
<h2>金晔食品品牌全案设计</h2>
</div>
</div>
</div></a>
</article>
</div>
</section>
<section class="work-list" >
<div class="inner" id="work-feed">
<article class="work-item " data-show="on-scroll" >
<a href="">
<picture>
<img src='img/index/1-16030Q000290-L.jpg' border='0' width='120' height='120' alt='靠上酒'>
</picture>
<div class="content">
<div>
<div>
<h1>理想国&阁老贡</h1>
<h2>靠上酒</h2>
</div>
</div>
</div></a>
</article>
</div>
</section>
<section class="work-list" >
<div class="inner" id="work-feed">
<article class="work-item " data-show="on-scroll" >
<a href="">
<picture>
<img src='img/index/1-16030H02A20-L.jpg' border='0' width='120' height='120' alt='柏世传恒-琥珀艺术家'>
</picture>
<div class="content">
<div>
<div>
<h1>济南柏世传恒珠宝</h1>
<h2>柏世传恒-琥珀艺术家</h2>
</div>
</div>
</div></a>
</article>
</div>
</section>
<section class="work-list" >
<div class="inner" id="work-feed">
<article class="work-item " data-show="on-scroll" >
<a href="">
<picture>
<img src='img/index/1-1604191S6230-L.jpg' border='0' width='120' height='120' alt='云扳手全案品牌策划设计'>
</picture>
<div class="content">
<div>
<div>
<h1>山东溯本电子商务有限公司</h1>
<h2>云扳手全案品牌策划设计</h2>
</div>
</div>
</div></a>
</article>
</div>
</section>
<section class="work-list" >
<div class="inner" id="work-feed">
<article class="work-item " data-show="on-scroll" >
<a href="#">
<picture>
<img src='img/index/1-1603241H1390-L.jpg' border='0' width='120' height='120' alt='果实设计部分LOGO合集'>
</picture>
<div class="content">
<div>
<div>
<h1>guoshi Design</h1>
<h2>果实设计部分LOGO合集</h2>
</div>
</div>
</div></a>
</article>
</div>
</section>
</div>
<a class="full-btn btn-outline" id="show-more" href="#" data-show="on-scroll">查看更多案例</a>
<div class="container-fluid">
<div class="row featurette qrcode">
<div class="col-lg-12" data-show="on-scroll">
<h2>品牌策略 × 品牌设计 × 品牌传播 </h2><br>
<h4>和果实一起播下品牌的种子</h4><br>
<h5><a href="#" class="btn-outline">查看更多服务</a></h5>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="nav">
<ul id="menu">
<li>果实品牌设计有限公司</li>
<li>山东省 济南市 历城区 辛甸中路68号</li>
<li>品牌垂询电话: 010-8888888</li>
<li>MAIL: guoshi@qq.com </li>
<li>QQ: 123456</li>
</ul>
</div>
<div class="info">
<ul id="social-menu">
<li ><a href="#" target="_blank" rel="external">f</a></li>
<li ><a href="#" target="_blank" rel="external">g</a></li>
<li ><a href="#" target="_blank" rel="external">h</a></li>
<li ><a href="#" rel="external">U</a></li>
</ul>
<p class="copyright"><a href="#">Copyright © </a><br />Jinan guoshi Branding design Co,.Ltd.<br>
All rights reserved. <br>
鲁ICP备15002063号-1 </p>
</footer>
</body></html>
好例子网口号：伸出你的我的手 — 分享！
相关文章
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论