136 lines
2.6 KiB
Plaintext
136 lines
2.6 KiB
Plaintext
<div class="hero">
|
|
<div class="np-max-width hero-content">
|
|
<div class="row">
|
|
<div class="col-xs-12 col-md-6">
|
|
<h2 class="hero-title">Papa Pal University</h2>
|
|
</div>
|
|
<div class="col-xs-12 col-md-6">
|
|
<div class="hero-imagery">
|
|
<div class="hero-image top-image"><img src="https://s3.amazonaws.com/static.northpass.com/papa/hero-image-face-yellow.png" loading="lazy" /></div>
|
|
<div class="hero-image left-image"><img src="https://s3.amazonaws.com/static.northpass.com/papa/hero-image-face-blue.png" loading="lazy" /></div>
|
|
<div class="hero-image right-image"><img src="https://s3.amazonaws.com/static.northpass.com/papa/hero-image-face-green.png" loading="lazy" /></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<style>
|
|
|
|
.hero {
|
|
background-color: #06083c;
|
|
color: #fff;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 120px 16px 64px;
|
|
display: flex;
|
|
}
|
|
|
|
.hero:before {
|
|
content: "";
|
|
width: 90%;
|
|
height: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-image: url('https://s3.amazonaws.com/static.northpass.com/papa/hero-background-squiggle.png');
|
|
transform: translate(9%, -16%);
|
|
background-size: 109%;
|
|
background-position: bottom left;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
}
|
|
|
|
.hero .hero-title {
|
|
font-size: 48px;
|
|
line-height: 130%;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-imagery {
|
|
display: none;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero-imagery .hero-image {
|
|
width: 50%;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-imagery .hero-image.top-image {
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-imagery .hero-image.left-image {
|
|
top: -35px;
|
|
left: 40px;
|
|
}
|
|
|
|
.hero-imagery .hero-image.right-image {
|
|
right: 20px;
|
|
top: 15px;
|
|
}
|
|
|
|
.hero-imagery img {
|
|
max-width: 230px;
|
|
}
|
|
|
|
@media(min-width:768px) {
|
|
|
|
.hero {
|
|
min-height: 400px;
|
|
}
|
|
|
|
.hero:before {
|
|
width: 75%;
|
|
}
|
|
|
|
.hero .hero-title {
|
|
font-size: 72px;
|
|
}
|
|
}
|
|
|
|
@media(min-width:1024px) {
|
|
.hero {
|
|
min-height: 500px;
|
|
}
|
|
|
|
.hero:before {
|
|
background-size: 100%;
|
|
transform: translate(0%, -16%);
|
|
}
|
|
|
|
.hero .hero-title {
|
|
font-size: 90px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.hero-imagery {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
@media(min-width:1200px) {
|
|
.hero {
|
|
min-height: 600px;
|
|
}
|
|
|
|
.hero .hero-title {
|
|
font-size: 104px;
|
|
}
|
|
}
|
|
</style>
|