【免费】创意设计公司单页模板是一款大气宽屏html5模板素材下载.rar资源-CSDN文库

共37个文件

js：11个

css：7个

jpg：7个

需积分: 0 71 浏览量更新于2023-09-10 收藏 1.56MB RAR 举报

标题中的“创意设计公司单页模板”指的是一个专为创意设计公司设计的单页面网站模板。这个模板基于HTML5技术，旨在提供一个简洁、大气且宽屏的展示平台，能够有效地展示设计作品和公司信息。单页模板通常将所有内容（如介绍、服务、作品集和联系方式）整合在一个页面上，方便用户一目了然地浏览。描述中的“html”进一步确认了该模板是使用HTML5语言构建的。HTML5是超文本标记语言的最新版本，提供了更多的语义元素，如<header>、<nav>、<section>、<article>等，使得网页结构更加清晰，同时增强了网页的多媒体支持和离线存储功能。标签“html”也强调了这个主题与HTML技术紧密相关，表明该模板可能利用了HTML5的新特性，如音频、视频元素，以及canvas画布、geolocation定位、web storage本地存储等，以实现更丰富的用户体验。压缩包内的文件列表揭示了模板所依赖的样式表和资源： 1. bootstrap.css和bootstrap.min.css：这是Bootstrap框架的样式文件。Bootstrap是一个流行的响应式前端开发框架，它提供了预设的CSS样式和JavaScript组件，使得创建美观且响应式的网站变得更加便捷。 2. font-awesome.css和font-awesome.min.css：Font Awesome是一个图标库，提供大量的矢量图标，可以轻松地在网页上添加各种图标，提高视觉效果。 3. creative.css和creative.min.css：这可能是为创意设计公司定制的样式表，包含独特的设计和布局规则。 4. magnific-popup.css：这可能是一个轻量级的弹出插件样式，用于创建优雅的弹窗效果，如图像画廊或模态框。 5. fontawesome-webfont.eot、glyphicons-halflings-regular.eot：这些是Web字体文件，用于在浏览器中显示Font Awesome和Glyphicons图标。 6. index.html：这是网站的主入口文件，包含整个页面的HTML结构和引用的外部资源。综合以上信息，这个模板很可能利用Bootstrap的响应式布局，Font Awesome和Glyphicons的图标库，以及可能的Magnific Popup插件来提供一个现代、视觉吸引力强的单页网站。设计师可以通过编辑HTML和CSS文件，根据自己的需求调整颜色、布局和内容，快速创建一个符合创意设计公司形象的在线展示平台。

收起资源包目录

创意设计公司单页模板是一款大气宽屏html5模板素材下载.rar （37个子文件）

bootstrap.js 68KB

bootstrap.min.css 118KB

2.jpg 47KB

jquery.magnific-popup.js 41KB

FontAwesome.otf 122KB

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.eot 20KB

bootstrap.min.js 36KB

jquery.easing.min.js 5KB

fontawesome-webfont.eot 75KB

glyphicons-halflings-regular.woff2 18KB

6.jpg 52KB

creative.min.js 1KB

1.jpg 62KB

font-awesome.css 34KB

scrollreveal.js 33KB

header.jpg 123KB

jquery.magnific-popup.min.js 20KB

fontawesome-webfont.woff 88KB

fontawesome-webfont.woff2 70KB

magnific-popup.css 7KB

5.jpg 61KB

bootstrap.css 143KB

scrollreveal.min.js 8KB

font-awesome.min.css 28KB

index.html 9KB

creative.min.css 8KB

fontawesome-webfont.svg 382KB

creative.js 2KB

fontawesome-webfont.ttf 149KB

jquery.js 287KB

creative.css 9KB

jquery.min.js 95KB

3.jpg 47KB

4.jpg 48KB

资源推荐

资源预览

资源评论

