<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>
<!------ Include the above in your HEAD tag ---------->
<!--****************************************
Brochure Download Section
********************************************-->
<section>
<h2>Brochure</h2>
<div class= "container brochure">
<img src="https://drive.google.com/thumbnail?authuser=0&id=0B9t9jOHSwJVGUWcyVUFQSXc3c2M" alt="Brochure thumbnail">
<a class="dl-button" href="https://drive.google.com/uc?export=download&id=0B9t9jOHSwJVGUWcyVUFQSXc3c2M">
<div class="btn-wrap">
<div class="icon">
<div class="icon-wrap">
<svg class="arrow" viewBox="0 0 20 18" fill="currentColor">
<polygon points="8 0 12 0 12 9 15 9 10 14 5 9 8 9"></polygon>
</svg>
<svg class="shape" viewBox="0 0 20 18" fill="currentColor">
<path d="M4.82668561,0 L15.1733144,0 C16.0590479,0 16.8392841,0.582583769 17.0909106,1.43182334 L19.7391982,10.369794 C19.9108349,10.9490677 19.9490212,11.5596963 19.8508905,12.1558403 L19.1646343,16.3248465 C19.0055906,17.2910371 18.1703851,18 17.191192,18 L2.80880804,18 C1.82961488,18 0.994409401,17.2910371 0.835365676,16.3248465 L0.149109507,12.1558403 C0.0509788145,11.5596963 0.0891651114,10.9490677 0.260801785,10.369794 L2.90908938,1.43182334 C3.16071592,0.582583769 3.94095214,0 4.82668561,0 Z"></path>
</svg>
</div>
</div>
<div class="label">Download</div>
</div>
</a>
</div>
</section>
/*---------------Heading---------------*/
h2 {
font: barlow;
font-size: 40px;
font-weight: normal;
padding: 50px 20px;
}
/*---------------Thumbnail---------------*/
.brochure img {
position: relative;
border: 1px solid #012644;
width: 100%;
height: auto;
}
.brochure img:hover {
opacity: 0.6;
}
/*---------------Download Button---------------*/
.dl-button {
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 90px solid transparent;
border-bottom: 90px solid transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.dl-button:hover {
background: transparent;
background: rgba(255,255,255,0.3);
}
.btn-wrap {
position: relative;
background: #012644;
border-radius: 5px;
overflow: hidden;
display: flex;
padding: 10px 10px;
width:120px;
}
.icon {
margin-right: 12px;
position: relative;
}
svg {
width: 20px;
height: 18px;
display: block;
margin-top: 2px;
position: relative;
z-index: 1;
}
.arrow {
color: #012644;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.shape {
color: #fff;
}
.label {
font: avenir;
color: #fff;
line-height: 22px;
font-size: 15px;
font-weight: lighter;
position: relative;
}
a:hover {
text-decoration: none;
}
/*---------------Brochure Section---------------*/
.brochure {
margin-left: 20px;
margin-bottom: 20px;
position: relative;
width: 100%;
max-width: 160px;
padding: 0px;
}
