File size: 11.5Kb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Mat - Resume & vCard HTML Template</title>
<!-- Styles -->
<link href="assets/css/theDocs.all.min.css" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Raleway:100,300,400,500%7CLato:300,400' rel='stylesheet' type='text/css'>
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="assets/img/favicon.png">
</head>
<body data-spy="scroll" data-target=".sidebar" data-offset="200">
<header class="site-header navbar-transparent">
<!-- Top navbar & branding -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Toggle buttons and brand -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
<span class="glyphicon glyphicon-option-vertical"></span>
</button>
<button type="button" class="navbar-toggle for-sidebar" data-toggle="offcanvas">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><strong>Mat</strong></a>
</div>
<!-- END Toggle buttons and brand -->
<!-- Top navbar -->
<div id="navbar" class="navbar-collapse collapse" aria-expanded="true" role="banner">
<ul class="nav navbar-nav navbar-right">
<li><a href="mailto:support@tavillathemes.com">Support</a></li>
<li class="hero"><a href="http://themeforest.net/item/thedocs-online-documentation-template/13070884?license=regular&open_purchase_for_item_id=13070884&purchasable=source&ref=thethemeio">Purchase</a></li>
</ul>
</div>
<!-- END Top navbar -->
</div>
</nav>
<!-- END Top navbar & branding -->
<!-- Banner -->
<div class="banner auto-size" style="background-color: #7cc9db">
<div class="container text-white">
<h1><strong>Mat Template</strong> documentation</h1>
<h5>You can see an example of a banner in top of this page. Following code is the code for this banner.</h5>
</div>
</div>
<!-- END Banner -->
</header>
<main class="container">
<div class="row">
<!-- SIDEBAR -->
<aside class="col-sm-3 sidebar">
<ul class="nav sidenav dropable sticky">
<li><a href="#html-structure">HTML Structure</a></li>
<li><a href="#css">Css Structure</a></li>
<li><a href="#javascript"> Javascript Files</a></li>
</ul>
</aside>
<!-- END Sidebar -->
<!-- Main content -->
<article class="col-sm-9 main-content" role="main">
<p>Mat is a new personal vcard template for everyone. Doctors, models, musicians, realtors, photographers, Graphic designers, freelancers or any kind of creative is now able to create a quick and easy portfolio to showcase their work with a distinctive and professional.</p>
<section>
<h2 id="html-structure">HTML Structure</h2>
<p>We are used Bootstrap3 framework in this template. The general template structure is the same throughout the template. Here is the general structure.</p>
<pre class="line-numbers"><code class="language-markup">
<!doctype html>
<html lang="en">
<head>
<title>Cloud Freelancer & Agency Portfolio Template</title>
<meta charset="UTF-8">
<meta name="description" content="Cloud Freelancer & Agency Portfolio Template">
<meta name="keywords" content="personal, portfolio, agency">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<!-- Stylesheets -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/owl.theme.css" />
<link rel="stylesheet" href="css/owl.carousel.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/color.css" />
<!-- Google Web fonts -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<!-- Font icons -->
<link rel="stylesheet" href="icon-fonts/font-awesome-4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="icon-fonts/web-design/flaticon.css" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="wrapper">
<!-- HEADER -->
<header>
...
</header>
<!-- HOME -->
<div class="home">
<div class="container">
...
</div>
</div>
<!-- ABOUT -->
<section class="about type-1 vertiqal top_90 ">
<div class="container">
...
</div>
</section>
<!-- PORTFOLIO -->
<section class="portfolio type-1 top_120">
<div class="container">
...
</div>
</section>
<!-- BLOG -->
<section class="blog type-1 standart top_30 bottom_120">
<div class="container">
...
</div>
</section>
</div>
<!-- FOOTER -->
<footer class="type-1">
<div class="container">
...
</div>
</footer>
<!-- Javascripts -->
<script src="js/jquery-1.12.4.min.js"></script>
<script src="js/main.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/parallax.js"></script>
<script src="js/isotope.pkgd.min.js"></script>
<script src="js/typed.js"></script>
<script src="js/owl.carousel.min.js"></script>
</body>
</html>
</code></pre>
</section>
<section>
<h2 id="css">Css Structure</h2>
<p>Css organized in a list. You can easily find and edit the part you want. </p>
<br/><br/>
<h5>Table of Content</h5> <br/>
<ul>
<li>1. Body and Core Css</li>
<li> 2. Profile Section</li>
<li> 3. Navigation</li>
<li> 4. Home Section</li>
<li> 5. Resume Section</li>
<li> 6. Portfolio Section</li>
<li> 7. Blog Section</li>
<li> 8. Testimonial Section</li>
<li> 9. Contact Section</li>
<li> 10. Footer Section</li>
<li> 11. Realtor Portfolio </li>
<li> 12. Photo Gallery Widgets</li>
<li> 13. Table Widget</li>
<li> 14. Pricing Widget</li>
<li> 15. Events Widget</li>
<li> 16. Discography Widget</li>
<li> 17. Responsive</li>
</ul>
</section>
<section>
<h2 id="javascript">Javascript</h2>
<div class="file-tree">
<ul>
<li class="is-folder open">js
<ul>
<li class="is-file">bootstrap.min.js</li>
<li class="is-file">isotope.pkgd.min.js</li>
<li class="is-file">jquery-1.12.4.min.js</li>
<li class="is-file">jquery.magnific-popup.min.js</li>
<li class="is-file">main.js</li>
<li class="is-file">owl.carousel.min.js</li>
<li class="is-file">parallax.js</li>
<li class="is-file">typed.js</li>
</ul>
</li>
</ul>
</div>
<br/>
<div class="file-tree">
<ul>
<li class="is-file">bootstrap.min.js</li>
</ul>
</div>
<p>Standart Bootstrap Library</p>
<br/>
<div class="file-tree">
<ul>
<li class="is-file">isotope.pkgd.min.js</li>
</ul>
</div>
<p>a plugin for portfolio masonry and filter features </p>
<br/>
<div class="file-tree">
<ul>
<li class="is-file">jquery-1.12.4.min.js</li>
</ul>
</div>
<p>Standart Jquery Library </p>
<br/>
<div class="file-tree">
<ul>
<li class="is-file">jquery.magnific-popup.min.js</li>
</ul>
</div>
<p> This plugin for portfolio lightbox gallery </p>
<br/>
<div class="file-tree">
<ul>
<li class="is-file">main.js</li>
</ul>
</div>
<p> Template javascript library</p>
<br/>
<div class="file-tree">
<ul>
<li class="is-file">owl.carousel.min.js</li>
</ul>
</div>
<p> Template sliders library</p>
<br/>
<div class="file-tree">
<ul>
<li class="is-file">parallax.js</li>
</ul>
</div>
<p>This plugin for parallax clouds</p>
<br/>
<div class="file-tree">
<ul>
<li class="is-file">typed.js</li>
</ul>
</div>
<p>This plugin for typed of home page </p>
</section>
</article>
<!-- END Main content -->
</div>
</main>
<!-- Footer -->
<footer class="site-footer">
<div class="container">
<a id="scroll-up" href="#"><i class="fa fa-angle-up"></i></a>
<div class="row">
<div class="col-md-6 col-sm-6">
<p>Copyright © 2017. All right reserved</p>
</div>
<div class="col-md-6 col-sm-6">
<ul class="footer-menu">
<li><a href="https://themeforest.net/user/tavillathemes/portfolio">TavillaThemes</a></li>
<li><a href="mailto:hi@tavillathemes.com">Contact us</a></li>
</ul>
</div>
</div>
</div>
</footer>
<!-- END Footer -->
<!-- Scripts -->
<script src="assets/js/theDocs.all.min.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>