Colfee | Portfolio Agency 单页 HTML5 模板
Colfee 是一款单页作品集 HTML 模板,专为机构、自由职业者和设计师设计。该模板完全响应式,附带可过滤的作品集、联系表单、带侧边栏的博客和可用的联系表单。
模板特点:
两个主页版本
响应式,使用 bootstrap 4.5.3 框架
动态 PHP 联系表单
简洁美观的设计
SEO和开发人员友好的编码
简单的标记和 CSS
兼容所有主流浏览器
HTML5 和 CSS3 已验证
基于 bootstrap 1170px 网格系统
使用免费的谷歌字体
字体真棒图标
干净且注释的代码
有据可查
易于定制
终身支持(有限)
页数:
- 01_主页
- 02_主页
模板结构
<!DOCTYPE html> <html lang="en"> <头部> <!-- 必需的元标签 --> <meta charset="utf-8"> <title>此处输入标题</title> <!--网站图标--> <link rel="快捷方式图标" href="assets/img/favicon.png"> <!--所有 CSS--> ... </head> <主体> <!--标题开始--> <标题> ... </header> <!--标题结束--> <!-- 主内容区域开始 --> <主要> <!-- 英雄区域开始 --> <section class="cf-hero-area"> ... </section> <!-- 英雄区域结束 --> <!-- 介绍区域开始 --> <section class="cf-intro-area"> <div class="container"> <div class="row"> <div class="col-xl-12"> ... </div><!-- /.column --> </div><!-- /.row --> </div><!-- /.container --> </section> <!-- 介绍区域结束 --> </主要> <!-- 主内容区域结束 --> <!--页脚开始--> <页脚> <div class="cf-footer-area"> .... </div> </页脚> <!--页脚结束--> <!-- JS 这里 --> <!-- 将 js 放在文档末尾,以便页面加载更快 --> .... </主体> </html>
模板 CSS
所有 CSS 文件<!--所有 CSS--> <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>
CSS 索引
<strong>/* CSS 索引 =============== 01. 默认 02. 标题 03. 英雄 04. 介绍 05. 服务 06. 投资组合 07. 因素 08.视频 09. 常见问题 10. 推荐 11. 博客 12. 联系方式 13. 页脚 14. 联系方式 15. 页脚 */</strong>
所有 JS 文件
<!-- 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/ajax-contact-form.js"></script> <script src="assets/js/main.js"></script>
注意:预览图像不包含在最终下载中。这些仅用于示例目的。
使用 Google 字体:
之前,当您开始编辑模板时,请确保安装字体。
- 谷歌字体
使用的图形:
之前,当您开始编辑模板时,请确保安装字体。
- Unsplash
- 自由图片
变更日志
版本 1.1.1
- 提高了交互元素的可访问性。
- 添加了 ARIA 属性以实现更好的屏幕阅读器兼容性。
- Bootstrap 版本更新(4 > 5)
非常感谢!祝好
调试器工作室