diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..cf16e64 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +# prettier hates sass >:( +*.sass +*.css.map \ No newline at end of file diff --git a/index.html b/index.html index 7baf03f..552df4d 100644 --- a/index.html +++ b/index.html @@ -5,21 +5,17 @@ NeuroSecure - + -
+
-
-
-

- Neuro
Secure -

-

- A product to revolutionize the field of cybersecurity. -

+
+
+

Neuro
Secure

+

A product to revolutionize the field of cybersecurity.

-

- The future of authentication. -

+
+

The future of authentication.

- 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?

+
+
+
+
+ +

Leon Jia

+

NOVA Class of 2026

+

+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Unde, + quisquam magni rerum, beatae vel deleniti temporibus tempore voluptas. +

+
+
+

Meet the founders.

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque + reiciendis dolor vitae possimus tenetur ullam ratione accusamus. +

+
+
+ +

Anirudh Bansal

+

More impressive title

+

+ 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? +

+
-
+
+

Our timeline

+
+

  • 20th may, 2010

    Heading 1

    -

    Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consectetur tempora ab laudantium voluptatibus aut eos placeat - laborum, quibusdam exercitationem labore.

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consectetur tempora ab laudantium voluptatibus aut eos placeat + laborum, quibusdam exercitationem labore. +

  • 20th may, 2010

    Heading 2

    -

    Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, - quibusdam exercitationem labore.

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consectetur tempora ab laudantium voluptatibus aut eos placeat + laborum, quibusdam exercitationem labore. +

  • 20th may, 2010

    Heading 3

    -

    Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, - quibusdam exercitationem labore.

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consectetur tempora ab laudantium voluptatibus aut eos placeat + laborum, quibusdam exercitationem labore. +

  • 20th may, 2010

    Heading 4

    -

    Lorem ipsum dolor sit amet consectetur adipisicing elit. - Consectetur tempora ab laudantium voluptatibus aut eos placeat laborum, - quibusdam exercitationem labore.

    +

    + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Consectetur tempora ab laudantium voluptatibus aut eos placeat + laborum, quibusdam exercitationem labore. +

+
+
+

Get in contact

+
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+

+ Or, you can feel free to email us + here. +

+
+
+
+
+
+ +
    +
  • Important Links
    • +
  • Link
    • +
  • Another Link
    • +
  • Yet another link
    • +
+
    +
  • More Links
    • +
  • Link
    • +
  • Another Link
    • +
  • Yet another link
    • +
