diff --git a/Code/background.jpeg b/Code/background.jpeg deleted file mode 100644 index 129f91e..0000000 Binary files a/Code/background.jpeg and /dev/null differ diff --git a/Code/index.html b/Code/index.html deleted file mode 100644 index 5f5473c..0000000 --- a/Code/index.html +++ /dev/null @@ -1,94 +0,0 @@ - - - - - Hackathon Website - - - - - - - -
- logo_pic - -
- -
-
- - - -
-
- - - -
This Hackathon is brought to you by:
-
Play with banners below for a 3d experience. huehue.
-
"Winners dont do
different things,
they do things
differently"
- - - - - - - - - - - - diff --git a/Code/logoo.jpg b/Code/logoo.jpg deleted file mode 100644 index 6fd7d8e..0000000 Binary files a/Code/logoo.jpg and /dev/null differ diff --git a/Code/style.css b/Code/style.css deleted file mode 100644 index 8e70a62..0000000 --- a/Code/style.css +++ /dev/null @@ -1,349 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Poppins:200.300,400,500,600,700,800,900&display=swap'); - -html, body -{ - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; -} - - - -body -{ - margin:0; - padding: 0; - font-family: 'poppins',sans-serif; - background: url(background.jpeg); - background-size: cover; - background-attachment: fixed; -} - -header -{ - position: relative; - max-width: 1200px; - - margin: 20px auto; - padding: 10px; - background: #fff; - box-sizing: border-box; - border-radius: 4px; - box-shadow: 0 2px 5px rgba(0,0,0,.2); - - text-align: center; - outline: 5px solid #9D00FF; - -} - -#ImSticky { - height:100px; - width:275px; - position: fixed; - bottom: 475px; - left: 90px; -} -.logo -{ - color: #9D00FF; - height: 60px; - line-height: 60px; - font-size: 45px; - padding: 0 20px; - - text-align: center; - box-sizing: border-box; - float: left; - font-weight: 900; - text-decoration: none; -} - -nav{ - float: right; -} - -.clearfix -{ - clear: both; -} - -nav ul -{ - margin:0; - padding: 0; - - display: inline-flex; - list-style: none; -} - -nav ul li -{ - width: 150px; - margin: 15px; - padding: 15px; -} - -nav ul li a -{ - display: block; - margin: 10px 0; - padding: 10px 20px; - text-decoration: none; - color:#262626 ; -} - -nav ul li a.active, -nav ul li a:hover -{ - background: #9D00FF; - color: #fff; - transition:0.2s; -} - -nav .fa -{ - margin-right: 5px; -} - -.sub-menu-1 -{ - display: none; -} - -nav ul li:hover .sub-menu-1 -{ - display: block; - position: absolute; - background: #fff; - margin-top: 10px; - margin-left: -15px; - outline: 3px solid #9D00FF; -} - -nav ul li:hover .sub-menu-1 ul -{ - display: block; - margin: 10px; -} - -nav ul li:hover .sub-menu-1 ul li -{ - width: 240px; - padding: 0px; - background: transparent; - border-radius: 0; - text-align: center; - border-bottom: 1px dotted #9D00FF; -} - -nav ul li:hover .sub-menu-1 ul li a:hover -{ - color: #fff; -} - -.fa-angle-right -{ - float: right; -} - -.sub-menu-2 -{ - display: none; -} - -.hover-me:hover .sub-menu-2 -{ - position: absolute; - display: block; - margin-top: -40px; - margin-left: 220px; - background:#fff; - outline: 3px solid #9D00FF; -} - -@media(max-width: 1200px) -{ - header - { - margin: 20px; - } -} - -@media(max-width: 768px) -{ - .menu-toggle - { - display: block; - width: 40px; - height: 40px; - margin: 10px; - float: right; - cursor: pointer; - text-align: center; - font-size: 30px; - color:#069370; - } - .menu-toggle:before - { - content:'\f0c9'; - font-family: fontAwesome; - line-height: 40px; - } - .menu-toggle.active:before - { - content:'\f00d'; - } - nav - { - display: none; - } - nav.active - { - display: block; - width: 100%; - } - nav.active ul - { - display: block; - } - nav.active ul li a - { - margin: 0; - } - -} - - - -.socialMedia -{ - display: flex; - justify-content: left; - align-items: center; - min-height: 40vh; - transition: 0.5s; - -} -.sci -{ - position: relative; - display: flex; - -} -.sci li -{ - list-style: none; -} -.sci li::before -{ - content: attr(data-text); - position: absolute; - top: 50%; - Left: 50%; - transform: translate(2000px,100px); - font-size: 7vw; - pointer-events: none; - font-weight: 700; - transition: 0.5s; - opacity: 0; -} -.sci li:hover::before -{ - opacity: 1; - transform: translate(-50%,calc(-50% + 150px)); - color: #fff; - text-shadow: 0 0 3px #FF0000; - -} - -.sci li a -{ - position: relative; - display: inline-block; - width: 150px; - height: 150px; - background: #fff; - display: flex; - justify-content: center; - align-items: center; - color: #333; - border-radius: 10px; - text-decoration: none; - margin: 80px; - font-size: 4em; - transform-style: preserve-3d; - perspective: 500px; - box-shadow: 0 25px 35px rgba(0,0,0,0.1); - transition: background 0.25s; - -} - -.js-tilt-glare -{ - border-radius: 10px; -} - -.sci li a:hover.college -{ - background:#0000FF; -} - -.sci li a:hover.event -{ - background:#FF0000; -} - - - - - -.sci li a .fa{ - transition:0.25s; - pointer-events: none; -} - -.sci li a:hover .fa{ - color: #fff; - transform: scale(1.75) translateZ(50px); -} - -.t1 { - position: absolute; - bottom: 58%; - left: 16px; - - color: #fff; - font-size: 33px; - text-align: center; - font-weight: 900; - text-decoration: none; - text-shadow: 0 0 3px #FF0000; - } - - .t2 { - position: absolute; - bottom: 54%; - left: 16px; - - color: #fff; - font-size: 17px; - text-align: center; - font-weight: 900; - text-decoration: none; - text-shadow: 0 0 3px #FF0000; - } - - .t3 { - position: absolute; - bottom: 5%; - right: 170px; - - color: #ff69b4 ; - font-size: 30px; - text-align: center; - font-weight: 900; - text-decoration: none; - text-shadow: 0 0 3px #262626; - } diff --git a/Code/vanilla-tilt.min.js b/Code/vanilla-tilt.min.js deleted file mode 100644 index af2fa57..0000000 --- a/Code/vanilla-tilt.min.js +++ /dev/null @@ -1 +0,0 @@ -var VanillaTilt=function(){"use strict";class t{constructor(e,i={}){if(!(e instanceof Node))throw"Can't initialize VanillaTilt because "+e+" is not a Node.";this.width=null,this.height=null,this.clientWidth=null,this.clientHeight=null,this.left=null,this.top=null,this.gammazero=null,this.betazero=null,this.lastgammazero=null,this.lastbetazero=null,this.transitionTimeout=null,this.updateCall=null,this.event=null,this.updateBind=this.update.bind(this),this.resetBind=this.reset.bind(this),this.element=e,this.settings=this.extendSettings(i),this.reverse=this.settings.reverse?-1:1,this.resetToStart=t.isSettingTrue(this.settings["reset-to-start"]),this.glare=t.isSettingTrue(this.settings.glare),this.glarePrerender=t.isSettingTrue(this.settings["glare-prerender"]),this.fullPageListening=t.isSettingTrue(this.settings["full-page-listening"]),this.gyroscope=t.isSettingTrue(this.settings.gyroscope),this.gyroscopeSamples=this.settings.gyroscopeSamples,this.elementListener=this.getElementListener(),this.glare&&this.prepareGlare(),this.fullPageListening&&this.updateClientSize(),this.addEventListeners(),this.reset(),!1===this.resetToStart&&(this.settings.startX=0,this.settings.startY=0)}static isSettingTrue(t){return""===t||!0===t||1===t}getElementListener(){if(this.fullPageListening)return window.document;if("string"==typeof this.settings["mouse-event-element"]){const t=document.querySelector(this.settings["mouse-event-element"]);if(t)return t}return this.settings["mouse-event-element"]instanceof Node?this.settings["mouse-event-element"]:this.element}addEventListeners(){this.onMouseEnterBind=this.onMouseEnter.bind(this),this.onMouseMoveBind=this.onMouseMove.bind(this),this.onMouseLeaveBind=this.onMouseLeave.bind(this),this.onWindowResizeBind=this.onWindowResize.bind(this),this.onDeviceOrientationBind=this.onDeviceOrientation.bind(this),this.elementListener.addEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.addEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.addEventListener("mousemove",this.onMouseMoveBind),(this.glare||this.fullPageListening)&&window.addEventListener("resize",this.onWindowResizeBind),this.gyroscope&&window.addEventListener("deviceorientation",this.onDeviceOrientationBind)}removeEventListeners(){this.elementListener.removeEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.removeEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.removeEventListener("mousemove",this.onMouseMoveBind),this.gyroscope&&window.removeEventListener("deviceorientation",this.onDeviceOrientationBind),(this.glare||this.fullPageListening)&&window.removeEventListener("resize",this.onWindowResizeBind)}destroy(){clearTimeout(this.transitionTimeout),null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.reset(),this.removeEventListeners(),this.element.vanillaTilt=null,delete this.element.vanillaTilt,this.element=null}onDeviceOrientation(t){if(null===t.gamma||null===t.beta)return;this.updateElementPosition(),this.gyroscopeSamples>0&&(this.lastgammazero=this.gammazero,this.lastbetazero=this.betazero,null===this.gammazero?(this.gammazero=t.gamma,this.betazero=t.beta):(this.gammazero=(t.gamma+this.lastgammazero)/2,this.betazero=(t.beta+this.lastbetazero)/2),this.gyroscopeSamples-=1);const e=this.settings.gyroscopeMaxAngleX-this.settings.gyroscopeMinAngleX,i=this.settings.gyroscopeMaxAngleY-this.settings.gyroscopeMinAngleY,s=e/this.width,n=i/this.height,l=(t.gamma-(this.settings.gyroscopeMinAngleX+this.gammazero))/s,a=(t.beta-(this.settings.gyroscopeMinAngleY+this.betazero))/n;null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event={clientX:l+this.left,clientY:a+this.top},this.updateCall=requestAnimationFrame(this.updateBind)}onMouseEnter(){this.updateElementPosition(),this.element.style.willChange="transform",this.setTransition()}onMouseMove(t){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=t,this.updateCall=requestAnimationFrame(this.updateBind)}onMouseLeave(){this.setTransition(),this.settings.reset&&requestAnimationFrame(this.resetBind)}reset(){this.onMouseEnter(),this.fullPageListening?this.event={clientX:(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.clientWidth,clientY:(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.clientHeight}:this.event={clientX:this.left+(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.width,clientY:this.top+(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.height};let t=this.settings.scale;this.settings.scale=1,this.update(),this.settings.scale=t,this.resetGlare()}resetGlare(){this.glare&&(this.glareElement.style.transform="rotate(180deg) translate(-50%, -50%)",this.glareElement.style.opacity="0")}getValues(){let t,e;return this.fullPageListening?(t=this.event.clientX/this.clientWidth,e=this.event.clientY/this.clientHeight):(t=(this.event.clientX-this.left)/this.width,e=(this.event.clientY-this.top)/this.height),t=Math.min(Math.max(t,0),1),e=Math.min(Math.max(e,0),1),{tiltX:(this.reverse*(this.settings.max-t*this.settings.max*2)).toFixed(2),tiltY:(this.reverse*(e*this.settings.max*2-this.settings.max)).toFixed(2),percentageX:100*t,percentageY:100*e,angle:Math.atan2(this.event.clientX-(this.left+this.width/2),-(this.event.clientY-(this.top+this.height/2)))*(180/Math.PI)}}updateElementPosition(){let t=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=t.left,this.top=t.top}update(){let t=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:t.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:t.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.glare&&(this.glareElement.style.transform=`rotate(${t.angle}deg) translate(-50%, -50%)`,this.glareElement.style.opacity=`${t.percentageY*this.settings["max-glare"]/100}`),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:t})),this.updateCall=null}prepareGlare(){if(!this.glarePrerender){const t=document.createElement("div");t.classList.add("js-tilt-glare");const e=document.createElement("div");e.classList.add("js-tilt-glare-inner"),t.appendChild(e),this.element.appendChild(t)}this.glareElementWrapper=this.element.querySelector(".js-tilt-glare"),this.glareElement=this.element.querySelector(".js-tilt-glare-inner"),this.glarePrerender||(Object.assign(this.glareElementWrapper.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",overflow:"hidden","pointer-events":"none","border-radius":"inherit"}),Object.assign(this.glareElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",transform:"rotate(180deg) translate(-50%, -50%)","transform-origin":"0% 0%",opacity:"0"}),this.updateGlareSize())}updateGlareSize(){if(this.glare){const t=2*(this.element.offsetWidth>this.element.offsetHeight?this.element.offsetWidth:this.element.offsetHeight);Object.assign(this.glareElement.style,{width:`${t}px`,height:`${t}px`})}}updateClientSize(){this.clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,this.clientHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}onWindowResize(){this.updateGlareSize(),this.updateClientSize()}setTransition(){clearTimeout(this.transitionTimeout),this.element.style.transition=this.settings.speed+"ms "+this.settings.easing,this.glare&&(this.glareElement.style.transition=`opacity ${this.settings.speed}ms ${this.settings.easing}`),this.transitionTimeout=setTimeout(()=>{this.element.style.transition="",this.glare&&(this.glareElement.style.transition="")},this.settings.speed)}extendSettings(t){let e={reverse:!1,max:15,startX:0,startY:0,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:1,speed:300,transition:!0,axis:null,glare:!1,"max-glare":1,"glare-prerender":!1,"full-page-listening":!1,"mouse-event-element":null,reset:!0,"reset-to-start":!0,gyroscope:!0,gyroscopeMinAngleX:-45,gyroscopeMaxAngleX:45,gyroscopeMinAngleY:-45,gyroscopeMaxAngleY:45,gyroscopeSamples:10},i={};for(var s in e)if(s in t)i[s]=t[s];else if(this.element.hasAttribute("data-tilt-"+s)){let t=this.element.getAttribute("data-tilt-"+s);try{i[s]=JSON.parse(t)}catch(e){i[s]=t}}else i[s]=e[s];return i}static init(e,i){e instanceof Node&&(e=[e]),e instanceof NodeList&&(e=[].slice.call(e)),e instanceof Array&&e.forEach(e=>{"vanillaTilt"in e||(e.vanillaTilt=new t(e,i))})}}return"undefined"!=typeof document&&(window.VanillaTilt=t,t.init(document.querySelectorAll("[data-tilt]"))),t}(); \ No newline at end of file diff --git a/Hackathon.css b/Hackathon.css new file mode 100644 index 0000000..a63f2f8 --- /dev/null +++ b/Hackathon.css @@ -0,0 +1,569 @@ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Outfit:wght@100..900&family=Playwrite+IN:wght@100..400&family=Playwrite+VN:wght@100..400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); +/* reset */ +*, +*::after, +*::before { + margin: 0; + padding: 0; + border: 0; + box-sizing: border-box; +} + +body { + background-color: hsl(0, 0%, 100%); + font-family: "Poppins", sans-serif; + color: #fff; +} + +ol, +ul, +menu { + list-style: none; +} + +h1 { + font-size: 3rem; + padding-bottom: 1rem; +} + +/* -------------------------------- +Icons +-------------------------------- */ + +.cd-icon { + --size: 1rem; + font-size: var(--size); + height: 1rem; + width: 1rem; + display: inline-block; + color: inherit; + fill: currentColor; + line-height: 1; + flex-shrink: 0; + max-width: initial; +} + +.cd-icon use { + color: inherit; + fill: currentColor; +} + +/* -------------------------------- +Component +-------------------------------- */ + +:root { + --cha-header-height: 54px; + + /* light theme colors */ + --color-primary: hsl(250, 84%, 54%); + --color-bg: hsl(0, 0%, 100%); + --color-contrast-medium: hsl(225, 4%, 47%); + --color-contrast-high: hsl(230, 7%, 23%); + --color-contrast-higher: hsl(230, 13%, 9%); +} + +[data-theme="dark"] { + --color-primary: hsl(342, 89%, 48%); + --color-bg: hsl(232, 11%, 15%); + --color-contrast-medium: hsl(231, 3%, 57%); + --color-contrast-high: hsl(240, 5%, 82%); + --color-contrast-higher: hsl(240, 100%, 99%); +} + +@media (min-width: 64rem) { + :root { + --cha-header-height: 70px; + } +} + +.cha-header-clip { + position: absolute; + z-index: 3; + top: 0; + left: 0; + right: 0; + bottom: 0; + -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); + pointer-events: none; +} + +.cha-section { + background-color: var(--color-bg); + color: var(--color-contrast-high); +} + +.cha-header { + height: var(--cha-header-height); + background-color: var(--color-bg); + pointer-events: auto; + position: fixed; + z-index: 1; + top: 0; + left: 0; + width: 100%; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + transform: translateZ(0); +} + +.cha-header__logo { + display: block; + width: 40px; + height: 40px; +} + +.cha-header__nav { + display: none; +} + +.cha-header__nav-list { + display: flex; + align-items: center; + gap: 2rem; +} + +.cha-header__nav-link, +.cha-header__nav-btn { + font-size: 0.9375rem; + font-weight: 600; +} + +.cha-header__nav-link { + color: var(--color-contrast-higher); + text-decoration: none; + transition: opacity 0.3s; +} + +.cha-header__nav-link:hover { + opacity: 0.5; +} + +.cha-header__trigger, +.cha-modal__close { + display: block; +} + +.cha-header__trigger .cd-icon, +.cha-modal__close .cd-icon { + --size: 24px; + display: block; + color: var(--color-contrast-higher); +} + +.cha-modal { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: var(--color-bg); + display: none; + z-index: 15; +} + +.cha-modal__inner { + height: 100%; + overflow: auto; +} + +.cha-modal__header { + background-color: var(--color-bg); + padding: 0 1.5rem; + position: -webkit-sticky; + position: sticky; + z-index: 1; + top: 0; + height: var(--cha-header-height); +} + +.cha-modal__label { + color: var(--color-contrast-medium); +} + +.cha-modal__nav { + padding: 3rem 1.5rem; +} + +.cha-modal__nav-list { + display: grid; + gap: 0.25rem; +} + +.cha-modal__nav-link { + font-size: 1.375rem; + text-decoration: none; + display: block; + color: var(--color-contrast-higher); + padding: 0.25rem 0; +} + +@media (min-width: 64rem) { + .cha-header__nav { + display: block; + } + + .cha-header__trigger, + .cha-modal { + display: none !important; + } +} + +.cd-container { + width: calc(100% - 3rem); + margin-left: auto; + margin-right: auto; +} + +.cd-max-width-sm { + max-width: 48rem; +} + +.cd-max-width-lg { + max-width: 80rem; +} + +.cd-position-relative { + position: relative; +} + +.cd-padding-y-3xl { + padding-top: 10.75rem; + padding-bottom: 10.75rem; +} + +.cd-height-100\% { + height: 100%; +} + +.cd-flex { + display: flex; +} + +.cd-block { + display: block; +} + +.cd-justify-between { + justify-content: space-between; +} + +.cd-items-center { + align-items: center; +} + + +a { + color: #fff; + text-decoration: none; +} +.pg-footer { + font-family: 'Roboto', sans-serif; +} + + +.footer { + background-color: #004658; + color: #fff; + +} +.footer-wave-svg { + background-color: transparent; + display: block; + height: 30px; + position: relative; + top: -1px; + width: 100%; +} +.footer-wave-path { + fill: #fffff2; +} + +.footer-content { + margin-left: auto; + margin-right: auto; + max-width: 1230px; + padding: 40px 15px 450px; + position: relative; +} + +.footer-content-column { + box-sizing: border-box; + float: left; + padding-left: 15px; + padding-right: 15px; + width: 100%; + color: #fff; +} + +.footer-content-column ul li a { + color: #fff; + text-decoration: none; +} + +.footer-logo-link { + display: inline-block; +} +.footer-menu { + margin-top: 30px; +} +.footer-logo-link h1{ + background: -webkit-linear-gradient(#eee, #00bef0); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-family: "Playwrite IN", serif; +} +.footer-menu-name { + color: #fffff2; + font-size: 15px; + font-weight: 900; + letter-spacing: .1em; + line-height: 18px; + margin-bottom: 0; + margin-top: 0; + text-transform: uppercase; +} +.footer-menu-list { + list-style: none; + margin-bottom: 0; + margin-top: 10px; + padding-left: 0; +} +.footer-menu-list li { + margin-top: 5px; +} + +.footer-call-to-action-description { + color: #fffff2; + margin-top: 10px; + margin-bottom: 20px; +} +.footer-call-to-action-button:hover { + background-color: #fffff2; + color: #00bef0; +} +.button:last-of-type { + margin-right: 0; +} +.footer-call-to-action-button { + background-color: #027b9a; + border-radius: 21px; + color: #fffff2; + display: inline-block; + font-size: 11px; + font-weight: 900; + letter-spacing: .1em; + line-height: 18px; + padding: 12px 30px; + margin: 0 10px 10px 0; + text-decoration: none; + text-transform: uppercase; + transition: background-color .2s; + cursor: pointer; + position: relative; +} +.footer-call-to-action { + margin-top: 30px; +} +.footer-call-to-action-title { + color: #fffff2; + font-size: 14px; + font-weight: 900; + letter-spacing: .1em; + line-height: 18px; + margin-bottom: 0; + margin-top: 0; + text-transform: uppercase; +} +.footer-call-to-action-link-wrapper { + margin-bottom: 0; + margin-top: 10px; + color: #fff; + text-decoration: none; +} +.footer-call-to-action-link-wrapper a { + color: #fff; + text-decoration: none; +} + + + + + +.footer-social-links { + bottom: 0; + height: 54px; + position: absolute; + right: 0; + width: 236px; +} + +.footer-social-amoeba-svg { + height: 54px; + left: 0; + display: block; + position: absolute; + top: 0; + width: 236px; +} + +.footer-social-amoeba-path { + fill: #027b9a; +} + +.footer-social-link.linkedin { + height: 26px; + left: 3px; + top: 11px; + width: 26px; +} + +.footer-social-link { + display: block; + padding: 10px; + position: absolute; +} + +.hidden-link-text { + position: absolute; + clip: rect(1px 1px 1px 1px); + clip: rect(1px,1px,1px,1px); + -webkit-clip-path: inset(0px 0px 99.9% 99.9%); + clip-path: inset(0px 0px 99.9% 99.9%); + overflow: hidden; + height: 1px; + width: 1px; + padding: 0; + border: 0; + top: 50%; +} + +.footer-social-icon-svg { + display: block; +} + +.footer-social-icon-path { + fill: #fffff2; + transition: fill .2s; +} + +.footer-social-link.twitter { + height: 28px; + left: 62px; + top: 3px; + width: 28px; +} + +.footer-social-link.youtube { + height: 24px; + left: 123px; + top: 12px; + width: 24px; +} + +.footer-social-link.github { + height: 34px; + left: 172px; + top: 7px; + width: 34px; +} + +.footer-copyright { + background-color: #027b9a; + color: #fff; + padding: 15px 30px; + text-align: center; +} + +.footer-copyright-wrapper { + margin-left: auto; + margin-right: auto; + max-width: 1200px; +} + +.footer-copyright-text { + color: #fff; + font-size: 13px; + font-weight: 400; + line-height: 18px; + margin-bottom: 0; + margin-top: 0; +} + +.footer-copyright-link { + color: #fff; + text-decoration: none; +} + + + + + + + +/* Media Query For different screens */ +@media (min-width:320px) and (max-width:479px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ + .footer-content { + margin-left: auto; + margin-right: auto; + max-width: 1230px; + padding: 40px 15px 1050px; + position: relative; + } +} +@media (min-width:480px) and (max-width:599px) { /* smartphones, Android phones, landscape iPhone */ + .footer-content { + margin-left: auto; + margin-right: auto; + max-width: 1230px; + padding: 40px 15px 1050px; + position: relative; + } +} +@media (min-width:600px) and (max-width: 800px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ + .footer-content { + margin-left: auto; + margin-right: auto; + max-width: 1230px; + padding: 40px 15px 1050px; + position: relative; + } +} +@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ + +} +@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ + +} +@media (min-width:1281px) { /* hi-res laptops and desktops */ + +} + + + + +@media (min-width: 760px) { + .footer-content { + margin-left: auto; + margin-right: auto; + max-width: 1230px; + padding: 40px 15px 450px; + position: relative; + } + + .footer-wave-svg { + height: 50px; + z-index: 0; + } + + .footer-content-column { + width: 24.99%; + } +} +@media (min-width: 568px) { + /* .footer-content-column { + width: 49.99%; + } */ +} diff --git a/Hackathon.html b/Hackathon.html new file mode 100644 index 0000000..5d9ce3c --- /dev/null +++ b/Hackathon.html @@ -0,0 +1,251 @@ + + + + + + Hackathon Website + + + +
+
+
+
+
+ + + + + + + +
+
+
+
+ + +
+

First Page Of Hackathon

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus et fugiat reiciendis maiores. Illo, ex magnam, soluta, accusamus rerum incidunt provident deserunt enim neque tempora dicta asperiores expedita veritatis rem perferendis modi! Eos, aperiam delectus itaque repudiandae sit necessitatibus mollitia nostrum maiores? Perspiciatis commodi sunt voluptates similique! Dolorem nobis repellat laborum praesentium maxime fugit id non eius doloremque? Corporis suscipit cupiditate eaque vitae voluptates tempora repellat? Laboriosam facere architecto illo repellat. Reprehenderit odio iure nihil obcaecati esse, laboriosam rerum quod quidem natus perferendis, officiis tempore eos veritatis aspernatur cumque corrupti a, minima non tempora! Nam adipisci at repellendus optio earum.

+
+
+ +
+ +
+

Second Page of Hackathon

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus et fugiat reiciendis maiores. Illo, ex magnam, soluta, accusamus rerum incidunt provident deserunt enim neque tempora dicta asperiores expedita veritatis rem perferendis modi! Eos, aperiam delectus itaque repudiandae sit necessitatibus mollitia nostrum maiores? Perspiciatis commodi sunt voluptates similique! Dolorem nobis repellat laborum praesentium maxime fugit id non eius doloremque? Corporis suscipit cupiditate eaque vitae voluptates tempora repellat? Laboriosam facere architecto illo repellat. Reprehenderit odio iure nihil obcaecati esse, laboriosam rerum quod quidem natus perferendis, officiis tempore eos veritatis aspernatur cumque corrupti a, minima non tempora! Nam adipisci at repellendus optio earum.

+
+
+ +
+ +
+

Third Page of Hackathon

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio voluptatum provident sequi maxime architecto. Molestiae sunt perspiciatis tenetur in, consequatur, dolorum dignissimos illo recusandae earum enim dolorem! Adipisci odio, eum, ad voluptatum quia facilis itaque, temporibus commodi at officia corrupti animi amet excepturi veniam voluptate delectus aliquid quos doloremque maxime repudiandae deserunt culpa. Repellat dolor amet, porro eveniet laudantium veniam quaerat corrupti quod expedita nobis autem, vitae in, voluptates ducimus. Voluptas inventore eos excepturi impedit, hic repudiandae pariatur, consectetur esse est vel, enim nobis tempore? Cupiditate consectetur, porro perspiciatis architecto, sit nemo deleniti quos nisi, cum asperiores eos! Suscipit distinctio quis consequatur et reprehenderit beatae enim iusto sequi ipsam unde. Aut quidem ullam quo consequatur! Quos mollitia in ipsum tempora animi eum maxime optio, quasi voluptatem quae, illum quidem, perferendis quis sequi dolore excepturi nesciunt. Quibusdam dicta alias odit tenetur facere eaque nemo ut, deleniti ipsam laborum fugit, consequuntur incidunt qui assumenda adipisci beatae ullam eum omnis recusandae distinctio eveniet consequatur repellat? Aliquam illum, magni repellat ducimus tenetur architecto vero neque error laborum? Laudantium, magnam? Harum nobis perspiciatis ipsam, cumque explicabo voluptatum molestias voluptate laudantium sapiente esse perferendis reiciendis soluta eaque vero officiis voluptatibus deleniti voluptates culpa architecto hic totam, at aut quo amet. Excepturi explicabo, adipisci quaerat dicta nesciunt possimus incidunt ipsa debitis, fuga accusamus veniam animi? Praesentium aperiam non dolor voluptatibus illo modi id molestiae eius, temporibus enim, totam maiores velit atque soluta consectetur porro magnam nobis vero voluptates magni ipsa illum. Fugit atque laborum necessitatibus adipisci. Cupiditate dolorum, in amet veritatis facilis minus exercitationem quasi ipsum consectetur optio voluptatum! Enim saepe, ducimus, odit ad quia temporibus doloribus inventore aliquid repellendus optio blanditiis numquam aut expedita iusto! Ullam est culpa, sapiente placeat enim aliquid nostrum obcaecati laudantium? Facere hic doloribus autem nesciunt, libero porro officiis provident aliquam tempore animi quia, tempora laborum consequuntur! Mollitia enim porro harum, molestiae dicta exercitationem veritatis a odit repellendus dolor ipsam possimus aliquam iusto cupiditate accusantium! Illum corrupti architecto eum fuga, nostrum neque dolorum itaque ex accusantium dolor placeat laboriosam modi voluptas at expedita cum maxime quis recusandae aut molestiae! Doloribus, sapiente suscipit quas, dolor illum ea reprehenderit quibusdam dolorum rem harum adipisci. Laboriosam sit natus est error molestias culpa. Accusantium necessitatibus est fuga omnis dolor provident consequuntur ipsum iusto at corporis pariatur placeat dolorem ex dolorum ullam cumque, corrupti facilis perspiciatis maxime voluptates! At, officiis quia sit maiores incidunt eligendi magnam totam!

+
+
+ + +
+ +
+ + + +
+ +
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/Hackathon.js b/Hackathon.js new file mode 100644 index 0000000..79d007b --- /dev/null +++ b/Hackathon.js @@ -0,0 +1,218 @@ +(function () { + var ChaHeader = function (element) { + this.element = element; + this.sections = document.getElementsByClassName("js-cha-section"); + this.header = this.element.getElementsByClassName("js-cha-header")[0]; + // handle mobile behaviour + this.headerTrigger = this.element.getElementsByClassName( + "js-cha-header__trigger" + ); + this.modal = document.getElementsByClassName("js-cha-modal"); + this.focusMenu = false; + this.firstFocusable = null; + this.lastFocusable = null; + this.visibleClass = "cd-block"; + initChaHeader(this); + }; + + function initChaHeader(element) { + // set initial status + for (var j = 0; j < element.sections.length; j++) { + initSection(element, j); + } + + // handle mobile behaviour + if (element.headerTrigger.length > 0) { + initMobileVersion(element); + } + + // make sure header element is visible when in focus + element.header.addEventListener("focusin", function (event) { + checkHeaderVisible(element); + }); + } + + function initSection(element, index) { + // clone header element inside each section + var cloneItem = + index == 0 ? element.element : element.element.cloneNode(true); + cloneItem.classList.remove("js-cha-header-clip"); + var customClasses = element.sections[index].getAttribute( + "data-header-class" + ); + // hide clones to SR + cloneItem.setAttribute("aria-hidden", "true"); + if (customClasses) + addHeaderClass( + cloneItem.getElementsByClassName("js-cha-header")[0], + customClasses + ); + // keyborad users - make sure cloned items are not tabbable + if (index != 0) { + // reset tab index + resetTabIndex(cloneItem); + element.sections[index].insertBefore( + cloneItem, + element.sections[index].firstChild + ); + } + } + + function addHeaderClass(el, classes) { + var classList = classes.split(" "); + el.classList.add(classList[0]); + if (classList.length > 1) addHeaderClass(el, classList.slice(1).join(" ")); + } + + function resetTabIndex(clone) { + var focusable = clone.querySelectorAll("[href], button, input"); + for (var i = 0; i < focusable.length; i++) { + focusable[i].setAttribute("tabindex", "-1"); + } + } + + function initMobileVersion(element) { + //detect click on nav trigger + var triggers = document.getElementsByClassName("js-cha-header__trigger"); + for (var i = 0; i < triggers.length; i++) { + triggers[i].addEventListener("click", function (event) { + event.preventDefault(); + var ariaExpanded = !element.modal[0].classList.contains( + element.visibleClass + ); + //show nav and update button aria value + element.modal[0].classList.toggle(element.visibleClass, ariaExpanded); + element.headerTrigger[0].setAttribute("aria-expanded", ariaExpanded); + if (ariaExpanded) { + //opening menu -> move focus to first element inside nav + getFocusableElements(element); + element.firstFocusable.focus(); + } else if (element.focusMenu) { + if (window.scrollY < element.focusMenu.offsetTop) + element.focusMenu.focus(); + element.focusMenu = false; + } + }); + } + + // close modal on click + element.modal[0].addEventListener("click", function (event) { + if (!event.target.closest(".js-cha-modal__close")) return; + closeModal(element); + }); + + // listen for key events + window.addEventListener("keydown", function (event) { + // listen for esc key + if ( + (event.keyCode && event.keyCode == 27) || + (event.key && event.key.toLowerCase() == "escape") + ) { + // close navigation on mobile if open + if ( + element.headerTrigger[0].getAttribute("aria-expanded") == "true" && + isVisible(element.headerTrigger[0]) + ) { + closeModal(element); + } + } + // listen for tab key + if ( + (event.keyCode && event.keyCode == 9) || + (event.key && event.key.toLowerCase() == "tab") + ) { + trapFocus(element, event); + } + }); + } + + function closeModal(element) { + element.focusMenu = element.headerTrigger[0]; // move focus to menu trigger when menu is close + element.headerTrigger[0].click(); + } + + function trapFocus(element, event) { + if (element.firstFocusable == document.activeElement && event.shiftKey) { + //on Shift+Tab -> focus last focusable element when focus moves out of modal + event.preventDefault(); + element.lastFocusable.focus(); + } + if (element.lastFocusable == document.activeElement && !event.shiftKey) { + //on Tab -> focus first focusable element when focus moves out of modal + event.preventDefault(); + element.firstFocusable.focus(); + } + } + + function getFocusableElements(element) { + //get all focusable elements inside the modal + var allFocusable = element.modal[0].querySelectorAll( + '[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex]:not([tabindex="-1"]), [contenteditable], audio[controls], video[controls], summary' + ); + getFirstVisible(element, allFocusable); + getLastVisible(element, allFocusable); + } + + function getFirstVisible(element, elements) { + //get first visible focusable element inside the modal + for (var i = 0; i < elements.length; i++) { + if ( + elements[i].offsetWidth || + elements[i].offsetHeight || + elements[i].getClientRects().length + ) { + element.firstFocusable = elements[i]; + return true; + } + } + } + + function getLastVisible(element, elements) { + //get last visible focusable element inside the modal + for (var i = elements.length - 1; i >= 0; i--) { + if ( + elements[i].offsetWidth || + elements[i].offsetHeight || + elements[i].getClientRects().length + ) { + element.lastFocusable = elements[i]; + return true; + } + } + } + + function checkHeaderVisible(element) { + if ( + window.scrollY > + element.sections[0].offsetHeight - element.header.offsetHeight + ) + window.scrollTo(0, 0); + } + + function isVisible(element) { + return ( + element.offsetWidth || + element.offsetHeight || + element.getClientRects().length + ); + } + + // init the ChaHeader Object + var chaHader = document.getElementsByClassName("js-cha-header-clip"), + clipPathSupported = + CSS.supports( + "clip-path", + "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" + ) || + CSS.supports( + "-webkit-clip-path", + "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)" + ); + if (chaHader.length > 0 && clipPathSupported) { + for (var i = 0; i < chaHader.length; i++) { + new ChaHeader(chaHader[i]); + } + } + })(); + + \ No newline at end of file diff --git a/images/Hackathon.png b/images/Hackathon.png new file mode 100644 index 0000000..f778054 Binary files /dev/null and b/images/Hackathon.png differ