|
<!doctype html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<!-- Required meta tags --> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|
<!-- Bootstrap CSS --> |
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" |
|
crossorigin="anonymous"> |
|
|
|
<!-- Fontawesome links --> |
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" |
|
crossorigin="anonymous"> |
|
|
|
<title>????Enter your title here, don't forget!!! </title> |
|
|
|
<style> |
|
h3 { |
|
color: green; |
|
} |
|
</style> |
|
</head> |
|
|
|
<body> |
|
|
|
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary"> |
|
<a class="navbar-brand" href="#">Yoda Lives</a> |
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" |
|
aria-expanded="false" aria-label="Toggle navigation"> |
|
<span class="navbar-toggler-icon"></span> |
|
</button> |
|
<div class="collapse navbar-collapse" id="navbarNav"> |
|
<ul class="navbar-nav"> |
|
<li class="nav-item active"> |
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> |
|
</li> |
|
<li class="nav-item"> |
|
<a class="nav-link" href="#">Gallery</a> |
|
</li> |
|
<li class="nav-item"> |
|
<a class="nav-link" href="#">Fan club</a> |
|
</li> |
|
<li class="nav-item"> |
|
<a class="nav-link disabled" href="#">Members only</a> |
|
</li> |
|
</ul> |
|
</div> |
|
</nav> |
|
|
|
<div class="jumbotron text-center"> |
|
<h1>Yoda lives here.</h1> |
|
<p>My first Bootstrap 4.x Yoda Page</p> |
|
<p><small>by Mr. M. - Confederation College</small></p> |
|
<a class="btn btn-primary" href="#" role="button">Yoda's videos »</a> |
|
</div> |
|
|
|
<div class="container"> |
|
<div class="row"> |
|
|
|
<div class="col-md-4"> |
|
<h3>Column 1</h3> |
|
<img class="img-fluid rounded-circle" src="https://assets.entrepreneur.com/content/3x2/2000/20170405204540-empire-yoda.jpeg?width=700&crop=2:1" |
|
alt="yoda"> |
|
<span style="font-size: 3em; color: Tomato;"> |
|
<i class="fas fa-stroopwafel"></i> |
|
</span> |
|
<i class="fas fa-rocket fa-xs"></i> |
|
<i class="fas fa-rocket fa-sm"></i> |
|
<i class="fas fa-rocket fa-lg"></i> |
|
<i class="fas fa-rocket fa-2x"></i> |
|
<p>Lorem ipsum dolor..</p> |
|
<p>Ut enim ad..</p> |
|
</div> |
|
|
|
<div class="col-md-4"> |
|
<h3>Column 2</h3> |
|
<p>Lorem ipsum dolor..</p> |
|
<p>Ut enim ad..</p> |
|
</div> |
|
|
|
<div class="col-md-4"> |
|
<h3>Column 3</h3> |
|
<p>Lorem ipsum dolor..</p> |
|
<p>Ut enim ad..</p> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS --> |
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" |
|
crossorigin="anonymous"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" |
|
crossorigin="anonymous"></script> |
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" |
|
crossorigin="anonymous"></script> |
|
|
|
</body> |
|
</html> |
