Permalink
Browse files

add snippets, premium ad deadline badge

  • Loading branch information...
davidtmiller committed Jun 19, 2018
1 parent fce40c3 commit 0131b317bf03f31373607d90e559ddc07a13d05a
@@ -20,7 +20,7 @@ permalink: pretty
url: https://startbootstrap.com
enforce_ssl: startbootstrap.com
encoding: UTF-8
host: 0.0.0.0
host: localhost
port: 9000
# Plugins
@@ -37,10 +37,13 @@ collections:
templates:
output: true
permalink: /template-overviews/:title/
snippets:
output: true
permalink: /snippets/:title/
# Pagination
paginate: 5
paginate_path: "/articles/page:num/"
# Other
# Blog Excerpt Separator
excerpt_separator: "<!--more-->"
@@ -36,6 +36,10 @@ <h6 class="dropdown-header">Template &amp; Theme Categories:</h6>
<a class="dropdown-item" href="/template-categories/navigation-menus">Navigation and Navbars</a>
</div>
</li>
<li class="nav-item" style="position: relative;">
<a class="nav-link" href="/snippets" title="Bootstrap Code Snippets">Snippets</a>
<span class="badge badge-pill badge-warning text-white" style="position: absolute; top: 0; left: 56px; font-size: 8px;">NEW</span>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdownResources" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Resources</a>
<div class="dropdown-menu" aria-labelledby="dropdownResources">
@@ -0,0 +1,249 @@
---
layout: default
---
<header class="page-heading">
<div class="container">
<h1>{{ page.title }}</h1>
<p>{{ page.description }}</p>
{% include ad.html %}
</div>
</header>
<div class="container">
<ul class="list-inline mb-3">
<div class="small d-inline mr-2">Built with:</div>
{% for item in page.dependencies %}
<li class="list-inline-item">
<span class="badge badge-primary">
{{ item }}
</span>
</li>
{% endfor %}
</ul>
<div class="mb-5 card-snippet-overview">
<iframe width="100%" height="700" src="//jsfiddle.net/StartBootstrap/{{ page.jsfiddle-id }}/embedded/result,html,css,js,resources" allowfullscreen="allowfullscreen" allowpaymentrequest="allowpaymentrequest" frameborder="0"></iframe>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-7">
{% include disqus.html %}
</div>
<div class="col-lg-5">
<div class="card sb-card">
<div class="card-body">
<h4>Need Something More?</h4>
<p>Looking for something more than just a free theme? Head over to
<strong>
<a href="https://www.creative-tim.com/?affiliate_id=101249" onclick="ga('send','event','Referral','Referral - Template Overview Page')">Creative Tim</a>
</strong>
and preview some of the best premium Bootstrap themes and templates on the web!</p>
<a class="btn btn-lg btn-secondary" href="https://www.creative-tim.com/?affiliate_id=101249" onclick="ga('send','event','Referral','Referral - Template Overview Page')">
<span><img style="width: 50px; height: 50px;" class="mr-3 rounded-circle" src="/assets/img/creative-tim/tim.png" alt=""></span>
<span>
<strong>Browse Themes on Creative Tim</strong>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="container">
<div class="row">
<div class="col-lg-7">
<div class="card sb-card">
<a class="sb-img" target="_blank" href="https://blackrockdigital.github.io/startbootstrap-{{ page.slug }}/">
<img class="card-img-top" src="{{ page.img-src }}" alt="{{ page.img-desc }}">
</a>
<div class="card-body download-links">
<ul class="list-inline m-0">
<li class="list-inline-item">
<a href="https://blackrockdigital.github.io/startbootstrap-{{ page.slug }}/" class="btn btn-secondary" target="_blank">
<i class="fas fa-eye"></i>
Live Preview
</a>
</li>
<li class="list-inline-item">
<a href="https://github.com/BlackrockDigital/startbootstrap-{{ page.slug }}/archive/gh-pages.zip" class="btn btn-secondary" onclick="ga('send','event','Download','Download {{ page.title }}')" id="download">
<i class="fas fa-download"></i>
Download
</a>
</li>
<li class="list-inline-item">
<a href="https://github.com/BlackrockDigital/startbootstrap-{{ page.slug }}" class="btn btn-secondary" target="_blank">
<i class="fab fa-github"></i>
View Source
</a>
</li>
</ul>
</div>
</div>
{% if page.alt-version == "yes" %}
<div class="card sb-card download-links">
<div class="card-body">
<h4>Alternate Versions</h4>
<ul class="list-inline">
{% if page.alt-v3 %}
<li class="list-inline-item">
<a href="{{ page.alt-v3 }}" class="btn btn-secondary">
<i class="fab fa-github"></i>
Bootstrap 3</a>
</li>
{% endif %}
{% if page.alt-jekyll %}
<li class="list-inline-item">
<a href="{{ page.alt-jekyll }}" class="btn btn-secondary"><img class="brand-logo" src="/assets/img/brand-logos/jekyll-logo.svg" alt="Jekyll Version of {{ page.title }}">
Jekyll</a>
</li>
{% endif %}
</ul>
</div>
</div>
{% endif %}
{% if page.user-version == "yes" %}
<div class="card sb-card download-links">
<div class="card-body">
<h4>User Contributed Versions</h4>
<ul class="list-inline">
{% if page.user-jekyll %}
<li class="list-inline-item">
<a href="{{ page.user-jekyll }}" class="btn btn-secondary"><img class="brand-logo" src="/assets/img/brand-logos/jekyll-logo.svg" alt="Jekyll Version of {{ page.title }}">
Jekyll</a>
</li>
{% endif %}
{% if page.user-ghost %}
<li class="list-inline-item">
<a href="{{ page.user-ghost }}" class="btn btn-secondary"><img class="brand-logo" src="/assets/img/brand-logos/ghost-logo.svg" alt="Ghost Version of {{ page.title }}">
Ghost</a>
</li>
{% endif %}
{% if page.user-wordpress %}
<li class="list-inline-item">
<a href="{{ page.user-wordpress }}" class="btn btn-secondary">
<i class="fab fa-wordpress"></i>
WordPress</a>
</li>
{% endif %}
{% if page.user-grav %}
<li class="list-inline-item">
<a href="{{ page.user-grav }}" class="btn btn-secondary">
<i class="fab fa-grav"></i>
Grav</a>
</li>
{% endif %}
{% if page.user-anchor %}
<li class="list-inline-item">
<a href="{{ page.user-anchor }}" class="btn btn-secondary"><img class="brand-logo" src="/assets/img/brand-logos/anchor-logo.svg" alt="Anchor CMS Version of {{ page.title }}">
Anchor</a>
</li>
{% endif %}
{% if page.user-blogger %}
<li class="list-inline-item">
<a href="{{ page.user-blogger }}" class="btn btn-secondary">
<i class="fab fa-blogger"></i>
Blogger</a>
</li>
{% endif %}
{% if page.user-meteor %}
<li class="list-inline-item">
<a href="{{ page.user-meteor }}" class="btn btn-secondary"><img class="brand-logo" src="/assets/img/brand-logos/meteor-logo.svg" alt="Jekyll Version of {{ page.title }}">
Meteor</a>
</li>
{% endif %}
{% if page.user-rtl %}
<li class="list-inline-item">
<a href="{{ page.user-rtl }}" class="btn btn-secondary">
<i class="fab fa-github"></i>
RTL</a>
</li>
{% endif %}
</ul>
<p class="small text-muted">
<i class="fal fa-exclamation-circle text-primary"></i>
User contributed versions are not created, supported, or updated by Start Bootstrap. For support and license information on these versions, please contact the versions creator.</p>
</div>
</div>
{% endif %}
{% include disqus.html %}
</div>
<div class="col-lg-5">
<ul class="list-inline social-links">
<li class="list-inline-item">
<iframe id="gh-fork" src="https://ghbtns.com/github-btn.html?user=blackrockdigital&repo=startbootstrap-{{ page.slug }}&type=fork" allowtransparency="true" frameborder="0" scrolling="0" width="55px" height="20px"></iframe>
<iframe id="gh-star" src="https://ghbtns.com/github-btn.html?user=blackrockdigital&repo=startbootstrap-{{ page.slug }}&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
</li>
<li class="list-inline-item">
<a href="https://twitter.com/SBootstrap" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @SBootstrap</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="https://startbootstrap.com/template-overviews/{{ page.slug }}/" data-via="SBootstrap" data-lang="en">Tweet</a>
</li>
</ul>
<div class="card sb-card">
<div class="card-body">
<h4>Description:</h4>
<p class="mb-0">{{page.long-description}}</p>
</div>
</div>
<div class="card sb-card">
<div class="card-body">
<h4>Need Something More?</h4>
<p>Looking for something more than just a free theme? Head over to
<strong>
<a href="https://www.creative-tim.com/?affiliate_id=101249" onclick="ga('send','event','Referral','Referral - Template Overview Page')">Creative Tim</a>
</strong>
and preview some of the best premium Bootstrap themes and templates on the web!</p>
<a class="btn btn-lg btn-secondary" href="https://www.creative-tim.com/?affiliate_id=101249" onclick="ga('send','event','Referral','Referral - Template Overview Page')">
<span><img style="width: 50px; height: 50px;" class="mr-3 rounded-circle" src="/assets/img/creative-tim/tim.png" alt=""></span>
<span>
<strong>Browse Themes on Creative Tim</strong>
</span>
</a>
</div>
</div>
<div class="card sb-card">
<div class="card-body">
<h4>Features:</h4>
<ul class="mb-0">
<li>
<i class="fas fa-balance-scale text-muted"></i>
<strong>
<a href="https://github.com/BlackrockDigital/startbootstrap-{{page.slug}}/blob/master/LICENSE">MIT License</a>
</strong>
</li>
<li>Built to support the
<strong>latest, stable releases</strong>
of all major browsers and platforms.</li>
<li>Fully responsive HTML template created with Bootstrap 4</li>
{% for feature in page.features %}
<li>{{ feature }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div> -->
{{ content }}
@@ -108,10 +108,18 @@ <h4 class="card-title">{{ item.title }}</h4>
{% endif %}
{% if page.slug == 'premium' %}
<!-- Creative Tim Banner Ad for Premium Page -->
<div class="col-12">
<div class="mt-0 text-center">
<a href="https://www.creative-tim.com/product/buy/bundle/2018-summer-bundle/?affiliate_id=101249" class="d-block mb-5" onclick="ga('send','event','Referral','Referral - Creative Tim Summer Bundle')">
<img class="img-fluid" src="/assets/img/creative-tim/ct-summer-bundle.jpg" alt="">
<a href="https://www.creative-tim.com/product/buy/bundle/2018-summer-bundle/?affiliate_id=101249" class="d-block mb-5 border rounded" onclick="ga('send','event','Referral','Referral - Creative Tim Summer Bundle')" style="text-decoration: none !important; position: relative;">
<img class="img-fluid rounded" src="/assets/img/creative-tim/ct-summer-bundle.jpg" alt="">
<div class="bg-info text-white rounded-circle text-uppercase font-weight-bold d-none d-md-flex" style="height: 8rem; width: 8rem; font-size: .7rem; position: absolute; top: -1.5rem; right: -1.5rem; transform: rotate(20deg); border: .5rem solid white;">
<div class="m-auto d-block">
Offer Ends
<br>
<div style="font-size: 1.1rem;">June 25!</div>
</div>
</div>
</a>
</div>
</div>
@@ -15,7 +15,7 @@ author-url: http://davidmiller.io
author-twitter: davidmillerskt
author-github: davidtmiller
---
<img src="/assets/img/articles/slack-bg.jpg" class="img-fluid">
<img src="/assets/img/articles/slack-bg.jpg" class="img-fluid rounded">
Have some questions? Need help customizing the theme you just downloaded? Want to collaborate with some fellow developers? Start Bootstrap's new public workspace on Slack is the perfect spot to discuss your projects!
<!--more-->
@@ -45,6 +45,7 @@ p.lead {
}
.container {
position: relative;
min-height: 136px;
}
}
@media(min-width:768px) {
@@ -56,7 +57,7 @@ p.lead {
font-size: 1.5rem;
h1 {
font-size: 4rem;
font-size: 2rem;
line-height: 1;
}
}
@@ -67,6 +68,9 @@ p.lead {
p {
margin-right: 380px;
}
h1 {
font-size: 3.5rem;
}
}
}
@@ -119,6 +123,33 @@ section.page {
}
}
// Card for Snippets
.card-snippet {
border: 1px solid darken($white, 7%);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
text-decoration: none !important;
color: $gray-900;
.card-img-top {
@include transition;
}
&:hover {
color: $gray-900;
.card-img-top {
opacity: 0.7;
}
}
}
.card-snippet-overview {
border: 1px solid darken($white, 7%);
box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
border-radius: 0.25rem;
overflow: hidden;
iframe {
margin-bottom: -7px;
}
}
// Disqus Comments
.disqus-comments {
margin-bottom: 30px;
@@ -0,0 +1,17 @@
---
title: "Bootstrap Registration Page with Floating Labels"
slug: registration-page
src: /snippets/registration-page
description: "A responsive Bootstrap 4 registration page with floating form labels and social sign up buttons"
bump: "Registration Page with Floating Form Labels and Splash Image"
img-src: /assets/img/snippets/registration-page.jpg
img-desc: "Bootstrap 4 Login Screen with CSS Only Floating Form Labels and Social Logins"
layout: snippet-overview
dependencies:
- Bootstrap 4.1.1
- Font Awesome 5.0.13
jsfiddle-id: "1nu8g6e5"
meta-title: "Bootstrap 4 Login Page Snippet"
meta-description: "A CSS only responsive Bootstrap 4 pricing table snippet with hover effects, custom buttons, and Font Awesome icons."
---
Oops, something went wrong.

0 comments on commit 0131b31

Please sign in to comment.