mirror of
https://github.com/Rushilwiz/neurosecure.git
synced 2025-04-06 13:20:18 -04:00
feat: refactored structure, added timeline wip
This commit is contained in:
parent
bb7138ff38
commit
d17e2d8307
133
css/index.css
133
css/index.css
|
|
@ -1,133 +0,0 @@
|
|||
@import url("https://fonts.googleapis.com/css2?family=Lora&family=Poppins:wght@400700&display=swap");
|
||||
@font-face {
|
||||
font-family: "Poppins";
|
||||
src: url("fonts/Poppins/Poppins-Regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Open Sans";
|
||||
src: url("fonts/Open_Sans/OpenSans-Regular.ttf");
|
||||
}
|
||||
@font-face {
|
||||
font-family: "Astro";
|
||||
src: url("fonts/astro.ttf");
|
||||
}
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
background-color: #131313;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
min-height: 8vh;
|
||||
background-color: #131313;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
nav .logo {
|
||||
color: #d4d4d4;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
font-size: 1.75em;
|
||||
}
|
||||
nav .logo span {
|
||||
padding-left: 20px;
|
||||
}
|
||||
nav ul {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 30%;
|
||||
}
|
||||
nav ul li {
|
||||
list-style: none;
|
||||
}
|
||||
nav ul a {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: #d4d4d4;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
nav ul a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
color: #d4d4d4;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#hero {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 20%;
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
#hero h1 {
|
||||
font-family: "Astro", sans-serif;
|
||||
text-align: left;
|
||||
font-size: 8em;
|
||||
padding: 0.5em;
|
||||
background: -webkit-linear-gradient(#eee 70%, #333 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
#hero h3 {
|
||||
font-family: "Open Sans", serif;
|
||||
text-align: left;
|
||||
font-size: 2em;
|
||||
background-color: transparent;
|
||||
}
|
||||
#hero canvas {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
#about {
|
||||
color: #d4d4d4;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
}
|
||||
#about h1 {
|
||||
font-size: 4em;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
#about h4 {
|
||||
font-size: 1em;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
margin-left: 20%;
|
||||
width: 60%;
|
||||
}
|
||||
#about button {
|
||||
padding: 10px 20px;
|
||||
border: 3px solid #d4d4d4;
|
||||
text-transform: uppercase;
|
||||
margin-top: 30px;
|
||||
border-radius: 20px;
|
||||
font-family: "Astro", sans-serif;
|
||||
}
|
||||
#about button a {
|
||||
color: #d4d4d4;
|
||||
text-decoration: none;
|
||||
}
|
||||
#about div canvas {
|
||||
margin-top: -20%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
138
css/index.sass
138
css/index.sass
|
|
@ -1,138 +0,0 @@
|
|||
// colors
|
||||
|
||||
$dark: #131313
|
||||
$light: #d4d4d4
|
||||
|
||||
// fonts
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Lora&family=Poppins:wght@400700&display=swap')
|
||||
|
||||
@font-face
|
||||
font-family: 'Poppins'
|
||||
src: url('fonts/Poppins/Poppins-Regular.ttf')
|
||||
|
||||
@font-face
|
||||
font-family: 'Open Sans'
|
||||
src: url('fonts/Open_Sans/OpenSans-Regular.ttf')
|
||||
|
||||
@font-face
|
||||
font-family: 'Astro'
|
||||
src: url('fonts/astro.ttf')
|
||||
|
||||
$hero-stack: 'Astro', sans-serif
|
||||
$title-stack: 'Poppins', sans-serif
|
||||
$subtitle-stack: 'Open Sans', sans-serif
|
||||
$body-stack: 'Poppins', sans-serif
|
||||
|
||||
*
|
||||
margin: 0px
|
||||
padding: 0px
|
||||
box-sizing: border-box
|
||||
overflow-x: hidden
|
||||
background-color: $dark
|
||||
|
||||
.nav-wrapper
|
||||
position: fixed
|
||||
width: 100%
|
||||
top: 0
|
||||
z-index: 999
|
||||
|
||||
nav
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
min-height: 8vh
|
||||
background-color: $dark
|
||||
font-family: $title-stack
|
||||
|
||||
.logo
|
||||
color: $light
|
||||
text-transform: uppercase
|
||||
letter-spacing: 3px
|
||||
font-size: 1.75em
|
||||
|
||||
span
|
||||
padding-left: 20px
|
||||
|
||||
ul
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
width: 30%
|
||||
|
||||
li
|
||||
list-style: none
|
||||
|
||||
a
|
||||
font-family: $subtitle-stack
|
||||
color: $light
|
||||
text-decoration: none
|
||||
font-weight: bold
|
||||
font-size: 1.1em
|
||||
|
||||
&:hover
|
||||
color: white
|
||||
|
||||
.hero
|
||||
color: $light
|
||||
position: relative
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
#hero
|
||||
position: absolute
|
||||
left: 10%
|
||||
top: 20%
|
||||
background-color: transparent
|
||||
z-index: 1
|
||||
|
||||
h1
|
||||
font-family: $hero-stack
|
||||
text-align: left
|
||||
font-size: 8em
|
||||
padding: 0.5em
|
||||
background: -webkit-linear-gradient(#eee 70%, #333 100%)
|
||||
-webkit-background-clip: text
|
||||
-webkit-text-fill-color: transparent
|
||||
|
||||
h3
|
||||
font-family: "Open Sans", serif
|
||||
text-align: left
|
||||
font-size: 2em
|
||||
background-color: transparent
|
||||
|
||||
canvas
|
||||
z-index: 999
|
||||
|
||||
#about
|
||||
color: $light
|
||||
position: absolute
|
||||
overflow: hidden
|
||||
height: 100%
|
||||
background-color: transparent
|
||||
text-align: center
|
||||
|
||||
h1
|
||||
font-size: 4em
|
||||
font-family: $subtitle-stack
|
||||
|
||||
h4
|
||||
font-size: 1em
|
||||
font-family: $subtitle-stack
|
||||
margin-left: 20%
|
||||
width: 60%
|
||||
|
||||
button
|
||||
padding: 10px 20px
|
||||
border: 3px solid $light
|
||||
text-transform: uppercase
|
||||
margin-top: 30px
|
||||
border-radius: 20px
|
||||
font-family: $hero-stack
|
||||
|
||||
a
|
||||
color: $light
|
||||
text-decoration: none
|
||||
|
||||
div canvas
|
||||
margin-top: -20%
|
||||
z-index: -1
|
||||
48
index.html
48
index.html
|
|
@ -5,7 +5,7 @@
|
|||
<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">
|
||||
|
|
@ -41,7 +41,6 @@
|
|||
</div>
|
||||
</section>
|
||||
<section class="about">
|
||||
<div id="about">
|
||||
<h1>
|
||||
The future of authentication.
|
||||
</h1>
|
||||
|
|
@ -49,6 +48,47 @@
|
|||
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>
|
||||
</section>
|
||||
<section class="timeline">
|
||||
<div class="container">
|
||||
<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.
|
||||
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 2</h1>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
</body>
|
||||
|
|
@ -67,6 +107,6 @@
|
|||
gl_FragColor = vec4( color, 1.0 );
|
||||
}
|
||||
</script>
|
||||
<script src="js/app.js" type="module"></script>
|
||||
<script src="js/particles.js" type="module"></script>
|
||||
<script src="/js/app.js" type="module"></script>
|
||||
<script src="/js/particles.js" type="module"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
"serve": "vite preview"
|
||||
},
|
||||
"devDependencies": {
|
||||
"sass": "^1.38.2",
|
||||
"vite": "^2.4.4"
|
||||
},
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -5,8 +5,18 @@
|
|||
<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>
|
||||
<script src="js/particles.js" type="module"></script>
|
||||
<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>
|
||||
274
public/css/index.css
Normal file
274
public/css/index.css
Normal file
|
|
@ -0,0 +1,274 @@
|
|||
@font-face {
|
||||
font-family: 'Poppins';
|
||||
src: url("fonts/Poppins/Poppins-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
src: url("fonts/Open_Sans/OpenSans-Regular.ttf");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Astro';
|
||||
src: url("fonts/astro.ttf");
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
background-color: #131313;
|
||||
}
|
||||
|
||||
.nav-wrapper {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
min-height: 8vh;
|
||||
background-color: #131313;
|
||||
font-family: "Poppins", sans-serif;
|
||||
}
|
||||
|
||||
nav .logo {
|
||||
color: #d4d4d4;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 3px;
|
||||
font-size: 1.75em;
|
||||
}
|
||||
|
||||
nav .logo span {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-pack: distribute;
|
||||
justify-content: space-around;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
nav ul a {
|
||||
font-family: "Open Sans", sans-serif;
|
||||
color: #d4d4d4;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
nav ul a:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero {
|
||||
color: #d4d4d4;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#hero {
|
||||
position: absolute;
|
||||
left: 10%;
|
||||
top: 20%;
|
||||
background-color: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#hero h1 {
|
||||
font-family: "Astro", sans-serif;
|
||||
text-align: left;
|
||||
font-size: 8em;
|
||||
padding: 0.5em;
|
||||
background: -webkit-linear-gradient(#eee 70%, #333 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
#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;
|
||||
overflow: hidden;
|
||||
background-color: transparent;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about h1 {
|
||||
font-size: 4em;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
}
|
||||
|
||||
.about h4 {
|
||||
font-size: 1em;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
margin-left: 20%;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
.about button {
|
||||
padding: 10px 20px;
|
||||
border: 3px solid #d4d4d4;
|
||||
text-transform: uppercase;
|
||||
margin-top: 30px;
|
||||
border-radius: 20px;
|
||||
font-family: "Astro", sans-serif;
|
||||
}
|
||||
|
||||
.about button a {
|
||||
color: #d4d4d4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.about div canvas {
|
||||
margin-top: -20%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: flex;
|
||||
color: #d4d4d4;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 80%;
|
||||
height: auto;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.container ul li {
|
||||
padding: 20px;
|
||||
background-color: #1e1f22;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.container ul li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.content h1 {
|
||||
font-weight: 500;
|
||||
font-size: 25px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.content p {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.content .date {
|
||||
font-size: 12px;
|
||||
font-weight: 300;
|
||||
margin-bottom: 10px;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.container:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
-webkit-transform: translateX(-50%);
|
||||
transform: translateX(-50%);
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background-color: #747474;
|
||||
}
|
||||
.container ul li {
|
||||
width: 50%;
|
||||
position: relative;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.container 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) {
|
||||
float: right;
|
||||
clear: left;
|
||||
-webkit-transform: translateX(30px);
|
||||
transform: translateX(30px);
|
||||
border-radius: 0px 20px 20px 20px;
|
||||
}
|
||||
.container 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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.content .date {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
}
|
||||
.container ul li:hover::before {
|
||||
background-color: aqua;
|
||||
}
|
||||
}
|
||||
/*# sourceMappingURL=index.css.map */
|
||||
338
public/css/index.sass
Normal file
338
public/css/index.sass
Normal file
|
|
@ -0,0 +1,338 @@
|
|||
// colors
|
||||
|
||||
$dark: #131313
|
||||
$gray: #747474
|
||||
$light: #d4d4d4
|
||||
|
||||
// fonts
|
||||
|
||||
|
||||
@font-face
|
||||
font-family: 'Poppins'
|
||||
src: url('fonts/Poppins/Poppins-Regular.ttf')
|
||||
|
||||
@font-face
|
||||
font-family: 'Open Sans'
|
||||
src: url('fonts/Open_Sans/OpenSans-Regular.ttf')
|
||||
|
||||
@font-face
|
||||
font-family: 'Astro'
|
||||
src: url('fonts/astro.ttf')
|
||||
|
||||
$hero-stack: 'Astro', sans-serif
|
||||
$title-stack: 'Poppins', sans-serif
|
||||
$subtitle-stack: 'Open Sans', sans-serif
|
||||
$body-stack: 'Poppins', sans-serif
|
||||
|
||||
// mobile
|
||||
$mobile-width: 768px
|
||||
|
||||
@mixin mobile
|
||||
@media (max-width: #{$mobile-width})
|
||||
@content
|
||||
|
||||
@mixin desktop
|
||||
@media (min-width: #{$mobile-width})
|
||||
@content
|
||||
|
||||
*
|
||||
margin: 0px
|
||||
padding: 0px
|
||||
box-sizing: border-box
|
||||
overflow-x: hidden
|
||||
background-color: $dark
|
||||
|
||||
.nav-wrapper
|
||||
position: fixed
|
||||
width: 100%
|
||||
top: 0
|
||||
z-index: 999
|
||||
|
||||
nav
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
align-items: center
|
||||
min-height: 8vh
|
||||
background-color: $dark
|
||||
font-family: $title-stack
|
||||
|
||||
.logo
|
||||
color: $light
|
||||
text-transform: uppercase
|
||||
letter-spacing: 3px
|
||||
font-size: 1.75em
|
||||
|
||||
span
|
||||
padding-left: 20px
|
||||
|
||||
ul
|
||||
display: flex
|
||||
justify-content: space-around
|
||||
width: 30%
|
||||
|
||||
li
|
||||
list-style: none
|
||||
|
||||
a
|
||||
font-family: $subtitle-stack
|
||||
color: $light
|
||||
text-decoration: none
|
||||
font-weight: bold
|
||||
font-size: 1.1em
|
||||
|
||||
&:hover
|
||||
color: white
|
||||
|
||||
.hero
|
||||
color: $light
|
||||
position: relative
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
||||
#hero
|
||||
position: absolute
|
||||
left: 10%
|
||||
top: 20%
|
||||
background-color: transparent
|
||||
z-index: 1
|
||||
|
||||
h1
|
||||
font-family: $hero-stack
|
||||
text-align: left
|
||||
font-size: 8em
|
||||
padding: 0.5em
|
||||
background: -webkit-linear-gradient(#eee 70%, #333 100%)
|
||||
-webkit-background-clip: text
|
||||
-webkit-text-fill-color: transparent
|
||||
|
||||
h3
|
||||
font-family: "Open Sans", serif
|
||||
text-align: left
|
||||
font-size: 2em
|
||||
background-color: transparent
|
||||
|
||||
canvas
|
||||
z-index: 999
|
||||
|
||||
.about
|
||||
position: relative
|
||||
color: $light
|
||||
overflow: hidden
|
||||
background-color: transparent
|
||||
text-align: center
|
||||
|
||||
h1
|
||||
font-size: 4em
|
||||
font-family: $subtitle-stack
|
||||
|
||||
h4
|
||||
font-size: 1em
|
||||
font-family: $subtitle-stack
|
||||
margin-left: 20%
|
||||
width: 60%
|
||||
|
||||
button
|
||||
padding: 10px 20px
|
||||
border: 3px solid $light
|
||||
text-transform: uppercase
|
||||
margin-top: 30px
|
||||
border-radius: 20px
|
||||
font-family: $hero-stack
|
||||
|
||||
a
|
||||
color: $light
|
||||
text-decoration: none
|
||||
|
||||
div canvas
|
||||
margin-top: -20%
|
||||
z-index: -1
|
||||
|
||||
.timeline
|
||||
position: flex
|
||||
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
|
||||
|
||||
// ul
|
||||
// list-style: none
|
||||
|
||||
// li
|
||||
// padding: 20px
|
||||
// background-color: $gray
|
||||
// color: white
|
||||
// border-radius: 10px
|
||||
// margin-bottom: 20px
|
||||
|
||||
// &:last-child
|
||||
// margin-bottom: 0
|
||||
|
||||
// .content
|
||||
// h1
|
||||
// font-weight: bold
|
||||
// font-size: 25px
|
||||
// line-height: 30px
|
||||
// margin-bottom: 10px
|
||||
|
||||
// p
|
||||
// font-weight: normal
|
||||
// font-size: 16px
|
||||
// line-height: 30px
|
||||
|
||||
// .date
|
||||
// font-weight: normal
|
||||
// font-size: 12px
|
||||
// margin-bottom: 10px
|
||||
// letter-spacing: 2px
|
||||
|
||||
// @include desktop
|
||||
// &:before
|
||||
// content: ""
|
||||
// position: absolute
|
||||
// top: 0
|
||||
// left: 50%
|
||||
// transform: translateX(-50%)
|
||||
// width: 2px
|
||||
// height: 100%
|
||||
// background-color: $gray
|
||||
|
||||
// ul li
|
||||
// width: 50%
|
||||
// position: relative
|
||||
// margin-bottom: 50px
|
||||
|
||||
// &: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%
|
||||
height: auto
|
||||
max-width: 800px
|
||||
margin: 0 auto
|
||||
position: relative
|
||||
|
||||
|
||||
.container ul
|
||||
list-style: none
|
||||
|
||||
.container ul li
|
||||
padding: 20px
|
||||
background-color: #1e1f22
|
||||
color: white
|
||||
border-radius: 10px
|
||||
margin-bottom: 20px
|
||||
|
||||
.container ul li:last-child
|
||||
margin-bottom: 0
|
||||
|
||||
.content h1
|
||||
font-weight: 500
|
||||
font-size: 25px
|
||||
line-height: 30px
|
||||
margin-bottom: 10px
|
||||
|
||||
.content p
|
||||
font-size: 16px
|
||||
line-height: 30px
|
||||
font-weight: 300
|
||||
|
||||
.content .date
|
||||
font-size: 12px
|
||||
font-weight: 300
|
||||
margin-bottom: 10px
|
||||
letter-spacing: 2px
|
||||
|
||||
@media only screen and (min-width: 768px)
|
||||
.container:before
|
||||
content: ""
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 50%
|
||||
transform: translateX(-50%)
|
||||
width: 2px
|
||||
height: 100%
|
||||
background-color: $gray
|
||||
|
||||
.container ul li
|
||||
width: 50%
|
||||
position: relative
|
||||
margin-bottom: 50px
|
||||
|
||||
.container ul li:nth-child(odd)
|
||||
float: left
|
||||
clear: right
|
||||
transform: translateX(-30px)
|
||||
border-radius: 20px 0px 20px 20px
|
||||
|
||||
.container ul li:nth-child(even)
|
||||
float: right
|
||||
clear: left
|
||||
transform: translateX(30px)
|
||||
border-radius: 0px 20px 20px 20px
|
||||
|
||||
.container 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
|
||||
|
||||
.container ul li:nth-child(odd)::before
|
||||
transform: translate(50%, -50%)
|
||||
right: -30px
|
||||
|
||||
.container ul li:nth-child(even)::before
|
||||
transform: translate(-50%, -50%)
|
||||
left: -30px
|
||||
|
||||
.content .date
|
||||
position: absolute
|
||||
top: -30px
|
||||
|
||||
.container ul li:hover::before
|
||||
background-color: aqua
|
||||
|
||||
|
||||
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
|
@ -1,4 +1,4 @@
|
|||
import * as THREE from "three";
|
||||
import * as THREE from "../node_modules/three/build/three.module.js";
|
||||
import { APP } from "./landing.js";
|
||||
|
||||
window.THREE = THREE; // Used by APP Scripts.
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
|
||||
import { OrbitControls } from "../node_modules/three/examples/jsm/controls/OrbitControls.js";
|
||||
|
||||
var APP = {
|
||||
Player: function () {
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
import * as THREE from "three";
|
||||
|
||||
import * as THREE from "../node_modules/three/build/three.module.js";
|
||||
|
||||
const SEPARATION = 100,
|
||||
AMOUNTX = 50,
|
||||
|
|
@ -11,16 +10,15 @@ let camera, scene, renderer;
|
|||
let particles,
|
||||
count = 0;
|
||||
|
||||
|
||||
let windowHalfX = window.innerWidth / 2;
|
||||
let windowHalfY = window.innerHeight / 4;
|
||||
let windowHalfY = window.innerHeight / 2;
|
||||
|
||||
init();
|
||||
animate();
|
||||
|
||||
function init() {
|
||||
container = document.createElement("div");
|
||||
const about = document.getElementById("about");
|
||||
const about = document.getElementsByClassName("about")[0];
|
||||
about.appendChild(container);
|
||||
|
||||
camera = new THREE.PerspectiveCamera(
|
||||
|
|
@ -79,14 +77,21 @@ function init() {
|
|||
|
||||
renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight/2);
|
||||
renderer.setSize(window.innerWidth, window.innerHeight / 2);
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
|
||||
container.style.touchAction = "none";
|
||||
|
||||
//
|
||||
|
||||
windowHalfX = window.innerWidth / 2;
|
||||
windowHalfY = window.innerHeight / 2;
|
||||
|
||||
camera.aspect = window.innerWidth / window.innerHeight;
|
||||
camera.updateProjectionMatrix();
|
||||
|
||||
renderer.setSize(window.innerWidth, window.innerHeight);
|
||||
|
||||
window.addEventListener("resize", onWindowResize);
|
||||
}
|
||||
|
||||
|
|
@ -104,7 +109,6 @@ function onWindowResize() {
|
|||
|
||||
function onPointerMove(event) {
|
||||
if (event.isPrimary === false) return;
|
||||
|
||||
}
|
||||
|
||||
//
|
||||
104
yarn.lock
104
yarn.lock
|
|
@ -2,6 +2,41 @@
|
|||
# yarn lockfile v1
|
||||
|
||||
|
||||
anymatch@~3.1.2:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
|
||||
integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
|
||||
dependencies:
|
||||
normalize-path "^3.0.0"
|
||||
picomatch "^2.0.4"
|
||||
|
||||
binary-extensions@^2.0.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
|
||||
integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
|
||||
|
||||
braces@~3.0.2:
|
||||
version "3.0.2"
|
||||
resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
|
||||
integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
|
||||
dependencies:
|
||||
fill-range "^7.0.1"
|
||||
|
||||
"chokidar@>=3.0.0 <4.0.0":
|
||||
version "3.5.2"
|
||||
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75"
|
||||
integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==
|
||||
dependencies:
|
||||
anymatch "~3.1.2"
|
||||
braces "~3.0.2"
|
||||
glob-parent "~5.1.2"
|
||||
is-binary-path "~2.1.0"
|
||||
is-glob "~4.0.1"
|
||||
normalize-path "~3.0.0"
|
||||
readdirp "~3.6.0"
|
||||
optionalDependencies:
|
||||
fsevents "~2.3.2"
|
||||
|
||||
colorette@^1.2.2:
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
|
||||
|
|
@ -12,6 +47,13 @@ esbuild@^0.12.8:
|
|||
resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.19.tgz#ab849766705a5093df5acd8ec2f6ba2159a38a6c"
|
||||
integrity sha512-5NuT1G6THW7l3fsSCDkcPepn24R0XtyPjKoqKHD8LfhqMXzCdz0mrS9HgO6hIhzVT7zt0T+JGbzCqF5AH8hS9w==
|
||||
|
||||
fill-range@^7.0.1:
|
||||
version "7.0.1"
|
||||
resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
|
||||
integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
|
||||
dependencies:
|
||||
to-regex-range "^5.0.1"
|
||||
|
||||
fsevents@~2.3.2:
|
||||
version "2.3.2"
|
||||
resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
|
||||
|
|
@ -22,6 +64,13 @@ function-bind@^1.1.1:
|
|||
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
|
||||
integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
|
||||
|
||||
glob-parent@~5.1.2:
|
||||
version "5.1.2"
|
||||
resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
|
||||
integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
|
||||
dependencies:
|
||||
is-glob "^4.0.1"
|
||||
|
||||
has@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
|
||||
|
|
@ -29,6 +78,13 @@ has@^1.0.3:
|
|||
dependencies:
|
||||
function-bind "^1.1.1"
|
||||
|
||||
is-binary-path@~2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
|
||||
integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
|
||||
dependencies:
|
||||
binary-extensions "^2.0.0"
|
||||
|
||||
is-core-module@^2.2.0:
|
||||
version "2.5.0"
|
||||
resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.5.0.tgz#f754843617c70bfd29b7bd87327400cda5c18491"
|
||||
|
|
@ -36,16 +92,43 @@ is-core-module@^2.2.0:
|
|||
dependencies:
|
||||
has "^1.0.3"
|
||||
|
||||
is-extglob@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
|
||||
integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
|
||||
|
||||
is-glob@^4.0.1, is-glob@~4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.1.tgz#7567dbe9f2f5e2467bc77ab83c4a29482407a5dc"
|
||||
integrity sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==
|
||||
dependencies:
|
||||
is-extglob "^2.1.1"
|
||||
|
||||
is-number@^7.0.0:
|
||||
version "7.0.0"
|
||||
resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
|
||||
integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
|
||||
|
||||
nanoid@^3.1.23:
|
||||
version "3.1.23"
|
||||
resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81"
|
||||
integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw==
|
||||
|
||||
normalize-path@^3.0.0, normalize-path@~3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
|
||||
integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
|
||||
|
||||
path-parse@^1.0.6:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
|
||||
integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
|
||||
|
||||
picomatch@^2.0.4, picomatch@^2.2.1:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972"
|
||||
integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==
|
||||
|
||||
postcss@^8.3.6:
|
||||
version "8.3.6"
|
||||
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.6.tgz#2730dd76a97969f37f53b9a6096197be311cc4ea"
|
||||
|
|
@ -55,6 +138,13 @@ postcss@^8.3.6:
|
|||
nanoid "^3.1.23"
|
||||
source-map-js "^0.6.2"
|
||||
|
||||
readdirp@~3.6.0:
|
||||
version "3.6.0"
|
||||
resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
|
||||
integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
|
||||
dependencies:
|
||||
picomatch "^2.2.1"
|
||||
|
||||
resolve@^1.20.0:
|
||||
version "1.20.0"
|
||||
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
|
||||
|
|
@ -70,6 +160,13 @@ rollup@^2.38.5:
|
|||
optionalDependencies:
|
||||
fsevents "~2.3.2"
|
||||
|
||||
sass@^1.38.2:
|
||||
version "1.38.2"
|
||||
resolved "https://registry.yarnpkg.com/sass/-/sass-1.38.2.tgz#970045d9966180002a8c8f3820fc114cddb42822"
|
||||
integrity sha512-Bz1fG6qiyF0FX6m/I+VxtdVKz1Dfmg/e9kfDy2PhWOkq3T384q2KxwIfP0fXpeI+EyyETdOauH+cRHQDFASllA==
|
||||
dependencies:
|
||||
chokidar ">=3.0.0 <4.0.0"
|
||||
|
||||
source-map-js@^0.6.2:
|
||||
version "0.6.2"
|
||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
|
||||
|
|
@ -80,6 +177,13 @@ three@^0.131.3:
|
|||
resolved "https://registry.yarnpkg.com/three/-/three-0.131.3.tgz#406fd210c603ca9154937ae3582996fbfd3cb716"
|
||||
integrity sha512-VkZAv8ZTJqiE/fyEmoWLxcNHImpVcjqW7RO0GzMu3tRpwO0KUvK9pjTmJzJcAbc51BOeB2G38zh80yjHTbP8gQ==
|
||||
|
||||
to-regex-range@^5.0.1:
|
||||
version "5.0.1"
|
||||
resolved "https://registry.yarnpkg.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
|
||||
integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
|
||||
dependencies:
|
||||
is-number "^7.0.0"
|
||||
|
||||
vite@^2.4.4:
|
||||
version "2.4.4"
|
||||
resolved "https://registry.yarnpkg.com/vite/-/vite-2.4.4.tgz#8c402a07ad45f168f6eb5428bead38f3e4363e47"
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user