<!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="author" content=""> <title>Home</title>  <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">  <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href='http://222.178.203.72:19005/whst/63/=enmsrzfnnfkdZohrzbnl//css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'> <link href='http://222.178.203.72:19005/whst/63/=enmsrzfnnfkdZohrzbnl//css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>  <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">  <link href="css/creative.min.css" rel="stylesheet">    </head> <body id="page-top"> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid">  <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> </button> <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a> </div>  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li> <a class="page-scroll" href="#about">About</a> </li> <li> <a class="page-scroll" href="#services">Services</a> </li> <li> <a class="page-scroll" href="#portfolio">Portfolio</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> </ul> </div>  </div>  </nav> <header> <div class="header-content"> <div class="header-content-inner"> <h1 id="homeHeading">Your Favorite Source of Free Bootstrap Themes</h1> <hr> <p>Start Bootstrap can help you build better websites using the Bootstrap CSS framework! Just download your template and start going, no strings attached!</p> <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a> </div> </div> </header> <section class="bg-primary" id="about"> <div class="container"> <div class="row"> <div class="col-lg-8 col-lg-offset-2 text-center"> <h2 class="section-heading">We've got what you need!</h2> <hr class="light"> <p class="text-faded">Start Bootstrap has everything you need to get your new website up and running in no time! All of the templates and themes on Start Bootstrap are open source, free to download, and easy to use. No strings attached!</p> <a href="#services" class="page-scroll btn btn-default btn-xl sr-button">Get Started!</a> </div> </div> </div> </section> <section id="services"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2 class="section-heading">At Your Service</h2> <hr class="primary"> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-lg-3 col-md-6 text-center"> <div class="service-box"> <i class="fa fa-4x fa-diamond text-primary sr-icons"></i> <h3>Sturdy Templates</h3> <p class="text-muted">Our templates are updated regularly so they don't break.</p> </div> </div> <div class="col-lg-3 col-md-6 text-center"> <div class="service-box"> <i class="fa fa-4x fa-paper-plane text-primary sr-icons"></i> <h3>Ready to Ship</h3> <p class="text-muted">You can use this theme as is, or you can make changes!</p> </div> </div> <div class="col-lg-3 col-md-6 text-center"> <div class="service-box"> <i class="fa fa-4x fa-newspaper-o text-primary sr-icons"></i> <h3>Up to Date</h3> <p class="text-muted">We update dependencies to keep things fresh.</p> </div> </div> <div class="col-lg-3 col-md-6 text-center"> <div class="service-box"> <i class="fa fa-4x fa-heart text-primary sr-icons"></i> <h3>Made with Love</h3> <p class="text-muted">You have to make your websites with love these days!</p> </div> </div> </div> </div> </section> <section class="no-padding" id="portfolio"> <div class="container-fluid"> <div class="row no-gutter popup-gallery"> <div class="col-lg-4 col-sm-6"> <a href="img/portfolio/fullsize/1.jpg" class="portfolio-box"> <img src="img/portfolio/thumbnails/1.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Category </div> <div class="project-name"> Project Name </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a href="img/portfolio/fullsize/2.jpg" class="portfolio-box"> <img src="img/portfolio/thumbnails/2.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Category </div> <div class="project-name"> Project Name </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a href="img/portfolio/fullsize/3.jpg" class="portfolio-box"> <img src="img/portfolio/thumbnails/3.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Category </div> <div class="project-name"> Project Name </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a href="img/portfolio/fullsize/4.jpg" class="portfolio-box"> <img src="img/portfolio/thumbnails/4.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Category </div> <div class="project-name"> Project Name </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a href="img/portfolio/fullsize/5.jpg" class="portfolio-box"> <img src="img/portfolio/thumbnails/5.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Category </div> <div class="project-name"> Project Name </div> </div> </div> </a> </div> <div class="col-lg-4 col-sm-6"> <a href="img/portfolio/fullsize/6.jpg" class="portfolio-box"> <img src="img/portfolio/thumbnails/6.jpg" class="img-responsive" alt=""> <div class="portfolio-box-caption"> <div class="portfolio-box-caption-content"> <div class="project-category text-faded"> Category </div> <div class="project-name"> Project Name </div> </div> </div> </a> </div> </div> </div> </section> <aside class="bg-dark"> <div class="container text-center"> <div class="call-to-action"> <h2>Free Download at Start Bootstrap!</h2> <a href="">Download Now!</a> </div> </div> </aside> <section