<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css" integrity="sha256-IPtNBA1od/cGBfXTxYDxuT5+Y2BKy14o6j0FaIXDmYk=" crossorigin="anonymous" />
<nav class="navbar navbar-fixed-top navbar-dark bg-primary">
<a class="navbar-brand" href="#">
<img height="32" width="32" src="https://soldierupdesigns.com/favicon/favicon-32x32.png" class="d-inline-block align-top" alt="Responsive image">
<span class="pull-right"> Soldier-up Designs</span>
</a>
<!-- Links -->
<ul class="nav navbar-nav">
<!-- Brand -->
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
<ul class="nav navbar-nav pull-sm-right">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>
<div class="masthead"><!-- for Responsive Viewport (Insert Carousel or other item for "cover" effect) -->
<!-- Carousel container -->
<div id="suds-carousel" class="carousel fade-carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#suds-carousel" data-slide-to="0" class="active"></li>
<li data-target="#suds-carousel" data-slide-to="1"></li>
<li data-target="#suds-carousel" data-slide-to="2"></li>
</ol>
<!-- Content -->
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="carousel-item active">
<div class="carousel-caption">
<hgroup>
<h1>Web Design/ Development</h1>
<h3>Isn't it so much fun to code and play?'</h3>
<a type="button" class="btn btn-primary btn-lg" role="button" href="#attributes">Learn more</a>
</hgroup>
</div>
<div class="slide-1"></div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<div class="carousel-caption">
<hgroup>
<h1>Love Coding?</h1>
<h3>Click button to know more</h3>
<a type="button" class="btn btn-hero btn-lg" role="button" href="#">Know more</a>
</hgroup>
</div>
<div class="slide-2"></div>
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<div class="carousel-caption">
<hgroup>
<h1>Bootstrap 4 is Awesome</h1>
<h3>Love Bootstrap for its Methodologies, and styling </h3>
<a type="button" class="btn btn-danger btn-lg" role="button" href="#">Learn more</a>
</hgroup>
</div>
<div class="slide-3"></div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row-fluid col-md-6 pull-left">
<h3 class="display-5 text-xs-center">Fullscreen Fade Bootstrap V4Alpha Carousel (HTML)</h3>
<pre class="pre-scrollable">
<code class="lang-html">
<!-- Bootstrap 4 Carousel with Fade Captions
Code snippet by Jonathan Adcox (Follow me on Twitter @soldierupdesign) for Bootsnipp.com
Image credits: unsplash.com -->
/* Bs Fade carousel */
<div class="masthead"><!-- for Responsive Viewport (Insert Carousel or other item for "cover" effect) -->
<!-- Carousel container -->
<div id="suds-carousel" class="carousel fade-carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#suds-carousel" data-slide-to="0" class="active"></li>
<li data-target="#suds-carousel" data-slide-to="1"></li>
<li data-target="#suds-carousel" data-slide-to="2"></li>
</ol>
<!-- Content -->
<div class="carousel-inner" role="listbox">
<!-- Slide 1 -->
<div class="carousel-item active">
<div class="carousel-caption">
<hgroup>
<h1>Web Design/ Development</h1>
<h3>Isn't it so much fun to code and play?'</h3>
<a type="button" class="btn btn-primary btn-lg" role="button" href="#attributes">Learn more</a>
</hgroup>
</div>
<div class="slide-1"></div>
</div>
<!-- Slide 2 -->
<div class="carousel-item">
<div class="carousel-caption">
<hgroup>
<h1>Love Coding?</h1>
<h3>Click button to know more</h3>
<a type="button" class="btn btn-hero btn-lg" role="button" href="#">Know more</a>
</hgroup>
</div>
<div class="slide-2"></div>
</div>
<!-- Slide 3 -->
<div class="carousel-item">
<div class="carousel-caption">
<hgroup>
<h1>Bootstrap 4 is Awesome</h1>
<h3>Love Bootstrap for its Methodologies, and styling </h3>
<a type="button" class="btn btn-danger btn-lg" role="button" href="#">Learn more</a>
</hgroup>
</div>
<div class="slide-3">
</div>
</div>
</div>
</div>
</div>
</code>
</pre>
</div>
<div class="row-fluid col-md-6 pull-right">
<h3 class="display-5 text-xs-center">Fullscreen Fade Bootstrap V4Alpha Carousel (CSS)</h3>
<pre class="pre-scrollable">
<code class="lang-css">
/*
Bootstrap 4 Carousel with Fade Captions
Code snippet by Jonathan Adcox (Follow me on Twitter @soldierupdesign) for Bootsnipp.com
Image credits: unsplash.com
*/
/* Bs Fade carousel */
.fade-carousel{
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .carousel-item{
height: 100vh;
}
.fade-carousel .carousel-indicators > li{
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active{
width: 10px;
height: 10px;
opacity: 1;
}
/* Carousel Captions */
.fade-carousel .carousel-inner .carousel-caption{
top: 50%;
left: 50%;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.fade-carousel .carousel-inner .carousel-caption h1{
font-size:200%;
font-weight: 800;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .carousel-caption{
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .active .carousel-caption {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/* Custom Buttons */
.btn.btn-lg {
padding: 10px 40px;
outline: none;
margin: 20px auto;
}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus{
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/* Slides backgrounds */
.fade-carousel .carousel-inner .slide-1,
.fade-carousel .carousel-inner .slide-2,
.fade-carousel .carousel-inner .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .carousel-inner .slide-1 {
background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818);
}
.fade-carousel .carousel-inner .slide-2 {
background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af);
}
.fade-carousel .carousel-inner .slide-3 {
background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327);
}
</code>
</pre>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js" integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js" integrity="sha256-SHXnnZAbgSEf+OBhDLR7I2mx9vNZAIzPeCGhxRV+VQw=" crossorigin="anonymous"></script>
@charset "utf-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css");
/* Global Styles */
*, *: before, *:after{
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0 } /* IE indents via margin-left */
.linenums li {
list-style-type: decimal;
}
/* Alternate shading for lines */
li.L1,
li.L3,
li.L5,
li.L7,
li.L9{
background: #eee;
}
body{
width: 100%;
height: 100%;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
overflow-x: hidden;
}
html{
width: 100%;
height: 100%;
}
a:hover{
text-decoration:none;
}
.container-fluid{
padding-top: 150px;
padding-bottom: 150px;
}
/* Masthead (Header) */
.masthead{
display: table;
position: relative;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
background: transparent url("https://soldierupdesigns.com/img/bg.jpg") no-repeat fixed 0px 0px / cover;
z-index: 800;
background-color:#000;
margin-left:auto;
margin-right:auto;
}
/*
Bootstrap 4 Carousel with Fade Captions
Code snippet by Jonathan Adcox (Follow me on Twitter @soldierupdesign) for Bootsnipp.com
Image credits: unsplash.com
*/
/* Bs Fade carousel */
.fade-carousel{
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .carousel-item{
height: 100vh;
}
.fade-carousel .carousel-indicators > li{
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active{
width: 10px;
height: 10px;
opacity: 1;
}
/* Carousel Captions */
.fade-carousel .carousel-inner .carousel-caption{
top: 50%;
left: 50%;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.fade-carousel .carousel-inner .carousel-caption h1{
font-size:200%;
font-weight: 800;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .carousel-caption{
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .active .carousel-caption {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/* Custom Buttons */
.btn.btn-lg {
padding: 10px 40px;
outline: none;
margin: 20px auto;
}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus{
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/* Slides backgrounds */
.fade-carousel .carousel-inner .slide-1,
.fade-carousel .carousel-inner .slide-2,
.fade-carousel .carousel-inner .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .carousel-inner .slide-1 {
background-image: url(https://ununsplash.imgix.net/photo-1416339134316-0e91dc9ded92?q=75&fm=jpg&s=883a422e10fc4149893984019f63c818);
}
.fade-carousel .carousel-inner .slide-2 {
background-image: url(https://ununsplash.imgix.net/photo-1416339684178-3a239570f315?q=75&fm=jpg&s=c39d9a3bf66d6566b9608a9f1f3765af);
}
.fade-carousel .carousel-inner .slide-3 {
background-image: url(https://ununsplash.imgix.net/photo-1416339276121-ba1dfa199912?q=75&fm=jpg&s=9bf9f2ef5be5cb5eee5255e7765cb327);
}
window.onload = (function(){ prettyPrint(); });
$(document).ready(function()
{
var prettyprint = false;
$("pre code").parent().each(function()
{
$(this).addClass('prettyprint linenums');
prettyprint = true;
});
if ( prettyprint )
{
$.getScript("https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js", function() { prettyPrint() });
}
});
