Fleet Cloud beta ribbon (#8990)

* Fleet Cloud beta ribbon

I added the ribbon back to the top of fleetdm.com pages to promote the beta campaign.

@eashaw, please can you take over when you're back online? There's a repeated class headerCTAHidden that I'm not sure whether to keep or not.

* remove unused css class

Co-authored-by: Eric <eashaw@sailsjs.com>
This commit is contained in:
Mike Thomas 2022-12-13 05:19:11 +09:00 committed by GitHub
parent 45e0a14700
commit 499e0a2890
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 20 deletions

View File

@ -15,35 +15,20 @@ html, body {
position: relative;
padding-bottom: @footer-height;
}
.homepage-cta-banner {
background-color: ;
color: #000;
a {
color: #000;
}
}
// Apply this margin when there is a CTA banner on the homepage
.homepage-cta-banner + .homepage-header-top {
top: 52px;
}
.homepage-cta-banner {
background-color: #A182DF;
color: #FFF;
a {
color: #FFF;
}
}
[purpose='header-report-cta'] {
[purpose='header-ribbon-cta'] {
background-color: @core-fleet-black;
p {
font-size: 14px;
line-height: 20px;
color: #fff;
}
a {
font-size: 14px;
line-height: 20px;
font-weight: 700;
text-decoration: underline;
color: #ff5c83;
}
}
@ -137,6 +122,7 @@ html, body {
}
}
}
} // Homepage header styles
&.homepage-header {
z-index: 999;

View File

@ -117,7 +117,13 @@
</head>
<body>
<div purpose="page-wrap" dat>
<div class="header <%= !headerCTAHidden ? 'homepage-header-top' : null %>" purpose="page-header">
<div class="header" purpose="page-header">
<div purpose="header-ribbon-cta" class="<%= headerCTAHidden ? 'd-none' : 'd-flex' %> flex-row justify-content-center align-items-md-center">
<div class="mb-0 d-flex flex-lg-row flex-column justify-content-center py-3 px-2">
<p class="text-center pr-1 mb-0">Instant deployment with
Fleet Managed Cloud. <a href="https://kqphpqst851.typeform.com/to/yoo5smT9">Join the beta</a></p>
</div>
</div>
<div style="max-width: 1248px; height: 94px;" class="container-fluid d-flex justify-content-between align-items-center pt-3 pb-3 px-3 px-md-4">
<a href="/" style="max-width: 118px;">
<img alt="Fleet logo" src="/images/logo-blue-162x92@2x.png" style="height: 92px; width: 162px;"/>