Created
November 9, 2018 04:23
-
-
Save benznest/17e5753cff346c5ed5ba8f4689377801 to your computer and use it in GitHub Desktop.
Bootstrap embed and media
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
<title>News</title> | |
<link rel="stylesheet" href="css/bootstrap.min.css" /> | |
</head> | |
<body> | |
<div class="container mt-3"> | |
<div class="row"> | |
<div class="col"> | |
<div class="card"> | |
<img class="card-img-top" src="img/staffs/staff1.jpg"> | |
<div class="card-body"> | |
<h4 class="card-title">Manager</h4> | |
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores excepturi | |
modi voluptate</p> | |
<a href="#" class="btn btn-primary">Read more</a> | |
</div> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="card"> | |
<div class="card-body"> | |
<h4 class="card-title">Designer</h4> | |
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores excepturi | |
modi voluptate</p> | |
<a href="#" class="btn btn-primary">Read more</a> | |
</div> | |
<img class="card-img-bottom" src="img/staffs/staff2.jpg"> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="card"> | |
<img class="card-img-top" src="img/staffs/staff3.jpg"> | |
<div class="card-body"> | |
<h4 class="card-title">Developer</h4> | |
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores excepturi | |
modi voluptate</p> | |
<a href="#" class="btn btn-primary">Read more</a> | |
</div> | |
</div> | |
</div> | |
<div class="col"> | |
<div class="card"> | |
<div class="card-body"> | |
<h4 class="card-title">Tester</h4> | |
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores excepturi | |
modi voluptate</p> | |
<a href="#" class="btn btn-primary">Read more</a> | |
</div> | |
<img class="card-img-bottom" src="img/staffs/staff4.jpg"> | |
</div> | |
</div> | |
</div> | |
<div class="row mt-5"> | |
<div class="col-md-6"> | |
<h3>Video gallery</h3> | |
<div class="embed-responsive embed-responsive-4by3"> | |
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/5nLWk7kzXgI?ecver=1" | |
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" | |
allowfullscreen></iframe> | |
</div> | |
</div> | |
<div class="col-md-6"> | |
<h3>Photo gallery</h3> | |
<ul class="list-unstyled"> | |
<li> | |
<div class="media"> | |
<img class="w-50" src="img/content/office1.jpg"> | |
<div class="media-body pl-3"> | |
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquam nisi | |
officiis aut | |
beatae. Voluptas, aliquid! Nostrum quam architecto </p> | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="media"> | |
<img class="w-50" src="img/content/office3.jpg"> | |
<div class="media-body pl-3"> | |
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquam nisi | |
officiis aut | |
beatae. Voluptas, aliquid! Nostrum quam architecto </p> | |
</div> | |
</div> | |
</li> | |
<li> | |
<div class="media"> | |
<img class="w-50" src="img/content/office2.jpg"> | |
<div class="media-body pl-3"> | |
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque aliquam nisi | |
officiis aut | |
beatae. Voluptas, aliquid! Nostrum quam architecto </p> | |
</div> | |
</div> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment