<!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>Butter Cake v4.0.0</title>
<!-- FONT AWESOME 4.7.0 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- BUTTER CAKE CSS 4.0.0 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@4.0.0/dist/css/butterCake.min.css">
</head>
<body>
<!-- Page Content -->
<div class="container">
<!-- Page Heading -->
<h1 class="my-4 px-1">Page Heading
<small class="h5">Secondary Text</small>
</h1>
<!-- Project One -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-fluid img-rounded mb-3 mb-0-md" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project One</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium veniam exercitationem expedita laborum at
voluptate. Labore, voluptates totam at aut nemo deserunt rem magni pariatur quos perspiciatis atque eveniet
unde.</p>
<a class="btn primary" href="#">View Project</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Two -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-fluid img-rounded mb-3 mb-0-md" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project Two</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, odit velit cumque vero doloremque repellendus
distinctio maiores rem expedita a nam vitae modi quidem similique ducimus! Velit, esse totam tempore.</p>
<a class="btn primary" href="#">View Project</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Three -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-fluid img-rounded mb-3 mb-0-md" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project Three</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis, temporibus, dolores, at, praesentium ut unde
repudiandae voluptatum sit ab debitis suscipit fugiat natus velit excepturi amet commodi deleniti alias
possimus!</p>
<a class="btn primary" href="#">View Project</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Project Four -->
<div class="row">
<div class="col-md-7">
<a href="#">
<img class="img-fluid img-rounded mb-3 mb-md-0" src="http://placehold.it/700x300" alt="">
</a>
</div>
<div class="col-md-5">
<h3>Project Four</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo, quidem, consectetur, officia rem officiis
illum aliquam perspiciatis aspernatur quod modi hic nemo qui soluta aut eius fugit quam in suscipit?</p>
<a class="btn primary" href="#">View Project</a>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="btn-group mb-4">
<a class="btn primary" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
<a class="btn primary active" href="#">1</a>
<a class="btn primary" href="#">2</a>
<a class="btn primary" href="#">3</a>
<a class="btn primary" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- JQUERY 3.3.1 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- BUTTER CAKE JS 4.0.0 -->
<script src="https://cdn.jsdelivr.net/npm/buttercake@4.0.0/dist/js/butterCake.min.js"></script>
</body>
</html>