Colfee | Portfolio Agency 单页 HTML5 模板
Colfee is a one page portfolio html template designed for agencies, freelancers and designers. The template is fully responsive and comes with a filterable portfolio.
Template Features:
Two home page versions
Responsive with bootstrap 4.5.3 framework
Clean and nice design
SEO and developer friendly coding
Simple markup and CSS
Compatible with all major browsers
HTML5 and CSS3 validated
Based on bootstrap 1170px grid system
Free google fonts used
Font awesome icon
Clean & commented code
Pages:
- 01_Home page
- 02_Home page
Template Structure
<!DOCTYPE html> <html lang="en"> <head> <!-- required meta tags --> <meta charset="utf-8"> <title>Title goes here</title> <!--favicon--> <link rel="shortcut icon" href="assets/img/favicon.png"> <!--all csss--> ... </head> <body> <!--header start--> <header> ... </header> <!--header end--> <!-- main content area start --> <main> <!-- hero area start --> <section class="cf-hero-area"> ... </section> <!-- hero area end --> <!-- intro area start --> <section class="cf-intro-area"> <div class="container"> <div class="row"> <div class="col-xl-12"> ... </div><!-- /.column --> &;lt;div class="row"><!-- /.row --> </div><!-- /.container --> </section> <!-- intro area end --> </main> <!-- main content area end --> <!--footer start --> <footer> <div class="cf-footer-area"> .... </div> </footer> <!--footer end--> <!-- JS here --> <!-- Placed js at the end of the document so the pages load faster --> .... </body> </html>
Template CSS
All CSS files<!--all csss--> <link rel="stylesheet" href="assets/css/preloader.css"> <link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/all.min.css"> <link rel="stylesheet" href="assets/css/animate.css"> <link rel="stylesheet" href="assets/css/jquery.lineProgressbar.css"> <link rel="stylesheet" href="assets/css/owl.carousel.min.css"> <link rel="stylesheet" href="assets/css/magnific-popup.css"> <link rel="stylesheet" href="assets/css/deafault.css"> <link rel="stylesheet" href="assets/css/style.css"> <link rel="stylesheet" href="assets/css/responsive.css"> <!-- modernizr js --> <script src="assets/js/modernizr-3.5.0.min.js"></script>
<strong>All JS files</strong>
Before, as you start to edit the template, be sure to install the font. Before, as you start to edit the template, be sure to install the font.
<strong>/* CSS Index
===============
01. default
02. header
03. hero
04. intro
05. services
06. portfolio
07. factor
08. video
09. faqs
10. testimonial
11. blog
12. contact
13. footer
14. contact
15. footer
*/</strong>
<!-- JS -->
<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.lineProgressbar.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/jquery.counterup-1-0.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/main.js"></script>
Note: Preview images are not included in the final download. These are only for example purpose.
Google Fonts are Used:
Graphics Used: