<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <section class="logo-header"> <div class="container h-100"> <div class="row h-100 align-items-center"> <div class="col-12 col-md-12 text-center header-content"> <img src="https://i.imgur.com/A0t1a3D.png" class="img-fluid logo" alt="logo"> <h1>Let's make design fast and easy.</h1> <p>We offer a huge collection of simple, beautiful and ready to use blocks. All blocks can be downloaded free of charge from learnwd.com</p> <p> <a class="btn btn-primary rounded" href="https://www.learnwd.com/">Download Now</a> </p> </div> </div> </div> </section>

.logo-header { background: linear-gradient(rgba(62, 63, 64, 0.6), rgba(62, 63, 64, 0.6)), url("https://i.imgur.com/FVieG2F.png"); background-size: cover; background-position: center bottom; color: #fff; font-family: 'Nunito', sans-serif; padding-top: 150px; padding-bottom: 100px; } .logo-header h1 { font-size: 3rem; font-weight: 300; margin: 0 auto 0.2em auto; } .logo-header p { font-size: 1.15rem; width: 80%; margin: 0 auto 2em auto; } .logo-header .logo { margin: 0 auto 1em auto; } .logo-header .btn { padding: 10px 26px; background-color: #313131; color: #FFF; display: inline-block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; text-decoration: none; border: solid 2px #313131; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } .logo-header .btn:hover { color: #FFF; background-color: #1f69ff; border-color: #1f69ff; } @media (min-width: 992px) { .logo-header { height: 100vh; padding-top: 0; padding-bottom: 0; } .logo-header h1 { font-size: 4rem; } .logo-header p { width: 60%; } } @media (max-width: 480px) { .logo-header h1 { font-size: 2.4rem; } }