mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-21 12:36:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Implement basic Sponsor Experience box

Browse source
This commit is contained in:
Matthew Holt 2023-09-27 18:12:23 -06:00 • committed by Francis Lavoie
parent 4a88ac32cc
commit ec157aebb8
No known key found for this signature in database
GPG key ID: 0F66EE1687682239
2 changed files with 97 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

46
new/index.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="/resources/css/vendor/asciinema-player-3.6.1.css">
<script src="/resources/js/vendor/asciinema-player-3.6.1.min.js"></script>
<link rel="stylesheet" href="/resources/css/marketing.css">
<link rel="stylesheet" href="/resources/css/home.css">
<!-- <meta property="og:title" content="Caddy 2 - The Ultimate Server with Automatic HTTPS">
@ -57,49 +58,49 @@
<div class="sponsor-logos">
<a href="https://zerossl.com" target="_blank">
<img src="/resources/images/sponsors/zerossl.svg" alt="ZeroSSL" height="45">
<img src="/resources/images/sponsors/zerossl.svg" alt="ZeroSSL" title="ZeroSSL" height="45">
</a>
<a href="https://stripe.com" target="_blank">
<img src="/resources/images/sponsors/stripe.svg" alt="Stripe" class="featured" height="45">
<img src="/resources/images/sponsors/stripe.svg" alt="Stripe" title="Stripe" class="featured" height="45">
</a>
</div>
<div class="sponsors-divider"></div>
<div class="sponsor-logos">
<a href="https://opensource.mercedes-benz.com/" target="_blank">
<img src="/resources/images/sponsors/mercedes-benz.svg" alt="Mercedes-Benz" height="38">
<img src="/resources/images/sponsors/mercedes-benz.svg" alt="Mercedes-Benz" title="Mercedes-Benz" height="38">
</a>
<a href="https://sourcegraph.com/" target="_blank">
<img src="/resources/images/sponsors/sourcegraph.svg" alt="Sourcegraph" height="30">
<img src="/resources/images/sponsors/sourcegraph.svg" alt="Sourcegraph" title="Sourcegraph" height="30">
</a>
<a href="https://tailscale.com" target="_blank">
<img src="/resources/images/sponsors/tailscale.svg" alt="Tailscale" height="22">
<img src="/resources/images/sponsors/tailscale.svg" alt="Tailscale" title="Tailscale" height="22">
</a>
<a href="https://fusionauth.com" target="_blank">
<img src="/resources/images/sponsors/fusionauth.svg" alt="FusionAuth" height="35">
<img src="/resources/images/sponsors/fusionauth.svg" alt="FusionAuth" title="FusionAuth" height="35">
</a>
<a href="https://www.aryeo.com" target="_blank">
<img src="/resources/images/sponsors/aryeo.svg" alt="Aryeo" height="26">
<img src="/resources/images/sponsors/aryeo.svg" alt="Aryeo" title="Aryeo" height="26">
</a>
<a href="https://checklyhq.com" target="_blank">
<img src="/resources/images/sponsors/checkly.svg" alt="Checkly" height="24" style="position: relative; top: 3px;">
<img src="/resources/images/sponsors/checkly.svg" alt="Checkly" title="Checkly" height="24" style="position: relative; top: 3px;">
</a>
<a href="https://appcove.com/" target="_blank">
<img src="/resources/images/sponsors/appcove.png" alt="AppCove" height="24">
<img src="/resources/images/sponsors/appcove.png" alt="AppCove" title="AppCove" height="24">
</a>
<a href="https://www.transistor.fm" target="_blank">
<img src="/resources/images/sponsors/transistorfm.svg" alt="Transistor" height="32">
<img src="/resources/images/sponsors/transistorfm.svg" alt="Transistor" title="Transistor" height="32">
</a>
<a href="https://photostructure.com/" target="_blank">
<img src="/resources/images/sponsors/photostructure.svg" alt="PhotoStructure" height="30">
<img src="/resources/images/sponsors/photostructure.svg" alt="PhotoStructure" title="PhotoStructure" height="30">
</a>
<a href="https://gitea.com/" target="_blank">
<img src="/resources/images/sponsors/gitea.svg" alt="Gitea" height="25">
<img src="/resources/images/sponsors/gitea.svg" alt="Gitea" title="Gitea" height="25">
</a>
<a href="https://aniftyco.com/" target="_blank">
<img src="/resources/images/sponsors/niftyco.svg" alt="Niftyco" height="25">
<img src="/resources/images/sponsors/niftyco.svg" alt="Niftyco" title="Niftyco" height="25">
</a>
<a href="https://iqm.com/" target="_blank">
<img src="/resources/images/sponsors/iqm.svg" alt="IQM" height="24">
<img src="/resources/images/sponsors/iqm.svg" alt="IQM" title="IQM" height="24">
</a>
<a href="/sponsor" class="button purple">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-new-section" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@ -111,6 +112,7 @@
Join the ranks
</a>
</div>
<!-- <a href="#">Why a sponsorship</a> -->
<!-- <a href="/sponsor" class="button purple">Sponsorship info</a> -->
</div>
</div>
@ -155,6 +157,22 @@
</p>
<a href="/sponsor" class="button purple">See sponsorships</a>
</div>
<div class="sponsor-experience stripe">
<img src="/resources/images/sponsors/stripe.svg" class="experience-logo">
<div class="experience-content">
<div class="experience-quote">
"Something good to say, hopefully. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet."
</div>
<div class="experience-credit">
<img src="" class="experience-picture">
<cite>
<b>Firstname Last</b>
Position or credentials
</cite>
</div>
</div>
</div>
</div>
</div>

65
new/resources/css/marketing.css Normal file
View file

@ -0,0 +1,65 @@
.sponsor-experience {
border-radius: 10px;
padding: 30px 50px 40px;
color: #fff;
display: flex;
flex-wrap: wrap;
max-width: 700px; /* TODO: TEMPORARY! */
column-gap: 50px;
}
.sponsor-experience::before {
content: "Sponsor Experience";
text-transform: uppercase;
letter-spacing: 4px;
color: rgb(255 255 255 / .7);
font-size: 12px;
font-weight: 800;
text-align: center;
display: block;
width: 100%;
}
.sponsor-experience .experience-content {
flex: 1;
margin-top: 40px;
}
.sponsor-experience .experience-quote {
margin-bottom: 1em;
}
.sponsor-experience .experience-logo {
width: 150px;
}
.sponsor-experience .experience-credit {
display: flex;
gap: 1em;
align-items: center;
}
.sponsor-experience cite {
font-style: normal;
font-size: 14px;
color: rgb(255 255 255 / .7);
}
.sponsor-experience cite b {
display: block;
font-size: 125%;
color: #fff;
}
.sponsor-experience .experience-picture {
width: 3em;
height: 3em;
border-radius: 50%;
object-fit: cover;
background-color: gray;
}
.sponsor-experience.stripe {
background: linear-gradient(to right, #635bff 30%, #d4b8ff);
}