add visual for services
This commit is contained in:
parent
eb37ae7888
commit
01a2b79bb0
GPG Key ID:
44A86CFF1FDF0E85
|
|
@ -5,14 +5,23 @@
|
|||
{%- include header.html -%}
|
||||
<div class="container">
|
||||
<main>
|
||||
<section class="flex-container capsule-header">
|
||||
<div class="video-background-container" style="top: 350px">
|
||||
<video autoplay muted loop playsinline class="video-background">
|
||||
<source src="assets/videos/swirly-lines.mp4" type="video/mp4" />
|
||||
</video>
|
||||
<div class="gradient-overlay" style="background: linear-gradient(to bottom, #0f0f0f 0%, rgba(15, 15, 15, 0) 25%, rgba(15, 15, 15, 0) 75%, #0f0f0f 100%), linear-gradient(to right, rgb(15, 15, 15) 0%, rgba(15, 15, 15, 0) 100%)"></div>
|
||||
</div>
|
||||
<section class="flex-container capsule-header video-content">
|
||||
|
||||
<div class="flex-container-inner">
|
||||
<div class="text-well center">
|
||||
<div class="text-well" style="text-align: center; margin: auto">
|
||||
<div class="capsule">services</div>
|
||||
</div>
|
||||
<br>
|
||||
<h1 class="hero-title gradient-text hero-header">hire Distrust to solve your hardest security challenges</h1>
|
||||
<h1 class="hero-title gradient-text hero-header">
|
||||
hire Distrust to solve your hardest security challenges
|
||||
</h1>
|
||||
<br>
|
||||
<p class="hero-p center">Built by the team behind BitGo, Unit410, and Turnkey, we appy hard-earned lessons from securing critical infrastructure to build transparent, resilient, and universally applicable security solutions.</p>
|
||||
<div class="button-container">
|
||||
|
|
@ -22,34 +31,45 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="flex-container">
|
||||
<section class="flex-container mid-tall-section">
|
||||
<div class="flex-container-inner">
|
||||
<div class="text-well card">
|
||||
<h4>security assessments</h4>
|
||||
<p>Our assessments go beyond identifying vulnerabilities—we strategically eliminate risks at their source. Using a first-principles methodology, we pinpoint single points of failure and deliver clear, actionable recommendations to secure your systems against sophisticated threats.</p>
|
||||
<div class="text-well">
|
||||
<h3>security assessments</h3>
|
||||
<p style="max-width: 540px">Our assessments go beyond identifying vulnerabilities—we strategically eliminate risks at their source. Using a first-principles methodology, we pinpoint single points of failure and deliver clear, actionable recommendations to secure your systems against sophisticated threats.</p>
|
||||
<ul>
|
||||
<li>Penetration testing</li>
|
||||
<li>Secure code review</li>
|
||||
<li>Cloud configuration review</li>
|
||||
<li>Threat modeling</li>
|
||||
</ul>
|
||||
<br>
|
||||
<a href="/contact.html" class="arrow-link">
|
||||
Schedule an assessment
|
||||
<span class="arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-container-inner">
|
||||
<div class="text-well card">
|
||||
<h4>retainer or fractional CISO</h4>
|
||||
<p>Gain continuous, high-level security leadership tailored precisely to your organization's needs. We work closely with your teams, providing strategic security direction, eliminating blind trust, and protecting critical infrastructure from sophisticated threats.</p>
|
||||
<div class="text-well">
|
||||
<h3>retainer or fractional CISO</h3>
|
||||
<p style="max-width: 540px">Gain continuous, high-level security leadership tailored precisely to your organization's needs. We work closely with your teams, providing strategic security direction, eliminating blind trust, and protecting critical infrastructure from sophisticated threats.</p>
|
||||
<ul>
|
||||
<li>Security program development</li>
|
||||
<li>Incident response</li>
|
||||
<li>Due diligence</li>
|
||||
<li>Vetting security talent</li>
|
||||
</ul>
|
||||
<br>
|
||||
<a href="/contact.html" class="arrow-link">
|
||||
Work with us
|
||||
<span class="arrow">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="flex-container">
|
||||
<div class="flex-container-inner">
|
||||
</div>
|
||||
<div class="flex-container-inner"></div>
|
||||
<div class="flex-container-inner">
|
||||
<h2 class="gradient-text" style="text-align: left; height: 95px">why Distrust?</h2>
|
||||
<p>
|
||||
|
|
|
|||
|
|
@ -13,15 +13,16 @@
|
|||
--placeholder-color: rgba(0, 0, 0, 0.5);
|
||||
--link-color: var(--base-color);
|
||||
/* yoinkt from Material Design 2014, Deep Purple A200 */
|
||||
--mega-color: #7C4DFF;
|
||||
--dark-purple: #241846;
|
||||
--mid-purple: #473C68;
|
||||
--purple: #7C4DFF;
|
||||
--light-purple: #A998ED;
|
||||
--light-blue: #02CAF2;
|
||||
--light-grey: #9A9A9A;
|
||||
--dark-grey: #292929;
|
||||
--mid-purple: #473C68;
|
||||
--dark-purple: #241846;
|
||||
--light-teal: #6DD4F1;
|
||||
--raisin-black: #120F1A;
|
||||
--mid-blue: #02CAF2;
|
||||
--pink: #F048B5;
|
||||
--light-grey: #9A9A9A;
|
||||
--mid-grey: #292929;
|
||||
--dark-grey: #120F1A;
|
||||
--code-color-1: #aaaaaa;
|
||||
--code-color-2: #ffffcc;
|
||||
--code-color-3: #F00000;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
* Style variables
|
||||
*/
|
||||
$base-font-family: 'Inter', monospace !default;
|
||||
$base-font-size: 1.125rem !default;
|
||||
$base-font-size: 1.3rem !default;
|
||||
$mobile-font-size: 1.125rem !default;
|
||||
$base-line-height: 1.5 !default;
|
||||
$container-width: 90% !default;
|
||||
|
|
@ -80,7 +80,7 @@ h6 {
|
|||
}
|
||||
|
||||
p {
|
||||
font-size: 18px;
|
||||
font-size: $base-font-size;
|
||||
}
|
||||
|
||||
p,
|
||||
|
|
@ -126,7 +126,6 @@ a:hover {
|
|||
}
|
||||
|
||||
.hero-p {
|
||||
font-size: 20px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
|
|
@ -135,7 +134,7 @@ a:hover {
|
|||
}
|
||||
|
||||
.capsule-header {
|
||||
margin-top: 110px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
|
|
@ -145,11 +144,13 @@ a:hover {
|
|||
|
||||
.card {
|
||||
transition: border 0.3s ease-in-out;
|
||||
background: var(--raisin-black);
|
||||
background: var(--dark-grey);
|
||||
border: 1px solid var(--mid-purple);
|
||||
border-radius: 20px;
|
||||
padding: 45px;
|
||||
margin: 20px;
|
||||
min-height: 490px;
|
||||
max-width: 550px;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
|
|
@ -354,6 +355,7 @@ a:hover {
|
|||
overflow: hidden;
|
||||
top: 100px;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.gradient-overlay {
|
||||
|
|
@ -703,18 +705,19 @@ hr {
|
|||
@mixin mega {
|
||||
border-radius: 30px;
|
||||
font-weight: 400;
|
||||
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.mega-inverted.button {
|
||||
border: 1px solid var(--dark-grey);
|
||||
background: var(--dark-grey);
|
||||
color: white;
|
||||
@include mega;
|
||||
border: 1px solid var(--mid-grey);
|
||||
background: var(--mid-grey);
|
||||
color: white;
|
||||
@include mega;
|
||||
}
|
||||
|
||||
.mega-inverted.button:hover {
|
||||
transform: translateY(0px);
|
||||
background: var(--mega-color);
|
||||
background: var(--purple);
|
||||
color: var(--base-color);
|
||||
}
|
||||
|
||||
|
|
@ -728,8 +731,9 @@ hr {
|
|||
}
|
||||
|
||||
.mega.button:hover {
|
||||
background: var(--mega-color);
|
||||
background: var(--purple);
|
||||
color: var(--base-color);
|
||||
border: 2px solid var(--purple);
|
||||
}
|
||||
|
||||
.button-container {
|
||||
|
|
@ -743,7 +747,7 @@ hr {
|
|||
width: 100%;
|
||||
border-radius: 10px;
|
||||
height: 60px;
|
||||
background: var(--mega-color);
|
||||
background: var(--purple);
|
||||
color: white;
|
||||
border: 1px solid var(--light-purple);
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
Loading…
Reference in New Issue