remove line from roadmap and make theme teal
This commit is contained in:
parent
30f5993f25
commit
7d5a02957a
|
@ -5,19 +5,6 @@
|
|||
|
||||
<body>
|
||||
{%- include header.html -%}
|
||||
<div class="vertical-line-container">
|
||||
<div class="vertical-line"></div>
|
||||
|
||||
<div class="node"></div>
|
||||
<div class="node"></div>
|
||||
<div class="node"></div>
|
||||
<div class="node"></div>
|
||||
<div class="node"></div>
|
||||
<div class="node"></div>
|
||||
<div class="node"></div>
|
||||
<div class="node"></div>
|
||||
<div class="node"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<main>
|
||||
|
@ -31,13 +18,13 @@
|
|||
<section class="flex-container capsule-header video-content" style="margin-top: 80px">
|
||||
<div class="flex-container-inner" style="padding-top: 0px">
|
||||
<div class="text-well center">
|
||||
<div class="capsule">roadmap</div>
|
||||
<div class="capsule-teal">roadmap</div>
|
||||
<br>
|
||||
<h1 class="hero-header">verifiable security without single points of failure</h1>
|
||||
<br>
|
||||
<p class="hero-p center">Most systems still rely on single individuals or computers, unverifiable software, and opaque processes. We’re redesigning security for transparency from the ground up.</p>
|
||||
<div class="button-container center">
|
||||
<a href="#roadmap" class="mega button">View roadmap</a>
|
||||
<a href="#roadmap" class="mega-teal button">View roadmap</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -307,7 +294,7 @@
|
|||
<h4 class="gradient-text center" style="line-height: 50px; max-width: 600px; margin: auto;">want to help with our vision?</h4>
|
||||
<p class="hero-p center" style="max-width: 600px; margin-top: 10px">If you would like to help us please sponsor our work or get involved as a contributor.</p>
|
||||
<div class="button-container center">
|
||||
<a href="/contact.html" class="mega button">Get in touch</a>
|
||||
<a href="/contact.html" class="mega-teal button">Get in touch</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
|
|
@ -18,7 +18,8 @@
|
|||
--mid-purple: #473C68;
|
||||
--dark-purple: #241846;
|
||||
--light-teal: #6DD4F1;
|
||||
--mid-blue: #02CAF2;
|
||||
--mid-teal: #02CAF2;
|
||||
--dark-teal: #01586A;
|
||||
--pink: #F048B5;
|
||||
--light-grey: #9A9A9A;
|
||||
--mid-grey: #292929;
|
||||
|
|
|
@ -196,6 +196,13 @@ a:hover {
|
|||
@include capsule;
|
||||
}
|
||||
|
||||
.capsule-teal {
|
||||
color: var(--light-teal);
|
||||
background: var(--dark-teal);
|
||||
border: 1px solid var(--dark-teal);
|
||||
@include capsule;
|
||||
}
|
||||
|
||||
.roadmap-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
@ -277,48 +284,6 @@ a:hover {
|
|||
background-color: var(--base-color);
|
||||
color: white !important;
|
||||
}
|
||||
/* roadmap line starts */
|
||||
|
||||
.vertical-line-container {
|
||||
position: absolute;
|
||||
top: 2050px;
|
||||
right: 200px;
|
||||
width: 60px;
|
||||
height: 3550px;
|
||||
}
|
||||
|
||||
.vertical-line {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 10px;
|
||||
height: 100%;
|
||||
background-color: #262626;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.node {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #262626;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.node:nth-child(2) { top: 0; }
|
||||
.node:nth-child(3) { top: 470px; }
|
||||
.node:nth-child(4) { top: 920px; }
|
||||
.node:nth-child(5) { top: 1380px; }
|
||||
.node:nth-child(6) { top: 1830px; }
|
||||
.node:nth-child(7) { top: 2250px; }
|
||||
.node:nth-child(8) { top: 2680px; }
|
||||
.node:nth-child(9) { top: 3100px; }
|
||||
.node:nth-child(10) { top: 3540px; }
|
||||
|
||||
/* end roadmap lines styling */
|
||||
|
||||
.roadmap .flex-container .flex-container-inner .text-well {
|
||||
border: 1px solid grey;
|
||||
|
@ -760,7 +725,6 @@ hr {
|
|||
color: var(--base-color);
|
||||
}
|
||||
|
||||
|
||||
.mega.button {
|
||||
background-color: var(--dark-purple);
|
||||
color: var(--base-color);
|
||||
|
@ -775,6 +739,20 @@ hr {
|
|||
border: 2px solid var(--purple);
|
||||
}
|
||||
|
||||
.mega-teal.button {
|
||||
background-color: var(--dark-teal);
|
||||
color: var(--base-color);
|
||||
border: 2px solid var(--light-teal);
|
||||
box-shadow: 0 0 18px rgba(42,106,255,0.6);
|
||||
@include mega;
|
||||
}
|
||||
|
||||
.mega-teal.button:hover {
|
||||
background: var(--mid-teal);
|
||||
color: var(--base-color);
|
||||
border: 2px solid var(--mid-teal);
|
||||
}
|
||||
|
||||
.button-container {
|
||||
padding: 30px 0px;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue