Files
Gainsight/Custom_Templates/customer_templates/CIRE Academy/_homepage_hero.html.liquid

85 lines
2.0 KiB
Plaintext

<div class="np-homepage-hero">
<img class="np-homepage-hero-image"
src="https://s3.amazonaws.com/static.northpass.com/Christie's+The+Academy/Photos/hero_image.png"
alt="{{ homepage.headline }}"
/>
<div class="np-homepage-hero-content">
<div class="np-homepage-headline np-header-font-color">
Welcome to The Academy
</div>
<div class="np-homepage-subheadline np-header-font-color">
Your Education Center for Growth and Success
</div>
<a class="np-homepage-hero-cta np-button hero-button" href="{% route catalog %}">
Get Started
</a>
</div>
</div>
<style>
.np-homepage-hero .np-homepage-hero-image {
max-height: 70vh;
}
.np-homepage-headline {
font-family: 'Playfair Display', serif;
font-size: 4.5rem;
font-weight: 500;
}
.np-homepage-subheadline {
font-weight: 400;
font-size: 1.5rem;
opacity: 1;
margin-top: 30px;
}
.hero-button {
background: none;
color: white !important;
border: 1px solid white;
border-radius: 0;
padding: 17px;
height: 50px;
margin-top: 70px;
}
.hero-button:hover {
background: rgba(255,255,255,0.6);
color: black !important;
}
@media screen and (max-width: 1000px) {
.np-homepage-headline {
font-size: 4rem;
}
.np-homepage-subheadline {
margin-top: 15px;
}
.hero-button {
margin-top: 30px;
}
.np-homepage-hero-content {
top: calc(100vw * 0.517 / 2);
transform: translate(0, -50%);
}
}
@media screen and (max-width: 768px) {
.featured-courses-title {
text-align: center;
}
.np-homepage-hero-image {
height: auto;
min-height: 360px;
}
.np-homepage-hero-content {
bottom: 0;
transform: none;
top: unset
}
.np-homepage-headline {
font-size: 3rem;
line-height: 3.5rem;
}
}
@media screen and (max-width: 460px) {
.np-homepage-hero-image {
height: 450px;
}
}
</style>