85 lines
2.0 KiB
Plaintext
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> |