neurosecure/index.html

232 lines
7.3 KiB
HTML

<!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>NeuroSecure</title>
<link rel="stylesheet" href="/css/index.css" />
</head>
<body>
<div class="nav">
<nav>
<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><a href="#">Home</a></li>
<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>
</div>
</section>
<section class="about">
<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?
</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="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.
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>
<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><a href="">Link</a></li>
<li><a href="">Another Link</a></li>
<li><a href="">Yet another link</a></li>
</ul>
<ul>
<li>More Links</li>
<li><a href="">Link</a></li>
<li><a href="">Another Link</a></li>
<li><a href="">Yet another link</a></li>
</ul>
</div>
<div class="copyright">
&copy; 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;
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = scale * ( 300.0 / - mvPosition.z );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
void main() {
if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
gl_FragColor = vec4( color, 1.0 );
}
</script>
<script src="/src/app.js" type="module"></script>
</html>