<!DOCTYPE html>
<!-- Last Published: Fri Jan 27 2023 17:54:20 GMT+0000 (Coordinated Universal Time) -->
<html data-wf-domain="www.quantaneon.com" data-wf-page="63d40f98ed0d3ec6633e2b9c"
data-wf-site="625994d7da1880358fab112a">
<head>
<meta charset="utf-8" />
<title>QuantaNeon</title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com" rel="preconnect" />
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous" />
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
<script type="text/javascript">
WebFont.load({
google: {
families: ["Inter:regular,600,800"]
}
});
</script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>
<![endif]-->
<script type="text/javascript">
! function (o, c) {
var n = c.documentElement,
t = " w-mod-";
n.className += t + "js", ("ontouchstart" in o || o.DocumentTouch && c instanceof DocumentTouch) && (n.className += t + "touch")
}(window, document);
</script>
<link href="/VS CODE/quwuport/625e2c65e62cba309f112b13_logo transparent 32x32.png" rel="shortcut icon"
type="image/x-icon" />
<link href="/VS CODE/quwuport/625e2c3be62cbaeb081129f4_Logo 256x256.png" rel="apple-touch-icon" />
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-KPJG2SSY0D"></script>
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-KPJG2SSY0D', {
'anonymize_ip': false
});
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KPJG2SSY0D"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-KPJG2SSY0D');
</script>
</head>
<body class="body">
<div class="navigation-bar div">
<div class="nav">
<a href="#" class="nav__item w-inline-block">
<div class="nav__item-bg">
<img src="/VS CODE/quwuport/625a4d55b41dc3760e3e015e_icons8-home.svg" loading="lazy" height="25"
width="25" alt="" class="nav__icon" />
<div class="nav__label">HOME</div>
</div>
<div class="nav__indicator home"></div>
</a>
<a href="#Overview" class="nav__item w-inline-block">
<div class="nav__item-bg">
<img src="/VS CODE/quwuport/625a431968fc0a2e3e088b0c_Note.svg" loading="lazy" width="29" alt=""
class="nav__icon" />
<div class="nav__label">about</div>
</div>
<div class="nav__indicator about"></div>
</a>
<a href="#" class="nav__item w-inline-block">
<div class="nav__item-bg">
<img src="/VS CODE/quwuport/625994d7da18802913ab1137_dribbble.svg" loading="lazy" alt=""
class="nav__icon" />
<div class="nav__label">projects</div>
</div>
<div class="nav__indicator projects"></div>
</a>
<a href="#" class="nav__item w-inline-block">
<div class="nav__item-bg">
<img src="/VS CODE/quwuport/625c02bd7ef43c64aed9fb72_phone-504.svg" loading="lazy" width="25" alt=""
class="nav__icon" />
<div class="nav__label">say hi!</div>
</div>
<div class="nav__indicator say-hi"></div>
</a>
</div>
<div class="css w-embed">
<style>
* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
</div>
<div class="nav_bottom--discord">
<a id="twitter" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"
class="navi__button mm__button--bottom mm__button--discord w-inline-block">
<img src="/VS CODE/quwuport/625a3ff3be863343a200e12f_icons8-discord-500.svg" loading="lazy" alt=""
class="mm__button-icon" />
<div class="mm__button-text">JOIN THE DISCORD <span class="mm__bold"></span>
</div>
</a>
</div>
</div>
<div class="hero-wrapper">
<div class="hero-card-wrapper">
<div class="card">
<div class="card__glow"></div>
<div class="card__bg"></div>
<div class="card__front">
<h1 class="heading">Hello!</h1>
<div class="card__circle">
<img src="/VS CODE/quwuport/6259a580be8b354ce059648c_logo transparent.png" loading="lazy"
sizes="64px"
srcset="/VS CODE/quwuport/6259a580be8b354ce059648c_logo transparent-p-500.png 500w, /VS CODE/quwuport/6259a580be8b354ce059648c_logo transparent.png 600w"
alt="" class="image" />
<div class="card__label-gradient"></div>
<div class="card__holo-glow card__holo-glow--s">
<div class="card__front-glow-mask"></div>
</div>
</div>
<div class="card__line card__line--top">
<div class="card-line-text">
<strong>QuantaNeon</strong>
</div>
<div class="card__label-gradient"></div>
<div class="card__holo-glow card__holo-glow--s">
<div class="card__front-glow-mask">u</div>
</div>
</div>
<div class="card__line card-line--bottom">
<div class="card-line-below-text">AKA Quwuanta</div>
<div class="card__label-gradient"></div>
<div class="card__holo-glow card__holo-glow--s">
<div class="card__front-glow-mask"></div>
<div class="card__front-glow-mask"></div>
</div>
</div>
<div class="card__line card-line--bott-rt">
<div class="card-line-below-text right">WEB DESIGNER</div>
<div class="card__label-gradient"></div>
<div class="card__holo-glow card__holo-glow--s">
<div class="card__front-glow-mask"></div>
<div class="card__front-glow-mask"></div>
</div>
</div>
<div class="card__holo-glow">
<div class="card__front-glow-mask"></div>
</div>
</div>
</div>
</div>
<div data-poster-url="/VS CODE/quwuport/62434330902d9dc0eb1f54cf_Cover Video-poster-00001.jpg"
data-video-urls="/VS CODE/quwuport/62434330902d9dc0eb1f54cf_Cover Video-poster-00001.jpg,/VS CODE/quwuport/62434330902d9dc0eb1f54cf_Cover Video-poster-00001.jpg,/VS CODE/quwuport/6259acdbe9dae066bd5f5d8f_Cover Video-transcode.mp4,/VS CODE/quwuport/6259acdbe9dae066bd5f5d8f_Cover Video-transcode.webm"
data-autoplay="true" data-loop="true" data-wf-ignore="true"
class="bgvideo-cover w-background-video w-background-video-atom">
<video id="4bb4b81a-0073-c301-7fb2-c1933edae9da-video" autoplay="" loop=""
style="background-image:url("'/VS CODE/quwuport/62434330902d9dc0eb1f54cf_Cover Video-poster-00001.jpg'")"
muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
<source src="/VS CODE/quwuport/62434330902d9dc0eb1f54cf_Cover Video-poster-00001.jpg"
data-wf-ignore="true" />
<source src="/VS CODE/quwuport/62434330902d9dc0eb1f54cf_Cover Video-poster-00001.jpg"
data-wf-ignore="true" />
<source src="/VS CODE/quwuport/6259acdbe9dae066bd5f5d8f_Cover Video-transcode.mp4"
data-wf-ignore="true" />
<source src="/VS CODE/quwuport/6259acdbe9dae066bd5f5d8f_Cover Video-transcode.webm"
data-wf-ignore="true" />
</video>
</div>
</div>
<section id="Overview" class="section-main">
<div class="guide_section-header-long">
<div class="guide_header-container">
<div class="guide_header-wrap">
<img src="https://uploads-ssl.webflow.com/625994d7da1880358fab112a/625a431968fc0a2e3e088b0c_Note.svg"
loading="lazy" alt="" class="guide-icon" />
<h2 class="guide-heading-gold">About <br />
</h2>
</div>
<p class="guide-description">
<a href="mailto:hello@protocore.co?subject=Project%20Inquiry" class="guide-link">
<strong>Hey! I am QuantaNeon <br />
</strong>
<span class="text-span-about">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum</span>
</a>
<br />
</p>
</div>
<div class="stroke-top"></div>
<div class="stroke-left"></div>
<div class="stroke-right"></div>
<div class="stroke-bottom"></div>
</div>
<div class="w-layout-grid guide_2-col">
<div class="guide-container">
<h4 class="guide-heading">
<strong>Lorem Ipsum</strong>
</h4>
<p fs-copyclip-element="copy-this" class="guide-description">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="guide-container">
<h4 class="guide-heading">Bitsum levios</h4>
<p fs-copyclip-element="copy-this" class="guide-description">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="guide-container">
<h4>
<strong>Ulam Tupang Chiu Duam</strong>
</h4>
<p fs-copyclip-element="copy-this" class="guide-description">Lorem ipsum, or lipsum as it is sometimes
known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to
an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De
Finibus Bonorum et Malorum for use in a type specimen book. It usually begins with</p>
</div>
<div id="w-node-fe3d6dbb-016d-cc0e-1561-052e5f031424-633e2b9c" class="guide-container">
<h4>
<strong>Aila kali no Kiyna</strong>
</h4>
<p fs-copyclip-element="copy-this" class="guide-description">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident.</p>
</div>
</div>
</section>
<section class="section-skills">
<div class="skills-card">
<div class="hole-container">
<div class="hole"></div>
</div>
<div class="card__header">
<h1 class="heading-2">Skills</h1>
<div class="div-block-4"></div>
</div>
<div class="card__skills-container">
<div class="skill">
<div class="skill-header">
<h4 class="heading-3">UI/UX</h4>
<h4 class="card-text">80%</h4>
</div>
<div class="progres-bar-2 card-bar">
<div data-w-id="31a60144-0f95-430a-28eb-994ef91defa5" style="width:5%"
class="progress-bar__content-4 _1"></div>
</div>
</div>
<div class="skill">
<div class="skill-header">
<h4 class="heading-3">HTML/CSS</h4>
<h4 class="card-text">70%</h4>
</div>
<div class="progres-bar-2 card-bar">
<div data-w-id="31a60144-0f95-430a-28eb-994ef91defad" style="width:5%"
class="progress-bar__content-4 _2"></div>
</div>
</div>
<div class="skill">
<div class="skill-header">
<h4 class="heading-3">HUMOUR</h4>
<h4 class="card-text">69%</h4>
</div>
<div class="progres-bar-2 card-bar">
<div data-w-id="31a60144-0f95-430a-28eb-994ef91defb5" style="width:5%"
class="progress-bar__content-4 _3"></div>
</div>
</div>
<div class="skill">
<div class="skill-header">
<h4 class="heading-3">MINECRAFT SKILLS 🔥</h4>
<h4 class="card-text">100%</h4>
</div>
<div class="progres-bar-2 card-bar">
<div data-w-id="31a60144-0f95-430a-28eb-994ef91defbd" style="width:5%"
class="progress-bar__content-4 _4"></div>
</div>
</div>
</div>
</div>
</section>
<div class="section-contact wf-section">
<div class="form-block w-form">
<form id="email-form" name="email-form" data-name="Email Form" method="get" class="form">
<div data-delay="4000" data-animation="outin" class="form-slider w-slider" data-autoplay="false"
data-easing="ease" data-hide-arrows="true" data-disable-swipe="false" data-autoplay-limit="0"
data-nav-spacing="3" data-duration="500" data-infinite="true">
<div class="form-mask w-slider-mask">
<div data-w-id="b232eae8-4615-e042-796e-d143af0d2614" class="form-slide w-slide">
<div class="form-step">
<div class="step-number">Step 1/3</div>
<h2 class="form-heading">Text fields</h2>
<div class="fields-group">
<div class="text-field-wrapper half">
<input type="text" class="text-field w-input" maxlength="256" name="First-mane"
data-name="First mane" placeholder="" id="First-mane" />
<label for="name" class="field-label">First name</label>
<div class="text-field-done"></div>
</div>
<div class="text-field-wrapper half">
<input type="text" class="text-field w-input" maxlength="256" name="Last-name"
data-name="Last name" placeholder="" id="Last-name" />
<label for="name-2" class="field-label">Last name</label>
<div class="text-field-done"></div>
</div>
</div>
<div class="form-label">Date of birth</div>
<div class="fields-group">
<div class="text-field-wrapper third">
<input type="text" class="text-field w-input" maxlength="256" name="Month"
data-name="Month" placeholder="" id="Month" />
<label for="name" class="field-label">Month</label>
<div class="text-field-done"></div>
</div>
<div class="text-field-wrapper third">
<input type="text" class="text-field w-input" maxlength="256" name="Day"
data-name="Day" placeholder="" id="Day" />
<label for="name" class="field-label">Day</label>
<div class="text-field-done"></div>
</div>
<div class="text-field-wrapper third">
<input type="text" class="text-field w-input" maxlength="256" name="Year"
data-name="Year" placeholder="" id="Year" />
<label for="name" class="field-label">Year</label>
<div class="text-field-done"></div>
</div>
<div class="text-field-wrapper">
<input type="email" class="text-field w-input" maxlength="256" name="email"
data-name="Email" placeholder="" id="email" />
<label for="email" class="field-label">Email Address</label>
<div class="text-field-done"></div>
</div>
<div class="text-field-wrapper">
<input type="email" class="text-field w-input" maxlength="256" name="Adress"
data-name="Adress" placeholder="" id="Adress" />
<label for="email-2" class="field-label">Address</label>
<div class="text-field-done"></div>
</div>
</div>
</div>
</div>
<div data-w-id="b232eae8-4615-e042-796e-d143af0d2641" class="form-slide w-slide">
<div class="form-step">
<div class="step-number">Step 2/3</div>
<h2 class="form-heading">Text area + simple radio button</h2>
<div class="text-area-wrapper">
<textarea data-name="Message" maxlength="5000" id="Message" name="Message"
placeholder="" class="text-area w-input"></textarea>
<label class="area-label">Your message</label>
<div class="text-field-done area-done"></div>
</div>
<div class="radio-buttons">
<label class="radiobutton-field w-radio">
<div
class="w-form-formradioinput w-form-formradioinput--inputType-custom radiobutton w-radio-input w--redirected-checked">
</div>
<input type="radio" data-name="Radio" id="Radio-1" name="Radio" value="Radio-1"
checked="" style="opacity:0;position:absolute;z-index:-1" />
<span for="Radio-1" class="w-form-label">The number one choice</span>
</label>
<label class="radiobutton-field w-radio">
<div
class="w-form-formradioinput w-form-formradioinput--inputType-custom radiobutton w-radio-input">
</div>
<input type="radio" data-name="Radio" id="Radio-2" name="Radio" value="Radio-2"
style="opacity:0;position:absolute;z-index:-1" />
<span for="Radio-2" class="w-form-label">The number two choice</span>
</label>
</div>
</div>
</div>
<div data-w-id="b232eae8-4615-e042-796e-d143af0d2655" class="form-slide w-slide">
<div class="form-step last-step">
<div class="step-number">Step 3/3</div>
<h2 class="form-heading">Custom radio buttons & checkboxes</h2>
<div class="radio-buttons genders">
<label class="radio-button-field w-radio">
<div
class="w-form-formradioinput w-form-formradioinput--inputType-custom radio-button gender w-radio-input w--redirected-checked">
</div>
<input type="radio" data-name="Gender" id="Female-2" name="Gender"
value="Female" checked="" style="opacity:0;position:absolute;z-index:-1" />
<span for="Female-2" class="radio-button-label w-form-label">Female</span>
</label>
<label class="radio-button-field w-radio">
<div
class="w-form-formradioinput w-form-formradioinput--inputType-custom radio-button gender male w-radio-input">
</div>
<input type="radio" data-name="Gender" id="Male-2" name="Gender" value="Male"
style="opacity:0;position:absolute;z-index:-1" />
<span for="Male-2" class="radio-button-label w-form-label">Male</span>
</label>
</div>
<div class="fields-group">
<label class="w-checkbox checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox"></div>
<input type="checkbox" id="Checkbox 1" name="Checkbox-1" data-name="Checkbox 1"
style="opacity:0;position:absolute;z-index:-1" />
<span for="Checkbox-1" class="w-form-label">I want to add this option</span>
</label>
<label class="w-checkbox checkbox-field">
<div class="w-checkbox-input w-checkbox-input--inputType-custom checkbox"></div>
<input type="checkbox" id="Checkbox 2" name="Checkbox-2" data-name="Checkbox 2"
style="opacity:0;position:absolute;z-index:-1" />
<span for="Checkbox-2" class="w-form-label">Let me click on this checkbox and
choose some cool stuff</span>
</label>
</div>
<input type="submit" value="Submit" data-wait="Please wait..."
class="form-button w-button" />
</div>
</div>
</div>
<div class="form-back w-slider-arrow-left">
<div>Back</div>
</div>
<div class="form-next w-slider-arrow-right">
<div>Next step</div>
</div>
<div class="slide-nav w-slider-nav w-round"></div>
</div>
</form>
<div class="success-message w-form-done">
<h2 class="form-heading">Done!</h2>
<div class="success-subtitle">Now you can clone this project and reuse the form.</div>
<a href="https://webflow.com/website/Multi-step-form-cloneable" target="_blank" class="button">Clone</a>
</div>
<div class="w-form-fail">
<div>Oops! Something went wrong while submitting the form.</div>
</div>
</div>
</div>
<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=625994d7da1880358fab112a"
type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"></script>
<script src="main.js" type="text/javascript"></script>
<!--[if lte IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>
<![endif]-->
</body>
</html>