<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Merit - Bootstrap Agency Template</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<!-- Favicons -->
<link href="static/picture/apple-touch-icon.png" rel="apple-touch-icon">
<!-- Google Fonts -->
<link href="static/css/css.css" rel="stylesheet">
<!-- Bootstrap CSS File -->
<link href="static/css/bootstrap.min.css" rel="stylesheet">
<!-- Main Stylesheet File -->
<link href="static/css/style.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-offset="0" data-target="#gn-menu">
<!-- ========== MAIN MENU ========== -->
<div class="container">
<ul id="gn-menu" class="gn-menu-main">
<li class="gn-trigger">
<a class="gn-icon gn-icon-menu"><span>Menu</span></a>
<nav class="gn-menu-wrapper">
<div class="gn-scroller">
<ul class="gn-menu">
<li class="gn-search-item">
<input placeholder="Search" type="search" class="gn-search">
<a class="gn-icon gn-icon-search"><span>Search</span></a>
</li>
<li><a href="#home" class="gn-icon gn-icon-home smoothscroll">Home</a></li>
<li><a href="#services" class="gn-icon gn-icon-archive smoothscroll">Services</a></li>
<li><a href="#portfolio" class="gn-icon gn-icon-pictures smoothscroll">Portfolio</a></li>
<li><a href="#blog" class="gn-icon gn-icon-article smoothscroll">Blog</a></li>
<li><a href="#prices" class="gn-icon gn-icon-bars smoothscroll">Prices</a></li>
<li><a href="#contact" class="gn-icon gn-icon-envelop smoothscroll">Contact</a></li>
</ul>
</div>
<!-- /gn-scroller -->
</nav>
</li>
<li><a href="#home" class="smoothscroll">Merit</a></li>
</ul>
</div>
<!-- /container -->
<!-- ========== HEADER SECTION ========== -->
<section id="home" name="home"></section>
<div id="headerwrap">
<div class="container">
<div class="col-lg-2"></div>
<div class="col-lg-8">
<img src="static/picture/logo.png">
<h1>Merit Design Agency</h1>
<h4>* Cooking Ideas Since 1998 *</h4>
</div>
<div class="col-lg-2">
</div>
</div>
<!-- /container -->
</div>
<!-- /headerwrap -->
<!-- ABOUT SECTION -->
<section id="services" name="services"></section>
<div class="container services">
<h3>Our Services</h3>
<hr>
<br>
<br>
<div class="col-lg-3 service-line">
<img src="static/picture/s01.png">
<h4>Social Media</h4>
<br>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<!-- /col-lg-3 -->
<div class="col-lg-3 service-line">
<img src="static/picture/s02.png">
<h4>Research</h4>
<br>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<!-- /col-lg-3 -->
<div class="col-lg-3 service-line">
<img src="static/picture/s03.png">
<h4>Development</h4>
<br>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<!-- /col-lg-3 -->
<div class="col-lg-3 service-line">
<img src="static/picture/s04.png">
<h4>Design</h4>
<br>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.</p>
</div>
<!-- /col-lg-3 -->
</div>
<!-- /container -->
<div class="container services">
<br>
<br>
<h3>Our Philosophy</h3>
<hr>
<br>
<br>
<h4>"OUR JOB IS TO BUILD BRANDS. OUR PASSION IS BUILDING BRANDS FROM THE INSIDE OUT."</h4>
<br>
<br>
<div class="col-lg-6">
<p>Employees and consumers. Two halves of a brand’s entirety, the whole of a brand’s audience. Sometimes these two halves have very different viewpoints, creating a weak spot in the brand story. Weakness tarnishes credibility. Brands that aren’t credible
aren’t viable.</p>
<p>We squash weakness by designing the whole brand story. It’s crafted around the truism held by employees and consumers to create an experience that connects from the inside out.</p>
</div>
<!-- col-lg-6 -->
<div class="col-lg-6">
<p>By being true to the brand we represent, we elevate the audiences’ relationship to it. Like becomes love becomes a passion. Passion becomes advocacy. And we see the brand blossom from within, creating a whole story the audience embraces. That’s
when the brand can truly flex its muscles.</p>
<p><img src="static/picture/signature.png" class="pull-right"></p>
</div>
<!-- col-lg-6 -->
</div>
<!-- container -->
<section id="portfolio" name="portfolio"></section>
<div id="foliowrap">
<div class="container">
<h3>Our Work</h3>
<br>
<br>
<div class="row">
<!-- PORTFOLIO IMAGE 1 -->
<div class="col-md-4 ">
<div class="grid mask">
<figure>
<img class="img-responsive" src="static/picture/folio01.png" alt="">
<figcaption>
<h5>DASHBOARD</h5>
<a data-toggle="modal" href="#myModal" class="btn-primary btn-lg">Take a Look</a>
</figcaption>
<!-- /figcaption -->
</figure>
<!-- /figure -->
</div>
<!-- /grid-mask -->
<br>
</div>
<!-- /col -->
<!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
a modal for each of your projects. -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Project Title</h4>
</div>
<div class="modal-body">
<p><img class="img-responsive" src="static/picture/folio01.png" alt=""></p>
<p>This project was crafted for Some Name corp. Detail here a little about your job requirements and the tools used. Tell about the challenges faced and what you and your team did to solve it.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- PORTFOLIO IMAGE 2 -->
<div class="col-md-4">
<div class="grid mask">
<figure>
<img class="img-responsive" src="static/picture/folio02.png" alt="">
<figcaption>
<h5>UI DESIGN</h5>
<a data-toggle="modal" href="#myModal" class="btn-primary btn-lg">Take a Look</a>
</figcaption>
黑白简约Bootstrap响应式品牌设计机构
版权申诉
56 浏览量
2022-07-13
19:04:57
上传
评论
收藏 2.67MB RAR 举报
Zp_demo.demohuo.top_124.rar （52个子文件） 
Zp_demo.demohuo.top_124 
index.html 24KB static css 
bootstrap.min.css 118KB css.css 7KB style.css 18KB image 
header-bg.jpg 652KB mint.jpg 1.22MB foliowrap.jpg 172KB picture avatar.jpg 27KB
s03.png 7KB favicon.png 491B signature.png 4KB folio01.png 67KB folio05.png 37KB folio06.png 45KB s04.png 5KB apple-touch-icon.png 2KB avatar02.jpg 43KB s02.png 2KB folio02.png 70KB logo.png 22KB folio04.png 56KB s01.png 3KB folio03.png 58KB js jquery.min.js 95KB bootstrap.min.js 36KB classie.js 2KB main.js 710B gnmenu.js 4KB validate.js 3KB easing.min.js 2KB font glyphicons-halflings-regular.woff 23KB 1Ptug8zYS_SKggPNyCMIT5lu.woff2 30KB S6u8w4BMUTPHjxsAXC-q.woff2 24KB glyphicons-halflings-regular.woff2 18KB 1Ptug8zYS_SKggPNyCAIT5lu.woff2 26KB S6u8w4BMUTPHjxsAUi-qJCY.woff2 5KB S6u9w4BMUTPHh7USSwiPGQ.woff2 23KB glyphicons-halflings-regular.ttf 44KB S6u_w4BMUTPHjxsI9w2_FQft1dw.woff2 4KB 1Ptug8zYS_SKggPNyCkIT5lu.woff2 25KB S6u_w4BMUTPHjxsI9w2_Gwft.woff2 17KB glyphicons-halflings-regular.eot 20KB ecoicons.ttf 5KB S6u9w4BMUTPHh6UVSwaPGR_p.woff2 5KB 1Ptug8zYS_SKggPNyCIIT5lu.woff2 11KB S6uyw4BMUTPHjxAwXjeu.woff2 5KB S6u9w4BMUTPHh7USSwaPGR_p.woff2 5KB ecoicons.woff 6KB ecoicons.eot 5KB 1Ptug8zYS_SKggPNyC0ITw.woff2 46KB S6u9w4BMUTPHh6UVSwiPGQ.woff2 23KB S6uyw4BMUTPHjx4wXg.woff2 23KB资源评论
