<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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="fonts/stylesheet.css">
<div id="main-carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://picsum.photos/1600/501" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>It is a long established </h5>
<h2> fact that a reader distracted</h2>
<a href="#0" class="btn btn-info">MORE INFO</a>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/1600/502" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>It is a long established </h5>
<h2> fact that a reader distracted</h2>
<a href="#0" class="btn btn-info">MORE INFO</a>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#main-carousel" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#main-carousel" role="button" data-slide="next">