begin migration towards sexy looking homepage
This commit is contained in:
parent
795ea2754c
commit
9d169cd29a
|
@ -18,7 +18,7 @@
|
|||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
<li class="show">
|
||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
||||
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div id="hamburger-menu" class="hide menu-button-container" for="menu-toggle">
|
||||
|
|
|
@ -37,7 +37,7 @@
|
|||
</ul>
|
||||
<br />
|
||||
<br />
|
||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
||||
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
|
|
@ -3,10 +3,9 @@
|
|||
{%- include head.html -%}
|
||||
|
||||
<body>
|
||||
{%- include header.html -%}
|
||||
|
||||
<div class="container">
|
||||
|
||||
{%- include header.html -%}
|
||||
|
||||
<main>
|
||||
<section class="flex-container">
|
||||
<div class="flex-container-inner">
|
||||
|
@ -14,7 +13,7 @@
|
|||
<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>
|
||||
<br />
|
||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
||||
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -27,8 +26,6 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<hr />
|
||||
|
||||
<section class="">
|
||||
<div class="flex-container-inner">
|
||||
<div class="text-well">
|
||||
|
@ -129,16 +126,14 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<hr/>
|
||||
|
||||
<section class="">
|
||||
<div class="flex-container-inner" style="align-items: baseline">
|
||||
<div class="text-well">
|
||||
<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>
|
||||
<div class="button-container">
|
||||
<a class="action-button" href="/services.html">Learn more</a>
|
||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
||||
<a class="button" href="/services.html">Learn more</a>
|
||||
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -184,11 +179,11 @@
|
|||
|
||||
<br />
|
||||
<br />
|
||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
||||
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||
</section>
|
||||
</main>
|
||||
{%- include footer.html -%}
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
<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>
|
||||
<br />
|
||||
<a href="/contact.html" class="action-button">Free Consultation</a>
|
||||
<a href="/contact.html" class="mega button">Free Consultation</a>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
|
@ -101,4 +101,4 @@
|
|||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
@ -3,14 +3,17 @@
|
|||
*/
|
||||
|
||||
:root {
|
||||
--base-color: #FFFFFF;
|
||||
--base-color: rgba(255, 255, 255, 0.87);
|
||||
--header-color: #ffffff;
|
||||
--border: solid 2px rgba(219, 219, 219, 0.9);
|
||||
--selection-background: rgba(219, 219, 219, 0.99);
|
||||
--selection-text: #000;
|
||||
--background-color: #282828;
|
||||
--background-color: #141414;
|
||||
--text-color: var(--base-color);
|
||||
--placeholder-color: rgba(0, 0, 0, 0.5);
|
||||
--link-color: var(--base-color);
|
||||
/* yoinkt from Material Design 2014, Deep Purple A200 */
|
||||
--mega-color: #7c4dff;
|
||||
--code-color-1: #aaaaaa;
|
||||
--code-color-2: #ffffcc;
|
||||
--code-color-3: #F00000;
|
||||
|
|
|
@ -3,7 +3,8 @@
|
|||
*/
|
||||
|
||||
: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);
|
||||
--selection-background: rgba(0, 0, 0, 0.99);
|
||||
--selection-text: #FFF;
|
||||
|
|
|
@ -65,7 +65,7 @@ h6 {
|
|||
margin-top: 0px;
|
||||
margin-bottom: 12px;
|
||||
font-weight: bold;
|
||||
color: var(--text-color);
|
||||
color: var(--header-color);
|
||||
}
|
||||
|
||||
p,
|
||||
|
@ -78,6 +78,7 @@ ol {
|
|||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--link-color);
|
||||
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
|
@ -121,8 +122,7 @@ footer {
|
|||
}
|
||||
|
||||
header {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
margin: 24px;
|
||||
}
|
||||
|
||||
header p {
|
||||
|
@ -163,6 +163,7 @@ hr {
|
|||
.header-page-links a:hover {
|
||||
background-color: transparent;
|
||||
color: lightgrey;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.right-menu {
|
||||
|
@ -283,22 +284,35 @@ hr {
|
|||
/**
|
||||
* Buttons
|
||||
*/
|
||||
.action-button {
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 10px 20px 9px 20px;
|
||||
margin-top: 10px;
|
||||
border-color: white;
|
||||
border: solid 1px;
|
||||
color: black;
|
||||
background-color: white;
|
||||
color: var(--base-color);
|
||||
background-color: var(--background-color);
|
||||
border: 2px solid white;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background-color: transparent;
|
||||
border-color: white;
|
||||
border: solid 1px;
|
||||
color: white;
|
||||
.button:hover {
|
||||
/* invert */
|
||||
background-color: var(--base-color);
|
||||
color: var(--background-color);
|
||||
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 {
|
||||
|
@ -344,12 +358,10 @@ hr {
|
|||
* Header/Navigation
|
||||
*/
|
||||
.menu {
|
||||
border-bottom: var(--border);
|
||||
margin-bottom: 20px;
|
||||
/* border-bottom: var(--border); */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 25px;
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
|
@ -499,12 +511,7 @@ textarea {
|
|||
|
||||
section {
|
||||
margin-top: 48px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.extra-spacing {
|
||||
margin-top: 70px;
|
||||
margin-bottom: 70px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
.companies {
|
||||
|
@ -537,7 +544,7 @@ section {
|
|||
}
|
||||
|
||||
.text-well {
|
||||
max-width: 600px;
|
||||
max-width: 100%;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue