Skip to content

Commit

Permalink
bootstrap 4 design update
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidtmiller
davidtmiller committed Dec 14, 2017
1 parent 8370548 commit d5d856e
Show file tree
Hide file tree
Showing 16 changed files with 5,741 additions and 55 deletions.
158 changes: 141 additions & 17 deletions css/one-page-wonder.css
View file
@@ -1,35 +1,159 @@
/*!
* Start Bootstrap - One Page Wonder (https://startbootstrap.com/template-overviews/one-page-wonder)
* Start Bootstrap - One Page Wonder v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/one-page-wonder)
* Copyright 2013-2017 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-one-page-wonder/blob/master/LICENSE)
*/

body {
padding-top: 54px;
font-family: 'Lato';
}

@media (min-width: 992px) {
body {
padding-top: 56px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Catamaran';
font-weight: 800 !important;
}

.btn-xl {
text-transform: uppercase;
padding: 1.5rem 3rem;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.1rem;
}

.bg-black {
background-color: #000 !important;
}

.rounded-pill {
border-radius: 5rem;
}

.navbar-custom {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: rgba(0, 0, 0, 0.7);
}

.navbar-custom .navbar-brand {
text-transform: uppercase;
font-size: 1rem;
letter-spacing: 0.1rem;
font-weight: 700;
}

.navbar-custom .navbar-nav .nav-item .nav-link {
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1rem;
}

header.masthead {
background: url('https://unsplash.it/1900/1080?image=304') no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
position: relative;
overflow: hidden;
padding-top: calc(7rem + 72px);
padding-bottom: 7rem;
background: linear-gradient(0deg, #ff6a00 0%, #ee0979 100%);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
background-size: cover;
-o-background-size: cover;
}

header.masthead>.overlay {
padding: 5rem 0;
text-align: center;
background: rgba(0, 0, 0, 0.6);
header.masthead .masthead-content {
z-index: 1;
position: relative;
}

header.masthead .masthead-content .masthead-heading {
font-size: 4rem;
}

header.masthead .masthead-content .masthead-subheading {
font-size: 2rem;
}

header.masthead .bg-circle {
z-index: 0;
position: absolute;
border-radius: 100%;
background: linear-gradient(0deg, #ee0979 0%, #ff6a00 100%);
}

header.masthead .bg-circle-1 {
height: 90rem;
width: 90rem;
bottom: -55rem;
left: -55rem;
}

header.masthead .bg-circle-2 {
height: 50rem;
width: 50rem;
top: -25rem;
right: -25rem;
}

header.masthead .bg-circle-3 {
height: 20rem;
width: 20rem;
bottom: -10rem;
right: 5%;
}

header.masthead .bg-circle-4 {
height: 30rem;
width: 30rem;
top: -5rem;
right: 35%;
}

@media (min-width: 992px) {
header.masthead>.overlay {
padding: 10rem 0;
header.masthead {
padding-top: calc(10rem + 55px);
padding-bottom: 10rem;
}
header.masthead .masthead-content .masthead-heading {
font-size: 6rem;
}
header.masthead .masthead-content .masthead-subheading {
font-size: 4rem;
}
}

.bg-primary {
background-color: #ee0979 !important;
}

.btn-primary {
background-color: #ee0979;
border-color: #ee0979;
}

.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
background-color: #bd0760 !important;
border-color: #bd0760 !important;
}

.btn-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(238, 9, 121, 0.5);
}

.btn-secondary {
background-color: #ff6a00;
border-color: #ff6a00;
}

.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {
background-color: #cc5500 !important;
border-color: #cc5500 !important;
}

.btn-secondary:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 106, 0, 0.5);
}
5 changes: 5 additions & 0 deletions css/one-page-wonder.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

61 changes: 51 additions & 10 deletions gulpfile.js
View file
@@ -1,9 +1,21 @@
var gulp = require('gulp');
var sass = require('gulp-sass');
var cleanCSS = require('gulp-clean-css');
var header = require('gulp-header');
var rename = require("gulp-rename");
var browserSync = require('browser-sync').create();
var pkg = require('./package.json');

// Set the banner content
var banner = ['/*!\n',
' * Start Bootstrap - <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n',
' * Copyright 2013-' + (new Date()).getFullYear(), ' <%= pkg.author %>\n',
' * Licensed under <%= pkg.license %> (https://github.com/BlackrockDigital/<%= pkg.name %>/blob/master/LICENSE)\n',
' */\n',
''
].join('');

// Copy vendor files from /node_modules into /vendor
// NOTE: requires `npm install` before running!
gulp.task('copy', function() {
gulp.src([
'node_modules/bootstrap/dist/**/*',
Expand All @@ -17,21 +29,50 @@ gulp.task('copy', function() {
.pipe(gulp.dest('vendor/jquery'))
})

// Compile SCSS
gulp.task('css:compile', function() {
return gulp.src('./scss/**/*.scss')
.pipe(sass.sync({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(header(banner, {
pkg: pkg
}))
.pipe(gulp.dest('./css'))
});

// Minify CSS
gulp.task('css:minify', ['css:compile'], function() {
return gulp.src([
'./css/*.css',
'!./css/*.min.css'
])
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());
});

// CSS
gulp.task('css', ['css:compile', 'css:minify']);

// Default task
gulp.task('default', ['copy']);
gulp.task('default', ['css', 'copy']);

// Configure the browserSync task
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: ''
},
})
})
baseDir: "./"
}
});
});

