<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>个人简历响应式网页</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/templatemo-style.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="site-bg"></div>
<div class="site-bg-overlay"></div>
<!-- TOP HEADER -->
<div class="top-header">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<p class="phone-info">Call us: <a href="#">010 020 0340</a></p>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class="social-icons">
<ul>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-dribbble"></a></li>
<li><a href="#" class="fa fa-rss"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- .top-header -->
<div class="visible-xs visible-sm responsive-menu">
<a href="#" class="toggle-menu">
<i class="fa fa-bars"></i> Show Menu
</a>
<div class="show-menu">
<ul class="main-menu">
<li>
<a class="show-1 active homebutton" href="#"><i class="fa fa-home"></i>Home</a>
</li>
<li>
<a class="show-2 aboutbutton" href="#"><i class="fa fa-user"></i>About Us</a>
</li>
<li>
<a class="show-3 projectbutton" href="#"><i class="fa fa-camera"></i>Gallery</a>
</li>
<li>
<a class="show-5 contactbutton" href="#"><i class="fa fa-envelope"></i>Contact</a>
</li>
</ul>
</div>
</div>
<div class="copyrights">Collect from <a href="http://www.mycodes.net">免费模板</a></div>
<div class="container" id="page-content">
<div class="row">
<div class="col-md-9 col-sm-12 content-holder">
<!-- CONTENT -->
<div id="menu-container">
<div class="logo-holder logo-top-margin">
<a href="#" class="site-brand"><img src="images/logo.png" alt=""></a>
</div>
<div id="menu-1" class="homepage home-section text-center">
<div class="welcome-text">
<h2>Hello, Welcome to <strong>RECTANGLE</strong></h2>
<p>Rectangle is free mobile template brought to you by <span
class="orange">template</span><span class="green">mo</span>.com website. You can
download, edit and use this layout for any purpose. Please tell your friends about our
website. Thank you.</p>
<form action="#" method="get" class="subscribe-form">
<div class="row">
<fieldset class="col-md-offset-2 col-md-6">
<input name="subscribe-email" type="email" class="email" id="subscribe-email"
placeholder="Write your email here..">
</fieldset>
<fieldset class="col-md-4 button-holder">
<input name="submit" type="submit" class="button default" id="submit"
value="Submit">
</fieldset>
</div>
<p class="subscribe-text">Please subscribe your email for latest updates!</p>
</form>
</div>
</div>
<div id="menu-2" class="content about-section">
<div class="row">
<div class="col-md-8 col-sm-8">
<div class="box-content profile">
<h3 class="widget-title">Learn about us</h3>
<div class="profile-thumb">
<img src="images/8.jpg" alt="">
</div>
<div class="profile-content">
<h5 class="profile-name">Linda Beauty</h5>
<span class="profile-role">Creative Director</span>
<p>Most of the images are from <a rel="nofollow" href="#">Unsplash.com</a>
website. Curabitur auctor justo pretium purus varius sagittis. Aliquam
porttitor leo sapien, hendrerit dapibus lorem.<br><br>
Change icons by <a rel="nofollow" href="#/font-awesome-icon-world-map/">Font
Awesome</a> (version 4). Example: <span class="blue"><i
class="fa fa-refresh"></i></span></p>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="box-content">
<h3 class="widget-title">Background</h3>
<p>Vestibulum pellentesque ante sit amet tristique hendrerit. Sed consequat, nunc
lobortis faucibus pretium, enim nibh blandit est, nec sollicitudin est quam a
neque. Aenean eget malesuada justo.</p>
<div class="about-social">
<ul>
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-dribbble"></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 col-sm-5">
<div class="box-content">
<h3 class="widget-title">Our Studio</h3>
<div class="project-item">
<img src="images/7.jpg" alt="">
<div class="project-hover">
<h4>Great Nature Capture</h4>
</div>
</div>
</div>
</div>
<div class="col-md-7 col-sm-7">
<div class="box-content">
<h3 class="widget-title">Our Technical Skills</h3>
<ul class="progess-bars">
<li>
<span>HTML CSS 80%</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="80"
aria-valuemin="0" aria-valuemax="100" style="width: 80%;"></div>
</div>
</li>
<li>
<span>PHOTOSHOP 95%</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="95"
aria-valuemin="0" aria-valuemax="100" style="width: 95%;"></div>
</div>
</li>
<li>
<span>WORDPRESS 70%</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70"
aria-valuemin="0" aria-valuemax="100" style="width: 70%;"></div>
</div>
</li>
<li>
<span>PHP mySQL 50%</span>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="50"
aria-valuemin="0" aria-valuemax="100" style="width: 50%;"></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="menu-3" class="content gallery-section">
<div class="box-content">
<h3 class="widget-title">Past Projects</h3>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="project-item">
<img src="images/1.jpg" alt="">
<div class="project-hover">
<h4>Great Nature Capture</h4>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="project-item">
<img src="images/2.jpg" alt="">
<div class="project-hover">
<h4>Another Image Caption</h4>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="proje
用bootstrap3+javascript实现个人响应式网站
需积分: 0 66 浏览量
2023-04-03
04:27:35
上传
评论 1
收藏 1.37MB ZIP 举报
Bootstrap3个人简历响应式网页模板.zip （39个子文件） 
Bootstrap3个人简历响应式网页模板 js 
main.js 2KB vendor modernizr-2.6.2.min.js 15KB jquery-1.10.2.min.js 91KB min main.min.js 2KB plugins.min.js 325B plugins.js 736B css bootstrap.min.css 111KB font-awesome.css 26KB normalize.css 9KB owl-carousel.css 6KB templatemo-style.css 12KB
index.html 12KB images 
2.jpg 64KB 6.jpg 73KB
logo.png 2KB 1.jpg 82KB 5.jpg 75KB bg.jpg 32KB 8.jpg 53KB 3.jpg 117KB 7.jpg 89KB 4.jpg 148KB fonts Roboto-Regular-webfont.woff 24KB FontAwesome.otf 84KB fontawesome-webfont.eot 55KB Roboto-Light-webfont.woff 24KB
Roboto-Light-webfont.svg 73KB Roboto-Light-webfont.eot 20KB fontawesome-webfont.woff 64KB Roboto-Bold-webfont.woff 24KB Roboto-Regular-webfont.ttf 44KB Roboto-Bold-webfont.ttf 44KB Roboto-Bold-webfont.svg 70KB Roboto-Regular-webfont.svg 71KB Roboto-Light-webfont.ttf 45KB fontawesome-webfont.svg 280KB Roboto-Regular-webfont.eot 21KB fontawesome-webfont.ttf 110KB Roboto-Bold-webfont.eot 20KB资源评论
