"Untitled"
Bootstrap 4.1.1 Snippet by RizwanAkram

<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 ----------> <link rel="stylesheet" href="https://use.typekit.net/uhy0rxj.css"> <div class="landing-page-holder"> <div class="section section-1 "> <div class="content-box"> <div class="hero-text"> <div class="text-1"> Want to be part of</div> <div class="text-2"> <div class="left-text"> <div class="_one">the</div> <div class="_two">next</div> </div> <div class="_three">unicorn</div> </div> <div class="text-3">startup?</div> <div class="text-4"><span>With</span>TakeMyStake,</div> <div class="text-5">You Can.</div> <div class="clearfix"></div> <div class="btn-banner"> <a href="" class="btn">Co-Invest NOW!</a> </div> </div> </div> </div> </div>
html,body { font-family: futura-pt !important; height: 100%; } .landing-page-holder { position: relative; width: 100%; height: 100%; } .landing-page-holder .section::before { content: ''; position: absolute; width: 100%; height: 100%; background-attachment: fixed; background-position: center; background-size: cover; background-repeat: no-repeat; } .landing-page-holder .section.section-1 { background: #ffd2d2; } .landing-page-holder .section.section-1::before { background: url(https://i.imgur.com/7bCiOfw.jpg) center/cover no-repeat; } .landing-page-holder .section { position: relative; overflow: hidden; width: 100%; height: 100%; font-size: 1rem; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -webkit-box-pack: center; justify-content: center; -ms-flex-pack: center; } .landing-page-holder .section .content-box { width: 100%; padding: 5em 2em; position: relative; -webkit-align-self: center; -moz-align-self: center; -ms-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .landing-page-holder .hero-text { position: relative; left: 40%; line-height: 1; font-weight: 600; max-width: 465px; } .landing-page-holder .hero-text .text-2, .landing-page-holder .hero-text .text-5 { text-transform: uppercase; } .landing-page-holder .hero-text .text-2 .left-text, .landing-page-holder .hero-text .text-2 ._three { display: inline-block; } .landing-page-holder .hero-text .text-2 ._one { letter-spacing: 2px; } .landing-page-holder .hero-text .text-2, .landing-page-holder .hero-text .text-4, .landing-page-holder .hero-text .text-5 { margin-top: 10px; display: block; } .landing-page-holder .hero-text .text-3 { margin-top: -5px; } .landing-page-holder .hero-text .text-3, .landing-page-holder .hero-text .text-5, .landing-page-holder .btn-banner { text-align: right; } .landing-page-holder .btn-banner { margin-top: 20px; } .landing-page-holder .btn-banner .btn { font-size: 24px; font-weight: bold; color: #07d5ae; padding: 5px 20px; border-radius: 10px; text-decoration: none; border: 2px solid #37414b; } .landing-page-holder .hero-text .text-2 ._three { color: white; } .landing-page-holder .hero-text, .landing-page-holder .hero-text .text-4 span { color: #37414b; } .landing-page-holder .hero-text .text-4 { color: #07d5ae; } .landing-page-holder .hero-text .text-2 ._three { font-size: 85px; } .landing-page-holder .hero-text .text-1, .landing-page-holder .hero-text .text-3, .landing-page-holder .hero-text .text-4 { font-size: 55px; } .landing-page-holder .hero-text .text-3, .landing-page-holder .hero-text .text-4 span, .landing-page-holder .hero-text .text-5 { font-size: 50px; } .landing-page-holder .hero-text .text-2 ._one { font-size: 36px; } .landing-page-holder .hero-text .text-2 ._two { font-size: 26px; } @media (max-width: 1199px) { .landing-page-holder .hero-text { left: 35%; max-width: 435px; } .landing-page-holder .hero-text .text-2 ._three { font-size: 80px; } .landing-page-holder .hero-text .text-1, .landing-page-holder .hero-text .text-3, .landing-page-holder .hero-text .text-4 { font-size: 52px; } .landing-page-holder .hero-text .text-3, .landing-page-holder .hero-text .text-4 span, .landing-page-holder .hero-text .text-5 { font-size: 46px; } .landing-page-holder .hero-text .text-2 ._one { font-size: 32px; } .landing-page-holder .hero-text .text-2 ._two { font-size: 24px; } } @media (max-width: 767px) { .landing-page-holder .section.section-1::before { opacity: .5; background: url(https://i.imgur.com/XtcrAeN.png) center/cover no-repeat; } .landing-page-holder .hero-text { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); } .landing-page-holder .btn-banner .btn { background: rgba(255, 255, 255, 0.5); } .landing-page-holder .hero-text, .landing-page-holder .hero-text .text-3, .landing-page-holder .hero-text .text-5, .landing-page-holder .btn-banner { text-align: center; } .landing-page-holder .hero-text { left: 0; max-width: 100%; } .landing-page-holder .hero-text .text-2 ._three { font-size: 70px; } .landing-page-holder .hero-text .text-1, .landing-page-holder .hero-text .text-3, .landing-page-holder .hero-text .text-4 { font-size: 42px; } .landing-page-holder .hero-text .text-3, .landing-page-holder .hero-text .text-4 span, .landing-page-holder .hero-text .text-5 { font-size: 32px; } .landing-page-holder .hero-text .text-2 ._one { font-size: 30px; } .landing-page-holder .hero-text .text-2 ._two { font-size: 20px; } } @media (max-width: 550px) { .landing-page-holder .hero-text .text-2 ._three { font-size: 54px; } .landing-page-holder .hero-text .text-1, .landing-page-holder .hero-text .text-3, .landing-page-holder .hero-text .text-4 { font-size: 28px; } .landing-page-holder .hero-text .text-3, .landing-page-holder .hero-text .text-4 span, .landing-page-holder .hero-text .text-5 { font-size: 24px; } .landing-page-holder .hero-text .text-2 ._one { font-size: 26px; } .landing-page-holder .hero-text .text-2 ._two, .landing-page-holder .btn-banner .btn { font-size: 18px; } }

Related: See More


Questions / Comments: