<!--
author: W3layouts
author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Client Personal Category Flat Bootstrap Responsive Website Template | Home :: w3layouts</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Client Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
</script>
<!-- css files -->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' /><!-- bootstrap css -->
<link href="css/style.css" rel='stylesheet' type='text/css' /><!-- custom css -->
<link href="css/font-awesome.min.css" rel="stylesheet"><!-- fontawesome css -->
<!-- //css files -->
<!-- google fonts -->
<link href="//fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
<!-- //google fonts -->
</head>
<body>
<!-- header -->
<header>
<nav class="navbar">
<div class="container">
<h1 class="wthree-logo">
<a href="index.html" id="logoLink"><i class="fa fa-adjust"></i> <span>C</span>lient</a>
</h1>
<!-- menu -->
<ul id="menu">
<li>
<input id="check02" type="checkbox" name="menu" />
<label for="check02"><span class="fa fa-bars" aria-hidden="true"></span></label>
<ul class="submenu">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="#about">About Me</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</li>
</ul>
<!-- //menu -->
</div>
</nav>
</header>
<!-- //header -->
<!-- banner -->
<div id="home" class="banner-w3pvt d-flex">
<div class="container">
<div class="row">
<div class="col-lg-7 bnr-txt-w3pvt">
<div class="bnr-w3pvt-txt mt-sm-5">
<h6>Welcome to my Client template</h6>
<h2>Hello <span>I'm John Watson</span></h2>
<h4>designer - developer - freelancer</h4>
<p class="mt-4"> Auctor sit amet aliquam vel, ullamcorper sit amet ligula.
Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit aliquet elit.</p>
<ul class="social_section_1info mt-4">
<li class="mb-2 facebook"><a href="#"><span class="fa fa-facebook"></span></a></li>
<li class="mb-2 twitter"><a href="#"><span class="fa fa-twitter"></span></a></li>
<li class="linkedin"><a href="#"><span class="fa fa-linkedin"></span></a></li>
<li class="pinterest"><a href="#"><span class="fa fa-pinterest"></span></a></li>
</ul>
<a href="#about" class="scroll bnr-btn mr-2">Read more </a>
<a href="#contact" class="scroll bnr-btn1">Contact Me </a>
</div>
</div>
</div>
</div>
</div>
<!-- //banner -->
<!-- about -->
<section class="about" id="about">
<div class="container-fluid">
<div class="row">
<div class="col-lg-5 p-0">
<img src="images/about1.jpg" alt="" class="img-fluid" />
</div>
<div class="col-lg-6">
<div class="about-right">
<h4 class="main">Auctor sit amet aliquam vel, ulla amet.</h4>
<p>Auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vivamus suscipit tortor eget felis porttitor volutpat. Mauris blandit
aliquet elit.</p>
<div class="row mt-sm-5 mt-4 about-right-inner">
<div class="col-sm-4 col-6 myphoto-sign text-center">
<img src="images/myphoto.jpg" alt="" class="img-fluid rounded-circle"/>
<img src="images/signature.png" alt="" class="img-fluid mt-3"/>
<a href="#contact" class="scroll abt-btn">Hire Me </a>
</div>
<div class="col-sm-7 offset-lg-1">
<h4>Personal Info</h4>
<p>Hello, My name is <strong>John Watson</strong>. I am 6 years experienced <strong>web designer</strong></p>
<h4 class="mt-4">Skills & Abilities</h4>
<div class="progress-one mt-3">
<h4 class="progress-tittle">Web Designing</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress-one my-lg-3">
<h4 class="progress-tittle">Photoshop</h4>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 65%" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="progress-one">
<h4 class="progress-tittle">App Development</h4>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<h3 class="position">About Me</h3>
</div>
</div>
</section>
<!-- //about -->
<!-- services-->
<section class="services pt-5" id="services">
<div class="container py-lg-5">
<p class="paragraph">What I do for you</p>
<h3 class="heading mb-sm-5 mb-4">My Services</h3>
<div class="row">
<div class="col-lg-3 col-sm-6 mb-5">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="images/s1.png" alt="" class="img-fluid" />
<h3>01</h3>
<h4 class="mt-3">Web Design</h4>
<p class="mt-3">Vivamus suscipit tortort eget felis porttitor elit volutpat. Mauris blandit aliquet elit dolor.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-5">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="images/s2.png" alt="" class="img-fluid" />
<h3>02</h3>
<h4 class="mt-3">App Developer</h4>
<p class="mt-3">Vivamus suscipit tortort eget felis porttitorit elit volutpat. Mauris blandit aliquet elit dolor.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-5">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="images/s3.png" alt="" class="img-fluid" />
<h3>03</h3>
<h4 class="mt-3">Photoshop</h4>
<p class="mt-3">Vivamus suscipit tortort eget felis porttitorit elit volutpat. Mauris blandit aliquet elit dolor.</p>
</div>
</div>
</div>
<div class="col-lg-3 col-sm-6 mb-5">
<div class="panel panel-default">
<div class="panel-thumbnail">
<img src="images/s4.png" alt="" class="img-fluid" />
<h3>04</h3>
<h4 class="mt-3">Creative PSD</h4>
<p class="mt-3">Vivamus suscipit tortort eget felis porttitorit elit volutpat. Mauris blandit aliquet elit dolor.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- //services -->
<!-- process -->
<section class="experience py-5" id="experience">
<div class="container py-3">
<p class="paragraph">work experience</p>
<h3 class="heading mb-sm-5 mb-4">My Experience</h3>
<div class="middile-inner-con">
<div class="tab-main mx-auto">
<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1"><img src="images/s1.png" alt="" class="img-fluid" /> Company Name 1</label>
个人创意简历(可分享的网页)-个人生活展示日志网站模板 Bootstrap-响应式适配移动端.zip
版权申诉
31 浏览量
2024-03-18
11:24:03
上传
评论
收藏 1.18MB ZIP 举报
个人创意简历(可分享的网页)-个人生活展示日志网站模板 Bootstrap-响应式适配移动端.zip （27个子文件） 
个人创意简历(可分享的网页)-个人生活展示日志网站模板 Bootstrap-响应式适配移动端 html css 
style.css 20KB bootstrap.css 174KB font-awesome.min.css 30KB
index.html 20KB images 
signature.png 5KB
portfolio3.jpg 57KB s2.png 7KB s6.png 11KB s4.png 8KB about1.jpg 103KB t2.png 8KB banner.jpg 141KB portfolio2.jpg 70KB s3.png 9KB myphoto.jpg 56KB t1.png 6KB portfolio5.jpg 39KB s1.png 10KB portfolio1.jpg 71KB portfolio4.jpg 63KB s5.png 11KB fonts FontAwesome.otf 132KB fontawesome-webfont.eot 162KB fontawesome-webfont.woff 96KB fontawesome-webfont.woff2 75KB
fontawesome-webfont.svg 434KB fontawesome-webfont.ttf 162KB资源评论
