<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>Samfolio Bootstarp Website Template | Home :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<!----start-top-nav-script---->
<script>
$(function() {
var pull = $('#pull');
menu = $('.top-nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<!--header-->
<div class="header">
<div class="container">
<div class="logo">
<a href="index.html"><h1>SAM<span>FOLIO</span></h1></a>
</div>
<div class="top-nav">
<ul>
<li class="active" ><a href="#home" class="scroll">Home</a></li>
<li><a href="#about" class="scroll"> About</a></li>
<li><a href="#services" class="scroll">Services</a></li>
<li><a href="#portfolio" class="scroll">portfolio </a></li>
<li><a href="#contact" class="scroll">contact</a></li>
</ul>
<a href="#" id="pull"><img src="images/menu.png" title="menu" /></a>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!--banner-->
<div class="banner">
<div class="container">
<ul class="social-ic-icons">
<li class="facebook"><a href="#"><span> </span></a></li>
<li class="been"><a href="#"><span> </span></a></li>
<li class="twitter"><a href="#"><span> </span></a></li>
</ul>
<div class="clearfix"> </div>
<div class="wmuSlider example1">
<div class="wmuSliderWrapper">
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="bannertop_box">
<div class="welcome_box">
<h2>Hello world,<span>I AM GRAPHIC & WEB DESIGNER</span> FROM america.</h2>
</div>
<div class="clearfix"> </div>
</div>
<div class='clearfix'></div>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="bannertop_box">
<div class="welcome_box">
<h2>Hello world,<span>I AM GRAPHIC & WEB DESIGNER</span> FROM america.</h2>
</div>
<div class="clearfix"> </div>
</div>
<div class='clearfix'></div>
</div>
</article>
<article style="position: absolute; width: 100%; opacity: 0;">
<div class="banner-wrap">
<div class="bannertop_box">
<div class="welcome_box">
<h2>Hello world,<span>I AM GRAPHIC & WEB DESIGNER</span> FROM america.</h2>
</div>
<div class="clearfix"> </div>
</div>
<div class='clearfix'></div>
</div>
</article>
</div>
</div>
<!---->
<script src="js/jquery.wmuSlider.js"></script>
<script>
$('.example1').wmuSlider({
pagination : false,
});
</script>
<div class="banner-matter">
<p>Lorem ipsum <span> </span></p>
<p>Professional UI/ux, web, print designer</p>
<a href="#">http://www,Example.org</a>
</div>
<div class='clearfix'></div>
<a href="#hello" class="scroll down"><img src="images/arr.png" alt="" /></a>
</div>
</div>
<!--content-->
<div class="content">
<div class="container">
<div class="hello" id="hello">
<span class="arrow"> </span>
<h3>Hello <span>There</span> !</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passage.Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised.</p>
<div class="in-btns">
<a class="startnow" href="#">My Work</a>
<a class="livedemo" href="#">Hire Me</a>
</div>
<ul class="in-social">
<li class="been"><a class="been" href="#"><span> </span></a></li>
<li class="dribble"><a href="#"><span> </span></a></li>
<li class="in"><a href="#"><span> </span></a></li>
<li class="camera"><a href="#"><span> </span></a></li>
<li class="in-line"><a href="#"><span> </span></a></li>
</ul>
<img class="in-letter" src="images/lee.png" alt="" >
</div>
</div>
<!--services-->
<div class="services" id="services">
<div class="container">
<div class="services-top">
<h3>S<span>ERVICE</span>S</h3>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature.</p>
</div>
<div class="services-bottom">
<div class="col-md-4 services-grid">
<a href="#"><img src="images/tv.png" alt="" /></a>
<h4>WEB</h4>
<p>Lorem Ipsum is simply dummy text of the typesetting industry.</p>
</div>
<div class="col-md-4 services-grid">
<a href="#"><img src="images/ph.png" alt="" /></a>
<h4>UI/UX</h4>
<p>Lorem Ipsum is simply dummy text of the typesetting industry.</p>
</div>
<div class="col-md-4 services-grid">
<a href="#"><img src="images/me.png" alt="" /></a>
<h4>BRANDING</h4>
<p>Lorem Ipsum is simply dummy text of the typesetting industry.</p>
</div>
<div class='clearfix'></div>
</div>
<h5 class="happy">Quick Works of Happy <a href="#">Clients</a></h5>
</div>
</div>
<!--work-->
<div class="work" id="portfolio">
<div class="container">
<h3>LASTEST WORKS</h3>
<div class="work-top">
<div class="work-grid ">
<a href="#"><img class="img-responsive in-work" src="images/pic.jpg" alt="" />
<span class="zoom-icon"></span> </a>
<div class="web">
<h6>Title of the post</h6>
<p>Sed ut perspiciatis unde
个性团队案例展示响应式网页模板_html5 bootstrap 响应式模板UI前端源码.rar
168 浏览量
2023-08-01
14:03:18
上传
评论
收藏 693KB RAR 举报
个性团队案例展示响应式网页模板_html5 bootstrap 响应式模板UI前端源码.rar （49个子文件） 
html js 
jquery.wmuSlider.js 12KB circles.js 7KB easing.js 5KB move-top.js 1KB owl.carousel.js 37KB jquery.flexisel.js 8KB jquery.min.js 94KB css style.css 21KB owl.carousel.css 8KB bootstrap.css 118KB
index.html 22KB images 
pic5.jpg 19KB pic6.jpg 28KB pic.jpg 23KB
lo6.png 6KB dot.png 3KB tv.png 4KB arrow.png 4KB pic8.jpg 13KB me.png 5KB menu.png 3KB back.jpg 106KB zoom.png 3KB bann.jpg 104KB pic4.jpg 20KB we.png 4KB men.png 4KB pic2.jpg 22KB lo3.png 7KB lo5.png 6KB lo.png 5KB pic3.jpg 20KB lo4.png 8KB pic1.jpg 23KB se.png 3KB ma.png 23KB lo8.png 5KB img-sprite.png 24KB up.png 3KB ph.png 4KB arr.png 3KB right.png 3KB lo2.png 6KB pic7.jpg 14KB lo1.png 5KB ban.jpg 70KB arrow1.png 5KB lee.png 26KB lo7.png 5KB资源评论
