WIP: begin migration towards sexy looking homepage #14
|
@ -18,7 +18,7 @@
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
<li class="show">
|
<li class="show">
|
||||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div id="hamburger-menu" class="hide menu-button-container" for="menu-toggle">
|
<div id="hamburger-menu" class="hide menu-button-container" for="menu-toggle">
|
||||||
|
|
|
@ -37,7 +37,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
|
@ -3,10 +3,9 @@
|
||||||
{%- include head.html -%}
|
{%- include head.html -%}
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
{%- include header.html -%}
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
||||||
{%- include header.html -%}
|
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<section class="flex-container">
|
<section class="flex-container">
|
||||||
<div class="flex-container-inner">
|
<div class="flex-container-inner">
|
||||||
|
@ -14,7 +13,7 @@
|
||||||
<h2>Understand and mitigate security threats others won't see coming.</h2>
|
<h2>Understand and mitigate security threats others won't see coming.</h2>
|
||||||
<p>We believe security compromises to your systems and personnel are <b>inevitable</b>. Allow our team of experienced security engineers to help you reduce the likelihood and impact of risks by thinking from first principles.</p>
|
<p>We believe security compromises to your systems and personnel are <b>inevitable</b>. Allow our team of experienced security engineers to help you reduce the likelihood and impact of risks by thinking from first principles.</p>
|
||||||
<br />
|
<br />
|
||||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||||
<br />
|
<br />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -27,8 +26,6 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr />
|
|
||||||
|
|
||||||
<section class="">
|
<section class="">
|
||||||
<div class="flex-container-inner">
|
<div class="flex-container-inner">
|
||||||
<div class="text-well">
|
<div class="text-well">
|
||||||
|
@ -129,16 +126,14 @@
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<hr/>
|
|
||||||
|
|
||||||
<section class="">
|
<section class="">
|
||||||
<div class="flex-container-inner" style="align-items: baseline">
|
<div class="flex-container-inner" style="align-items: baseline">
|
||||||
<div class="text-well">
|
<div class="text-well">
|
||||||
<h1>Services</h1>
|
<h1>Services</h1>
|
||||||
<p>Distrust offers a wide range of services which are tailored to your organization. Whether you need a complete security assessment, want to create or improve an open source security tool, or want to focus on assessing a specific aspect of your organization or system - we are here to help. Our experienced staff will collaborate closely with you to understand your unique needs and create a tailor made solution that works for you.</p>
|
<p>Distrust offers a wide range of services which are tailored to your organization. Whether you need a complete security assessment, want to create or improve an open source security tool, or want to focus on assessing a specific aspect of your organization or system - we are here to help. Our experienced staff will collaborate closely with you to understand your unique needs and create a tailor made solution that works for you.</p>
|
||||||
<div class="button-container">
|
<div class="button-container">
|
||||||
<a class="action-button" href="/services.html">Learn more</a>
|
<a class="button" href="/services.html">Learn more</a>
|
||||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -184,7 +179,7 @@
|
||||||
|
|
||||||
<br />
|
<br />
|
||||||
<br />
|
<br />
|
||||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
{%- include footer.html -%}
|
{%- include footer.html -%}
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
<h2>How can we help you?</h2>
|
<h2>How can we help you?</h2>
|
||||||
<p>Distrust offers a wide range of services which are tailored to your organization. Whether you need a complete security assessment, want to create or improve an open source security tool, or want to focus on assessing a specific aspect of your organization or system - we are here to help. Our experienced staff will collaborate closely with you to understand your unique needs and create a tailor made solution that works for you.</p>
|
<p>Distrust offers a wide range of services which are tailored to your organization. Whether you need a complete security assessment, want to create or improve an open source security tool, or want to focus on assessing a specific aspect of your organization or system - we are here to help. Our experienced staff will collaborate closely with you to understand your unique needs and create a tailor made solution that works for you.</p>
|
||||||
<br />
|
<br />
|
||||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||||
<br />
|
<br />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,14 +3,17 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--base-color: #FFFFFF;
|
--base-color: rgba(255, 255, 255, 0.87);
|
||||||
|
--header-color: #ffffff;
|
||||||
--border: solid 2px rgba(219, 219, 219, 0.9);
|
--border: solid 2px rgba(219, 219, 219, 0.9);
|
||||||
--selection-background: rgba(219, 219, 219, 0.99);
|
--selection-background: rgba(219, 219, 219, 0.99);
|
||||||
--selection-text: #000;
|
--selection-text: #000;
|
||||||
--background-color: #282828;
|
--background-color: #141414;
|
||||||
--text-color: var(--base-color);
|
--text-color: var(--base-color);
|
||||||
--placeholder-color: rgba(0, 0, 0, 0.5);
|
--placeholder-color: rgba(0, 0, 0, 0.5);
|
||||||
--link-color: var(--base-color);
|
--link-color: var(--base-color);
|
||||||
|
/* yoinkt from Material Design 2014, Deep Purple A200 */
|
||||||
|
--mega-color: #7c4dff;
|
||||||
--code-color-1: #aaaaaa;
|
--code-color-1: #aaaaaa;
|
||||||
--code-color-2: #ffffcc;
|
--code-color-2: #ffffcc;
|
||||||
--code-color-3: #F00000;
|
--code-color-3: #F00000;
|
||||||
|
|
|
@ -3,7 +3,8 @@
|
||||||
*/
|
*/
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--base-color: #000;
|
--base-color: rgba(0, 0, 0, 0.87);
|
||||||
|
--header-color: rgba(0, 0, 0, 0);
|
||||||
--border: dashed 1px rgba(0, 0, 0, 1);
|
--border: dashed 1px rgba(0, 0, 0, 1);
|
||||||
--selection-background: rgba(0, 0, 0, 0.99);
|
--selection-background: rgba(0, 0, 0, 0.99);
|
||||||
--selection-text: #FFF;
|
--selection-text: #FFF;
|
||||||
|
|
|
@ -65,7 +65,7 @@ h6 {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: var(--text-color);
|
color: var(--header-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
p,
|
p,
|
||||||
|
@ -78,6 +78,7 @@ ol {
|
||||||
a {
|
a {
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
color: var(--link-color);
|
color: var(--link-color);
|
||||||
|
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
|
@ -121,8 +122,7 @@ footer {
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
margin-top: 24px;
|
margin: 24px;
|
||||||
margin-bottom: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header p {
|
header p {
|
||||||
|
@ -163,6 +163,7 @@ hr {
|
||||||
.header-page-links a:hover {
|
.header-page-links a:hover {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
color: lightgrey;
|
color: lightgrey;
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right-menu {
|
.right-menu {
|
||||||
|
@ -283,22 +284,35 @@ hr {
|
||||||
/**
|
/**
|
||||||
* Buttons
|
* Buttons
|
||||||
*/
|
*/
|
||||||
.action-button {
|
.button {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 10px 20px 9px 20px;
|
padding: 10px 20px 9px 20px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
border-color: white;
|
color: var(--base-color);
|
||||||
border: solid 1px;
|
background-color: var(--background-color);
|
||||||
color: black;
|
border: 2px solid white;
|
||||||
background-color: white;
|
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-button:hover {
|
.button:hover {
|
||||||
background-color: transparent;
|
/* invert */
|
||||||
border-color: white;
|
background-color: var(--base-color);
|
||||||
border: solid 1px;
|
color: var(--background-color);
|
||||||
color: white;
|
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* important button */
|
||||||
|
.mega.button {
|
||||||
|
background-color: var(--mega-color);
|
||||||
|
color: var(--base-color);
|
||||||
|
border: 2px solid var(--mega-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mega.button:hover {
|
||||||
|
/* invert */
|
||||||
|
background-color: color-mix(in srgb, var(--mega-color), white 10%);
|
||||||
|
color: var(--base-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.button-container {
|
.button-container {
|
||||||
|
@ -344,12 +358,10 @@ hr {
|
||||||
* Header/Navigation
|
* Header/Navigation
|
||||||
*/
|
*/
|
||||||
.menu {
|
.menu {
|
||||||
border-bottom: var(--border);
|
/* border-bottom: var(--border); */
|
||||||
margin-bottom: 20px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-bottom: 25px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul {
|
.menu ul {
|
||||||
|
@ -499,12 +511,7 @@ textarea {
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin-top: 48px;
|
margin-top: 48px;
|
||||||
margin-bottom: 48px;
|
margin-bottom: 120px;
|
||||||
}
|
|
||||||
|
|
||||||
.extra-spacing {
|
|
||||||
margin-top: 70px;
|
|
||||||
margin-bottom: 70px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.companies {
|
.companies {
|
||||||
|
@ -537,7 +544,7 @@ section {
|
||||||
}
|
}
|
||||||
|
|
||||||
.text-well {
|
.text-well {
|
||||||
max-width: 600px;
|
max-width: 100%;
|
||||||
padding-right: 35px;
|
padding-right: 35px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue