mirror of
https://github.com/tlsnotary/website.git
synced 2026-01-08 22:38:08 -05:00
work on styling
This commit is contained in:
sinu
@@ -5,6 +5,7 @@ import Usecases from './components/Usecases';
|
||||
import About from './components/About';
|
||||
import Footer from './components/Footer';
|
||||
import How from './components/How';
|
||||
import Pagesigner from './components/Pagesigner';
|
||||
|
||||
function HomePage() {
|
||||
return (
|
||||
@@ -15,6 +16,7 @@ function HomePage() {
|
||||
<Usecases />
|
||||
<How />
|
||||
<Roadmap />
|
||||
<Pagesigner />
|
||||
<About />
|
||||
</main>
|
||||
<Footer />
|
||||
|
||||
@@ -5,6 +5,9 @@
|
||||
}
|
||||
|
||||
#About .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
@@ -6,16 +6,22 @@ export default function About() {
|
||||
return (
|
||||
<div id="About">
|
||||
<div className="container">
|
||||
<img src={ethlogo}></img>
|
||||
<div className="item">
|
||||
<img src={ethlogo}></img>
|
||||
</div>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<h3>
|
||||
TLSNotary is a public good & open source project supported by the Ethereum Foundation under the
|
||||
Privacy and Scaling Exploration Team.
|
||||
</h3>
|
||||
<div className="item">
|
||||
<h3>
|
||||
TLSNotary is a public good & open source project supported by the Ethereum Foundation under the
|
||||
Privacy and Scaling Exploration Team.
|
||||
</h3>
|
||||
</div>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<a href={config.links.pse}>
|
||||
<button className="pill-button">Learn More</button>
|
||||
</a>
|
||||
<div className="item">
|
||||
<a href={config.links.pse}>
|
||||
<button className="pill-button">Learn More</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -4,7 +4,7 @@ footer {
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
border-top: 2px solid var(--gray);
|
||||
margin: 6.5rem 5em 1rem;
|
||||
margin: 0rem 5em 1rem;
|
||||
padding-block: 2.4rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,404 +1,40 @@
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img.hero-graphic {
|
||||
width: 100%; /* or any custom size */
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
#Hero {
|
||||
max-width: 67%;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
#Hero .name {
|
||||
color: var(--brown);
|
||||
}
|
||||
|
||||
.border-2 {
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.border-gray-800 {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgb(31 41 55 / var(--tw-border-opacity));
|
||||
}
|
||||
|
||||
.bg-yellow-400 {
|
||||
--tw-bg-opacity: 1;
|
||||
background-color: rgb(250 204 21 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.transition-all {
|
||||
transition-property: all;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(-25%);
|
||||
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||
}
|
||||
50% {
|
||||
transform: none;
|
||||
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-bounce,
|
||||
.hover\:animate-bounce:hover {
|
||||
animation: bounce 1s infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
.hover\:animate-spin:hover {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.max-w-\[1920px\] {
|
||||
max-width: 1920px;
|
||||
}
|
||||
|
||||
.px-4 {
|
||||
padding-left: 1rem /* 16px */;
|
||||
padding-right: 1rem /* 16px */;
|
||||
}
|
||||
|
||||
.py-12 {
|
||||
padding-top: 3rem /* 48px */;
|
||||
padding-bottom: 3rem /* 48px */;
|
||||
}
|
||||
|
||||
.flex {
|
||||
#Hero .links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex-col {
|
||||
flex-direction: column;
|
||||
#Hero .docs-link {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.flex-auto {
|
||||
flex: 1 1 auto;
|
||||
#Hero .button-docs {
|
||||
width: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.right-\[6\%\] {
|
||||
right: 6%;
|
||||
#Hero .repo-link {
|
||||
margin-inline: 10px;
|
||||
}
|
||||
|
||||
.right-1\/3 {
|
||||
right: 33.333333%;
|
||||
#Hero .button-github {
|
||||
width: 20px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.top-6 {
|
||||
top: 1.5rem /* 24px */;
|
||||
}
|
||||
|
||||
.top-60 {
|
||||
top: 15rem /* 240px */;
|
||||
}
|
||||
|
||||
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-x-reverse: 0;
|
||||
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
|
||||
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
|
||||
}
|
||||
|
||||
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.uppercase {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.underline {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.text-purple-800 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 33 168 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.active\:text-opacity-70:active {
|
||||
--tw-text-opacity: 0.7;
|
||||
}
|
||||
|
||||
.text-xs {
|
||||
font-size: 0.75rem /* 12px */;
|
||||
line-height: 1rem /* 16px */;
|
||||
}
|
||||
|
||||
.text-sm {
|
||||
font-size: 0.875rem /* 14px */;
|
||||
line-height: 1.25rem /* 20px */;
|
||||
}
|
||||
|
||||
.text-xl {
|
||||
font-size: 1.25rem /* 20px */;
|
||||
line-height: 1.75rem /* 28px */;
|
||||
}
|
||||
|
||||
.text-3xl {
|
||||
font-size: 2rem /* 32px */;
|
||||
line-height: 2.5rem /* 40px */;
|
||||
}
|
||||
|
||||
.tracking-wider {
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.font-semibold {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.font-bold {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Widths */
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.w-auto {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.w-\[108px\] {
|
||||
width: 108px;
|
||||
}
|
||||
|
||||
/* Heights */
|
||||
.h-\[149\.44px\] {
|
||||
height: 149.44px;
|
||||
}
|
||||
|
||||
.h-\[91px\] {
|
||||
height: 91px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Media Queries
|
||||
*/
|
||||
|
||||
@media (min-width: 640px) {
|
||||
.container {
|
||||
max-width: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
max-width: 768px;
|
||||
}
|
||||
|
||||
.md\:block {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md\:px-16 {
|
||||
padding-left: 4rem /* 64px */;
|
||||
padding-right: 4rem /* 64px */;
|
||||
}
|
||||
|
||||
.md\:px-24 {
|
||||
padding-left: 6rem /* 96px */;
|
||||
padding-right: 6rem /* 96px */;
|
||||
}
|
||||
|
||||
.md\:max-w-xl {
|
||||
max-width: 36rem /* 576px */;
|
||||
}
|
||||
|
||||
.md\:max-w-4xl {
|
||||
max-width: 56rem /* 896px */;
|
||||
}
|
||||
|
||||
.md\:text-4xl {
|
||||
font-size: 2.25rem /* 36px */;
|
||||
line-height: 2.5rem /* 40px */;
|
||||
}
|
||||
|
||||
.md\:flex-row {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.md\:w-1\/4 {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.md\:top-12 {
|
||||
top: 3rem /* 48px */;
|
||||
}
|
||||
|
||||
.md\:-right-2\/4 {
|
||||
right: -50%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.container {
|
||||
max-width: 1024px;
|
||||
}
|
||||
|
||||
.lg\:py-16 {
|
||||
padding-top: 4rem /* 64px */;
|
||||
padding-bottom: 4rem /* 64px */;
|
||||
}
|
||||
|
||||
.lg\:space-y-6 > :not([hidden]) ~ :not([hidden]) {
|
||||
--tw-space-y-reverse: 0;
|
||||
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
|
||||
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
|
||||
}
|
||||
|
||||
.lg\:max-w-6xl {
|
||||
max-width: 72rem /* 1152px */;
|
||||
}
|
||||
|
||||
.lg\:w-\[195px\] {
|
||||
width: 195px;
|
||||
}
|
||||
|
||||
.lg\:h-\[269\.83px\] {
|
||||
height: 269.83px;
|
||||
}
|
||||
|
||||
.lg\:w-\[177\.08px\] {
|
||||
width: 177.08px;
|
||||
}
|
||||
|
||||
.lg\:h-\[173px\] {
|
||||
height: 173px;
|
||||
}
|
||||
|
||||
.lg\:text-sm {
|
||||
font-size: 0.875rem /* 14px */;
|
||||
line-height: 1.25rem /* 20px */;
|
||||
}
|
||||
|
||||
.lg\:text-lg {
|
||||
font-size: 1.125rem /* 18px */;
|
||||
line-height: 1.75rem /* 28px */;
|
||||
}
|
||||
|
||||
.lg\:text-3xl {
|
||||
font-size: 2rem /* 32px */;
|
||||
line-height: 2.5rem /* 40px */;
|
||||
}
|
||||
|
||||
.lg\:text-5xl {
|
||||
font-size: 3rem /* 48px */;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.lg\:leading-\[110\%\] {
|
||||
line-height: 110%;
|
||||
}
|
||||
|
||||
.lg\:leading-\[145\%\] {
|
||||
line-height: 145%;
|
||||
}
|
||||
|
||||
.lg\:top-16 {
|
||||
top: 4rem /* 64px */;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
.xl\:text-base {
|
||||
font-size: 1rem /* 16px */;
|
||||
line-height: 1.5rem /* 24px */;
|
||||
}
|
||||
|
||||
.xl\:text-4xl {
|
||||
font-size: 2.25rem /* 36px */;
|
||||
line-height: 2.5rem /* 40px */;
|
||||
}
|
||||
|
||||
.xl\:text-6xl {
|
||||
font-size: 3.75rem /* 60px */;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.xl\:max-w-2xl {
|
||||
max-width: 42rem /* 672px */;
|
||||
}
|
||||
|
||||
.xl\:w-\[270px\] {
|
||||
width: 270px;
|
||||
}
|
||||
|
||||
.xl\:h-\[373\.61px\] {
|
||||
height: 373.61px;
|
||||
}
|
||||
|
||||
.xl\:px-44 {
|
||||
padding-left: 11rem /* 176px */;
|
||||
padding-right: 11rem /* 176px */;
|
||||
}
|
||||
|
||||
.xl\:py-24 {
|
||||
padding-top: 6rem /* 96px */;
|
||||
padding-bottom: 6rem /* 96px */;
|
||||
}
|
||||
|
||||
.xl\:leading-\[150\%\] {
|
||||
line-height: 150%;
|
||||
}
|
||||
|
||||
.xl\:-right-3\/4 {
|
||||
right: -75%;
|
||||
}
|
||||
|
||||
.xl\:top-32 {
|
||||
top: 8rem /* 128px */;
|
||||
}
|
||||
|
||||
.xl\:mx-auto {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1536px) {
|
||||
.container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
|
||||
.\32xl\:right-\[10\%\] {
|
||||
right: 10%;
|
||||
@media only screen and (max-width: 600px) {
|
||||
#Hero .links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: left;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import github from "../images/github.svg";
|
||||
import docs from "../images/docs.svg";
|
||||
import "./Hero.css";
|
||||
import config from "../config.json";
|
||||
|
||||
@@ -8,18 +9,28 @@ const Hero = () => (
|
||||
<h1>
|
||||
Proof of data authenticity
|
||||
</h1>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<p>
|
||||
Export data from any web application and prove facts about it without compromising on privacy.
|
||||
</p>
|
||||
<div className="flex space-x-2">
|
||||
<a href="https://tlsnotary.github.io/docs-mdbook/">
|
||||
<button className="pill-button">
|
||||
<p>View Documentation</p>
|
||||
</button>
|
||||
</a>
|
||||
<a href={config.links.repo}>
|
||||
<img src={github} alt="github"></img>
|
||||
</a>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<div className="links">
|
||||
<div className="docs-link">
|
||||
<a href={config.links.docs}>
|
||||
<button className="pill-button">
|
||||
Documentation
|
||||
<img className="button-docs" src={docs} alt="docs"></img>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
<div className="repo-link">
|
||||
<a href={config.links.repo}>
|
||||
<button className="pill-button">
|
||||
Source
|
||||
<img className="button-github" src={github} alt="github"></img>
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -2,20 +2,50 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-block: 12px;
|
||||
padding: 100px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
#How .body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
#How .diagram-container {
|
||||
padding: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#How .diagram {
|
||||
display: flex;
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
#How .diagram-container {
|
||||
display: flex;
|
||||
border: 5px solid var(--brown);
|
||||
border-radius: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#How .text-container {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1440px) {
|
||||
#How {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
#How .body {
|
||||
flex-direction: column;
|
||||
position: static;
|
||||
max-width: 67%;
|
||||
}
|
||||
|
||||
#How .diagram {
|
||||
max-width: 80%;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,7 +8,7 @@ export default function How() {
|
||||
<div className="diagram-container">
|
||||
<img className="diagram" src={diagram}></img>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-container">
|
||||
<h2>How it works</h2>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<p>
|
||||
@@ -18,7 +18,8 @@ export default function How() {
|
||||
At the core of the TLSNotary protocol is dividing TLS session keys between two parties (Client and Notary) and then using secure two-party computation (2PC) to encrypt and authenticate requests from the Client to a TLS-enabled webserver.
|
||||
<br/>
|
||||
<br/>
|
||||
During the protocol neither the Client nor Notary are in posession of the full TLS session keys, they only know their shares of those keys. This preserves the security assumptions of TLS while at the same time allowing the Client to prove to the Notary the authenticity of the transcript.
|
||||
During the protocol neither the Client nor Notary are in posession of the full TLS session keys, they only know their shares of those keys.
|
||||
This preserves the security assumptions of TLS while at the same time allows the Client to prove to the Notary the authenticity of the transcript.
|
||||
<br/>
|
||||
<br/>
|
||||
This is all achieved with full privacy. The Notary is never aware of which webserver is being queried, nor do they ever see the unencrypted communications.
|
||||
|
||||
@@ -20,7 +20,7 @@ function Navbar() {
|
||||
</a>
|
||||
<div id="anchor-links" className="nav-links">
|
||||
<a href={config.links.docs}>Docs</a>
|
||||
<a href="#Roadmap">Roadmap</a>
|
||||
<a href="#Pagesigner">PageSigner</a>
|
||||
<a href="#About">About</a>
|
||||
</div>
|
||||
<div id="social-links" className="nav-links">
|
||||
@@ -34,9 +34,9 @@ function Navbar() {
|
||||
<div id="menu-link" onClick={() => { toggleMenu() }}>{isOpen ? 'Close' : 'Menu'}</div>
|
||||
</nav>
|
||||
<nav id="nav-menu-mobile" aria-label="Navigation for Mobile" className={isOpen ? 'menu-open' : 'menu-closed'}>
|
||||
<a href="#top">About</a>
|
||||
<a href="#Projects">Projects</a>
|
||||
<a href="#Team">Members</a>
|
||||
<a href={config.links.docs}>Docs</a>
|
||||
<a href="#Pagesigner">PageSigner</a>
|
||||
<a href="#About">About</a>
|
||||
</nav>
|
||||
</nav>
|
||||
)
|
||||
|
||||
22
src/components/Pagesigner.css
Normal file
22
src/components/Pagesigner.css
Normal file
@@ -0,0 +1,22 @@
|
||||
#Pagesigner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: var(--brown);
|
||||
}
|
||||
|
||||
#Pagesigner h3 {
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
#Pagesigner .container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
background-color: var(--blue);
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
19
src/components/Pagesigner.tsx
Normal file
19
src/components/Pagesigner.tsx
Normal file
@@ -0,0 +1,19 @@
|
||||
import "./Pagesigner.css";
|
||||
import ethlogo from '../images/eth-logo-blue.svg';
|
||||
import config from "../config.json";
|
||||
|
||||
export default function Pagesigner() {
|
||||
return (
|
||||
<div id="Pagesigner">
|
||||
<div className="container">
|
||||
<h3>
|
||||
Looking for our legacy implementation?
|
||||
</h3>
|
||||
<div style={{ height: "1.375rem" }} />
|
||||
<a href={config.links.legacy}>
|
||||
<button className="pill-button">See PageSigner</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -62,3 +62,12 @@
|
||||
border-top: 2px solid var(--gray);
|
||||
align-self: stretch; */
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
#Roadmap .cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 2.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#Usecases .card {
|
||||
@@ -77,8 +78,11 @@
|
||||
align-self: stretch; */
|
||||
}
|
||||
|
||||
@media screen and (max-width: 800px) {
|
||||
#Usecases {
|
||||
padding-inline: 1rem;
|
||||
@media only screen and (max-width: 600px) {
|
||||
#Usecases .cards {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
"discord": "https://discord.gg/9XwESXtcN7",
|
||||
"repo": "https://github.com/tlsnotary/tlsn",
|
||||
"docs": "https://tlsnotary.github.io/docs-mdbook/",
|
||||
"pse": "https://appliedzkp.org/"
|
||||
"pse": "https://appliedzkp.org/",
|
||||
"legacy": "https://tlsnotary.org/"
|
||||
}
|
||||
}
|
||||
|
||||
3
src/images/docs.svg
Normal file
3
src/images/docs.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="25" height="28" viewBox="0 0 25 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.516 22H24.5V3.33329C24.5 2.62605 24.219 1.94777 23.719 1.44767C23.2189 0.947577 22.5406 0.666626 21.8333 0.666626H4.5C2.892 0.666626 0.5 1.73196 0.5 4.66663V23.3333C0.5 26.268 2.892 27.3333 4.5 27.3333H24.5V24.6666H4.516C3.9 24.6506 3.16667 24.4066 3.16667 23.3333C3.16667 22.26 3.9 22.016 4.516 22ZM7.16667 5.99996H19.1667V8.66663H7.16667V5.99996Z" fill="#282A2D"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 482 B |
@@ -83,14 +83,17 @@ html {
|
||||
}
|
||||
|
||||
.pill-button {
|
||||
display: flex;
|
||||
font-family: "Inter", sans-serif;
|
||||
background-color: var(--white);
|
||||
border: 3px solid var(--blue);
|
||||
color: var(--black);
|
||||
color: var(--blue);
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
border-radius: 32px;
|
||||
padding: 18px 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*
|
||||
|
||||
Reference in New Issue
Block a user