<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<style>
html {
box-sizing: border-box;
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
*, ::after, ::before {
box-sizing: inherit;
}
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
}
body {
overflow-x: hidden;
}
body, html {
color: #000000;
font-family: "Roboto", sans-serif;
height: 100%;
letter-spacing: 0.02rem;
}
.pace {
-webkit-pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.pace-inactive {
display: none;
}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
display: block;
}
.navbar {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
padding: .5rem 1rem;
}
/* @media all and (min-width:992px) */
.navbar-expand-lg {
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-ms-flex-pack: start;
justify-content: flex-start;
}
.bg-dark {
background-color: #343a40 !important;
}
.fixed-top {
position: fixed;
top: 0px;
right: 0px;
left: 0px;
z-index: 1030;
}
/* @media all and (max-width:1199px) and (min-width:991px) */
.logo-large {
display: none;
}
/* @media all and (max-width:1199px) and (min-width:991px) */
.logo-small {
display: block;
}
.navbar, .navbar-header, .navbar-brand img {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.navbar {
background-color: #000000 !important;
opacity: 0.98;
padding-bottom: 0px;
padding-top: 0px;
}
/* @media all and (min-width:992px) */
.navbar {
background-color: rgba(0, 0, 0, 0.15) !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
section {
padding: 80px 0px;
}
.bg-white {
background-color: #fff !important;
}
.rounded {
border-radius: .25rem !important;
}
.d-table {
display: table !important;
}
.w-100 {
width: 100% !important;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.justify-content-center {
-ms-flex-pack: center !important;
justify-content: center !important;
}
.justify-content-end {
-ms-flex-pack: end !important;
justify-content: flex-end !important;
}
.align-items-center {
-ms-flex-align: center !important;
align-items: center !important;
}
/* @media all and (min-width:768px) */
.container {
max-width: 720px;
}
/* @media all and (min-width:992px) */
.container {
max-width: 960px;
}
.h-100 {
height: 100% !important;
}
p {
margin-top: 0px;
margin-bottom: 1rem;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
}
/* @media all and (min-width:768px) */
.col-md-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.border-white {
border-color: #fff !important;
}
.d-block {
display: block !important;
}
.mt-4 {
margin-top: 1.5rem !important;
}
.p-0 {
padding: 0 !important;
}
.overflow-hidden {
overflow: hidden !important;
}
button, select {
text-transform: none;
}
.navbar-toggler {
border-color: rgba(255, 255, 255, 0.3) !important;
margin-right: 1rem;
}
[type=reset], [type=submit], button, html [type=button] {
-webkit-appearance: button;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.25;
border-radius: .25rem;
transition: all .15s ease-in-out;
}
.d-inline-block {
display: inline-block !important;
}
.mt-2 {
margin-top: 0.5rem !important;
}
h1, h2, h3, h4, h5, h6 {
margin-top: 0px;
margin-bottom: 0.5rem;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-bottom: 0.5rem;
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
.h3, h3 {
font-size: 1.75rem;
}
.h2, h2 {
font-size: 2rem;
}
.m-0 {
margin: 0 !important;
}
.mt-1 {
margin-top: 0.25rem !important;
}
a {
color: #007bff;
text-decoration: none;
background-color: transparent;
-webkit-text-decoration-skip: objects;
}
[role=button], a, area, button, input, label, select, summary, textarea {
-ms-touch-action: manipulation;
touch-action: manipulation;
}
a, a:active, a:hover, a:focus {
text-decoration: none;
}
.py-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.px-4 {
padding-right: 1.5rem !important;
padding-left: 1.5rem !important;
}
.mb-3 {
margin-bottom: 1rem !important;
}
.mt-3 {
margin-top: 1rem !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.py-4 {
padding-top: 1.5rem !important;
padding-bottom: 1.5rem !important;
}
.col {
-ms-flex-preferred-size: 0px;
flex-basis: 0px;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.pt-2 {
padding-top: 0.5rem !important;
}
.text-center {
text-align: center !important;
}
.text-white {
color: #fff !important;
}
.mb-0 {
margin-bottom: 0px !important;
}
.bg-green {
background-color: #0baf4e !important;
}
.font-alt {
font-family: "Montserrat", sans-serif !important;
}
.font-w-600 {
font-weight: 600 !important;
}
.title-underline-base-color, .title-underline-black, .title-underline-black-light, .title-underline-gray, .title-underline-gray-light, .title-underline-gray-dark, .title-underline-white, .title-underline-blue, .title-underline-green, .title-underline-green-2, .title-underline-orange, .title-underline-orange-2, .title-underline-pink, .title-underline-purple, .title-underline-red, .title-underline-thick-base-color, .title-underline-thick-black, .title-underline-thick-black-light, .title-underline-thick-gray, .title-underline-thick-gray-light, .title-underline-thick-gray-dark, .title-underline-thick-white, .title-underline-thick-blue, .title-underline-thick-green, .title-underline-thick-green-2, .title-underline-thick-orange, .title-underline-thick-orange-2, .title-underline-thick-pink, .title-underline-thick-purple, .title-underline-thick-red, .title-sideline-base-color, .title-sideline-black, .title-sideline-black-light, .title-sideline-gray, .title-sideline-gray-light, .title-sideline-gray-dark, .title-sideline-white, .title-sideline-blue, .title-sideline-green, .title-sideline-green-2, .title-sideline-orange, .title-sideline-orange-2, .title-sideline-pink, .title-sideline-purple, .title-sideline-red {
display: inline-block;
}
.title-sideline-base-color, .title-sideline-black, .title-sideline-black-light, .title-sideline-gray, .title-sideline-gray-light, .title-sideline-gray-dark, .title-sideline-white, .title-sideline-blue, .title-sideline-green, .title-sideline-green-2, .title-sideline-orange, .title-sideline-orange-2, .title-sideline-pink, .title-sideline-purple, .title-sideline-red {
position: relative;
}
.title-sideline-base-color, .title-sideline-black, .title-sideline-black-light, .title-sideline-gray, .title-sideline-gray-light, .title-sideline-gray-dark, .title-sideline-white, .title-sideline-blue, .title-sideline-green, .title-sideline-green-2, .title-sideline-orange, .title-sideline-orange-2, .title-sideline-pink, .title-sideline-purple, .title-sideline-red {
padding: 0;
}
.letter-spacing-1 {
letter-spacing: 0.06rem !important;
}
.title-underline-thick-base-color, .title-underline-thick-black, .title-underline-thick-black-light, .title-underline-thick-gray, .title-underline-thick-gray-light, .title-underline-thick-gray-dark, .title-underline-thick-white, .title-underline-thick-blue, .title-underline-thick-green, .title-underline-thick-green-2, .title-underline-thick-orange, .title-underline-thick-orange-2, .title-underline-thick-pink, .title-underline-thick-purple, .title-underline-thick-red {
border-bottom: 5px solid transparent;
padding-bottom: 4px;
}
.font-w-700 {
font-weight: 700 !important;
}
.letter-spacing-2 {
letter-spacing: 0.12rem !important;
}
.bg-black {
background-color: #000000 !important;
}
.position-absolute {
position: absolute !important;
}
.right-0 {
right: 0px !important;
}
.bottom-0 {
bottom: 0px !important;
}
.opacity-9-5 {
opacity: 0.95 !important;
}
.text-white {
color: #ffffff !important;
}
.sep-line, .sep-line-long, .sep-line-full, .sep-line-thin, .sep-line-thin-long, .sep-line-thin-full, .sep-line-thick, .sep-line-thick-long, .sep-line-thick-full, .sep-line-medium-thick, .sep-line-medium-thick-long, .sep-line-medium-thick-full, .sep-line-extra-thick, .sep-line-extra-thick-long, .sep-line-extra-thick-full {
display: block;
}
.sep-line-thick, .sep-line-thick-long, .sep-line-thick-full {
height: 4px;
}
.sep-line-medium-thick, .sep-line-medium-thick-long, .sep-line-medium-thick-full {
height: 6px;
}
.sep-line, .sep-line-thin, .sep-line-thick, .sep-line-medium-thick, .sep-line-extra-thick {
width: 30px;
}
.sep-line-long, .sep-line-thin-long, .sep-line-thick-long, .sep-line-medium-thick-long, .sep-line-extra-thick-long {
width: 80px;
}
.bg-base-color {
background-color: #DF292D !important;
}
/* @media all and (min-width:576px) */
.col-sm-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
/* @media all and (min-width:992px) */
.col-lg-3 {
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
/* @media all and (min-width:768px) */
.col-md-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.33%;
}
.px-0 {
padding-right: 0px !important;
padding-left: 0px !important;
}
/* @media all and (min-width:768px) */
.col-md-8 {
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.66%;
}
.col-10 {
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.33%;
}
.container {
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
/* @media all and (min-width:576px) */
.container {
max-width: 540px;
}
.py-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
.bg-gray {
background-color: #fafafa !important;
}
.p-5 {
padding: 3rem !important;
}
/* @media all and (min-width:768px) */
.col-md-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
/* @media all and (min-width:992px) */
.col-lg-4 {
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.33%;
}
.mt-5 {
margin-top: 3rem !important;
}
/* @media all and (min-width:768px) */
.mt-md-0 {
margin-top: 0px !important;
}
/* @media all and (min-width:992px) */
.col-lg-6 {
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.input-group {
position: relative;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.mx-auto {
margin-right: auto !important;
margin-left: auto !important;
}
.p-3 {
padding: 1rem !important;
}
.bg-cover {
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
position: relative;
}
.bg-parallax {
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
height: 150%;
overflow: hidden;
position: relative;
width: 100%;
top: -75%;
}
.bg-overlay-black-1, .bg-overlay-black-2, .bg-overlay-black-3, .bg-overlay-black-4, .bg-overlay-black-5, .bg-overlay-black-6, .bg-overlay-black-7, .bg-overlay-black-8, .bg-overlay-black-9, .bg-overlay-gray-1, .bg-overlay-gray-2, .bg-overlay-gray-3, .bg-overlay-gray-4, .bg-overlay-gray-5, .bg-overlay-gray-6, .bg-overlay-gray-7, .bg-overlay-gray-8, .bg-overlay-gray-9 {
position: relative;
}
.bg-overlay-black-1::before, .bg-overlay-black-2::before, .bg-overlay-black-3::before, .bg-overlay-black-4::before, .bg-overlay-black-5::before, .bg-overlay-black-6::before, .bg-overlay-black-7::before, .bg-overlay-black-8::before, .bg-overlay-black-9::before, .bg-overlay-gray-1::before, .bg-overlay-gray-2::before, .bg-overlay-gray-3::before, .bg-overlay-gray-4::before, .bg-overlay-gray-5::before, .bg-overlay-gray-6::before, .bg-overlay-gray-7::before, .bg-overlay-gray-8::before, .bg-overlay-gray-9::before {
content: "";
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
.bg-overlay-black-5::before {
background: rgba(0, 0, 0, 0.5) !important;
}
#support {
background-image: url("../images/bg-support.jpg");
}
.pb-0 {
padding-bottom: 0px !important;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.bg-gray-light {
background-color: #fcfcfc !important;
}
#milestones {
background-image: url("../images/bg-milestones.jpg");
}
.bg-overlay-black-3::before {
background: rgba(0, 0, 0, 0.3) !important;
}
img {
vertical-align: middle;
border-style: none;
}
.img-fluid {
max-width: 100%;
height: auto;
}
.border {
border: 1px solid #e9ecef !important;
}
.border-top-0 {
border-top: 0 !important;
}
.rounded-bottom {
border-bottom-right-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important;
}
.bg-white {
background-color: #ffffff !important;
}
.scroll-to-top {
background-color: #000000;
border-radius: 2px;
display: none;
position: fixed;
right: 35px;
top: 94%;
text-align: center;
z-index: 999;
}
.fa-angle-up::before {
content: "\f106";
}
.scroll-to-top i {
color: #ffffff;
font-size: 18px;
margin: 0 6px;
}
.no-gutters {
margin-right: 0px;
margin-left: 0px;
}
.pb-5 {
padding-bottom: 3rem !important;
}
.px-3 {
padding-right: 1rem !important;
padding-left: 1rem !important;
}
.pt-5 {
padding-top: 3rem !important;
}
.border-top {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.text-gray-dark {
color: #666666 !important;
}
.text-small {
font-size: 0.75rem !important;
line-height: 1.12rem !important;
}
/* @media all and (min-width:768px) */
.text-md-left {
text-align: left !important;
}
dl, ol, ul {
margin-top: 0px;
margin-bottom: 1rem;
}
/* @media all and (min-width:768px) */
.text-md-right {
text-align: right !important;
}
.title-medium {
font-size: 1.5rem !important;
line-height: 2.25rem !important;
}
.footer-icon-social {
bottom: 10px;
position: relative;
}
.list-inline-item {
display: inline-block;
}
.pl-4 {
padding-left: 1.5rem !important;
}
:not(:last-child).list-inline-item {
margin-right: 5px;
}
.text-base-color {
color: #df292d !important;
}
.fa-github::before {
content: "\f09b";
}
.fa-linkedin::before {
content: "\f0e1";
}
.fa-instagram::before {
content: "\f16d";
}
.fa-twitter::before {
content: "\f099";
}
.fa-facebook-f::before, .fa-facebook::before {
content: "\f09a";
}
.opacity-5 {
opacity: 0.5 !important;
}
.footer-logo {
max-height: 40px;
}
.container-fluid {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
width: 100%;
}
.d-none {
display: none !important;
}
/* @media all and (min-width:576px) */
.d-sm-block {
display: block !important;
}
.no-gutters > .col, .no-gutters > [class*=col-] {
padding-right: 0px;
padding-left: 0px;
}
.border-right {
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.border-medium-thick {
border-width: 3px !important;
}
.rounded-circle {
border-radius: 50%;
}
.box-shadow-wide {
box-shadow: 0px 23px 40px rgba(0,0,0,0.2);
}
.box-shadow {
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.05);
}
.border-bottom-0 {
border-bottom: 0 !important;
}
.rounded-top {
border-top-left-radius: 0.25rem !important;
border-top-right-radius: 0.25rem !important;
}
.border {
border: 1px solid rgba(0, 0, 0, 0.1);
}
.bg-gray-dark {
background-color: #666666 !important;
}
.position-relative {
position: relative !important;
}
.contact-card {
opacity: 0.98;
min-height: 140px;
}
.border-extra-thick {
border-width: 4px !important;
}
.border-base-color {
border-color: #DF292D !important;
}
.rounded-left {
border-top-left-radius: 0.25rem !important;
border-bottom-left-radius: 0.25rem !important;
}
.contact-card img {
left: 0px;
max-height: 100%;
position: absolute;
top: 0px;
z-index: 15;
}
.contact-card-block {
left: 0px;
padding: 0 30px 0 175px;
position: absolute;
top: 0px;
z-index: 20;
}
.align-middle {
vertical-align: middle !important;
}
.d-table-cell {
display: table-cell !important;
}
.text-extra-large {
font-size: 1.12rem !important;
line-height: 1.68rem !important;
}
.text-underline {
text-decoration: underline !important;
}
.title-extra-large {
font-size: 2.25rem !important;
line-height: 2.5rem !important;
}
.sep-line-extra-thick, .sep-line-extra-thick-long, .sep-line-extra-thick-full {
height: 8px;
}
.title-small {
font-size: 1.25rem !important;
line-height: 1.87rem !important;
}
.border-white {
border-color: #ffffff !important;
}
.title-extra-large-2 {
font-size: 2.75rem !important;
line-height: 2.75rem !important;
}
.text-large {
font-size: 1rem !important;
line-height: 1.5rem !important;
}
.text-medium {
font-size: 0.87rem !important;
line-height: 1.31rem !important;
}
.title-sideline-base-color::before, .title-sideline-black::before, .title-sideline-black-light::before, .title-sideline-gray::before, .title-sideline-gray-light::before, .title-sideline-gray-dark::before, .title-sideline-white::before, .title-sideline-blue::before, .title-sideline-green::before, .title-sideline-green-2::before, .title-sideline-orange::before, .title-sideline-orange-2::before, .title-sideline-pink::before, .title-sideline-purple::before, .title-sideline-red::before {
content: "";
margin-top: -2px;
position: absolute;
left: -20px;
top: 50%;
width: 12px;
height: 4px;
}
.title-sideline-base-color::before {
background-color: #DF292D;
}
.pb-4 {
padding-bottom: 1.5rem !important;
}
/* @media all and (min-width:992px) */
.pb-lg-5 {
padding-bottom: 3rem !important;
}
/* @media all and (min-width:992px) */
.mt-lg-0 {
margin-top: 0px !important;
}
#youtube a {
color: #333;
}
.title-underline-thick-base-color {
border-color: #DF292D;
}
.opacity-2-5 {
opacity: 0.25 !important;
}
.top-0 {
top: 0px !important;
}
.left-0 {
left: 0px !important;
}
.triangle-top-right, .triangle-top-left, .triangle-bottom-right, .triangle-bottom-left {
border-style: solid;
height: 0px;
width: 0px;
}
.triangle-top-left {
border-width: 35px 35px 0 0;
}
.triangle-gray-dark.triangle-top-left {
border-color: #666666 transparent transparent transparent;
}
.btn-dark {
color: #fff;
background-color: #343a40;
border-color: #343a40;
}
.btn-block {
display: block;
width: 100%;
}
.btn, .btn:hover, .btn:focus {
color: #ffffff;
}
.btn-shadow, .btn-shadow:focus {
box-shadow: 0px 2px 1px rgba(0,0,0,0.1), 0px 1px 3px rgba(0,0,0,0.3) !important;
}
.btn {
border: none !important;
cursor: pointer;
font-size: 0.87rem;
font-family: "Montserrat", sans-serif;
font-weight: 600;
letter-spacing: 0.09rem;
margin-right: 1rem;
outline: 0;
padding: 0.75rem 1.375rem;
text-transform: uppercase;
}
.border-bottom {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.title-large {
font-size: 1.75rem !important;
line-height: 2.27rem !important;
}
hr {
box-sizing: content-box;
height: 0px;
overflow: visible;
}
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, .1);
}
.w-50 {
width: 50% !important;
}
.display-4 {
font-size: 3.5rem;
font-weight: 300;
line-height: 1.1;
}
.d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.justify-content-between {
-ms-flex-pack: justify !important;
justify-content: space-between !important;
}
#social .fa {
font-size: 3em;
width: 1.6em;
text-align: center;
line-height: 1.6em;
color: #fff;
border-radius: 0.8em;
}
/* @media all and (min-width:992px) */
.pt-lg-0 {
padding-top: 0px !important;
}
/* @media all and (min-width:992px) */
.pl-lg-5 {
padding-left: 3rem !important;
}
.btn-base-color {
background-color: #DF292D !important;
}
.fa-youtube::before {
content: "\f167";
}
.btn i {
margin-right: 0.18rem;
}
.pb-2 {
padding-bottom: 0.5rem !important;
}
.py-1 {
padding-top: 0.25rem !important;
padding-bottom: 0.25rem !important;
}
button, input, optgroup, select, textarea {
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button, input {
overflow: visible;
}
.form-control {
display: block;
width: 100%;
padding: .5rem .75rem;
font-size: 1rem;
line-height: 1.25;
color: #495057;
background-color: #fff;
background-image: none;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: .25rem;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
:-ms-input-placeholder {
color: #20222b !important;
font-size: 0.87rem !important;
letter-spacing: 0.02rem !important;
opacity: 1 !important;
text-overflow: ellipsis !important;
}
:-ms-input-placeholder.form-control {
color: #868e96;
opacity: 1;
}
.input-group .form-control {
position: relative;
z-index: 2;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 1%;
margin-bottom: 0px;
}
.input-group .form-control, .input-group-addon, .input-group-btn {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
input[type='email'].form-control, input[type='text'].form-control, textarea.form-control, select.form-control {
font-size: 0.87rem !important;
letter-spacing: 0.02rem !important;
padding: 0.75rem 0.875rem;
}
.input-group :not(:last-child).form-control, :not(:last-child).input-group-addon, :not(:first-child).input-group-btn > :not(:last-child).btn-group > .btn, :not(:first-child).input-group-btn > :not(:last-child):not(.dropdown-toggle).btn, :not(:last-child).input-group-btn > .btn, :not(:last-child).input-group-btn > .btn-group > .btn, :not(:last-child).input-group-btn > .dropdown-toggle {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
.input-group-addon, .input-group-btn {
white-space: nowrap;
vertical-align: middle;
}
.input-group-btn {
position: relative;
font-size: 0px;
white-space: nowrap;
}
.input-group-btn > .btn {
position: relative;
}
.input-group :not(:first-child).form-control, :not(:first-child).input-group-addon, :not(:first-child).input-group-btn > .btn, :not(:first-child).input-group-btn > .btn-group > .btn, :not(:first-child).input-group-btn > .dropdown-toggle, :not(:last-child).input-group-btn > :not(:first-child).btn-group > .btn, :not(:last-child).input-group-btn > :not(:first-child).btn {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
:not(:first-child).input-group-btn > .btn, :not(:first-child).input-group-btn > .btn-group {
z-index: 2;
margin-left: -1px;
}
.bg-overlay-black-8::before {
background: rgba(0, 0, 0, 0.8) !important;
}
#home-bg-parallax > .bg-parallax {
background: url("../images/bg-parallax2.jpg");
}
/* @media all and (min-width:992px) */
.col-lg-9 {
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.title-extra-large-4 {
font-size: 4.37rem !important;
line-height: 4.37rem !important;
}
.navbar > .container, .navbar > .container-fluid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: justify;
justify-content: space-between;
}
/* @media all and (min-width:992px) */
.navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-header {
align-items: center;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: justify;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
height: 80px;
justify-content: space-between;
line-height: 80px;
}
.collapse {
display: none;
}
.navbar-collapse {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
-ms-flex-align: center;
align-items: center;
}
.flex-row-reverse {
-ms-flex-direction: row-reverse !important;
flex-direction: row-reverse !important;
}
/* @media all and (min-width:992px) */
.navbar-expand-lg .navbar-collapse {
display: -ms-flexbox !important;
display: flex !important;
}
.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
padding-left: 0px;
margin-bottom: 0px;
list-style: none;
}
/* @media all and (min-width:992px) */
.navbar-expand-lg .navbar-nav {
-ms-flex-direction: row;
flex-direction: row;
}
.navbar .nav-item {
padding: 8px 0;
}
/* @media all and (min-width:992px) */
.navbar .nav-item {
padding: 0 15px;
}
/* @media all and (min-width:992px) */
.navbar :last-child.nav-item {
padding-right: 0px;
}
.nav-link {
display: block;
padding: .5rem 1rem;
}
.navbar-nav .nav-link {
padding-right: 0px;
padding-left: 0px;
}
.navbar .nav-link {
color: #ffffff !important;
display: inline-block;
font-family: "Montserrat", sans-serif;
font-size: 0.68rem;
letter-spacing: 1px;
padding: 0 !important;
position: relative;
text-transform: uppercase;
}
/* @media all and (min-width:992px) */
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-dark .navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
}
.navbar .active.nav-link::before {
background-color: #ffffff !important;
bottom: 0px;
content: "";
display: block;
height: 1px;
left: 0px;
margin-bottom: -2px;
position: absolute;
width: 100%;
}
.navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .active.nav-link, .navbar-dark .navbar-nav .show.nav-link, .navbar-dark .navbar-nav .show > .nav-link {
color: #fff;
}
.navbar-brand {
display: inline-block;
padding-top: 0.31rem;
padding-bottom: 0.31rem;
margin-right: 1rem;
font-size: 1.25rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-brand {
padding-bottom: 0px;
padding-top: 0px;
}
.navbar-dark .navbar-brand {
color: #fff;
}
.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background: 0 0;
border: 1px solid transparent;
border-radius: .25rem;
}
/* @media all and (min-width:992px) */
.navbar-expand-lg .navbar-toggler {
display: none;
}
.navbar-dark .navbar-toggler {
color: rgba(255, 255, 255, 0.5);
border-color: rgba(255, 255, 255, .1);
}
.navbar-toggler-icon {
display: inline-block;
width: 1.5em;
height: 1.5em;
vertical-align: middle;
content: "";
background: no-repeat center center;
background-size: 100% 100%;
}
.navbar-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
.navbar-brand img {
height: 46px;
left: auto;
position: absolute;
top: 17px;
}
.logo-small {
display: none;
}
.pace .pace-progress {
height: 3px;
position: fixed;
right: 100%;
top: 0px;
width: 100%;
z-index: 2000;
}
.pace .pace-progress {
background-color: #DF292D;
}
</style>
</head>
<body class=" pace-done" id="page-top"><div class="pace pace-inactive"><div class="pace-progress" style="transform: translate3d(100%, 0px, 0px);" data-progress-text="100%" data-progress="99">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div></div>
<!-- Navigation Start -->
<nav class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top" id="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand page-scroll" href="#page-top">
<img class="logo-text-white logo-large" alt="" src="assets/images/logo.png">
<img class="logo-small" alt="" src="assets/images/logo_small.png" logo-text-white"="" "="">
</a>
<button class="navbar-toggler collapsed" aria-expanded="false" aria-controls="navbar-kania" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target="#navbar-kania">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<!-- //.navbar-header -->
<div class="navbar-collapse flex-row-reverse collapse" id="navbar-kania">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link page-scroll active" href="#page-top">Home</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#courses">Udemy</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#youtube">YouTube</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#eduonix">Eduonix</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#support">Patreon</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" href="#work">
<div id="___ytsubscribe_0" style="left: -10000px; width: 450px; position: absolute;"><iframe name="I0_1515933551673" width="100%" tabindex="0" id="I0_1515933551673" src="https://www.youtube.com/subscribe_embed?usegapi=1&count=default&layout=default&channel=techguyweb&origin=http%3A%2F%2Ftraversymedia.com&gsrc=3p&ic=1&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_US.oDs8HZEv41Y.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCMKmOFsLt6gC9SaO3LTS1N0lTOVsg#_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe%2C_renderstart%2Concircled%2Cdrefresh%2Cerefresh%2Conload&id=I0_1515933551673&_gfid=I0_1515933551673&parent=http%3A%2F%2Ftraversymedia.com&pfname=&rpctoken=74752593" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" vspace="0" hspace="0" style="margin: 0px; top: -10000px; width: 450px; position: absolute;" ng-non-bindable="" data-gapiattached="true"></iframe></div><div class="g-ytsubscribe" data-count="default" data-layout="default" data-channel="techguyweb" data-gapiscan="true" data-onload="true" data-gapistub="true"></div>
</a>
</li>
</ul>
</div>
<!-- //.navbar-collapse -->
</div>
<!-- //.container -->
</nav>
<!-- //Navigation End -->
<!-- Section - Home Start -->
<section class="h-100 overflow-hidden p-0 w-100" id="home-bg-parallax">
<!-- BG Parallax -->
<div class="bg-parallax bg-overlay-black-8" style="transform: translate(0%, 40%) translate3d(0px, 0px, 0px);"></div>
<div class="h-100 left-0 position-absolute top-0 w-100">
<div class="container h-100">
<div class="row align-items-center h-100">
<div class="col-lg-9 col-xl-9">
<span class="font-alt font-w-600 opacity-9-5 letter-spacing-2 text-large text-uppercase text-white">Welcome To Traversy Media</span>
<h2 class="font-alt font-w-700 letter-spacing-2 m-0 mt-3 text-uppercase text-white title-xs-extra-large title-sm-extra-large-3 title-extra-large-4">
Web Development Tutorials & Courses
</h2>
<span class="bg-base-color d-block mt-4 sep-line-extra-thick-long"></span>
</div>
<!-- //.col-lg-9 -->
</div>
<!-- //.row -->
</div>
<!-- //.container -->
</div>
<!-- //.h-100 -->
</section>
<!-- //Section - Home End -->
<!-- Courses Start -->
<div class="bg-base-color w-100" id="courses">
<div class="container-fluid">
<div class="row px-3 pt-5 pb-2">
<div class="col pt-2 text-center">
<!--<span class="d-block font-alt font-w-600 letter-spacing-2 opacity-7-5 text-medium text-uppercase">Hi, we are Kania Interactive Studio</span>
-->
<span class="d-block font-alt font-w-600 text-white letter-spacing-2 mt-2 text-uppercase xs-text-extra-large title-medium mb-3">Get Notified Of New Courses</span>
<div class="row">
<div class="col-md-6 mx-auto">
<!-- Begin MailChimp Signup Form -->
<div id="mc_embed_signup">
<form name="mc-embedded-subscribe-form" class="validate" id="mc-embedded-subscribe-form" action="//traversymedia.us14.list-manage.com/subscribe/post?u=cc6a54455cb05e7ad10687037&id=9fe19ba7a2" method="post" target="_blank" novalidate="">
<div id="mc_embed_signup_scroll">
<div class="input-group mx-auto">
<input name="EMAIL" class="email form-control" id="mce-EMAIL" aria-label="Enter Email" type="email" placeholder="Enter Email">
<span class="input-group-btn">
<input name="subscribe" class="btn bg-black" id="mc-embedded-subscribe" type="submit" value="Go!">
</span>
</div>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_cc6a54455cb05e7ad10687037_9fe19ba7a2" tabindex="-1" type="text" value="">
</div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
</div>
</div>
<!-- //.col -->
</div>
<!-- //.row -->
<div class="row pb-5 pt-2">
<div class="col text-center">
<em class="d-block font-alt font-w-600 letter-spacing-2 opacity-9-5 text-small text-uppercase text-white">Your email address will never be shared</em>
</div>
<!-- //.col -->
</div>
<!-- //.row -->
<div class="row bg-black text-white text-center p-3">
<div class="col">
<h3>Latest Udemy Courses</h3>
</div>
</div>
<!-- COURSE ROW 1 -->
<div class="row">
<div class="col-md-4 px-0">
<div class="bg-overlay-black-0 position-relative w-100">
<img class="img-fluid" alt="Angular Front To Back" src="assets/images/course-angular.jpg">
<div class="h-100 left-0 position-absolute top-0 w-100">
<a class="page-scroll bg-green bottom-0 font-alt letter-spacing-2 position-absolute px-4 py-3 right-0 text-small text-uppercase text-white" href="https://www.udemy.com/angular-4-front-to-back/?couponCode=TMWEBSITEANGULAR" target="_blank">
Enroll
</a>
</div>
<!-- //.h-100 -->
</div>
<!-- //.bg-overlay-black-2 -->
<div class="bg-black position-relative text-center py-4">
<span class="font-alt font-w-600 letter-spacing-1 text-medium text-uppercase title-sideline-base-color text-white">Angular 4 Front To Back</span>
</div>
<!-- //.bg-white -->
</div>
<!-- //.col-md-4 -->
<div class="col-md-4 px-0">
<div class="bg-overlay-black-0 position-relative w-100">
<img class="img-fluid" alt="Bootstrap 4 From Scratch" src="assets/images/course-bootstrap.jpg">
<div class="h-100 left-0 position-absolute top-0 w-100">
<a class="page-scroll bg-green bottom-0 font-alt letter-spacing-2 position-absolute px-4 py-3 right-0 text-small text-uppercase text-white" href="https://www.udemy.com/bootstrap-4-from-scratch-with-5-projects/?couponCode=TMWEBSITEBOOTSTRAP" target="_blank">
Enroll
</a>
</div>
<!-- //.h-100 -->
</div>
<!-- //.bg-overlay-black-2 -->
<div class="bg-gray-dark position-relative text-center py-4">
<span class="font-alt font-w-600 letter-spacing-1 text-medium text-uppercase title-sideline-base-color text-white">Bootstrap 4 From Scratch</span>
</div>
<!-- //.bg-gray -->
</div>
<!-- //.col-md-4 -->
<div class="col-md-4 px-0">
<div class="bg-overlay-black-0 position-relative w-100">
<img class="img-fluid" alt="Node.js Dev To Deployment" src="assets/images/course-node.jpg">
<div class="h-100 left-0 position-absolute top-0 w-100">
<a class="page-scroll bg-green bottom-0 font-alt letter-spacing-2 position-absolute px-4 py-3 right-0 text-small text-uppercase text-white" href="https://www.udemy.com/nodejs-express-mongodb-dev-to-deployment/?couponCode=TMWEBSITENODE">
Enroll
</a>
</div>
<!-- //.h-100 -->
</div>
<!-- //.bg-overlay-black-2 -->
<div class="bg-black position-relative text-center py-4">
<span class="font-alt font-w-600 letter-spacing-1 text-medium text-uppercase title-sideline-base-color text-white">Node.js Dev To Deployment</span>
</div>
<!-- //.bg-white -->
</div>
<!-- //.col-md-4 -->
</div>
<!-- //.row -->
<div class="row">
<div class="py-1"></div>
</div>
<!-- COURSE ROW 2 -->
<div class="row">
<div class="col-md-4 px-0">
<div class="bg-overlay-black-0 position-relative w-100">
<img class="img-fluid" alt="Object Oriented PHP & MVC" src="assets/images/course-php.jpg">
<div class="h-100 left-0 position-absolute top-0 w-100">
<a class="page-scroll bg-green bottom-0 font-alt letter-spacing-2 position-absolute px-4 py-3 right-0 text-small text-uppercase text-white" href="https://www.udemy.com/object-oriented-php-mvc/?couponCode=TMWEBSITEPHP" target="_blank">
Enroll
</a>
</div>
<!-- //.h-100 -->
</div>
<!-- //.bg-overlay-black-2 -->
<div class="bg-gray-dark position-relative text-center py-4">
<span class="font-alt font-w-600 letter-spacing-1 text-medium text-uppercase title-sideline-base-color text-white">Object Oriented PHP & MVC</span>
</div>
<!-- //.bg-white -->
</div>
<!-- //.col-md-4 -->
<div class="col-md-4 px-0">
<div class="bg-overlay-black-0 position-relative w-100">
<img class="img-fluid" alt="Modern JavaScript From Scratch" src="assets/images/course-js.jpg">
<div class="h-100 left-0 position-absolute top-0 w-100">
<a class="page-scroll bg-green bottom-0 font-alt letter-spacing-2 position-absolute px-4 py-3 right-0 text-small text-uppercase text-white" href="https://www.udemy.com/draft/1463348/?couponCode=TMWEBSITEJS" target="_blank">
Enroll
</a>
</div>
<!-- //.h-100 -->
</div>
<!-- //.bg-overlay-black-2 -->
<div class="bg-black position-relative text-center py-4">
<span class="font-alt font-w-600 letter-spacing-1 text-medium text-uppercase title-sideline-base-color text-white">Modern JavaScript From The Beginning</span>
</div>
<!-- //.bg-gray -->
</div>
<!-- //.col-md-4 -->
<div class="col-md-4 px-0">
<div class="bg-overlay-black-0 position-relative w-100">
<img class="img-fluid" alt="" src="assets/images/course-react.jpg">
<div class="h-100 left-0 position-absolute top-0 w-100">
<a class="page-scroll bg-green bottom-0 font-alt letter-spacing-2 position-absolute px-4 py-3 right-0 text-small text-uppercase text-white" href="#">
Coming Soon
</a>
</div>
<!-- //.h-100 -->
</div>
<!-- //.bg-overlay-black-2 -->
<div class="bg-gray-dark position-relative text-center py-4">
<span class="font-alt font-w-600 letter-spacing-1 text-medium text-uppercase title-sideline-base-color text-white">React Front To Back</span>
</div>
<!-- //.bg-white -->
</div>
<!-- //.col-md-4 -->
</div>
<!-- //.row -->
</div>
<!-- //.container-fluid -->
</div>
<!-- //Intro End -->
<!-- Section - About Start -->
<section class="bg-gray" id="about">
<div class="container">
<div class="row justify-content-center pb-4 pb-lg-5">
<div class="col-lg-6 text-center">
<h3 class="font-alt font-w-600 letter-spacing-2 m-0 mt-1 text-uppercase title-xs-small title-medium title-underline-thick-base-color">About Brad Traversy</h3>
<p class="mt-4 text-xs-large text-extra-large">Brad is the creator of Traversy Media and the instructor in all tutorials and courses</p>
</div>
<!-- //.col-lg-6 -->
</div>
<!-- //.row -->
<div class="row">
<div class="col-lg-6">
<img class="img-fluid box-shadow-wide rounded-circle" alt="" src="assets/images/about.jpg">
<a class="d-block page-scroll btn btn-base-color btn-shadow mt-3 text-center mx-auto" href="http://www.youtube.com/traversymedia" target="_blank">
<i class="fa fa-youtube"></i> Watch Traversy Media</a>
</div>
<!-- //.col-lg-6 -->
<div class="col-lg-6">
<div class="pl-lg-5 pt-5 pt-lg-0">
<p class="font-alt text-extra-large">Brad started off building client websites for a company he created called Tech Guy Web Solutions and later on
discovered his real passion was teaching web development & programming in a simple and understandable way.
Brad now runs one of the top web dev & programming YouTube channels</p>
<p class="mt-2 text-extra-large">Brad is also very family oriented and has a 10 year old daughter named Brianna and a 7 year old son named Nicky
who is severely autistic and non-verbal. Work and family is the cornerstone of Brad's life
</p>
</div>
<!-- //.pl-lg-5 -->
</div>
<!-- //.col-lg-6 -->
</div>
<!-- //.row -->
</div>
<!-- //.container -->
</section>
<!-- //Section - About End -->
<section class="bg-base-color text-center p-5 text-white" id="social">
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto">
<h3 class="display-4 mb-3">Follow Me</h3>
<div class="d-flex justify-content-between">
<div>
<a href="http://www.facebook.com/traversymedia" target="_blank">
<i class="fa fa-facebook text-base-color bg-gray-light"></i>
</a>
</div>
<div>
<a href="http://www.twitter.com/traversymedia" target="_blank">
<i class="fa fa-twitter text-base-color bg-gray-light"></i>
</a>
</div>
<div>
<a href="http://www.instagram.com/traversymedia" target="_blank">
<i class="fa fa-instagram text-base-color bg-gray-light"></i>
</a>
</div>
<div>
<a href="http://www.linkedin.com/in/bradtraversy" target="_blank">
<i class="fa fa-linkedin text-base-color bg-gray-light"></i>
</a>
</div>
<div>
<a href="http://www.github.com/bradtraversy" target="_blank">
<i class="fa fa-github text-base-color bg-gray-light"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Section - Support Start -->
<section class="bg-cover bg-gray bg-overlay-black-5" id="support">
<div class="container">
<div class="row align-items-center justify-content-end">
<div class="col-lg-6">
<div class="bg-white border-bottom border-base-color border-extra-thick opacity-9-5 rounded p-5">
<h3 class="font-alt font-w-600 letter-spacing-2 text-uppercase title-xs-small title-large">Become a Patron</h3>
<span class="bg-base-color d-block mt-3 sep-line-medium-thick"></span>
<p class="mb-0 mt-3 text-large">Brad spends half of his work day making free videos on YouTube to share with the world. Join his Patreon for
to show your support and gratitude. Get perks like discounted and free courses. Even $1 per month means the
world
</p>
<hr>
<a href="https://www.patreon.com/traversymedia" target="_blank">
<img class="img-fluid w-50" alt="" src="assets/images/patron-btn.png">
</a>
</div>
<!-- //.bg-white -->
</div>
<div class="col-lg-6">
<div class="bg-white border-bottom border-base-color border-extra-thick opacity-9-5 rounded p-5">
<!-- <img src="assets/images/discord_logo.png" alt="" class="img-fluid w-50">-->
<h3 class="font-alt font-w-600 letter-spacing-2 text-uppercase title-xs-small title-large">Join The Community</h3>
<span class="bg-base-color d-block mt-3 sep-line-medium-thick"></span>
<p class="mb-0 mt-3 text-large">We have a free discord chat server for developers of all levels to chat, get help, share ideas and video suggestions.
We even have a channel to showcase your projects. Come join us!</p>
<hr>
<a href="http://discord.gg/traversymedia" target="_blank">
<img class="img-fluid w-50" alt="" src="assets/images/discord_btn.png">
</a>
</div>
<!-- //.bg-white -->
</div>
<!-- //.col-lg-6 -->
</div>
<!-- //.row -->
</div>
<!-- //.container -->
</section>
<!-- //Section - Support End -->
<!-- Section - Eduonix Start -->
<section class="bg-gray-light pb-0" id="eduonix">
<div class="container">
<div class="row justify-content-center pb-4 pb-lg-5">
<div class="col-lg-6 text-center">
<h3 class="font-alt font-w-600 letter-spacing-2 m-0 mt-1 text-uppercase title-xs-small title-medium title-underline-thick-base-color">Eduonix Courses</h3>
<p class="mt-4 text-xs-large text-extra-large">Brad also creates full courses for a company called Eduonix. Here are some of the latest ones</p>
<!--<p class="text-muted">Click Here for a full list</a>-->
</div>
<!-- //.col-lg-6 -->
</div>
<!-- //.row -->
</div>
<!-- //.container -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-lg-3 px-0">
<div class="position-relative">
<img class="img-fluid" alt="" src="assets/images/services-1.jpg">
<div class="bg-white position-relative p-5" style="height: 313.64px;" data-mh="mh-our-services">
<!-- Triangle -->
<span class="triangle-top-left triangle-gray-dark left-0 opacity-2-5 position-absolute top-0"></span>
<span class="d-block font-alt mt-3 title-medium">Full Stack Web</span>
<span class="bg-base-color mt-2 sep-line-thick"></span>
<p class="mt-3 text-large">
<a class="btn btn-block btn-dark" href="https://www.eduonix.com/affiliates/id/16-10445" target="_blank">Get From Eduonix</a>
</p>
</div>
<!-- //.bg-white -->
</div>
<!-- //.position-relative -->
</div>
<!-- //.col-sm-6 -->
<div class="col-sm-6 col-lg-3 px-0">
<div class="position-relative">
<img class="img-fluid" alt="" src="assets/images/services-2.jpg">
<div class="bg-gray-light position-relative p-5" style="height: 313.64px;" data-mh="mh-our-services">
<!-- Triangle -->
<span class="triangle-top-left triangle-gray-dark left-0 opacity-2-5 position-absolute top-0"></span>
<span class="d-block font-alt mt-3 title-medium">Laravel Projects</span>
<span class="bg-base-color mt-2 sep-line-thick"></span>
<p class="mt-3 text-large">
<a class="btn btn-block btn-dark" href="https://www.eduonix.com/affiliates/id/16-10485" target="_blank">Get From Eduonix</a>
</p>
</div>
<!-- //.bg-gray-light -->
</div>
<!-- //.position-relative -->
</div>
<!-- //.col-sm-6 -->
<div class="col-sm-6 col-lg-3 px-0">
<div class="position-relative">
<img class="img-fluid" alt="" src="assets/images/services-3.jpg">
<div class="bg-white position-relative p-5" style="height: 313.64px;" data-mh="mh-our-services">
<!-- Triangle -->
<span class="triangle-top-left triangle-gray-dark left-0 opacity-2-5 position-absolute top-0"></span>
<span class="d-block font-alt mt-3 title-medium">React Projects</span>
<span class="bg-base-color mt-2 sep-line-thick"></span>
<p class="mt-3 text-large">
<a class="btn btn-block btn-dark" href="https://www.eduonix.com/affiliates/id/16-10444" target="_blank">Get From Eduonix</a>
</p>
</div>
<!-- //.bg-white -->
</div>
<!-- //.position-relative -->
</div>
<!-- //.col-sm-6 -->
<div class="col-sm-6 col-lg-3 px-0">
<div class="position-relative">
<img class="img-fluid" alt="" src="assets/images/services-4.jpg">
<div class="bg-gray-light position-relative p-5" style="height: 313.64px;" data-mh="mh-our-services">
<!-- Triangle -->
<span class="triangle-top-left triangle-gray-dark left-0 opacity-2-5 position-absolute top-0"></span>
<span class="d-block font-alt mt-3 title-medium">Learn Vue.js</span>
<span class="bg-base-color mt-2 sep-line-thick"></span>
<p class="mt-3 text-large">
<a class="btn btn-block btn-dark" href="https://www.eduonix.com/affiliates/id/16-10450" target="_blank">Get From Eduonix</a>
</p>
</div>
<!-- //.bg-gray-light -->
</div>
<!-- //.position-relative -->
</div>
<!-- //.col-sm-6 -->
</div>
<!-- //.row -->
</div>
<!-- //.container-fluid -->
</section>
<!-- //Section - Services End -->
<!-- Section - Youtube Start -->
<section class="bg-base-color text-white" id="youtube">
<div class="container">
<div class="row justify-content-center pb-4 pb-lg-5">
<div class="col-lg-6 text-center">
<h3 class="font-alt font-w-600 letter-spacing-2 m-0 mt-1 text-uppercase title-xs-small title-medium title-underline-thick-base-color">Top YouTube Videos</h3>
<p class="mt-4 text-xs-large text-extra-large">Here are a few of Brads most popular YouTube videos, series and crash courses</p>
</div>
<!-- //.col-lg-6 -->
</div>
<!-- //.row -->
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="box-shadow position-relative text-center">
<div class="position-relative">
<a href="https://www.youtube.com/watch?v=KhzGSHNhnbI&t=2112s" target="_blank">
<img class="img-fluid border border-bottom-0 position-relative rounded-top" alt="" src="assets/images/team-1.jpg">
</a>
</div>
<!-- //.position-relative -->
<div class="bg-white border border-top-0 position-relative py-4 rounded-bottom">
<span class="d-block text-gray-dark text-large">
<a href="https://www.youtube.com/watch?v=KhzGSHNhnbI&t=2112s" target="_blank">Angular 4 In 60 Minutes</a>
</span>
</div>
<!-- //.bg-white -->
</div>
<!-- //.box-shadow -->
</div>
<!-- //.col-md-6 -->
<div class="col-md-6 col-lg-4 mt-5 mt-md-0">
<div class="box-shadow position-relative text-center">
<div class="position-relative">
<a href="https://www.youtube.com/watch?v=Wm6CUkswsNw" target="_blank">
<img class="img-fluid border border-bottom-0 position-relative rounded-top" alt="" src="assets/images/team-2.jpg">
</a>
</div>
<!-- //.position-relative -->
<div class="bg-white border border-top-0 position-relative py-4 rounded-bottom">
<span class="d-block text-gray-dark text-large">
<a href="https://www.youtube.com/watch?v=Wm6CUkswsNw" target="_blank">Build a Responsive HTML5 Site</a>
</span>
</div>
<!-- //.bg-white -->
</div>
<!-- //.box-shadow -->
</div>
<!-- //.col-md-6 -->
<div class="col-md-6 col-lg-4 mt-5 mt-lg-0">
<div class="box-shadow position-relative text-center">
<div class="position-relative">
<a href="https://www.youtube.com/watch?v=U8XF6AFGqlc&t=640s" target="_blank">
<img class="img-fluid border border-bottom-0 position-relative rounded-top" alt="" src="assets/images/team-3.jpg">
</a>
</div>
<!-- //.position-relative -->
<div class="bg-white border border-top-0 position-relative py-4 rounded-bottom">
<span class="d-block text-gray-dark text-large">
<a href="https://www.youtube.com/watch?v=U8XF6AFGqlc&t=640s" target="_blank">Node.js For Beginners</a>
</span>
</div>
<!-- //.bg-white -->
</div>
<!-- //.box-shadow -->
</div>
<!-- //.col-md-6 -->
<div class="col-md-6 col-lg-4 mt-5">
<div class="box-shadow position-relative text-center">
<div class="position-relative">
<a href="https://www.youtube.com/watch?v=z6hQqgvGI4Y" target="_blank">
<img class="img-fluid border border-bottom-0 position-relative rounded-top" alt="" src="assets/images/team-4.jpg">
</a>
</div>
<!-- //.position-relative -->
<div class="bg-white border border-top-0 position-relative py-4 rounded-bottom">
<span class="d-block text-gray-dark text-large">
<a href="https://www.youtube.com/watch?v=z6hQqgvGI4Y" target="_blank">Vue.js In 60 Minutes</a>
</span>
</div>
<!-- //.bg-white -->
</div>
<!-- //.box-shadow -->
</div>
<!-- //.col-md-6 -->
<div class="col-md-6 col-lg-4 mt-5">
<div class="box-shadow position-relative text-center">
<div class="position-relative">
<a href="https://www.youtube.com/watch?v=5GcQtLDGXy8&t=3185s" target="_blank">
<img class="img-fluid border border-bottom-0 position-relative rounded-top" alt="" src="assets/images/team-5.jpg">
</a>
</div>
<!-- //.position-relative -->
<div class="bg-white border border-top-0 position-relative py-4 rounded-bottom">
<span class="d-block text-gray-dark text-large">
<a href="https://www.youtube.com/watch?v=5GcQtLDGXy8&t=3185s" target="_blank">Bootstrap Crash Course</a>
</span>
</div>
<!-- //.bg-white -->
</div>
<!-- //.box-shadow -->
</div>
<!-- //.col-md-6 -->
<div class="col-md-6 col-lg-4 mt-5">
<div class="box-shadow position-relative text-center">
<div class="position-relative">
<a href="https://www.youtube.com/watch?v=SWYqp7iY_Tc" target="_blank">
<img class="img-fluid border border-bottom-0 position-relative rounded-top" alt="" src="assets/images/team-6.jpg">
</a>
</div>
<!-- //.position-relative -->
<div class="bg-white border border-top-0 position-relative py-4 rounded-bottom">
<span class="d-block text-gray-dark text-large">
<a href="https://www.youtube.com/watch?v=SWYqp7iY_Tc" target="_blank">Git Crash Course</a>
</span>
</div>
<!-- //.bg-white -->
</div>
<!-- //.box-shadow -->
</div>
<!-- //.col-md-6 -->
</div>
<!-- //.row -->
</div>
<!-- //.container -->
</section>
<!-- //Section - Team End -->
<!-- Milestones Start -->
<div class="bg-cover bg-gray bg-overlay-black-5 py-5" id="milestones">
<div class="container py-5">
<div class="row align-items-center justify-content-center py-4">
<div class="col-md-3 border-right border-sm-0 border-white text-center">
<span class="timer d-block font-alt font-w-600 letter-spacing-1 text-white title-md-large title-extra-large-2" data-speed="1500" data-to="505" data-from="0">505</span>
<span class="d-inline-block font-alt letter-spacing-2 mt-2 text-large text-uppercase text-white title-sideline-base-color">YouTube Videos</span>
</div>
<!-- //.col-md-3 -->
<div class="col-md-3 border-right border-sm-0 border-white mt-4 mt-md-0 text-center">
<span class="timer d-block font-alt font-w-600 letter-spacing-1 text-white title-md-large title-extra-large-2" data-speed="1500" data-to="245000" data-from="0">245000</span>
<span class="d-inline-block font-alt letter-spacing-2 mt-2 text-large text-uppercase text-white title-sideline-base-color">Subscribers</span>
</div>
<!-- //.col-md-3 -->
<div class="col-md-3 border-right border-sm-0 border-white mt-4 mt-md-0 text-center">
<span class="timer d-block font-alt font-w-600 letter-spacing-1 text-white title-md-large title-extra-large-2" data-speed="1500" data-to="700" data-from="0">700</span>
<span class="d-inline-block font-alt letter-spacing-2 mt-2 text-large text-uppercase text-white title-sideline-base-color">Daily Subs</span>
</div>
<!-- //.col-md-3 -->
<div class="col-md-3 mt-4 mt-md-0 text-center">
<span class="timer d-block font-alt font-w-600 letter-spacing-1 text-white title-md-large title-extra-large-2" data-speed="1000" data-to="20000000" data-from="0">20000000</span>
<span class="d-inline-block font-alt letter-spacing-2 mt-2 text-large text-uppercase text-white title-sideline-base-color">Video Views</span>
</div>
<!-- //.col-md-3 -->
</div>
<!-- //.row -->
</div>
<!-- //.container -->
</div>
<!-- Milestones Start -->
<!-- Section - Contact Start -->
<section class="bg-cover bg-gray bg-overlay-black-3 p-0" id="contact">
<div class="container-fluid">
<div class="row">
<div class="col-xl-6 bg-gray-light order-xl-6 px-0 py-5" data-mh="mh-contact">
<div class="row justify-content-center no-gutters">
<div class="col-10 col-xl-8 py-5">
<h3 class="font-alt title-extra-large">Sponsors</h3>
<span class="bg-base-color mt-4 sep-line-extra-thick"></span>
<p class="mt-4 title-small">If you are interested in sponsoring Traversy Media videos, please email us for pricing and terms</p>
</div>
<!-- //.col-10 -->
</div>
<!-- //.row -->
</div>
<!-- //.col-xl-6 -->
<div class="d-none d-sm-block col-xl-6" data-mh="mh-contact">
<div class="row align-items-center h-100 justify-content-center no-gutters">
<div class="col-10 col-md-8 col-xl-10 py-5">
<div class="contact-card bg-white border-base-color border-medium-thick border-right box-shadow-wide position-relative rounded w-100">
<img class="img-fluid rounded-left" alt="" src="assets/images/contact-1.jpg">
<div class="contact-card-block h-100 rounded w-100">
<div class="d-table h-100 w-100">
<div class="d-table-cell align-middle">
<p class="mb-0 mt-1 text-xs-medium text-sm-large text-extra-large">E-mail:
<span class="text-underline">support@traversymedia.com</span>
</p>
</div>
<!-- //.d-table-cell -->
</div>
<!-- //.d-table -->
</div>
<!-- //.contact-card-block -->
</div>
<!-- //.contact-card -->
</div>
<!-- //.col-10 -->
</div>
<!-- //.row -->
</div>
<!-- //.col-xl-6 -->
</div>
<!-- //.row -->
</div>
<!-- //.container-fluid -->
</section>
<!-- //Section - Contact End -->
<!-- Footer Start -->
<footer class="bg-white py-5">
<div class="container">
<div class="row align-items-center pb-5">
<div class="col-md-4 text-center text-md-left">
<img class="footer-logo opacity-5" alt="" src="assets/images/logo-text-black.png">
</div>
<!-- //.col-md-8 -->
<div class="col-md-8">
<ul class="footer-icon-social mb-0 mt-4 p-0 text-center text-md-right title-xs-small title-medium">
<li class="list-inline-item">
<a class="text-gray-dark" href="http://www.facebook.com/traversymedia">
<i class="fa fa-facebook"></i>
</a>
</li>
<li class="list-inline-item pl-4">
<a class="text-gray-dark" href="http://www.twitter.com/traversymedia">
<i class="fa fa-twitter"></i>
</a>
</li>
<li class="list-inline-item pl-4">
<a class="text-gray-dark" href="http://www.instagram.com/traversymedia">
<i class="fa fa-instagram"></i>
</a>
</li>
<li class="list-inline-item pl-4">
<a class="text-gray-dark" href="http://www.linkedin.com/in/bradtraversy">
<i class="fa fa-linkedin"></i>
</a>
</li>
<li class="list-inline-item pl-4">
<a class="text-gray-dark" href="http://www.github.com/bradtraversy">
<i class="fa fa-github"></i>
</a>
</li>
</ul>
</div>
<!-- //.col-md-8 -->
</div>
<!-- //.row -->
<div class="row align-items-center border-top pt-5">
<div class="col text-center">
<span class="font-alt font-w-600 letter-spacing-1 text-gray-dark text-small text-uppercase">© 2017 Traversy Media. All rights reserved.</span>
</div>
<!-- //.col -->
</div>
<!-- //.row -->
</div>
<!-- //.container -->
</footer>
<!-- //Footer End -->
<!-- Scroll to top -->
<a class="page-scroll scroll-to-top" style="display: none;" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.oDs8HZEv41Y.O/m=auth/exm=ytsubscribe/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCMKmOFsLt6gC9SaO3LTS1N0lTOVsg/cb=gapi.loaded_1" async=""></script><script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en_US.oDs8HZEv41Y.O/m=ytsubscribe/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AGLTcCMKmOFsLt6gC9SaO3LTS1N0lTOVsg/cb=gapi.loaded_0" async=""></script><script src="https://www.google-analytics.com/analytics.js" async=""></script><script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-88432447-1', 'auto');
ga('send', 'pageview');
</script>
<script>
setTimeout(function () {
_gaq.push(['_trackEvent', 'Control', 'Bounce Rate', ''])
}, 30000)
</script>
<!-- Main JS -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- Include all js plugins (below) -->
<script src="assets/js/pace.min.js"></script>
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/jquery.matchHeight.min.js"></script>
<script src="assets/js/jquery.inview.min.js"></script>
<script src="assets/js/jquery.countTo.js"></script>
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/flickity.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
<!-- BG Parallax -->
<script src="assets/js/lib/greensock/TweenMax.min.js"></script>
<script src="assets/js/ScrollMagic.min.js"></script>
<script src="assets/js/animation.gsap.min.js"></script>
<script src="https://apis.google.com/js/platform.js" gapi_processed="true"></script>
<!-- Theme JS -->
<script src="assets/js/theme.js"></script><iframe name="oauth2relay1317548728" tabindex="-1" id="oauth2relay1317548728" aria-hidden="true" src="https://accounts.google.com/o/oauth2/postmessageRelay?parent=http%3A%2F%2Ftraversymedia.com&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en_US.oDs8HZEv41Y.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCMKmOFsLt6gC9SaO3LTS1N0lTOVsg#rpctoken=779153309&forcesecure=1" style="top: -100px; width: 1px; height: 1px; position: absolute;"></iframe>
</body>
</html>
