Less to SCSS, split up sections
This commit is contained in:
felix
parent
892240cb72
commit
879d945203
|
|
@ -0,0 +1,2 @@
|
|||
_site/
|
||||
.sass-cache/
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2015 Felix Volny
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
26
README.md
26
README.md
|
|
@ -1,26 +0,0 @@
|
|||
# [Start Bootstrap](http://startbootstrap.com/) - [Creative](http://startbootstrap.com/template-overviews/creative/)
|
||||
|
||||
[Creative](http://startbootstrap.com/template-overviews/creative/) is a one page creative theme for [Bootstrap](http://getbootstrap.com/) created by [Start Bootstrap](http://startbootstrap.com/).
|
||||
|
||||
## Getting Started
|
||||
|
||||
To use this theme, choose one of the following options to get started:
|
||||
* Download the latest release on Start Bootstrap
|
||||
* Fork this repository on GitHub
|
||||
|
||||
## Bugs and Issues
|
||||
|
||||
Have a bug or an issue with this theme? [Open a new issue](https://github.com/IronSummitMedia/startbootstrap-creative/issues) here on GitHub or leave a comment on the [template overview page at Start Bootstrap](http://startbootstrap.com/template-overviews/creative/).
|
||||
|
||||
## Creator
|
||||
|
||||
Start Bootstrap was created by and is maintained by **David Miller**, Managing Partner at [Iron Summit Media Strategies](http://www.ironsummitmedia.com/).
|
||||
|
||||
* https://twitter.com/davidmillerskt
|
||||
* https://github.com/davidtmiller
|
||||
|
||||
Start Bootstrap is based on the [Bootstrap](http://getbootstrap.com/) framework created by [Mark Otto](https://twitter.com/mdo) and [Jacob Thorton](https://twitter.com/fat).
|
||||
|
||||
## Copyright and License
|
||||
|
||||
Copyright 2013-2015 Iron Summit Media Strategies, LLC. Code released under the [Apache 2.0](https://github.com/IronSummitMedia/startbootstrap-creative/blob/gh-pages/LICENSE) license.
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<aside class="bg-dark">
|
||||
<div class="container text-center">
|
||||
<div class="call-to-action">
|
||||
<h2>Free Download at Start Bootstrap!</h2>
|
||||
<a href="#" class="btn btn-default btn-xl wow tada">Download Now!</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<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="#" class="btn btn-default btn-xl">Get Started!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<section id="contact">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2 text-center">
|
||||
<h2 class="section-heading">Let's Get In Touch!</h2>
|
||||
<hr class="primary">
|
||||
<p>Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
|
||||
</div>
|
||||
<div class="col-lg-4 col-lg-offset-2 text-center">
|
||||
<i class="fa fa-phone fa-3x wow bounceIn"></i>
|
||||
<p>123-456-6789</p>
|
||||
</div>
|
||||
<div class="col-lg-4 text-center">
|
||||
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
|
||||
<p><a href="mailto:your-email@your-domain.com">feedback@startbootstrap.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<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>Creative - Start Bootstrap Theme</title>
|
||||
|
||||
<!-- Bootstrap Core CSS -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
|
||||
|
||||
<!-- Custom Fonts -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
|
||||
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
|
||||
|
||||
<!-- Plugin CSS -->
|
||||
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="css/main.css" type="text/css">
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<header>
|
||||
<div class="header-content">
|
||||
<div class="header-content-inner">
|
||||
<h1>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>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<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>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<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>
|
||||
<!-- /.navbar-collapse -->
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
</nav>
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
<section class="no-padding" id="portfolio">
|
||||
<div class="container-fluid">
|
||||
<div class="row no-gutter">
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<a href="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!-- jQuery -->
|
||||
<script src="js/jquery.js"></script>
|
||||
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Plugin JavaScript -->
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
<script src="js/jquery.fittext.js"></script>
|
||||
<script src="js/wow.min.js"></script>
|
||||
|
||||
<!-- Custom Theme JavaScript -->
|
||||
<script src="js/creative.js"></script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<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 wow bounceIn text-primary"></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 wow bounceIn text-primary" data-wow-delay=".1s"></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 wow bounceIn text-primary" data-wow-delay=".2s"></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 wow bounceIn text-primary" data-wow-delay=".3s"></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>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
{% include head.html %}
|
||||
{% include nav.html %}
|
||||
{% include header.html %}
|
||||
{% include call-to-action.html %}
|
||||
{% include services.html %}
|
||||
{% include portfolio.html %}
|
||||
{% include aside.html %}
|
||||
{% include contact.html %}
|
||||
{% include scripts.html %}
|
||||
|
||||
</html>
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
@import "variables.less";
|
||||
@import "mixins.less";
|
||||
|
||||
// Global Components
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
|
|
@ -9,11 +5,11 @@ body {
|
|||
}
|
||||
|
||||
body {
|
||||
.serif-font;
|
||||
@include serif-font;
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: @theme-primary;
|
||||
border-color: $theme-primary;
|
||||
border-width: 3px;
|
||||
max-width: 50px;
|
||||
}
|
||||
|
|
@ -23,11 +19,11 @@ hr.light {
|
|||
}
|
||||
|
||||
a {
|
||||
.transition-all;
|
||||
color: @theme-primary;
|
||||
@include transition-all;
|
||||
color: $theme-primary;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: darken(@theme-primary, 10%);
|
||||
color: darken($theme-primary, 10%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -37,7 +33,7 @@ h3,
|
|||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
.sans-serif-font;
|
||||
@include sans-serif-font;
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -47,11 +43,11 @@ p {
|
|||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: @theme-primary;
|
||||
background-color: $theme-primary;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
background-color: @theme-dark;
|
||||
background-color: $theme-dark;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
|
@ -75,17 +71,17 @@ aside {
|
|||
|
||||
.navbar-default {
|
||||
background-color: white;
|
||||
border-color: fade(@theme-dark, 5%);
|
||||
.sans-serif-font;
|
||||
.transition-all;
|
||||
border-color: fade($theme-dark, 5%);
|
||||
@include sans-serif-font;
|
||||
@include transition-all;
|
||||
.navbar-header .navbar-brand {
|
||||
color: @theme-primary;
|
||||
.sans-serif-font;
|
||||
color: $theme-primary;
|
||||
@include sans-serif-font;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: darken(@theme-primary, 10%);
|
||||
color: darken($theme-primary, 10%);
|
||||
}
|
||||
}
|
||||
.nav {
|
||||
|
|
@ -95,15 +91,15 @@ aside {
|
|||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
color: @theme-dark;
|
||||
color: $theme-dark;
|
||||
&:hover {
|
||||
color: @theme-primary;
|
||||
color: $theme-primary;
|
||||
}
|
||||
}
|
||||
&.active {
|
||||
> a,
|
||||
> a:focus {
|
||||
color: @theme-primary !important;
|
||||
color: $theme-primary !important;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
|
|
@ -131,20 +127,20 @@ aside {
|
|||
}
|
||||
&.affix {
|
||||
background-color: white;
|
||||
border-color: fade(@theme-dark, 5%);
|
||||
border-color: fade($theme-dark, 5%);
|
||||
.navbar-header .navbar-brand {
|
||||
color: @theme-primary;
|
||||
color: $theme-primary;
|
||||
font-size: 14px;
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: darken(@theme-primary, 10%);
|
||||
color: darken($theme-primary, 10%);
|
||||
}
|
||||
}
|
||||
.nav > li > a,
|
||||
.nav > li > a:focus {
|
||||
color: @theme-dark;
|
||||
color: $theme-dark;
|
||||
&:hover {
|
||||
color: @theme-primary;
|
||||
color: $theme-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -157,7 +153,7 @@ header {
|
|||
position: relative;
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
.background-cover;
|
||||
@include background-cover;
|
||||
background-position: center;
|
||||
background-image: url('../img/header.jpg');
|
||||
text-align: center;
|
||||
|
|
@ -235,13 +231,13 @@ header {
|
|||
color: white;
|
||||
opacity: 0;
|
||||
display: block;
|
||||
background: fade(@theme-primary, 90%);
|
||||
background: fade($theme-primary, 90%);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.transition-all;
|
||||
@include transition-all;
|
||||
.portfolio-box-caption-content {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
|
@ -250,7 +246,7 @@ header {
|
|||
transform: translateY(-50%);
|
||||
.project-category,
|
||||
.project-name {
|
||||
.sans-serif-font;
|
||||
@include sans-serif-font;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.project-category {
|
||||
|
|
@ -290,7 +286,7 @@ header {
|
|||
|
||||
// Bootstrap Overrides
|
||||
.text-primary {
|
||||
color: @theme-primary;
|
||||
color: $theme-primary;
|
||||
}
|
||||
|
||||
.no-gutter > [class*='col-'] {
|
||||
|
|
@ -300,15 +296,15 @@ header {
|
|||
|
||||
// Button Styles
|
||||
.btn-default {
|
||||
.button-variant(@theme-dark;white;white);
|
||||
@include button-variant($theme-dark, white, white);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
.button-variant(white;@theme-primary;@theme-primary);
|
||||
@include button-variant(white, $theme-primary, $theme-primary);
|
||||
}
|
||||
|
||||
.btn {
|
||||
.sans-serif-font;
|
||||
@include sans-serif-font;
|
||||
border: none;
|
||||
border-radius: 300px;
|
||||
font-weight: 700;
|
||||
|
|
@ -324,13 +320,13 @@ header {
|
|||
::-moz-selection {
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
background: @theme-dark;
|
||||
background: $theme-dark;
|
||||
}
|
||||
|
||||
::selection {
|
||||
color: white;
|
||||
text-shadow: none;
|
||||
background: @theme-dark;
|
||||
background: $theme-dark;
|
||||
}
|
||||
|
||||
img::selection {
|
||||
|
|
@ -344,5 +340,5 @@ img::-moz-selection {
|
|||
}
|
||||
|
||||
body {
|
||||
webkit-tap-highlight-color: @theme-dark;
|
||||
-webkit-tap-highlight-color: $theme-dark;
|
||||
}
|
||||
|
|
@ -1,37 +1,38 @@
|
|||
// Mixins
|
||||
|
||||
.transition-all() {
|
||||
@mixin transition-all()
|
||||
{
|
||||
-webkit-transition: all 0.35s;
|
||||
-moz-transition: all 0.35s;
|
||||
transition: all 0.35s;
|
||||
}
|
||||
|
||||
.background-cover() {
|
||||
@mixin background-cover()
|
||||
{
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
background-size: cover;
|
||||
-o-background-size: cover;
|
||||
}
|
||||
|
||||
.button-variant(@color; @background; @border) {
|
||||
color: @color;
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
.transition-all;
|
||||
@mixin button-variant($color, $background, $border)
|
||||
{
|
||||
color: $color;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
@include transition-all;
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&.focus,
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
color: @color;
|
||||
background-color: darken(@background, 5%);
|
||||
border-color: darken(@border, 7%);
|
||||
.open > .dropdown-toggle & {
|
||||
color: $color;
|
||||
background-color: darken($background, 5%);
|
||||
border-color: darken($border, 7%);
|
||||
}
|
||||
&:active,
|
||||
&.active,
|
||||
.open > .dropdown-toggle& {
|
||||
.open > .dropdown-toggle & {
|
||||
background-image: none;
|
||||
}
|
||||
&.disabled,
|
||||
|
|
@ -43,21 +44,23 @@
|
|||
&.focus,
|
||||
&:active,
|
||||
&.active {
|
||||
background-color: @background;
|
||||
border-color: @border;
|
||||
background-color: $background;
|
||||
border-color: $border;
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
color: @background;
|
||||
background-color: @color;
|
||||
color: $background;
|
||||
background-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
.sans-serif-font() {
|
||||
@mixin sans-serif-font()
|
||||
{
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.serif-font() {
|
||||
@mixin serif-font()
|
||||
{
|
||||
font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
476
css/creative.css
476
css/creative.css
|
|
@ -1,476 +0,0 @@
|
|||
/*!
|
||||
* Start Bootstrap - Creative Bootstrap Theme (http://startbootstrap.com)
|
||||
* Code licensed under the Apache License v2.0.
|
||||
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*/
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Merriweather,'Helvetica Neue',Arial,sans-serif;
|
||||
}
|
||||
|
||||
hr {
|
||||
max-width: 50px;
|
||||
border-color: #f05f40;
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
hr.light {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #f05f40;
|
||||
-webkit-transition: all .35s;
|
||||
-moz-transition: all .35s;
|
||||
transition: all .35s;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #eb3812;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background-color: #f05f40;
|
||||
}
|
||||
|
||||
.bg-dark {
|
||||
color: #fff;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.text-faded {
|
||||
color: rgba(255,255,255,.7);
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 100px 0;
|
||||
}
|
||||
|
||||
aside {
|
||||
padding: 50px 0;
|
||||
}
|
||||
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
border-color: rgba(34,34,34,.05);
|
||||
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
|
||||
background-color: #fff;
|
||||
-webkit-transition: all .35s;
|
||||
-moz-transition: all .35s;
|
||||
transition: all .35s;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-header .navbar-brand {
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
|
||||
font-weight: 700;
|
||||
color: #f05f40;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-header .navbar-brand:hover,
|
||||
.navbar-default .navbar-header .navbar-brand:focus {
|
||||
color: #eb3812;
|
||||
}
|
||||
|
||||
.navbar-default .nav > li>a,
|
||||
.navbar-default .nav>li>a:focus {
|
||||
text-transform: uppercase;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.navbar-default .nav > li>a:hover,
|
||||
.navbar-default .nav>li>a:focus:hover {
|
||||
color: #f05f40;
|
||||
}
|
||||
|
||||
.navbar-default .nav > li.active>a,
|
||||
.navbar-default .nav>li.active>a:focus {
|
||||
color: #f05f40!important;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-default .nav > li.active>a:hover,
|
||||
.navbar-default .nav>li.active>a:focus:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.navbar-default {
|
||||
border-color: rgba(255,255,255,.3);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.navbar-default .navbar-header .navbar-brand {
|
||||
color: rgba(255,255,255,.7);
|
||||
}
|
||||
|
||||
.navbar-default .navbar-header .navbar-brand:hover,
|
||||
.navbar-default .navbar-header .navbar-brand:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-default .nav > li>a,
|
||||
.navbar-default .nav>li>a:focus {
|
||||
color: rgba(255,255,255,.7);
|
||||
}
|
||||
|
||||
.navbar-default .nav > li>a:hover,
|
||||
.navbar-default .nav>li>a:focus:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.navbar-default.affix {
|
||||
border-color: rgba(34,34,34,.05);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.navbar-default.affix .navbar-header .navbar-brand {
|
||||
font-size: 14px;
|
||||
color: #f05f40;
|
||||
}
|
||||
|
||||
.navbar-default.affix .navbar-header .navbar-brand:hover,
|
||||
.navbar-default.affix .navbar-header .navbar-brand:focus {
|
||||
color: #eb3812;
|
||||
}
|
||||
|
||||
.navbar-default.affix .nav > li>a,
|
||||
.navbar-default.affix .nav>li>a:focus {
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.navbar-default.affix .nav > li>a:hover,
|
||||
.navbar-default.affix .nav>li>a:focus:hover {
|
||||
color: #f05f40;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-image: url(../img/header.jpg);
|
||||
background-position: center;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
background-size: cover;
|
||||
-o-background-size: cover;
|
||||
}
|
||||
|
||||
header .header-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding: 100px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header .header-content .header-content-inner h1 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
header .header-content .header-content-inner hr {
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
header .header-content .header-content-inner p {
|
||||
margin-bottom: 50px;
|
||||
font-size: 16px;
|
||||
font-weight: 300;
|
||||
color: rgba(255,255,255,.7);
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
header {
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
header .header-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
padding: 0 50px;
|
||||
-webkit-transform: translateY(-50%);
|
||||
-ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
header .header-content .header-content-inner {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
header .header-content .header-content-inner p {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: 80%;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.service-box {
|
||||
margin: 50px auto 0;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
@media(min-width:992px) {
|
||||
.service-box {
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
}
|
||||
|
||||
.service-box p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.portfolio-box {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
.portfolio-box .portfolio-box-caption {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
background: rgba(240,95,64,.9);
|
||||
-webkit-transition: all .35s;
|
||||
-moz-transition: all .35s;
|
||||
transition: all .35s;
|
||||
}
|
||||
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
|
||||
padding: 0 15px;
|
||||
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
|
||||
}
|
||||
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.portfolio-box:hover .portfolio-box-caption {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@media(min-width:768px) {
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.call-to-action h2 {
|
||||
margin: 0 auto 20px;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #f05f40;
|
||||
}
|
||||
|
||||
.no-gutter > [class*=col-] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
border-color: #fff;
|
||||
color: #222;
|
||||
background-color: #fff;
|
||||
-webkit-transition: all .35s;
|
||||
-moz-transition: all .35s;
|
||||
transition: all .35s;
|
||||
}
|
||||
|
||||
.btn-default:hover,
|
||||
.btn-default:focus,
|
||||
.btn-default.focus,
|
||||
.btn-default:active,
|
||||
.btn-default.active,
|
||||
.open > .dropdown-toggle.btn-default {
|
||||
border-color: #ededed;
|
||||
color: #222;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.btn-default:active,
|
||||
.btn-default.active,
|
||||
.open > .dropdown-toggle.btn-default {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-default.disabled,
|
||||
.btn-default[disabled],
|
||||
fieldset[disabled] .btn-default,
|
||||
.btn-default.disabled:hover,
|
||||
.btn-default[disabled]:hover,
|
||||
fieldset[disabled] .btn-default:hover,
|
||||
.btn-default.disabled:focus,
|
||||
.btn-default[disabled]:focus,
|
||||
fieldset[disabled] .btn-default:focus,
|
||||
.btn-default.disabled.focus,
|
||||
.btn-default[disabled].focus,
|
||||
fieldset[disabled] .btn-default.focus,
|
||||
.btn-default.disabled:active,
|
||||
.btn-default[disabled]:active,
|
||||
fieldset[disabled] .btn-default:active,
|
||||
.btn-default.disabled.active,
|
||||
.btn-default[disabled].active,
|
||||
fieldset[disabled] .btn-default.active {
|
||||
border-color: #fff;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.btn-default .badge {
|
||||
color: #fff;
|
||||
background-color: #222;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
border-color: #f05f40;
|
||||
color: #fff;
|
||||
background-color: #f05f40;
|
||||
-webkit-transition: all .35s;
|
||||
-moz-transition: all .35s;
|
||||
transition: all .35s;
|
||||
}
|
||||
|
||||
.btn-primary:hover,
|
||||
.btn-primary:focus,
|
||||
.btn-primary.focus,
|
||||
.btn-primary:active,
|
||||
.btn-primary.active,
|
||||
.open > .dropdown-toggle.btn-primary {
|
||||
border-color: #ed431f;
|
||||
color: #fff;
|
||||
background-color: #ee4b28;
|
||||
}
|
||||
|
||||
.btn-primary:active,
|
||||
.btn-primary.active,
|
||||
.open > .dropdown-toggle.btn-primary {
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.btn-primary.disabled,
|
||||
.btn-primary[disabled],
|
||||
fieldset[disabled] .btn-primary,
|
||||
.btn-primary.disabled:hover,
|
||||
.btn-primary[disabled]:hover,
|
||||
fieldset[disabled] .btn-primary:hover,
|
||||
.btn-primary.disabled:focus,
|
||||
.btn-primary[disabled]:focus,
|
||||
fieldset[disabled] .btn-primary:focus,
|
||||
.btn-primary.disabled.focus,
|
||||
.btn-primary[disabled].focus,
|
||||
fieldset[disabled] .btn-primary.focus,
|
||||
.btn-primary.disabled:active,
|
||||
.btn-primary[disabled]:active,
|
||||
fieldset[disabled] .btn-primary:active,
|
||||
.btn-primary.disabled.active,
|
||||
.btn-primary[disabled].active,
|
||||
fieldset[disabled] .btn-primary.active {
|
||||
border-color: #f05f40;
|
||||
background-color: #f05f40;
|
||||
}
|
||||
|
||||
.btn-primary .badge {
|
||||
color: #f05f40;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 0;
|
||||
border-radius: 300px;
|
||||
text-transform: uppercase;
|
||||
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-xl {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
text-shadow: none;
|
||||
color: #fff;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
::selection {
|
||||
text-shadow: none;
|
||||
color: #fff;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
img::selection {
|
||||
color: #fff;
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
img::-moz-selection {
|
||||
color: #fff;
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
body {
|
||||
webkit-tap-highlight-color: #222;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
---
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
// Example Defaults
|
||||
// $base-font-family: Helvetica, Arial, sans-serif;
|
||||
// $base-font-size: 16px;
|
||||
// $small-font-size: $base-font-size * 0.875;
|
||||
// $base-line-height: 1.5;
|
||||
|
||||
// $spacing-unit: 30px;
|
||||
|
||||
// $text-color: #111;
|
||||
// $background-color: #fdfdfd;
|
||||
// $brand-color: #2a7ae2;
|
||||
|
||||
// $grey-color: #828282;
|
||||
// $grey-color-light: lighten($grey-color, 40%);
|
||||
// $grey-color-dark: darken($grey-color, 25%);
|
||||
|
||||
// // Width of the content area
|
||||
// $content-width: 800px;
|
||||
|
||||
// $on-palm: 600px;
|
||||
// $on-laptop: 800px;
|
||||
|
||||
// Using media queries with like this:
|
||||
// @include media-query($on-palm) {
|
||||
// .wrapper {
|
||||
// padding-right: $spacing-unit / 2;
|
||||
// padding-left: $spacing-unit / 2;
|
||||
// }
|
||||
// }
|
||||
|
||||
// variables.less
|
||||
$theme-primary: #F05F40;
|
||||
$theme-dark: #222;
|
||||
|
||||
// Import partials from `sass_dir` (defaults to `_sass`)
|
||||
@import
|
||||
"mixins",
|
||||
"base"
|
||||
;
|
||||
286
index.html
286
index.html
|
|
@ -1,283 +1,3 @@
|
|||
<!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>Creative - Start Bootstrap Theme</title>
|
||||
|
||||
<!-- Bootstrap Core CSS -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
|
||||
|
||||
<!-- Custom Fonts -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
|
||||
<link href='http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
|
||||
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" type="text/css">
|
||||
|
||||
<!-- Plugin CSS -->
|
||||
<link rel="stylesheet" href="css/animate.min.css" type="text/css">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="css/creative.css" type="text/css">
|
||||
|
||||
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
</head>
|
||||
|
||||
<body id="page-top">
|
||||
|
||||
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<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>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a>
|
||||
</div>
|
||||
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<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>
|
||||
<!-- /.navbar-collapse -->
|
||||
</div>
|
||||
<!-- /.container-fluid -->
|
||||
</nav>
|
||||
|
||||
<header>
|
||||
<div class="header-content">
|
||||
<div class="header-content-inner">
|
||||
<h1>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="#" class="btn btn-default btn-xl">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 wow bounceIn text-primary"></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 wow bounceIn text-primary" data-wow-delay=".1s"></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 wow bounceIn text-primary" data-wow-delay=".2s"></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 wow bounceIn text-primary" data-wow-delay=".3s"></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">
|
||||
<div class="col-lg-4 col-sm-6">
|
||||
<a href="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="portfolio-box">
|
||||
<img src="img/portfolio/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="#" class="btn btn-default btn-xl wow tada">Download Now!</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 col-lg-offset-2 text-center">
|
||||
<h2 class="section-heading">Let's Get In Touch!</h2>
|
||||
<hr class="primary">
|
||||
<p>Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
|
||||
</div>
|
||||
<div class="col-lg-4 col-lg-offset-2 text-center">
|
||||
<i class="fa fa-phone fa-3x wow bounceIn"></i>
|
||||
<p>123-456-6789</p>
|
||||
</div>
|
||||
<div class="col-lg-4 text-center">
|
||||
<i class="fa fa-envelope-o fa-3x wow bounceIn" data-wow-delay=".1s"></i>
|
||||
<p><a href="mailto:your-email@your-domain.com">feedback@startbootstrap.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery.js"></script>
|
||||
|
||||
<!-- Bootstrap Core JavaScript -->
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Plugin JavaScript -->
|
||||
<script src="js/jquery.easing.min.js"></script>
|
||||
<script src="js/jquery.fittext.js"></script>
|
||||
<script src="js/wow.min.js"></script>
|
||||
|
||||
<!-- Custom Theme JavaScript -->
|
||||
<script src="js/creative.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
---
|
||||
layout: front
|
||||
---
|
||||
|
|
|
|||
|
|
@ -1,4 +0,0 @@
|
|||
// Variables
|
||||
|
||||
@theme-primary: #F05F40;
|
||||
@theme-dark: #222;
|
||||
Loading…
Reference in New Issue