<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Yimni - Landing</title>
<link rel="stylesheet" href="https://headervideo.github.io/hvheadervideo/css/fontawesome.min.css">
<link href="https://headervideo.github.io/hvheadervideo/css/bootstrap.min.css" rel="stylesheet">
<link href="https://headervideo.github.io/hvheadervideo/css/mdb.min.css" rel="stylesheet">
<link href="https://headervideo.github.io/hvheadervideo/css/style.css" rel="stylesheet">
</head>
<body>
<!--Main Navigation-->
<header>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="3">Home <span class="sr-only">(current)</span></a>
</ul>
<ul class="navbar-nav ml-auto nav-flex-icons">
</ul>
</div>
</nav>
</header>
<div class="view hm-white-light jarallax" data-jarallax='{"speed": 0.2}' data-jarallax-video="https://www.youtube.com/watch?v=4Q0ijG0ylr4">
<div class="full-bg-img">
<div class="container flex-center">
<div class="row">
<div class="col-md-12 wow fadeIn">
<div class="text-center text-danger">
<h1 class="display-2 mb-2 wow fadeInDown" data-wow-delay="0.3s">Yimni</h1>
<h5 class="font-up mb-3 mt-1 font-bold wow fadeInDown" data-wow-delay="0.4s">Kyle Buchanan <br><b>Interactive Design</b></h5>
<a class="btn btn-danger btn-lg wow fadeInDown" data-wow-delay="0.4s"><i class="fa fa-diamond"></i> Portfolio</a>
<a class="btn btn-primary btn-lg wow fadeInDown" data-wow-delay="0.4s"><i class="fa fa-shield"></i> Contact Info</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="featured" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#featured" data-slide-to="0" class="active"></li>
<li data-target="#featured" data-slide-to="1"></li>
<li data-target="#featured" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/background.png" alt="First slide">
<div class="carousel-caption d-none d-block d-flex align-items-center" style="height: 100%">
<div>
<img class="img-fluid laptop" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/lcd.png" alt="laptop"/>
</div>
<div>
<h3 class="product-caption-title">get the best version</h3>
<p class="product-caption-details">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam alias porro vitae quos repudiandae repellat iure explicabo, omnis modi excepturi odio eos natus, quae quia.</p>
<button class="product-caption-button">get it now</button>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/background.png" alt="First slide">
<div class="carousel-caption d-none d-block d-flex align-items-center" style="height: 100%">
<div>
<img class="img-fluid laptop" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/lcd.png" alt="laptop"/>
</div>
<div>
<h3 class="product-caption-title">get the best version</h3>
<p class="product-caption-details">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam alias porro vitae quos repudiandae repellat iure explicabo, omnis modi excepturi odio eos natus, quae quia.</p>
<button class="product-caption-button">get it now</button>
</div>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/background.png" alt="First slide">
<div class="carousel-caption d-none d-block d-flex align-items-center" style="height: 100%">
<div>
<img class="img-fluid laptop" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/185649/lcd.png" alt="laptop"/>
</div>
<div>
<h3 class="product-caption-title">get the best version</h3>
<p class="product-caption-details">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam alias porro vitae quos repudiandae repellat iure explicabo, omnis modi excepturi odio eos natus, quae quia.</p>
<button class="product-caption-button">get it now</button>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#featured" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#featured" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-4">
<p>
Responsive Youtube Video Example
</p>
</div><!--.col -->
<div class="col-md-8">
<div class="vid">
<iframe width="560" height="315" src="//www.youtube.com/embed/ac7KhViaVqc" allowfullscreen=""></iframe>
</div><!--./vid -->
</div><!--.col -->
</div><!--./row -->
</div><!--./container -->
<footer class="bg-dark text-white">
<div class="text-center py-2 lead">Copyright © 2018 - Kyle Buchanan<p> Confederation College <a href="No Link yet" target="_blank"></a></p></div>
</footer>
<script type="text/javascript" src="https://headervideo.github.io/hvheadervideo/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://headervideo.github.io/hvheadervideo/js/popper.min.js"></script>
<script src="https://headervideo.github.io/hvheadervideo/js/bootstrap.min.js"></script>
<script src="https://headervideo.github.io/hvheadervideo/js/mdb.min.js"></script>
<script src="https://headervideo.github.io/hvheadervideo/js/jarallax.js"></script>
<script src="https://headervideo.github.io/hvheadervideo/js/jarallax-video.js"></script>
<script>
$('.carousel').carousel({
interval: 3000
})
</script>
<script>
new WOW().init();
</script>
</body>
</html>
.container {
margin-top: 20px;
}
/* Carousel Styles */
.carousel-indicators .active {
background-color: #2980b9;
}
.carousel-inner img {
width: 100%;
max-height: 460px
}
.carousel-control {
width: 0;
}
.carousel-control.left,
.carousel-control.right {
opacity: 1;
filter: alpha(opacity=100);
background-image: none;
background-repeat: no-repeat;
text-shadow: none;
}
.carousel-control.left span {
padding: 15px;
}
.carousel-control.right span {
padding: 15px;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-prev,
.carousel-control .icon-next {
position: absolute;
top: 45%;
z-index: 5;
display: inline-block;
}
.carousel-control .glyphicon-chevron-left,
.carousel-control .icon-prev {
left: 0;
}
.carousel-control .glyphicon-chevron-right,
.carousel-control .icon-next {
right: 0;
}
.carousel-control.left span,
.carousel-control.right span {
background-color: #000;
}
.carousel-control.left span:hover,
.carousel-control.right span:hover {
opacity: .7;
filter: alpha(opacity=70);
}
/* Carousel Header Styles */
.header-text {
position: absolute;
top: 20%;
left: 1.8%;
right: auto;
width: 96.66666666666666%;
color: #fff;
}
.header-text h2 {
font-size: 40px;
}
.header-text h2 span {
background-color: #2980b9;
padding: 10px;
}
.header-text h3 span {
background-color: #000;
padding: 15px;
}
.btn-min-block {
min-width: 170px;
line-height: 26px;
}
.btn-theme {
color: #fff;
background-color: transparent;
border: 2px solid #fff;
margin-right: 15px;
}
.btn-theme:hover {
color: #000;
background-color: #fff;
border-color: #fff;
}html {
font-size: 62.5%;
}
.carousel-item > img {
/* fixes bootstrap 4 bug: bit.ly/bootstrap4-carousel */
width: 100%;
height: 100%;
}
.product-caption-title,
.product-caption-button {
text-transform: uppercase;
}
.product-caption-button {
color: white;
border: 1px solid white;
padding: 5px 15px;
cursor: pointer;
background-color: rgba(0,0,0,0.3);
}
h3 {
margin-top: 12px;
font-size: 1.2rem;
}
/**
* Media Queries, including bootstrap4 breakpoints (<576px, >=576px, >=768px, >=992px, >=1200px)
**/
@media screen and (min-width: 320px) {
body::before {
content: "320px";
font-family: Arial, sans-serif;
color: green;
position: fixed;
top: 0;
left: 0;
font-weight: 700;
margin: 5px;
font-size: 1rem;
z-index: 9999;
}
}
@media screen and (min-width: 480px) {
body::before {
content: "";
color: goldenrod;
}
}
@media screen and (min-width: 576px) {
body::before {
content: "";
color: maroon;
}
}
@media screen and (min-width: 768px) {
body::before {
content: "";
color: orange;
}
}
@media screen and (min-width: 992px) {
body::before {
content: "";
color: black;
}
}
@media screen and (min-width: 1200px) {
body::before {
content: "";
color: red;
}
}
@media screen and (min-width: 1400px) {
body::before {
content: "";
color: blue;
}
}
@media screen and (min-width: 1600px) {
body::before {
content: "";
color: green;
}
}
@media screen and (min-width: 1800px) {
body::before {
content: "";
color: peru;
}
}
h1 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
font-size: 92px;
padding: 80px 50px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
color: #e0dfdc;
letter-spacing: .1em;
text-shadow: 0 -1px 0 #fff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212, 0 22px 30px rgba(0, 0, 0, 0.9);
}
.vid {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.vid iframe,
.vid object,
.vid embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
