mirror of
https://github.com/Rushilwiz/neurosecure.git
synced 2025-04-08 06:10:18 -04:00
feat: updated desktop site, added responsive nav
This commit is contained in:
parent
d17e2d8307
commit
e017ba9fb4
3
.prettierignore
Normal file
3
.prettierignore
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
# prettier hates sass >:(
|
||||
*.sass
|
||||
*.css.map
|
||||
184
index.html
184
index.html
|
|
@ -5,21 +5,17 @@
|
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>NeuroSecure</title>
|
||||
<link rel="stylesheet" href="css/index.css">
|
||||
<link rel="stylesheet" href="css/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="nav-wrapper">
|
||||
<div class="nav">
|
||||
<nav>
|
||||
<div class="logo">
|
||||
<h4>
|
||||
<img width="24" height="24" src="css/res/brain.svg">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-lock-fill" viewBox="0 0 16 16">
|
||||
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
|
||||
</svg>
|
||||
<span>NeuroSecure.</span>
|
||||
<img src="css/res/brain.svg" />
|
||||
<img src="css/res/plus.svg" />
|
||||
<img src="css/res/lock.svg" />
|
||||
<span>NeuroSecure</span>
|
||||
</h4>
|
||||
</div>
|
||||
<ul>
|
||||
|
|
@ -27,70 +23,194 @@
|
|||
<li><a href="#">About</a></li>
|
||||
<li><a href="#">Timeline</a></li>
|
||||
<li><a href="#">Contact Us</a></li>
|
||||
<span>NeuroSecure</span>
|
||||
</ul>
|
||||
<div class="burger">
|
||||
<div class="line1"></div>
|
||||
<div class="line2"></div>
|
||||
<div class="line3"></div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<section class="hero">
|
||||
<div id="hero">
|
||||
<h1>
|
||||
Neuro<br />Secure
|
||||
</h1>
|
||||
<h3>
|
||||
A product to revolutionize the field of cybersecurity.
|
||||
</h3>
|
||||
<h1>Neuro<br />Secure</h1>
|
||||
<h3>A product to revolutionize the field of cybersecurity.</h3>
|
||||
</div>
|
||||
</section>
|
||||
<section class="about">
|
||||
<h1>
|
||||
The future of authentication.
|
||||
</h1>
|
||||
<div id="about">
|
||||
<h1>The future of authentication.</h1>
|
||||
<h4>
|
||||
A cloud based authentication platform that will allow users to login with their minds. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Similique ex, nihil ullam dolores nisi, porro tenetur tempore facilis delectus optio, alias nemo ipsum error laudantium quia soluta! Atque, soluta consequatur?
|
||||
A cloud based authentication platform that will allow users to login
|
||||
with their minds. Lorem ipsum dolor sit, amet consectetur adipisicing
|
||||
elit. Similique ex, nihil ullam dolores nisi, porro tenetur tempore
|
||||
facilis delectus optio, alias nemo ipsum error laudantium quia soluta!
|
||||
Atque, soluta consequatur?
|
||||
</h4>
|
||||
<button><a href="">Watch a demo</a></button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="founders">
|
||||
<div class="profile">
|
||||
<img />
|
||||
<h1>Leon Jia</h1>
|
||||
<h2>NOVA Class of 2026</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
|
||||
quisquam magni rerum, beatae vel deleniti temporibus tempore voluptas.
|
||||
</p>
|
||||
</div>
|
||||
<div class="caption">
|
||||
<h1>Meet the founders.</h1>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque
|
||||
reiciendis dolor vitae possimus tenetur ullam ratione accusamus.
|
||||
</p>
|
||||
</div>
|
||||
<div class="profile">
|
||||
<img />
|
||||
<h1>Anirudh Bansal</h1>
|
||||
<h2>More impressive title</h2>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde,
|
||||
quisquam magni rerum, beatae vel deleniti temporibus tempore voluptas
|
||||
impedit enim similique vero eos est, molestiae explicabo quam eligendi
|
||||
sapiente odit?
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="timeline">
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Our timeline</h1>
|
||||
</div>
|
||||
<div id="timeline">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="content">
|
||||
<h3 class="date">20th may, 2010</h3>
|
||||
<h1>Heading 1</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Consectetur tempora ab laudantium voluptatibus aut eos placeat
|
||||
laborum, quibusdam exercitationem labore.</p>
|
||||
laborum, quibusdam exercitationem labore.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="content">
|
||||
<h3 class="date">20th may, 2010</h3>
|
||||
<h1>Heading 2</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum,
|
||||
quibusdam exercitationem labore.</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Consectetur tempora ab laudantium voluptatibus aut eos placeat
|
||||
laborum, quibusdam exercitationem labore.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="content">
|
||||
<h3 class="date">20th may, 2010</h3>
|
||||
<h1>Heading 3</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum,
|
||||
quibusdam exercitationem labore.</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Consectetur tempora ab laudantium voluptatibus aut eos placeat
|
||||
laborum, quibusdam exercitationem labore.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="content">
|
||||
<h3 class="date">20th may, 2010</h3>
|
||||
<h1>Heading 4</h1>
|
||||
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum,
|
||||
quibusdam exercitationem labore.</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Consectetur tempora ab laudantium voluptatibus aut eos placeat
|
||||
laborum, quibusdam exercitationem labore.
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
<section class="contact">
|
||||
<form id="contact" action="/" method="post">
|
||||
<h1>Get in contact</h1>
|
||||
<fieldset>
|
||||
<fieldset>
|
||||
<input
|
||||
placeholder="Your name"
|
||||
name="name"
|
||||
type="text"
|
||||
tabindex="1"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<input
|
||||
placeholder="Your email"
|
||||
name="email"
|
||||
type="email"
|
||||
tabindex="2"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<input
|
||||
placeholder="Your phone number (optional)"
|
||||
name="phone"
|
||||
type="tel"
|
||||
tabindex="3"
|
||||
required
|
||||
/>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<textarea
|
||||
placeholder="Type your message here..."
|
||||
name="message"
|
||||
tabindex="4"
|
||||
></textarea>
|
||||
</fieldset>
|
||||
<button type="submit">submit</button>
|
||||
</fieldset>
|
||||
<p class="alternative">
|
||||
Or, you can feel free to email us
|
||||
<a href="mailto:leonjia0942@gmail.com">here</a>.
|
||||
</p>
|
||||
</form>
|
||||
</section>
|
||||
<footer>
|
||||
<div class="footer">
|
||||
<div class="columns">
|
||||
<div class="logo">
|
||||
<h4>
|
||||
<img src="css/res/brain.svg" />
|
||||
<img src="css/res/plus.svg" />
|
||||
<img src="css/res/lock.svg" />
|
||||
<span>NeuroSecure</span>
|
||||
</h4>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Important Links</li>
|
||||
<li>Link</li>
|
||||
<li>Another Link</li>
|
||||
<li>Yet another link</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>More Links</li>
|
||||
<li>Link</li>
|
||||
<li>Another Link</li>
|
||||
<li>Yet another link</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
© All rights reserved 2021<br />designed by
|
||||
<a target="_blank" href="https://github.com/rushilwiz"
|
||||
>rushil umaretiya</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
<script type="x-shader/x-vertex" id="vertexshader">
|
||||
attribute float scale;
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document<title>
|
||||
<style lang="sass" src="/css/index.sass"></style>
|
||||
</head>
|
||||
<body>
|
||||
<section class="hero">
|
||||
<div id="hero">
|
||||
<h1>
|
||||
Neuro<br />Secure
|
||||
</h1>
|
||||
<h3>
|
||||
A product to revolutionize the field of cybersecurity.
|
||||
</h3>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
</html>
|
||||
0
public/css/fonts/astro.ttf → public/css/fonts/Astro/astro.ttf
Executable file → Normal file
0
public/css/fonts/astro.ttf → public/css/fonts/Astro/astro.ttf
Executable file → Normal file
BIN
public/css/fonts/Garamond/EBGaramond-Bold.ttf
Normal file
BIN
public/css/fonts/Garamond/EBGaramond-Bold.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Garamond/EBGaramond-BoldItalic.ttf
Normal file
BIN
public/css/fonts/Garamond/EBGaramond-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Garamond/EBGaramond-ExtraBold.ttf
Normal file
BIN
public/css/fonts/Garamond/EBGaramond-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Garamond/EBGaramond-ExtraBoldItalic.ttf
Normal file
BIN
public/css/fonts/Garamond/EBGaramond-ExtraBoldItalic.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Garamond/EBGaramond-Italic.ttf
Normal file
BIN
public/css/fonts/Garamond/EBGaramond-Italic.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Garamond/EBGaramond-Medium.ttf
Normal file
BIN
public/css/fonts/Garamond/EBGaramond-Medium.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Garamond/EBGaramond-MediumItalic.ttf
Normal file
BIN
public/css/fonts/Garamond/EBGaramond-MediumItalic.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Garamond/EBGaramond-Regular.ttf
Normal file
BIN
public/css/fonts/Garamond/EBGaramond-Regular.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Garamond/EBGaramond-SemiBold.ttf
Normal file
BIN
public/css/fonts/Garamond/EBGaramond-SemiBold.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Garamond/EBGaramond-SemiBoldItalic.ttf
Normal file
BIN
public/css/fonts/Garamond/EBGaramond-SemiBoldItalic.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-Black.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-Black.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-BlackItalic.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-BlackItalic.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-Bold.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-Bold.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-BoldItalic.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-BoldItalic.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-ExtraBold.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-ExtraBold.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-ExtraBoldItalic.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-ExtraBoldItalic.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-Italic.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-Italic.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-Medium.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-Medium.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-MediumItalic.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-MediumItalic.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-Regular.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-Regular.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-SemiBold.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-SemiBold.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Playfair/PlayfairDisplay-SemiBoldItalic.ttf
Normal file
BIN
public/css/fonts/Playfair/PlayfairDisplay-SemiBoldItalic.ttf
Normal file
Binary file not shown.
|
|
@ -10,7 +10,12 @@
|
|||
|
||||
@font-face {
|
||||
font-family: 'Astro';
|
||||
src: url("fonts/astro.ttf");
|
||||
src: url("fonts/Astro/astro.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Garamond';
|
||||
src: url("fonts/Garamond/EBGaramond-Regular.ttf");
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
@ -18,18 +23,21 @@
|
|||
padding: 0px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
background-color: #131313;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
nav {
|
||||
.nav nav {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -43,18 +51,18 @@ nav {
|
|||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
nav .logo {
|
||||
.nav nav .logo {
|
||||
color: #d4d4d4;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
nav .logo span {
|
||||
.nav nav .logo span {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
.nav nav ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
|
|
@ -63,11 +71,15 @@ nav ul {
|
|||
width: 30%;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
.nav nav ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul a {
|
||||
.nav nav ul span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav nav ul a {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: #d4d4d4;
|
||||
text-decoration: none;
|
||||
|
|
@ -75,18 +87,105 @@ nav ul a {
|
|||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
nav ul a:hover {
|
||||
.nav nav ul a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav nav .nav-active {
|
||||
-webkit-transform: translateX(0%) !important;
|
||||
transform: translateX(0%) !important;
|
||||
}
|
||||
|
||||
.nav nav .burger {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav nav .burger div {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: #d4d4d4;
|
||||
margin: 5px;
|
||||
-webkit-transition: all 0.3s ease;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nav nav {
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
padding: 20px;
|
||||
}
|
||||
.nav nav .logo img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
.nav nav .logo span {
|
||||
display: none;
|
||||
}
|
||||
.nav nav ul {
|
||||
z-index: 1;
|
||||
-webkit-transform: translateX(100%);
|
||||
transform: translateX(100%);
|
||||
position: absolute;
|
||||
right: 0%;
|
||||
top: 8vh;
|
||||
height: 30vh;
|
||||
width: 100% !important;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
background-color: #131313;
|
||||
-webkit-transition: -webkit-transform 0.5s ease-in;
|
||||
transition: -webkit-transform 0.5s ease-in;
|
||||
transition: transform 0.5s ease-in;
|
||||
transition: transform 0.5s ease-in, -webkit-transform 0.5s ease-in;
|
||||
border-bottom: 3px solid #d4d4d4;
|
||||
}
|
||||
.nav nav ul span {
|
||||
display: block;
|
||||
color: #d4d4d4;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
font-size: 1.75em;
|
||||
}
|
||||
.nav nav ul li a {
|
||||
color: #d4d4d4 !important;
|
||||
font-size: 1.2em;
|
||||
font-weight: normal;
|
||||
}
|
||||
.nav nav .burger {
|
||||
display: block !important;
|
||||
}
|
||||
.nav nav .burger.toggle .line1 {
|
||||
-webkit-transform: rotate(-45deg) translate(-5px, 6px);
|
||||
transform: rotate(-45deg) translate(-5px, 6px);
|
||||
}
|
||||
.nav nav .burger.toggle .line2 {
|
||||
opacity: 0;
|
||||
}
|
||||
.nav nav .burger.toggle .line3 {
|
||||
-webkit-transform: rotate(45deg) translate(-5px, -6px);
|
||||
transform: rotate(45deg) translate(-5px, -6px);
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
color: #d4d4d4;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#hero {
|
||||
.hero #hero {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 20%;
|
||||
|
|
@ -94,27 +193,23 @@ nav ul a:hover {
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
#hero h1 {
|
||||
.hero #hero h1 {
|
||||
font-family: "Astro", sans-serif;
|
||||
text-align: left;
|
||||
font-size: 8em;
|
||||
padding: 0.5em;
|
||||
padding: 0.5em 0.5em 0;
|
||||
background: -webkit-linear-gradient(#eee 70%, #333 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#hero h3 {
|
||||
.hero #hero h3 {
|
||||
font-family: "Open Sans", serif;
|
||||
text-align: left;
|
||||
font-size: 2em;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
#hero canvas {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.about {
|
||||
position: relative;
|
||||
color: #d4d4d4;
|
||||
|
|
@ -123,19 +218,23 @@ nav ul a:hover {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.about h1 {
|
||||
.about #about {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.about #about h1 {
|
||||
font-size: 4em;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.about h4 {
|
||||
.about #about h4 {
|
||||
font-size: 1em;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
margin-left: 20%;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.about button {
|
||||
.about #about button {
|
||||
padding: 10px 20px;
|
||||
border: 3px solid #d4d4d4;
|
||||
text-transform: uppercase;
|
||||
|
|
@ -144,21 +243,22 @@ nav ul a:hover {
|
|||
font-family: "Astro", sans-serif;
|
||||
}
|
||||
|
||||
.about button a {
|
||||
.about #about button a {
|
||||
color: #d4d4d4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.about div canvas {
|
||||
margin-top: -20%;
|
||||
z-index: -1;
|
||||
margin: -5% 0;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: flex;
|
||||
.founders {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
height: auto;
|
||||
color: #d4d4d4;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
|
|
@ -167,52 +267,135 @@ nav ul a:hover {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 80%;
|
||||
.founders .profile {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1 1 0px;
|
||||
flex: 1 1 0;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.founders .profile img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: #ffd1dc;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.founders .profile h1 {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 1.6em;
|
||||
margin-top: 0.3em;
|
||||
}
|
||||
|
||||
.founders .profile h2 {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.founders .profile p {
|
||||
font-family: sans-serif;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
.founders .profile p a {
|
||||
text-decoration: none;
|
||||
color: #11c1e0;
|
||||
}
|
||||
|
||||
.founders .caption {
|
||||
-webkit-box-flex: 1.5;
|
||||
-ms-flex: 1.5 1 0px;
|
||||
flex: 1.5 1 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.founders .caption h1 {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 5em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.founders .caption p {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
color: #d4d4d4;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
|
||||
.timeline .header {
|
||||
margin-bottom: 2%;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 4em;
|
||||
}
|
||||
|
||||
.timeline #timeline {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 2%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container ul {
|
||||
.timeline #timeline ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.container ul li {
|
||||
.timeline #timeline ul li {
|
||||
border: 8px solid #747474;
|
||||
padding: 20px;
|
||||
background-color: #1e1f22;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.container ul li:last-child {
|
||||
.timeline #timeline ul li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font-weight: 500;
|
||||
.timeline #timeline ul li .content h1 {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 25px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content p {
|
||||
.timeline #timeline ul li .content p {
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.content .date {
|
||||
.timeline #timeline ul li .content .date {
|
||||
font-family: monospace;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.container:before {
|
||||
@media (min-width: 768px) {
|
||||
.timeline #timeline:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -221,54 +404,240 @@ nav ul a:hover {
|
|||
transform: translateX(-50%);
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: #747474;
|
||||
background-color: #d4d4d4;
|
||||
}
|
||||
.container ul li {
|
||||
.timeline #timeline .date {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
}
|
||||
.timeline #timeline ul li {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.container ul li:nth-child(odd) {
|
||||
.timeline #timeline ul li:nth-child(odd) {
|
||||
float: left;
|
||||
clear: right;
|
||||
-webkit-transform: translateX(-30px);
|
||||
transform: translateX(-30px);
|
||||
border-radius: 20px 0px 20px 20px;
|
||||
}
|
||||
.container ul li:nth-child(even) {
|
||||
.timeline #timeline ul li:nth-child(odd)::before {
|
||||
-webkit-transform: translate(50%, -50%);
|
||||
transform: translate(50%, -50%);
|
||||
right: -38px;
|
||||
}
|
||||
.timeline #timeline ul li:nth-child(even) {
|
||||
float: right;
|
||||
clear: left;
|
||||
-webkit-transform: translateX(30px);
|
||||
transform: translateX(30px);
|
||||
border-radius: 0px 20px 20px 20px;
|
||||
}
|
||||
.container ul li::before {
|
||||
.timeline #timeline ul li:nth-child(even)::before {
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
left: -38px;
|
||||
}
|
||||
.timeline #timeline ul li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border-radius: 50%;
|
||||
background-color: pink !important;
|
||||
color: pink !important;
|
||||
z-index: 999;
|
||||
top: 0px;
|
||||
background-color: #747474;
|
||||
top: 0;
|
||||
}
|
||||
.container ul li:nth-child(odd)::before {
|
||||
-webkit-transform: translate(50%, -50%);
|
||||
transform: translate(50%, -50%);
|
||||
right: -30px;
|
||||
}
|
||||
.container ul li:nth-child(even)::before {
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
left: -30px;
|
||||
|
||||
.contact {
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
width: 100vw;
|
||||
height: auto;
|
||||
color: #d4d4d4;
|
||||
background-color: transparent;
|
||||
z-index: 0;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.content .date {
|
||||
|
||||
.contact #contact {
|
||||
position: relative;
|
||||
padding: 40px 0;
|
||||
background: #131313;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.contact #contact:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
background: linear-gradient(45deg, #ffd800, #ff5520, #750cf2, #0cbcf2);
|
||||
z-index: -1;
|
||||
}
|
||||
.container ul li:hover::before {
|
||||
background-color: aqua;
|
||||
|
||||
.contact #contact:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(45deg, #ffd800, #ff5520, #750cf2, #0cbcf2);
|
||||
z-index: -2;
|
||||
-webkit-filter: blur(40px);
|
||||
filter: blur(40px);
|
||||
}
|
||||
|
||||
.contact #contact h1 {
|
||||
margin: 0 0 15px;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
.contact #contact fieldset {
|
||||
border: none !important;
|
||||
margin: 0 0 10px;
|
||||
min-width: 100%;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contact #contact input, .contact #contact textarea {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: #d4d4d4;
|
||||
border-color: #d4d4d4;
|
||||
width: 100%;
|
||||
margin: 0 0 5px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.contact #contact input:last-child, .contact #contact textarea:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.contact #contact input::-webkit-input-placeholder, .contact #contact textarea::-webkit-input-placeholder {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.contact #contact input:-ms-input-placeholder, .contact #contact textarea:-ms-input-placeholder {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.contact #contact input::-ms-input-placeholder, .contact #contact textarea::-ms-input-placeholder {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.contact #contact input::placeholder, .contact #contact textarea::placeholder {
|
||||
color: #d4d4d4;
|
||||
}
|
||||
|
||||
.contact #contact textarea {
|
||||
height: 100px;
|
||||
max-width: 100%;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.contact #contact button {
|
||||
color: #131313;
|
||||
background: #d4d4d4;
|
||||
width: 100%;
|
||||
padding: 10px 20px;
|
||||
text-transform: lowercase;
|
||||
font-family: "Poppins", sans-serif;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.contact #contact .alternative {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: #747474;
|
||||
}
|
||||
|
||||
.contact #contact .alternative a {
|
||||
color: #747474;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: relative;
|
||||
margin-top: 5%;
|
||||
height: 10vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
footer .footer {
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
color: #d4d4d4;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
footer .footer .columns {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
footer .footer .columns .logo {
|
||||
margin: auto 0;
|
||||
color: #d4d4d4;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
footer .footer .columns .logo span {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
footer .footer .columns ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
footer .footer .columns ul li {
|
||||
color: #868686;
|
||||
}
|
||||
|
||||
footer .footer .columns ul li:first-child {
|
||||
font-size: 1.4em;
|
||||
padding: 5px 0;
|
||||
color: #939393;
|
||||
}
|
||||
|
||||
footer .footer .copyright {
|
||||
color: #797979;
|
||||
text-align: center;
|
||||
font-size: 0.9em;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
footer .footer .copyright a {
|
||||
color: inherit;
|
||||
}
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
|
|
@ -4,8 +4,9 @@ $dark: #131313
|
|||
$gray: #747474
|
||||
$light: #d4d4d4
|
||||
|
||||
// fonts
|
||||
$gradient-width: -5px
|
||||
|
||||
// fonts
|
||||
|
||||
@font-face
|
||||
font-family: 'Poppins'
|
||||
|
|
@ -17,12 +18,18 @@ $light: #d4d4d4
|
|||
|
||||
@font-face
|
||||
font-family: 'Astro'
|
||||
src: url('fonts/astro.ttf')
|
||||
src: url('fonts/Astro/astro.ttf')
|
||||
|
||||
@font-face
|
||||
font-family: 'Garamond'
|
||||
src: url('fonts/Garamond/EBGaramond-Regular.ttf')
|
||||
|
||||
$hero-stack: 'Astro', sans-serif
|
||||
$title-stack: 'Poppins', sans-serif
|
||||
$subtitle-stack: 'Open Sans', sans-serif
|
||||
$body-stack: 'Poppins', sans-serif
|
||||
$serif-title-stack: 'Garamond', serif
|
||||
$serif-stack: serif
|
||||
|
||||
// mobile
|
||||
$mobile-width: 768px
|
||||
|
|
@ -39,15 +46,18 @@ $mobile-width: 768px
|
|||
margin: 0px
|
||||
padding: 0px
|
||||
box-sizing: border-box
|
||||
overflow-x: hidden
|
||||
background-color: $dark
|
||||
|
||||
.nav-wrapper
|
||||
body
|
||||
overflow-x: hidden
|
||||
|
||||
.nav
|
||||
position: fixed
|
||||
width: 100%
|
||||
width: 100vw
|
||||
top: 0
|
||||
z-index: 999
|
||||
|
||||
|
||||
nav
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
|
|
@ -73,6 +83,9 @@ nav
|
|||
li
|
||||
list-style: none
|
||||
|
||||
span
|
||||
display: none
|
||||
|
||||
a
|
||||
font-family: $subtitle-stack
|
||||
color: $light
|
||||
|
|
@ -83,10 +96,78 @@ nav
|
|||
&:hover
|
||||
color: white
|
||||
|
||||
.nav-active
|
||||
transform: translateX(0%) !important
|
||||
|
||||
.burger
|
||||
display: none
|
||||
|
||||
div
|
||||
width: 25px
|
||||
height: 3px
|
||||
background-color: $light
|
||||
margin: 5px
|
||||
|
||||
transition: all 0.3s ease
|
||||
|
||||
@include mobile
|
||||
justify-content: space-between
|
||||
padding: 20px
|
||||
|
||||
.logo
|
||||
img
|
||||
width: 28px
|
||||
height: 28px
|
||||
|
||||
span
|
||||
display: none
|
||||
|
||||
|
||||
ul
|
||||
z-index: 1
|
||||
transform: translateX(100%)
|
||||
position: absolute
|
||||
right: 0%
|
||||
top: 8vh
|
||||
height: 30vh
|
||||
width: 100% !important
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: center
|
||||
background-color: $dark
|
||||
transition: transform 0.5s ease-in
|
||||
border-bottom: 3px solid $light
|
||||
|
||||
span
|
||||
display: block
|
||||
color: $light
|
||||
font-weight: bold
|
||||
text-transform: uppercase
|
||||
letter-spacing: 3px
|
||||
font-size: 1.75em
|
||||
|
||||
li a
|
||||
color: $light !important
|
||||
font-size: 1.2em
|
||||
font-weight: normal
|
||||
|
||||
.burger
|
||||
display: block !important
|
||||
|
||||
&.toggle
|
||||
.line1
|
||||
transform: rotate(-45deg) translate(-5px, 6px)
|
||||
|
||||
.line2
|
||||
opacity: 0
|
||||
|
||||
.line3
|
||||
transform: rotate(45deg) translate(-5px, -6px)
|
||||
|
||||
.hero
|
||||
color: $light
|
||||
position: relative
|
||||
width: 100%
|
||||
width: 100vw
|
||||
height: 100%
|
||||
|
||||
#hero
|
||||
|
|
@ -100,7 +181,7 @@ nav
|
|||
font-family: $hero-stack
|
||||
text-align: left
|
||||
font-size: 8em
|
||||
padding: 0.5em
|
||||
padding: 0.5em 0.5em 0
|
||||
background: -webkit-linear-gradient(#eee 70%, #333 100%)
|
||||
-webkit-background-clip: text
|
||||
-webkit-text-fill-color: transparent
|
||||
|
|
@ -111,8 +192,6 @@ nav
|
|||
font-size: 2em
|
||||
background-color: transparent
|
||||
|
||||
canvas
|
||||
z-index: 999
|
||||
|
||||
.about
|
||||
position: relative
|
||||
|
|
@ -121,6 +200,9 @@ nav
|
|||
background-color: transparent
|
||||
text-align: center
|
||||
|
||||
#about
|
||||
position: absolute
|
||||
|
||||
h1
|
||||
font-size: 4em
|
||||
font-family: $subtitle-stack
|
||||
|
|
@ -144,145 +226,117 @@ nav
|
|||
text-decoration: none
|
||||
|
||||
div canvas
|
||||
margin-top: -20%
|
||||
z-index: -1
|
||||
margin: -5% 0
|
||||
|
||||
.timeline
|
||||
position: flex
|
||||
.founders
|
||||
position: relative
|
||||
display: flex
|
||||
height: auto
|
||||
color: $light
|
||||
width: 100%
|
||||
height: 100vh
|
||||
align-items: center
|
||||
justify-content: center
|
||||
|
||||
// .container
|
||||
// width: 80%
|
||||
// height: auto
|
||||
// max-width: 800px
|
||||
// margin: 0 auto
|
||||
// position: relative
|
||||
// overflow-x: visible
|
||||
.profile
|
||||
flex: 1 1 0
|
||||
margin: 0 auto
|
||||
text-align: center
|
||||
|
||||
// ul
|
||||
// list-style: none
|
||||
img
|
||||
width: 200px
|
||||
height: 200px
|
||||
background-color: #ffd1dc
|
||||
border-radius: 50%
|
||||
|
||||
// li
|
||||
// padding: 20px
|
||||
// background-color: $gray
|
||||
// color: white
|
||||
// border-radius: 10px
|
||||
// margin-bottom: 20px
|
||||
h1
|
||||
font-family: $title-stack
|
||||
font-size: 1.6em
|
||||
margin-top: 0.3em
|
||||
|
||||
// &:last-child
|
||||
// margin-bottom: 0
|
||||
h2
|
||||
font-family: $title-stack
|
||||
font-weight: normal
|
||||
font-size: 1em
|
||||
|
||||
// .content
|
||||
// h1
|
||||
// font-weight: bold
|
||||
// font-size: 25px
|
||||
// line-height: 30px
|
||||
// margin-bottom: 10px
|
||||
p
|
||||
font-family: sans-serif
|
||||
width: 60%
|
||||
margin: 0 auto
|
||||
margin-top: 0.5em
|
||||
|
||||
// p
|
||||
// font-weight: normal
|
||||
// font-size: 16px
|
||||
// line-height: 30px
|
||||
a
|
||||
text-decoration: none
|
||||
color: #11c1e0
|
||||
|
||||
// .date
|
||||
// font-weight: normal
|
||||
// font-size: 12px
|
||||
// margin-bottom: 10px
|
||||
// letter-spacing: 2px
|
||||
.caption
|
||||
flex: 1.5 1 0
|
||||
text-align: center
|
||||
|
||||
// @include desktop
|
||||
// &:before
|
||||
// content: ""
|
||||
// position: absolute
|
||||
// top: 0
|
||||
// left: 50%
|
||||
// transform: translateX(-50%)
|
||||
// width: 2px
|
||||
// height: 100%
|
||||
// background-color: $gray
|
||||
h1
|
||||
font-family: $title-stack
|
||||
font-size: 5em
|
||||
white-space: nowrap
|
||||
|
||||
// ul li
|
||||
// width: 50%
|
||||
// position: relative
|
||||
// margin-bottom: 50px
|
||||
p
|
||||
font-family: $subtitle-stack
|
||||
|
||||
// &:nth-child(odd)
|
||||
// float: left
|
||||
// clear: right
|
||||
// transform: translateX(-30%)
|
||||
// border-radius: 20px 0 20px 20px
|
||||
|
||||
// &::before
|
||||
// transform: translate(50%, -50%)
|
||||
// right: -30px
|
||||
|
||||
// &:nth-child(even)
|
||||
// float: right
|
||||
// clear: left
|
||||
// transform: translateX(30%)
|
||||
// border-radius: 0 20px 20px 20px
|
||||
|
||||
// &::before
|
||||
// transform: translate(-50%, -50%)
|
||||
// right: -30px
|
||||
|
||||
// &::before
|
||||
// content: ""
|
||||
// position: absolute
|
||||
// height: 20px
|
||||
// width: 20px
|
||||
// border-radius: 50%
|
||||
// background-color: $gray
|
||||
// top: 0px
|
||||
|
||||
// .date
|
||||
// position: absolute
|
||||
// top: -30px
|
||||
|
||||
.container
|
||||
width: 80%
|
||||
.timeline
|
||||
display: flex
|
||||
flex-direction: column
|
||||
height: auto
|
||||
color: $light
|
||||
align-items: center
|
||||
justify-content: center
|
||||
margin-bottom: 5%
|
||||
|
||||
.header
|
||||
margin-bottom: 2%
|
||||
font-family: $title-stack
|
||||
font-size: 4em
|
||||
|
||||
|
||||
#timeline
|
||||
max-width: 800px
|
||||
margin: 0 auto
|
||||
margin-bottom: 2%
|
||||
position: relative
|
||||
|
||||
|
||||
.container ul
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
.container ul li
|
||||
li
|
||||
border: 8px solid $gray
|
||||
padding: 20px
|
||||
background-color: #1e1f22
|
||||
color: white
|
||||
border-radius: 10px
|
||||
margin-bottom: 20px
|
||||
|
||||
.container ul li:last-child
|
||||
&:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
.content h1
|
||||
font-weight: 500
|
||||
.content
|
||||
|
||||
h1
|
||||
font-family: $subtitle-stack
|
||||
font-weight: bold
|
||||
font-size: 25px
|
||||
line-height: 30px
|
||||
margin-bottom: 10px
|
||||
|
||||
.content p
|
||||
p
|
||||
font-family: $body-stack
|
||||
font-weight: normal
|
||||
font-size: 16px
|
||||
line-height: 30px
|
||||
font-weight: 300
|
||||
|
||||
.content .date
|
||||
.date
|
||||
font-family: monospace
|
||||
font-weight: normal
|
||||
font-size: 12px
|
||||
font-weight: 300
|
||||
margin-bottom: 10px
|
||||
letter-spacing: 2px
|
||||
|
||||
@media only screen and (min-width: 768px)
|
||||
.container:before
|
||||
@include desktop
|
||||
&:before
|
||||
content: ""
|
||||
position: absolute
|
||||
top: 0
|
||||
|
|
@ -290,49 +344,181 @@ nav
|
|||
transform: translateX(-50%)
|
||||
width: 2px
|
||||
height: 100%
|
||||
background-color: $gray
|
||||
background-color: $light
|
||||
|
||||
.container ul li
|
||||
.date
|
||||
position: absolute
|
||||
top: -30px
|
||||
|
||||
ul li
|
||||
width: 50%
|
||||
position: relative
|
||||
margin-bottom: 50px
|
||||
|
||||
.container ul li:nth-child(odd)
|
||||
&:nth-child(odd)
|
||||
float: left
|
||||
clear: right
|
||||
transform: translateX(-30px)
|
||||
border-radius: 20px 0px 20px 20px
|
||||
|
||||
.container ul li:nth-child(even)
|
||||
&::before
|
||||
transform: translate(50%, -50%)
|
||||
right: -38px
|
||||
|
||||
&:nth-child(even)
|
||||
float: right
|
||||
clear: left
|
||||
transform: translateX(30px)
|
||||
border-radius: 0px 20px 20px 20px
|
||||
|
||||
.container ul li::before
|
||||
&::before
|
||||
transform: translate(-50%, -50%)
|
||||
left: -38px
|
||||
|
||||
&::before
|
||||
content: ""
|
||||
position: absolute
|
||||
height: 20px
|
||||
width: 20px
|
||||
border-radius: 50%
|
||||
background-color: pink !important
|
||||
color: pink !important
|
||||
z-index: 999
|
||||
top: 0px
|
||||
background-color: $gray
|
||||
top: 0
|
||||
|
||||
.container ul li:nth-child(odd)::before
|
||||
transform: translate(50%, -50%)
|
||||
right: -30px
|
||||
.contact
|
||||
position: relative
|
||||
display: flex
|
||||
justify-content: center
|
||||
width: 100vw
|
||||
height: auto
|
||||
color: $light
|
||||
background-color: transparent
|
||||
z-index: 0
|
||||
margin-bottom: 50px
|
||||
|
||||
.container ul li:nth-child(even)::before
|
||||
transform: translate(-50%, -50%)
|
||||
left: -30px
|
||||
#contact
|
||||
position: relative
|
||||
padding: 40px 0
|
||||
background: $dark
|
||||
|
||||
.content .date
|
||||
width: 100%
|
||||
max-width: 500px
|
||||
padding: 25px
|
||||
|
||||
&:before
|
||||
content: ''
|
||||
position: absolute
|
||||
top: -30px
|
||||
top: $gradient-width
|
||||
left: $gradient-width
|
||||
right: $gradient-width
|
||||
bottom: $gradient-width
|
||||
background: linear-gradient(45deg, #ffd800, #ff5520, #750cf2, #0cbcf2)
|
||||
z-index: -1
|
||||
|
||||
.container ul li:hover::before
|
||||
background-color: aqua
|
||||
&:after
|
||||
content: ''
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
right: 0
|
||||
bottom: 0
|
||||
background: linear-gradient(45deg, #ffd800, #ff5520, #750cf2, #0cbcf2)
|
||||
z-index: -2
|
||||
filter: blur(40px)
|
||||
|
||||
h1
|
||||
margin: 0 0 15px
|
||||
font-family: $title-stack
|
||||
font-size: 3em
|
||||
|
||||
fieldset
|
||||
border: none !important
|
||||
margin: 0 0 10px
|
||||
min-width: 100%
|
||||
padding: 0
|
||||
width: 100%
|
||||
|
||||
input, textarea
|
||||
font-family: $subtitle-stack
|
||||
color: $light
|
||||
border-color: $light
|
||||
width: 100%
|
||||
margin: 0 0 5px
|
||||
padding: 10px
|
||||
|
||||
&:last-child
|
||||
margin: 0
|
||||
|
||||
&::placeholder
|
||||
color: $light
|
||||
|
||||
textarea
|
||||
height: 100px
|
||||
max-width: 100%
|
||||
resize: none
|
||||
|
||||
button
|
||||
color: $dark
|
||||
background: $light
|
||||
width: 100%
|
||||
padding: 10px 20px
|
||||
text-transform: lowercase
|
||||
font-family: $title-stack
|
||||
font-weight: bold
|
||||
border: none
|
||||
|
||||
.alternative
|
||||
font-family: $subtitle-stack
|
||||
color: $gray
|
||||
|
||||
a
|
||||
color: $gray
|
||||
|
||||
footer
|
||||
position: relative
|
||||
margin-top: 5%
|
||||
height: 10vh
|
||||
width: 100%
|
||||
|
||||
.footer
|
||||
width: 50%
|
||||
margin: 0 auto
|
||||
display: flex
|
||||
flex-direction: column
|
||||
color: $light
|
||||
font-family: $subtitle-stack
|
||||
|
||||
.columns
|
||||
display: flex
|
||||
flex: 1
|
||||
flex-direction: row
|
||||
justify-content: space-around
|
||||
|
||||
.logo
|
||||
margin: auto 0
|
||||
color: $light
|
||||
text-transform: uppercase
|
||||
letter-spacing: 3px
|
||||
font-size: 1.2em
|
||||
|
||||
span
|
||||
padding-left: 10px
|
||||
|
||||
ul
|
||||
list-style: none
|
||||
|
||||
li
|
||||
color: lighten($dark, 45%)
|
||||
|
||||
&:first-child
|
||||
font-size: 1.4em
|
||||
padding: 5px 0
|
||||
color: lighten($dark, 50%)
|
||||
|
||||
.copyright
|
||||
color: lighten($dark, 40%)
|
||||
text-align: center
|
||||
font-size: 0.9em
|
||||
margin: 20px 0
|
||||
|
||||
a
|
||||
color: inherit
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
<svg version="1.1" width="24" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 512 512" style="enable-background:new 0 0 0 0;" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
3
public/css/res/lock.svg
Normal file
3
public/css/res/lock.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg color="#d4d4d4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
|
||||
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 353 B |
3
public/css/res/plus.svg
Normal file
3
public/css/res/plus.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg color="#d4d4d4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
|
||||
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 261 B |
|
|
@ -18,3 +18,15 @@ loader.load("./js/scenes/brain.json", function (text) {
|
|||
player.setSize(window.innerWidth, window.innerHeight);
|
||||
});
|
||||
});
|
||||
|
||||
const nav = () => {
|
||||
const burger = document.querySelector(".burger");
|
||||
const nav = document.querySelector("nav ul");
|
||||
|
||||
burger.addEventListener("click", () => {
|
||||
nav.classList.toggle("nav-active");
|
||||
burger.classList.toggle("toggle");
|
||||
});
|
||||
};
|
||||
|
||||
nav();
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
import * as THREE from "../node_modules/three/build/three.module.js";
|
||||
|
||||
const SEPARATION = 100,
|
||||
AMOUNTX = 50,
|
||||
AMOUNTY = 50;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user