<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;
}
}
