<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
<div class="container">
<div class="title">
<h4>Carousel</h4>
</div>
<div class="row justify-content-center">
<div class="col-lg-8 col-md-12">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1" class=""></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block" src="https://images.unsplash.com/photo-1524654458049-e36be0721fa2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="First slide">
<div class="carousel-caption d-none d-md-block">
<h5>Nature, United States</h5>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://images.unsplash.com/photo-1451903978882-b165bd94e45d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="Second slide">
<div class="carousel-caption d-none d-md-block">
<h5>Somewhere Beyond, United States</h5>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://images.unsplash.com/photo-1492252719637-c7b68468489b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="Third slide">
<div class="carousel-caption d-none d-md-block">
<h5>Yellowstone National Park, United States</h5>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<i class="now-ui-icons arrows-1_minimal-left"></i>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<i class="now-ui-icons arrows-1_minimal-right"></i>
</a>
</div>
</div>
</div>
</div>
<footer class="footer text-center ">
<p>Made with <a href="https://demos.creative-tim.com/now-ui-kit/index.html" target="_blank">Now UI Kit</a> by Creative Tim</p>
</footer>
button,
input {
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
body{
font-size: 14px;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
@font-face {
font-family: 'Nucleo Outline';
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype");
src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
font-weight: normal;
font-style: normal;
}
h4,
h5 {
font-weight: 400;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
body{
font-size: 14px;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
}
@font-face {
font-family: 'Nucleo Outline';
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot");
src: url("https://github.com/creativetimofficial/now-ui-kit/blob/master/assets/fonts/nucleo-outline.eot") format("embedded-opentype");
src: url("https://raw.githack.com/creativetimofficial/now-ui-kit/master/assets/fonts/nucleo-outline.woff2");
font-weight: normal;
font-style: normal;
}
h4,
h5 {
font-weight: 400;
}
a {
color: #f96332;
}
a:hover,
a:focus {
color: #f96332;
}
h4,
.h4 {
font-size: 1.5em;
line-height: 1.45em;
margin-top: 30px;
margin-bottom: 15px;
}
h5,
.h5 {
font-size: 1.3em;
line-height: 1.4em;
margin-bottom: 15px;
}
.title {
font-weight: 700;
padding-top: 30px;
}
body {
color: #2c2c2c;
font-size: 14px;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
overflow-x: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
[data-toggle="collapse"][data-parent="#accordion"] i {
-webkit-transition: transform 150ms ease 0s;
-moz-transition: transform 150ms ease 0s;
-o-transition: transform 150ms ease 0s;
-ms-transition: all 150ms ease 0s;
transition: transform 150ms ease 0s;
}
[data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.now-ui-icons {
display: inline-block;
font: normal normal normal 14px/1 'Nucleo Outline';
font-size: inherit;
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.now-ui-icons.arrows-1_minimal-left:before {
content: "\ea3a";
}
.now-ui-icons.arrows-1_minimal-right:before {
content: "\ea3b";
}
img {
max-width: 100%;
border-radius: 1px;
}
.carousel-item.active {
display: block;
}
.carousel .carousel-inner {
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
border-radius: 0.1875rem;
}
.login-page .link {
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
}
.section {
padding: 70px 0;
position: relative;
background: #FFFFFF;
}
[data-background-color="orange"] {
background-color: #e95e38;
}
[data-background-color="black"] {
background-color: #2c2c2c;
}
[data-background-color]:not([data-background-color="gray"]) {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .title {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) h4,
[data-background-color]:not([data-background-color="gray"]) h5,
[data-background-color]:not([data-background-color="gray"]) a:not(.btn):not(.dropdown-item) {
color: #FFFFFF;
}
footer{
margin-top:50px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
background: #f7f7f7;
}
.footer p{
margin-bottom: 0;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover{
color: #e86c42;
}
}
a {
color: #f96332;
}
a:hover,
a:focus {
color: #f96332;
}
h4,
.h4 {
font-size: 1.5em;
line-height: 1.45em;
margin-top: 30px;
margin-bottom: 15px;
}
h5,
.h5 {
font-size: 1.3em;
line-height: 1.4em;
margin-bottom: 15px;
}
.title {
font-weight: 700;
padding-top: 30px;
}
body {
color: #2c2c2c;
font-size: 14px;
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
overflow-x: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
[data-toggle="collapse"][data-parent="#accordion"] i {
-webkit-transition: transform 150ms ease 0s;
-moz-transition: transform 150ms ease 0s;
-o-transition: transform 150ms ease 0s;
-ms-transition: all 150ms ease 0s;
transition: transform 150ms ease 0s;
}
[data-toggle="collapse"][data-parent="#accordion"][aria-expanded="true"] i {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.now-ui-icons {
display: inline-block;
font: normal normal normal 14px/1 'Nucleo Outline';
font-size: inherit;
speak: none;
text-transform: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@-webkit-keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes nc-icon-spin {
0% {
-moz-transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
}
}
@keyframes nc-icon-spin {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.now-ui-icons.arrows-1_minimal-left:before {
content: "\ea3a";
}
.now-ui-icons.arrows-1_minimal-right:before {
content: "\ea3b";
}
img {
max-width: 100%;
border-radius: 1px;
}
.carousel-item.active {
display: block;
}
.carousel .carousel-inner {
box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
border-radius: 0.1875rem;
}
.login-page .link {
font-size: 10px;
color: #FFFFFF;
text-decoration: none;
}
.section {
padding: 70px 0;
position: relative;
background: #FFFFFF;
}
[data-background-color="orange"] {
background-color: #e95e38;
}
[data-background-color="black"] {
background-color: #2c2c2c;
}
[data-background-color]:not([data-background-color="gray"]) {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) .title {
color: #FFFFFF;
}
[data-background-color]:not([data-background-color="gray"]) h4,
[data-background-color]:not([data-background-color="gray"]) h5,
[data-background-color]:not([data-background-color="gray"]) a:not(.btn):not(.dropdown-item) {
color: #FFFFFF;
}
footer{
margin-top:50px;
color: #555;
background: #fff;
padding: 25px;
font-weight: 300;
background: #f7f7f7;
}
.footer p{
margin-bottom: 0;
}
footer p a{
color: #555;
font-weight: 400;
}
footer p a:hover{
color: #e86c42;
}
