100 lines
2.5 KiB
Plaintext
100 lines
2.5 KiB
Plaintext
<div class="footer-join">
|
|
<img class="footer-join-background" src="https://s3.amazonaws.com/static.northpass.com/Omnisend/homepage_join.png">
|
|
<div class="footer-join-content">
|
|
<div class='footer-join-text'>
|
|
Join the <br class="footer-join-break"><span style="color: #A6F41C;"> 70,000+ ecommerce brands </span> that grow with Omnisend every day.
|
|
</div>
|
|
<a class="footer-join-button" href="https://app.omnisend.com/registrationv2?ict_source=academy&ict_medium=academy&ict_campaign=startfree">
|
|
Sign up for Omnisend
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.footer-join {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
.footer-join-background {
|
|
width: 100%;
|
|
}
|
|
.footer-join-content {
|
|
position: absolute;
|
|
top: 80px;
|
|
left: 4%;
|
|
width: 96%;
|
|
}
|
|
.footer-join-text {
|
|
font-size: 3.5rem;
|
|
font-weight: 800;
|
|
font-family: 'Faktum', sans-serif;
|
|
color: white;
|
|
width: 50%;
|
|
line-height: 56px;
|
|
}
|
|
.footer-join-button {
|
|
color: #1E2423;
|
|
padding: 10px 80px;
|
|
background: #A6F41C;
|
|
border: none;
|
|
border-radius: 5px;
|
|
margin-top: 40px;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
font-size: 1rem;
|
|
text-align: center;
|
|
}
|
|
.footer-join-button:hover {
|
|
color: black;
|
|
}
|
|
@media only screen and (min-width: 1800px) {
|
|
.footer-join-content {
|
|
left: 10%;
|
|
width: 90%;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 1400px) {
|
|
.footer-join-text {
|
|
font-size: 3.125rem;
|
|
line-height: 50px;
|
|
}
|
|
.footer-join-content {
|
|
top: 60px
|
|
}
|
|
}
|
|
@media only screen and (max-width: 1200px) {
|
|
.footer-join-text {
|
|
font-size: 2.5rem;
|
|
line-height: 40px;
|
|
}
|
|
.footer-join-content {
|
|
top: 30px
|
|
}
|
|
}
|
|
@media only screen and (max-width: 850px) {
|
|
.footer-join {
|
|
background: #1E2423;
|
|
}
|
|
.footer-join-text {
|
|
width: 70%;
|
|
}
|
|
.footer-join-content {
|
|
position: relative;
|
|
width: 92%;
|
|
top: 0;
|
|
}
|
|
.footer-join-break {
|
|
display: none;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 550px) {
|
|
.footer-join-text {
|
|
width: 90%;
|
|
}
|
|
}
|
|
@media only screen and (max-width: 350px) {
|
|
.footer-join-button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style> |