+
+
+ © All rights reserved 2021
designed by + rushil umaretiya +
+
+
- - + + diff --git a/particles.html b/particles.html deleted file mode 100644 index be0b964..0000000 --- a/particles.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - 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> \ No newline at end of file diff --git a/public/css/fonts/astro.ttf b/public/css/fonts/Astro/astro.ttf old mode 100755 new mode 100644 similarity index 100% rename from public/css/fonts/astro.ttf rename to public/css/fonts/Astro/astro.ttf diff --git a/public/css/fonts/Garamond/EBGaramond-Bold.ttf b/public/css/fonts/Garamond/EBGaramond-Bold.ttf new file mode 100644 index 0000000..f380a1c Binary files /dev/null and b/public/css/fonts/Garamond/EBGaramond-Bold.ttf differ diff --git a/public/css/fonts/Garamond/EBGaramond-BoldItalic.ttf b/public/css/fonts/Garamond/EBGaramond-BoldItalic.ttf new file mode 100644 index 0000000..a4678e1 Binary files /dev/null and b/public/css/fonts/Garamond/EBGaramond-BoldItalic.ttf differ diff --git a/public/css/fonts/Garamond/EBGaramond-ExtraBold.ttf b/public/css/fonts/Garamond/EBGaramond-ExtraBold.ttf new file mode 100644 index 0000000..dd935be Binary files /dev/null and b/public/css/fonts/Garamond/EBGaramond-ExtraBold.ttf differ diff --git a/public/css/fonts/Garamond/EBGaramond-ExtraBoldItalic.ttf b/public/css/fonts/Garamond/EBGaramond-ExtraBoldItalic.ttf new file mode 100644 index 0000000..2eae45a Binary files /dev/null and b/public/css/fonts/Garamond/EBGaramond-ExtraBoldItalic.ttf differ diff --git a/public/css/fonts/Garamond/EBGaramond-Italic.ttf b/public/css/fonts/Garamond/EBGaramond-Italic.ttf new file mode 100644 index 0000000..a7201b0 Binary files /dev/null and b/public/css/fonts/Garamond/EBGaramond-Italic.ttf differ diff --git a/public/css/fonts/Garamond/EBGaramond-Medium.ttf b/public/css/fonts/Garamond/EBGaramond-Medium.ttf new file mode 100644 index 0000000..b9d6964 Binary files /dev/null and b/public/css/fonts/Garamond/EBGaramond-Medium.ttf differ diff --git a/public/css/fonts/Garamond/EBGaramond-MediumItalic.ttf b/public/css/fonts/Garamond/EBGaramond-MediumItalic.ttf new file mode 100644 index 0000000..a7cf2e5 Binary files /dev/null and b/public/css/fonts/Garamond/EBGaramond-MediumItalic.ttf differ diff --git a/public/css/fonts/Garamond/EBGaramond-Regular.ttf b/public/css/fonts/Garamond/EBGaramond-Regular.ttf new file mode 100644 index 0000000..f57146c Binary files /dev/null and b/public/css/fonts/Garamond/EBGaramond-Regular.ttf differ diff --git a/public/css/fonts/Garamond/EBGaramond-SemiBold.ttf b/public/css/fonts/Garamond/EBGaramond-SemiBold.ttf new file mode 100644 index 0000000..e7e91a3 Binary files /dev/null and b/public/css/fonts/Garamond/EBGaramond-SemiBold.ttf differ diff --git a/public/css/fonts/Garamond/EBGaramond-SemiBoldItalic.ttf b/public/css/fonts/Garamond/EBGaramond-SemiBoldItalic.ttf new file mode 100644 index 0000000..559ad88 Binary files /dev/null and b/public/css/fonts/Garamond/EBGaramond-SemiBoldItalic.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-Black.ttf b/public/css/fonts/Playfair/PlayfairDisplay-Black.ttf new file mode 100644 index 0000000..50abbe5 Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-Black.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-BlackItalic.ttf b/public/css/fonts/Playfair/PlayfairDisplay-BlackItalic.ttf new file mode 100644 index 0000000..addcf2d Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-BlackItalic.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-Bold.ttf b/public/css/fonts/Playfair/PlayfairDisplay-Bold.ttf new file mode 100644 index 0000000..423c4f0 Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-Bold.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-BoldItalic.ttf b/public/css/fonts/Playfair/PlayfairDisplay-BoldItalic.ttf new file mode 100644 index 0000000..ef6bd14 Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-BoldItalic.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-ExtraBold.ttf b/public/css/fonts/Playfair/PlayfairDisplay-ExtraBold.ttf new file mode 100644 index 0000000..dd4a88d Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-ExtraBold.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-ExtraBoldItalic.ttf b/public/css/fonts/Playfair/PlayfairDisplay-ExtraBoldItalic.ttf new file mode 100644 index 0000000..9eae670 Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-ExtraBoldItalic.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-Italic.ttf b/public/css/fonts/Playfair/PlayfairDisplay-Italic.ttf new file mode 100644 index 0000000..0e709d2 Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-Italic.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-Medium.ttf b/public/css/fonts/Playfair/PlayfairDisplay-Medium.ttf new file mode 100644 index 0000000..7eaef2e Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-Medium.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-MediumItalic.ttf b/public/css/fonts/Playfair/PlayfairDisplay-MediumItalic.ttf new file mode 100644 index 0000000..13503b3 Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-MediumItalic.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-Regular.ttf b/public/css/fonts/Playfair/PlayfairDisplay-Regular.ttf new file mode 100644 index 0000000..b034b57 Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-Regular.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-SemiBold.ttf b/public/css/fonts/Playfair/PlayfairDisplay-SemiBold.ttf new file mode 100644 index 0000000..1706d41 Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-SemiBold.ttf differ diff --git a/public/css/fonts/Playfair/PlayfairDisplay-SemiBoldItalic.ttf b/public/css/fonts/Playfair/PlayfairDisplay-SemiBoldItalic.ttf new file mode 100644 index 0000000..ecb7de5 Binary files /dev/null and b/public/css/fonts/Playfair/PlayfairDisplay-SemiBoldItalic.ttf differ diff --git a/public/css/index.css b/public/css/index.css index ff11a1d..03cb6fe 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -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; - } - .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; + background-color: #747474; + top: 0; } } + +.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; +} + +.contact #contact { + position: relative; + padding: 40px 0; + background: #131313; + width: 100%; + max-width: 500px; + padding: 25px; +} + +.contact #contact:before { + content: ''; + position: absolute; + top: -5px; + left: -5px; + right: -5px; + bottom: -5px; + background: linear-gradient(45deg, #ffd800, #ff5520, #750cf2, #0cbcf2); + z-index: -1; +} + +.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 */ \ No newline at end of file diff --git a/public/css/index.sass b/public/css/index.sass index d19ffd3..84dcb30 100644 --- a/public/css/index.sass +++ b/public/css/index.sass @@ -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,80 +46,152 @@ $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 - 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 + nav display: flex justify-content: space-around - width: 30% + align-items: center + min-height: 8vh + background-color: $dark + font-family: $title-stack - li - list-style: none - - a - font-family: $subtitle-stack + .logo color: $light - text-decoration: none - font-weight: bold - font-size: 1.1em + text-transform: uppercase + letter-spacing: 3px + font-size: 1.75em - &:hover - color: white + span + padding-left: 20px + + ul + display: flex + justify-content: space-around + width: 30% + + li + list-style: none + + span + display: none + + a + font-family: $subtitle-stack + color: $light + text-decoration: none + font-weight: bold + font-size: 1.1em + + &: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 - 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 + #hero + position: absolute + left: 10% + top: 20% background-color: transparent - - canvas - z-index: 999 + z-index: 1 + + h1 + font-family: $hero-stack + text-align: left + font-size: 8em + padding: 0.5em 0.5em 0 + 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 + .about position: relative @@ -121,218 +200,325 @@ nav 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% + #about + position: absolute - button - padding: 10px 20px - border: 3px solid $light - text-transform: uppercase - margin-top: 30px - border-radius: 20px - font-family: $hero-stack + h1 + font-size: 4em + font-family: $subtitle-stack + + h4 + font-size: 1em + font-family: $subtitle-stack + margin-left: 20% + width: 60% - a - color: $light - text-decoration: none + 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 + 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 - -// li -// padding: 20px -// background-color: $gray -// color: white -// border-radius: 10px -// margin-bottom: 20px - -// &:last-child -// margin-bottom: 0 + img + width: 200px + height: 200px + background-color: #ffd1dc + border-radius: 50% -// .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 + h1 + font-family: $title-stack + font-size: 1.6em + margin-top: 0.3em -// 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 + h2 + font-family: $title-stack + font-weight: normal + font-size: 1em -// .date -// position: absolute -// top: -30px + p + font-family: sans-serif + width: 60% + margin: 0 auto + margin-top: 0.5em -.container - width: 80% + a + text-decoration: none + color: #11c1e0 + + .caption + flex: 1.5 1 0 + text-align: center + + h1 + font-family: $title-stack + font-size: 5em + white-space: nowrap + + p + font-family: $subtitle-stack + +.timeline + display: flex + flex-direction: column height: auto - max-width: 800px - margin: 0 auto - position: relative + color: $light + align-items: center + justify-content: center + margin-bottom: 5% + + .header + margin-bottom: 2% + font-family: $title-stack + font-size: 4em -.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% + #timeline + max-width: 800px + margin: 0 auto + margin-bottom: 2% 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 - + ul + list-style: none + + li + border: 8px solid $gray + padding: 20px + color: white + border-radius: 10px + margin-bottom: 20px + + &:last-child + margin-bottom: 0 + + .content + + h1 + font-family: $subtitle-stack + font-weight: bold + font-size: 25px + line-height: 30px + margin-bottom: 10px + + p + font-family: $body-stack + font-weight: normal + font-size: 16px + line-height: 30px + + .date + font-family: monospace + 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: $light + + .date + position: absolute + top: -30px + + ul li + width: 50% + position: relative + margin-bottom: 50px + + &:nth-child(odd) + float: left + clear: right + transform: translateX(-30px) + border-radius: 20px 0px 20px 20px + + &::before + transform: translate(50%, -50%) + right: -38px + + &:nth-child(even) + float: right + clear: left + transform: translateX(30px) + border-radius: 0px 20px 20px 20px + + &::before + transform: translate(-50%, -50%) + left: -38px + + &::before + content: "" + position: absolute + height: 20px + width: 20px + border-radius: 50% + background-color: $gray + top: 0 + +.contact + position: relative + display: flex + justify-content: center + width: 100vw + height: auto + color: $light + background-color: transparent + z-index: 0 + margin-bottom: 50px + + #contact + position: relative + padding: 40px 0 + background: $dark + + width: 100% + max-width: 500px + padding: 25px + + &:before + content: '' + position: absolute + top: $gradient-width + left: $gradient-width + right: $gradient-width + bottom: $gradient-width + background: linear-gradient(45deg, #ffd800, #ff5520, #750cf2, #0cbcf2) + z-index: -1 + + &: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 \ No newline at end of file diff --git a/public/css/res/brain.svg b/public/css/res/brain.svg index eb292c3..c06a665 100644 --- a/public/css/res/brain.svg +++ b/public/css/res/brain.svg @@ -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> diff --git a/public/css/res/lock.svg b/public/css/res/lock.svg new file mode 100644 index 0000000..ca0cd4a --- /dev/null +++ b/public/css/res/lock.svg @@ -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> \ No newline at end of file diff --git a/public/css/res/plus.svg b/public/css/res/plus.svg new file mode 100644 index 0000000..6478453 --- /dev/null +++ b/public/css/res/plus.svg @@ -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> \ No newline at end of file diff --git a/public/js/app.js b/public/js/app.js index ae759d3..958ad76 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -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(); diff --git a/public/js/particles.js b/public/js/particles.js index bf9fefc..87a8a04 100644 --- a/public/js/particles.js +++ b/public/js/particles.js @@ -1,5 +1,3 @@ -import * as THREE from "../node_modules/three/build/three.module.js"; - const SEPARATION = 100, AMOUNTX = 50, AMOUNTY = 50;