在个人网站上实现导航菜单的切换效果可以提升用户体验和网站的互动性。下面我将为你提供一个简单的示例，演示如何使用HTML、CSS和JavaScript来实现导航菜单的切换效果。
步骤指南
创建HTML结构：首先，使用HTML创建一个基本的导航菜单结构。你可以使用
添加CSS样式：使用CSS来设置导航菜单的样式，包括菜单项的布局、颜色、字体等。你还可以使用CSS的:hover伪类来添加鼠标悬停效果。
编写JavaScript逻辑：使用JavaScript来添加导航菜单的切换逻辑。你可以使用事件监听器来监听菜单项的点击事件，并切换它们的活动状态。
HTML示例
html
nav li {
float: left;
}
nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* 鼠标悬停效果 */
nav li a:hover {
background-color: #111;
}
/* 活动状态的菜单项 */
nav li.active a {
background-color: #4CAF50;
}
JavaScript示例
javascript
// JavaScript 逻辑
document.addEventListener(‘DOMContentLoaded’, function() {
const navItems = document.querySelectorAll(‘#navMenu .navItem’);
// 初始化时隐藏所有菜单项
navItems.forEach(item => item.classList.add('hidden'));
// 显示首页菜单项
document.getElementById('homeItem').classList.remove('hidden');
// 监听菜单项点击事件
navItems.forEach(item => {
item.addEventListener('click', function(e) {
// 阻止链接的默认行为
e.preventDefault();
// 移除所有菜单项的活动状态
navItems.forEach(navItem => navItem.classList.remove('active'));
// 添加活动状态到被点击的菜单项
this.classList.add('active');
});
});
});
在上面的JavaScript代码中，我们首先等待文档加载完成，然后选取所有的导航菜单项。我们初始化时隐藏所有的菜单项，只显示“首页”菜单项。接着，我们给每个菜单项添加点击事件监听器，当点击一个菜单项时，我们移除所有菜单项的活动状态，并给被点击的菜单项添加活动状态。
请注意，你需要在CSS中添加一个.hidden类来隐藏非活动状态的菜单项，例如：
css
/* 隐藏非活动状态的菜单项 */
.hidden {
display: none;
}
你可以根据需要调整HTML、CSS和JavaScript代码，以满足你的具体需求。这个示例提供了一个基本的框架，你可以在此基础上添加更多的功能和样式。
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8"/>
<title>Home</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link href="http://fonts.googleapis.com/css?family=Hind:300,400,500,600,700" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet">
<link href="vendor/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/animate.css" rel="stylesheet">
<link href="vendor/swiper/css/swiper.min.css" rel="stylesheet" type="text/css"/>
<link href="css/layout.min.css" rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="favicon.ico"/>
</head>
<body id="body" data-spy="scroll" data-target=".header">
<header class="header navbar-fixed-top">
<nav class="navbar" role="navigation">
<div class="container">
<div class="menu-container js_nav-item">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<div class="logo">
<a class="logo-wrap" href="#body">
<img class="logo-img logo-img-main" src="img/logo.png" alt="FlameOnePage Logo">
<img class="logo-img logo-img-active" src="img/logo-dark.png" alt="FlameOnePage Dark Logo">
</a>
</div>
</div>
<div class="collapse navbar-collapse nav-collapse">
<!--div class="language-switcher">
<ul class="nav-lang">
<li><a class="active" href="#">EN</a></li>
<li><a href="#">DE</a></li>
<li><a href="#">FR</a></li>
</ul>
</div--->
<div class="menu-container">
<ul class="nav navbar-nav navbar-nav-right">
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#body">Home</a></li>
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#about">Team</a></li>
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#services">Services</a></li>
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#products">Products</a></li>
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#work">Credentials</a></li>
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#pricing">Pricing</a></li>
<li class="js_nav-item nav-item"><a class="nav-item-child nav-item-hover" href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="container">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
</div>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-responsive" src="img/1920x1080/01.jpg" alt="Slider Image">
<div class="container">
<div class="carousel-centered">
<div class="margin-b-40">
<h1 class="carousel-title">Hi-End Solutions</h1>
<p class="color-white">Lorem ipsum dolor amet consectetur adipiscing dolore magna aliqua <br/> enim minim estudiat veniam siad venumus dolore</p>
</div>
<a href="#" class="btn-theme btn-theme-sm btn-white-brd text-uppercase">Details</a>
</div>
</div>
</div>
<div class="item">
<img class="img-responsive" src="img/1920x1080/02.jpg" alt="Slider Image">
<div class="container">
<div class="carousel-centered">
<div class="margin-b-40">
<h2 class="carousel-title">Personal Approach</h2>
<p class="color-white">Lorem ipsum dolor amet consectetur adipiscing dolore magna aliqua <br/> enim minim estudiat veniam siad venumus dolore</p>
</div>
<a href="#" class="btn-theme btn-theme-sm btn-white-brd text-uppercase">Take a Tour</a>
</div>
</div>
</div>
</div>
</div>
<!--========== SLIDER ==========-->
<!--========== PAGE LAYOUT ==========-->
<!-- About -->
<div id="about">
<div class="content-lg container">
<!-- Masonry Grid -->
<div class="masonry-grid row">
<div class="masonry-grid-sizer col-xs-6 col-sm-6 col-md-1"></div>
<div class="masonry-grid-item col-xs-12 col-sm-6 col-md-4 sm-margin-b-30">
<div class="margin-b-60">
<h2>Harmonious Planning</h2>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incididunt ut laboret dolore magna ut consequat siad esqudiat dolor</p>
</div>
<img class="full-width img-responsive wow fadeInUp" src="img/500x500/01.jpg" alt="Portfolio Image" data-wow-duration=".3" data-wow-delay=".2s">
</div>
<div class="masonry-grid-item col-xs-12 col-sm-6 col-md-4">
<div class="margin-b-60">
<h2>Easy Integration</h2>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incididunt ut laboret dolore magna ut consequat siad esqudiat dolor</p>
</div>
<img class="full-width img-responsive wow fadeInUp" src="img/500x500/02.jpg" alt="Portfolio Image" data-wow-duration=".3" data-wow-delay=".3s">
</div>
<div class="masonry-grid-item col-xs-12 col-sm-6 col-md-4">
<div class="margin-t-60 margin-b-60">
<h2>Superior Support</h2>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incididunt ut laboret dolore magna ut consequat siad esqudiat dolor</p>
</div>
<img class="full-width img-responsive wow fadeInUp" src="img/500x500/03.jpg" alt="Portfolio Image" data-wow-duration=".3" data-wow-delay=".4s">
</div>
</div>
<!-- End Masonry Grid -->
</div>
<div class="bg-color-sky-light">
<div class="content-lg container">
<div class="row">
<div class="col-md-5 col-sm-5 md-margin-b-60">
<div class="margin-t-50 margin-b-30">
<h2>Why Us?</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<a href="#" class="btn-theme btn-theme-sm btn-white-bg text-uppercase">More...</a>
</div>
<div class="col-md-5 col-sm-7 col-md-offset-2">
<!-- Accordion -->
<div class="accordion">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="panel-title-child" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Expert Research
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed panel-title-child" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Hi-Tech Engineering
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed panel-title-child" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Outstanding Results
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch.
</div>
</div>
</div>
</div>
</div>
<!-- End Accodrion -->
</div>
</div>
<!--// end row -->
</div>
</div>
</div>
<!-- End About -->
<!-- Latest Products -->
<div id="products">
<div class="content-lg container">
<div class="row margin-b-40">
<div class="col-sm-6">
<h2>Recent Projects</h2>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incididunt ut laboret dolore magna aliqua enim minim veniam exercitation</p>
</div>
</div>
<!--// end row -->
<div class="row">
<!-- Latest Products -->
<div class="col-sm-4 sm-margin-b-50">
<div class="margin-b-20">
<img class="img-responsive" src="img/970x647/01.jpg" alt="Latest Products Image">
</div>
<h4><a href="#">Interior</a> <span class="text-uppercase margin-l-20">Architecture</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incdidunt ut laboret dolor magna ut consequat siad esqudiat dolor</p>
<a class="link" href="#">Details</a>
</div>
<!-- End Latest Products -->
<!-- Latest Products -->
<div class="col-sm-4 sm-margin-b-50">
<div class="margin-b-20">
<img class="img-responsive" src="img/970x647/02.jpg" alt="Latest Products Image">
</div>
<h4><a href="#">Trend</a> <span class="text-uppercase margin-l-20">Setting</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incdidunt ut laboret dolor magna ut consequat siad esqudiat dolor</p>
<a class="link" href="#">Details</a>
</div>
<!-- End Latest Products -->
<!-- Latest Products -->
<div class="col-sm-4 sm-margin-b-50">
<div class="margin-b-20">
<img class="img-responsive" src="img/970x647/03.jpg" alt="Latest Products Image">
</div>
<h4><a href="#">Fresh Style</a> <span class="text-uppercase margin-l-20">Philosophy</span></h4>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incdidunt ut laboret dolor magna ut consequat siad esqudiat dolor</p>
<a class="link" href="#">Details</a>
</div>
<!-- End Latest Products -->
</div>
<!--// end row -->
</div>
</div>
<!-- End Latest Products -->
<!-- Pricing -->
<div id="pricing">
<div class="bg-color-sky-light">
<div class="content-lg container">
<div class="row row-space-1">
<div class="col-sm-4 sm-margin-b-2">
<!-- Pricing -->
<div class="pricing">
<div class="margin-b-30">
<i class="pricing-icon icon-chemistry"></i>
<h3>Silver Package <span> - $</span> 74.99</h3>
<p>Lorem ipsum dolor amet consectetur ut consequat siad esqudiat dolor</p>
</div>
<ul class="list-unstyled pricing-list margin-b-50">
<li class="pricing-list-item">Starter Kit</li>
<li class="pricing-list-item">Basic Features</li>
<li class="pricing-list-item">Annual Report</li>
</ul>
<a href="pricing.html" class="btn-theme btn-theme-sm btn-default-bg text-uppercase">Start Now</a>
</div>
<!-- End Pricing -->
</div>
<div class="col-sm-4 sm-margin-b-2">
<!-- Pricing -->
<div class="pricing pricing-active">
<div class="margin-b-30">
<i class="pricing-icon icon-badge"></i>
<h3>Gold Package <span> - $</span> 199.99</h3>
<p>Lorem ipsum dolor amet consectetur ut consequat siad esqudiat dolor</p>
</div>
<ul class="list-unstyled pricing-list margin-b-50">
<li class="pricing-list-item">Professional Kit</li>
<li class="pricing-list-item">Full Options</li>
<li class="pricing-list-item">Bi-anual Report</li>
</ul>
<a href="pricing.html" class="btn-theme btn-theme-sm btn-default-bg text-uppercase">Start Now</a>
</div>
<!-- End Pricing -->
</div>
<div class="col-sm-4">
<!-- Pricing -->
<div class="pricing">
<div class="margin-b-30">
<i class="pricing-icon icon-shield"></i>
<h3>Platinum Package <span> - $</span> 500</h3>
<p>Lorem ipsum dolor amet consectetur ut consequat siad esqudiat dolor</p>
</div>
<ul class="list-unstyled pricing-list margin-b-50">
<li class="pricing-list-item">Complete Kit</li>
<li class="pricing-list-item">Advanced Options</li>
<li class="pricing-list-item">Monthly Report</li>
</ul>
<a href="pricing.html" class="btn-theme btn-theme-sm btn-default-bg text-uppercase">Start Now</a>
</div>
<!-- End Pricing -->
</div>
</div>
<!--// end row -->
</div>
</div>
</div>
<!-- End Pricing -->
<!-- Work -->
<div id="work">
<div class="section-seperator">
<div class="content-md container">
<div class="row margin-b-40">
<div class="col-sm-6">
<h2>Portfolio</h2>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incididunt ut laboret dolore magna aliqua enim minim veniam exercitation</p>
</div>
</div>
<!--// end row -->
<!-- Masonry Grid -->
<div class="masonry-grid row">
<div class="masonry-grid-item col-xs-12 col-sm-6 col-md-4 md-margin-b-30">
<!-- Work -->
<div class="work work-popup-trigger">
<div class="work-overlay">
<img class="full-width img-responsive" src="img/397x300/01.jpg" alt="Portfolio Image">
</div>
<div class="work-popup-overlay">
<div class="work-popup-content">
<a href="javascript:void(0);" class="work-popup-close">Hide</a>
<div class="margin-b-30">
<h3 class="margin-b-5">Art Of Coding</h3>
<span>Clean & Minimalistic Design</span>
</div>
<div class="row">
<div class="col-sm-8 work-popup-content-divider sm-margin-b-20">
<div class="margin-t-10 sm-margin-t-0">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<ul class="list-inline work-popup-tag">
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Strategy,</a></li>
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Implementation,</a></li>
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Credentials</a></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="margin-t-10 sm-margin-t-0">
<p class="margin-b-5"><strong>Project Manager:</strong> Boris Becker</p>
<p class="margin-b-5"><strong>Executive:</strong> Heike Macatsch</p>
<p class="margin-b-5"><strong>Architect:</strong> Oliver Pocher</p>
<p class="margin-b-5"><strong>Client:</strong> FairTech</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Work -->
</div>
<div class="masonry-grid-item col-xs-12 col-sm-6 col-md-4 md-margin-b-30">
<!-- Work -->
<div class="work work-popup-trigger">
<div class="work-overlay">
<img class="full-width img-responsive" src="img/397x300/02.jpg" alt="Portfolio Image">
</div>
<div class="work-popup-overlay">
<div class="work-popup-content">
<a href="javascript:void(0);" class="work-popup-close">Hide</a>
<div class="margin-b-30">
<h3 class="margin-b-5">Art Of Coding</h3>
<span>Clean & Minimalistic Design</span>
</div>
<div class="row">
<div class="col-sm-8 work-popup-content-divider sm-margin-b-20">
<div class="margin-t-10 sm-margin-t-0">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<ul class="list-inline work-popup-tag">
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Strategy,</a></li>
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Implementation,</a></li>
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Credentials</a></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="margin-t-10 sm-margin-t-0">
<p class="margin-b-5"><strong>Project Manager:</strong> Boris Becker</p>
<p class="margin-b-5"><strong>Executive:</strong> Heike Macatsch</p>
<p class="margin-b-5"><strong>Architect:</strong> Oliver Pocher</p>
<p class="margin-b-5"><strong>Client:</strong> Keenthemes</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Work -->
</div>
<div class="masonry-grid-item col-xs-12 col-sm-6 col-md-4">
<!-- Work -->
<div class="work work-popup-trigger">
<div class="work-overlay">
<img class="full-width img-responsive" src="img/397x300/03.jpg" alt="Portfolio Image">
</div>
<div class="work-popup-overlay">
<div class="work-popup-content">
<a href="javascript:void(0);" class="work-popup-close">Hide</a>
<div class="margin-b-30">
<h3 class="margin-b-5">Art Of Coding</h3>
<span>Clean & Minimalistic Design</span>
</div>
<div class="row">
<div class="col-sm-8 work-popup-content-divider sm-margin-b-20">
<div class="margin-t-10 sm-margin-t-0">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<ul class="list-inline work-popup-tag">
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Strategy,</a></li>
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Implementation,</a></li>
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Credentials</a></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="margin-t-10 sm-margin-t-0">
<p class="margin-b-5"><strong>Project Manager:</strong> Boris Becker</p>
<p class="margin-b-5"><strong>Executive:</strong> Heike Macatsch</p>
<p class="margin-b-5"><strong>Architect:</strong> Oliver Pocher</p>
<p class="margin-b-5"><strong>Client:</strong> Keenthemes</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Work -->
</div>
<div class="masonry-grid-sizer col-xs-6 col-sm-6 col-md-1"></div>
<div class="masonry-grid-item col-xs-12 col-sm-6 col-md-4 margin-b-30">
<!-- Work -->
<div class="work work-popup-trigger">
<div class="work-overlay">
<img class="full-width img-responsive" src="img/397x415/01.jpg" alt="Portfolio Image">
</div>
<div class="work-popup-overlay">
<div class="work-popup-content">
<a href="javascript:void(0);" class="work-popup-close">Hide</a>
<div class="margin-b-30">
<h3 class="margin-b-5">Art Of Coding</h3>
<span>Clean & Minimalistic Design</span>
</div>
<div class="row">
<div class="col-sm-8 work-popup-content-divider sm-margin-b-20">
<div class="margin-t-10 sm-margin-t-0">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<ul class="list-inline work-popup-tag">
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Strategy,</a></li>
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Implementation,</a></li>
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Credentials</a></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="margin-t-10 sm-margin-t-0">
<p class="margin-b-5"><strong>Project Manager:</strong> Boris Becker</p>
<p class="margin-b-5"><strong>Executive:</strong> Heike Macatsch</p>
<p class="margin-b-5"><strong>Architect:</strong> Oliver Pocher</p>
<p class="margin-b-5"><strong>Client:</strong> FairTech</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Work -->
</div>
<div class="masonry-grid-item col-xs-12 col-sm-6 col-md-8 margin-b-30">
<!-- Work -->
<div class="work work-popup-trigger">
<div class="work-overlay">
<img class="full-width img-responsive" src="img/800x400/01.jpg" alt="Portfolio Image">
</div>
<div class="work-popup-overlay">
<div class="work-popup-content">
<a href="javascript:void(0);" class="work-popup-close">Hide</a>
<div class="margin-b-30">
<h3 class="margin-b-5">Art Of Coding</h3>
<span>Clean & Minimalistic Design</span>
</div>
<div class="row">
<div class="col-sm-8 work-popup-content-divider sm-margin-b-20">
<div class="margin-t-10 sm-margin-t-0">
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p>
<ul class="list-inline work-popup-tag">
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Strategy,</a></li>
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Implementation,</a></li>
<li class="work-popup-tag-item"><a class="work-popup-tag-link" href="#">Credentials</a></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="margin-t-10 sm-margin-t-0">
<p class="margin-b-5"><strong>Project Manager:</strong> Boris Becker</p>
<p class="margin-b-5"><strong>Executive:</strong> Heike Macatsch</p>
<p class="margin-b-5"><strong>Architect:</strong> Oliver Pocher</p>
<p class="margin-b-5"><strong>Client:</strong> FairTech</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Work -->
</div>
</div>
<!-- End Masonry Grid -->
</div>
</div>
<!-- Clients -->
<div class="content-lg container">
<!-- Swiper Clients -->
<div class="swiper-slider swiper-clients">
<!-- Swiper Wrapper -->
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="swiper-clients-img" src="img/clients/01.png" alt="Clients Logo">
</div>
<div class="swiper-slide">
<img class="swiper-clients-img" src="img/clients/02.png" alt="Clients Logo">
</div>
<div class="swiper-slide">
<img class="swiper-clients-img" src="img/clients/03.png" alt="Clients Logo">
</div>
<div class="swiper-slide">
<img class="swiper-clients-img" src="img/clients/04.png" alt="Clients Logo">
</div>
<div class="swiper-slide">
<img class="swiper-clients-img" src="img/clients/05.png" alt="Clients Logo">
</div>
<div class="swiper-slide">
<img class="swiper-clients-img" src="img/clients/06.png" alt="Clients Logo">
</div>
</div>
<!-- End Swiper Wrapper -->
</div>
<!-- End Swiper Clients -->
</div>
<!-- End Clients -->
</div>
<!-- End Work -->
<!-- Services -->
<div id="services">
<div class="bg-color-sky-light" data-auto-height="true">
<div class="content-lg container">
<div class="row margin-b-40">
<div class="col-sm-6">
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incididunt ut laboret dolore magna aliqua enim minim veniam exercitation</p>
</div>
</div>
<!--// end row -->
<div class="row row-space-1 margin-b-2">
<div class="col-sm-4 sm-margin-b-2">
<div class="service" data-height="height">
<div class="service-element">
<i class="service-icon icon-chemistry"></i>
</div>
<div class="service-info">
<h3>Company Formation</h3>
<p class="margin-b-5">Lorem ipsum dolor amet consectetur ut consequat siad esqudiat dolor</p>
</div>
<a href="#" class="content-wrapper-link"></a>
</div>
</div>
<div class="col-sm-4 sm-margin-b-2">
<div class="service bg-color-base" data-height="height">
<div class="service-element">
<i class="service-icon color-white icon-screen-tablet"></i>
</div>
<div class="service-info">
<h3 class="color-white">Stuff Management</h3>
<p class="color-white margin-b-5">Lorem ipsum dolor amet consectetur ut consequat siad esqudiat dolor</p>
</div>
<a href="#" class="content-wrapper-link"></a>
</div>
</div>
<div class="col-sm-4">
<div class="service" data-height="height">
<div class="service-element">
<i class="service-icon icon-badge"></i>
</div>
<div class="service-info">
<h3>KPI Optimization</h3>
<p class="margin-b-5">Lorem ipsum dolor amet consectetur ut consequat siad esqudiat dolor</p>
</div>
<a href="#" class="content-wrapper-link"></a>
</div>
</div>
</div>
<!--// end row -->
<div class="row row-space-1">
<div class="col-sm-4 sm-margin-b-2">
<div class="service" data-height="height">
<div class="service-element">
<i class="service-icon icon-notebook"></i>
</div>
<div class="service-info">
<h3>Information Security</h3>
<p class="margin-b-5">Lorem ipsum dolor amet consectetur ut consequat siad esqudiat dolor</p>
</div>
<a href="#" class="content-wrapper-link"></a>
</div>
</div>
<div class="col-sm-4 sm-margin-b-2">
<div class="service" data-height="height">
<div class="service-element">
<i class="service-icon icon-speedometer"></i>
</div>
<div class="service-info">
<h3>Recrutinment</h3>
<p class="margin-b-5">Lorem ipsum dolor amet consectetur ut consequat siad esqudiat dolor</p>
</div>
<a href="#" class="content-wrapper-link"></a>
</div>
</div>
<div class="col-sm-4">
<div class="service" data-height="height">
<div class="service-element">
<i class="service-icon icon-badge"></i>
</div>
<div class="service-info">
<h3>Materials Supply</h3>
<p class="margin-b-5">Lorem ipsum dolor amet consectetur ut consequat siad esqudiat dolor</p>
</div>
<a href="#" class="content-wrapper-link"></a>
</div>
</div>
</div>
<!--// end row -->
</div>
</div>
</div>
<!-- End Service -->
<!-- Contact -->
<div id="contact">
<!-- Contact List -->
<div class="section-seperator">
<div class="content-lg container">
<div class="row">
<!-- Contact List -->
<div class="col-sm-4 sm-margin-b-50">
<h3><a href="#">Zurich</a> <span class="text-uppercase margin-l-20">Human Resources</span></h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incdidunt ut laboret dolor magna ut consequat siad esqudiat dolor</p>
<ul class="list-unstyled contact-list">
<li><i class="margin-r-10 color-base icon-call-out"></i> +41 60 66 555 44 33</li>
<li><i class="margin-r-10 color-base icon-envelope"></i> hr@flameonepage.com</li>
</ul>
</div>
<!-- End Contact List -->
<!-- Contact List -->
<div class="col-sm-4 sm-margin-b-50">
<h3><a href="#">Malta</a> <span class="text-uppercase margin-l-20">Development</span></h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incdidunt ut laboret dolor magna ut consequat siad esqudiat dolor</p>
<ul class="list-unstyled contact-list">
<li><i class="margin-r-10 color-base icon-call-out"></i> +356 7965 1257</li>
<li><i class="margin-r-10 color-base icon-envelope"></i> developmemt@flameonepage.com</li>
</ul>
</div>
<!-- End Contact List -->
<!-- Contact List -->
<div class="col-sm-4 sm-margin-b-50">
<h3><a href="#">Manchester</a> <span class="text-uppercase margin-l-20">CEO</span></h3>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit sed tempor incdidunt ut laboret dolor magna ut consequat siad esqudiat dolor</p>
<ul class="list-unstyled contact-list">
<li><i class="margin-r-10 color-base icon-call-out"></i> +44 654 583 5518</li>
<li><i class="margin-r-10 color-base icon-envelope"></i> ceo@flameonepage.com</li>
</ul>
</div>
<!-- End Contact List -->
</div>
<!--// end row -->
</div>
</div>
<!-- End Contact List -->
</div>
<!-- End Contact -->
<!--========== END PAGE LAYOUT ==========-->
<!--========== FOOTER ==========-->
<footer class="footer">
<!-- Links -->
<div class="section-seperator">
<div class="content-md container">
<div class="row">
<div class="col-sm-2 sm-margin-b-30">
<!-- List -->
<ul class="list-unstyled footer-list">
<li class="footer-list-item"><a href="#body">Home</a></li>
<li class="footer-list-item"><a href="#about">Team</a></li>
<li class="footer-list-item"><a href="#work">Credentials</a></li>
<li class="footer-list-item"><a href="#contact">Contact</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-2 sm-margin-b-30">
<!-- List -->
<ul class="list-unstyled footer-list">
<li class="footer-list-item"><a href="#">Twitter</a></li>
<li class="footer-list-item"><a href="#">Facebook</a></li>
<li class="footer-list-item"><a href="#">Instagram</a></li>
<li class="footer-list-item"><a href="#">YouTube</a></li>
</ul>
<!-- End List -->
</div>
<div class="col-sm-3">
<!-- List -->
<ul class="list-unstyled footer-list">
<li class="footer-list-item"><a href="#">Subscribe to Our Newsletter</a></li>
<li class="footer-list-item"><a href="#">Privacy Policy</a></li>
<li class="footer-list-item"><a href="#">Terms & Conditions</a></li>
</ul>
<!-- End List -->
</div>
</div>
<!--// end row -->
</div>
</div>
<!-- End Links -->
<!-- Copyright -->
<div class="content container">
<div class="row">
<div class="col-xs-6">
<img class="footer-logo" src="img/logo-dark.png" alt="flameonepage Logo">
</div>
<div class="col-xs-6 text-right">
<p class="margin-b-0">Copyright © 2019.Company name All rights reserved.<a target="_blank" href="http://www.programb.com/">网页模板</a></p>
</div>
</div>
<!--// end row -->
</div>
<!-- End Copyright -->
</footer>
<!--========== END FOOTER ==========-->
<!-- Back To Top -->
<a href="javascript:void(0);" class="js-back-to-top back-to-top">Top</a>
<!-- JAVASCRIPTS(Load javascripts at bottom, this will reduce page load time) -->
<!-- CORE PLUGINS -->
<script src="vendor/jquery.min.js" type="text/javascript"></script>
<script src="vendor/jquery-migrate.min.js" type="text/javascript"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- PAGE LEVEL PLUGINS -->
<script src="vendor/jquery.easing.js" type="text/javascript"></script>
<script src="vendor/jquery.back-to-top.js" type="text/javascript"></script>
<script src="vendor/jquery.smooth-scroll.js" type="text/javascript"></script>
<script src="vendor/jquery.wow.min.js" type="text/javascript"></script>
<script src="vendor/swiper/js/swiper.jquery.min.js" type="text/javascript"></script>
<script src="vendor/masonry/jquery.masonry.pkgd.min.js" type="text/javascript"></script>
<script src="vendor/masonry/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<!-- PAGE LEVEL SCRIPTS -->
<script src="js/layout.min.js" type="text/javascript"></script>
<script src="js/components/wow.min.js" type="text/javascript"></script>
<script src="js/components/swiper.min.js" type="text/javascript"></script>
<script src="js/components/masonry.min.js" type="text/javascript"></script>
</body>
<!-- END BODY -->
</html>
扫一扫
6475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
