HTML  CSS  JS  Result
Edit on
.main-container { padding: 10px 15px; }
.one {width:2000px; background-size:cover; }
.carousel-caption{top:15px; right:40px;}
.skyblue { background-color: #22c8ff; }
.deepskyblue { background-color: #00bfff; }
.darkerskyblue { background-color: #00a6dd; }
.carousel-indicators { bottom: 0; }
.carousel-control.right,
.carousel-control.left { background-image: none; }
.slider .carousel .item { min-height: 360px; height: 100%; width:100%; }
.carousel-caption h3,
.carousel .icon-container,
.carousel-caption button { background-color: #09c; }
.carousel-caption h3 { padding: .5em; }
.carousel .icon-container { display: inline-block; font-size: 25px; line-height: 25px; padding: 1em; text-align: center; border-radius: 50%; }
.carousel-caption button { border-color: #00bfff; margin-top: 1em; }

/* Animation delays */
.carousel-caption h3:first-child { animation-delay: 1s; }
.carousel-caption h3:nth-child(2) { animation-delay: 2s; }
.carousel-caption button { animation-delay: 3s; }

h1 { text-align: center; margin-bottom: 30px; font-size: 30px; font-weight: bold; }

.p { padding-top: 125px; text-align: center; }

.p a { text-decoration: underline; }