// Dev task with browserSync
gulp.task('dev', ['browserSync'], function() {
// Reloads the browser whenever HTML or CSS files change
gulp.watch('css/*.css', browserSync.reload);
// Watch task
gulp.task('dev', ['css', 'browserSync'], function() {
gulp.watch('./scss/*.scss', ['css']);
// Reloads the browser whenever HTML files change
gulp.watch('*.html', browserSync.reload);
});
Binary file added img/01.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/02.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/03.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 28 additions & 27 deletions index.html
View file
Expand Up @@ -13,59 +13,60 @@
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="css/one-page-wonder.css" rel="stylesheet">
<link href="css/one-page-wonder.min.css" rel="stylesheet">

</head>

<body>

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
<div class="container">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
<a class="nav-link" href="#">Log In</a>
</li>
</ul>
</div>
</div>
</nav>

<header class="masthead">
<div class="overlay">
<header class="masthead text-center text-white">
<div class="masthead-content">
<div class="container">
<h1 class="display-1 text-white">One Page Wonder</h1>
<h2 class="display-4 text-white">Will Rock Your Socks Off</h2>
<h1 class="masthead-heading mb-0">One Page Wonder</h1>
<h2 class="masthead-subheading mb-0">Will Rock Your Socks Off</h2>
<a href="#" class="btn btn-primary btn-xl rounded-pill mt-5">Learn More</a>
</div>
</div>
<div class="bg-circle-1 bg-circle"></div>
<div class="bg-circle-2 bg-circle"></div>
<div class="bg-circle-3 bg-circle"></div>
<div class="bg-circle-4 bg-circle"></div>
</header>

<section>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-2">
<div class="col-lg-6 order-lg-2">
<div class="p-5">
<img class="img-fluid rounded-circle" src="https://unsplash.it/500/500?image=836" alt="">
<img class="img-fluid rounded-circle" src="img/01.jpg" alt="">
</div>
</div>
<div class="col-md-6 order-1">
<div class="col-lg-6 order-lg-1">
<div class="p-5">
<h2 class="display-4">For those about to rock...</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
Expand All @@ -78,12 +79,12 @@ <h2 class="display-4">For those about to rock...</h2>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<div class="col-lg-6">
<div class="p-5">
<img class="img-fluid rounded-circle" src="https://unsplash.it/500/500?image=452" alt="">
<img class="img-fluid rounded-circle" src="img/02.jpg" alt="">
</div>
</div>
<div class="col-md-6">
<div class="col-lg-6">
<div class="p-5">
<h2 class="display-4">We salute you!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
Expand All @@ -96,12 +97,12 @@ <h2 class="display-4">We salute you!</h2>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-2">
<div class="col-lg-6 order-lg-2">
<div class="p-5">
<img class="img-fluid rounded-circle" src="https://unsplash.it/500/500?image=453" alt="">
<img class="img-fluid rounded-circle" src="img/03.jpg" alt="">
</div>
</div>
<div class="col-md-6 order-1">
<div class="col-lg-6 order-lg-1">
<div class="p-5">
<h2 class="display-4">Let there be rock!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p>
Expand All @@ -112,9 +113,9 @@ <h2 class="display-4">Let there be rock!</h2>
</section>

<!-- Footer -->
<footer class="py-5 bg-dark">
<footer class="py-5 bg-black">
<div class="container">
<p class="m-0 text-center text-white">Copyright &copy; Your Website 2017</p>
<p class="m-0 text-center text-white small">Copyright &copy; Your Website 2017</p>
</div>
<!-- /.container -->
</footer>
Expand Down

0 comments on commit d5d856e

Please sign in to comment.