diff --git a/css/general.css b/css/general.css index 305ab8e..53a227d 100644 --- a/css/general.css +++ b/css/general.css @@ -14,7 +14,6 @@ html { } nav { - /*background: rgb(31, 33, 35);*/ height: auto; width: 100%; overflow: hidden; @@ -23,12 +22,11 @@ nav { position: fixed; flex-wrap: nowrap; z-index: 100; - /*box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%);*/ } nav * { padding: 0; - margin: 1px 1px; + margin: 2px 5px; list-style: none; box-sizing: border-box; z-index: 100; @@ -110,11 +108,79 @@ nav li a:focus::after{ font-size: 17px; } -.header-background { +#header-background { background-image: none; background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; height: 100vh; /* makes it so it covers the entire page */ +} + +#header { + width: 100%; + height: 100%; + display: flex; + flex-flow: column nowrap; + justify-content: center; + align-items: center; + + text-align: center; + position: relative; + background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); +} + +#header-subtitle-date { + padding: 5px; +} + +#header-subtitle-spots { + padding: 5px; +} + +#entrance-arrow { + max-height: 90px; + max-width: 35px; + height: 50px; + position: absolute; + bottom: 10px; + float: bottom; + animation: bounce 3s infinite; +} + +@keyframes bounce { + 0%, 20%, 50%, 80%, 100% { + transform: translateY(0); + } + 40% { + transform: translateY(-5px); + } + 60% { + transform: translateY(-3px); + } +} + +main { + width: 100%; + padding: 10px 0 10px 0; + align-items: center; + justify-content: center; + text-align: center; + position: relative; + margin: auto; + display: grid; + padding-bottom: 30px; +} + +section { + width: auto; + padding: 70px 0px 0 0px; + text-align: center; + align-items: center; + max-width: 1500px; +} + +.line { + width: 200px; + margin-bottom: 5px; } \ No newline at end of file diff --git a/css/scroll_nav.css b/css/scroll_nav.css new file mode 100644 index 0000000..73586e3 --- /dev/null +++ b/css/scroll_nav.css @@ -0,0 +1,5 @@ +.pa-fixed-header { + background-color: rgb(24, 24, 24) !important; + box-shadow: 0 1px 6px 0 rgb(0 0 0 / 20%); + transition: background-color 0.25s ease-out; +} \ No newline at end of file diff --git a/img/Gilroy Hacks Logo [Summer-wide].png b/img/Gilroy Hacks Logo [Summer-wide].png new file mode 100644 index 0000000..369367b Binary files /dev/null and b/img/Gilroy Hacks Logo [Summer-wide].png differ diff --git a/img/Gilroy Hacks Logo [Summer].png b/img/Gilroy Hacks Logo [Summer].png new file mode 100644 index 0000000..bc78b6e Binary files /dev/null and b/img/Gilroy Hacks Logo [Summer].png differ diff --git a/index.html b/index.html index 2d4e1f1..a751371 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,13 @@ Gilroy Hacks + - + + + + +
-
+
- + +
+
Event
+
Rules
+
Prizes
+
Teams
+
+ \ No newline at end of file diff --git a/js/scroll_nav.js b/js/scroll_nav.js new file mode 100644 index 0000000..41c849b --- /dev/null +++ b/js/scroll_nav.js @@ -0,0 +1,30 @@ + +// Toggle the .pa-fixed-header class when the user +// scroll 100px + +window.onscroll = () => {scrollNavbar()}; + +scrollNavbar = () => { + // Target elements + const navBar = document.getElementById("navBar"); + const links = document.querySelectorAll("#navBar a"); + + if (document.documentElement.scrollTop > 100) { + navBar.classList.add("pa-fixed-header"); + + // Change the color of links on scroll + for (let i = 0; i < links.length; i++) { + const element = links[i]; + element.classList.add('text-black'); + } + + } else { + navBar.classList.remove("pa-fixed-header"); + + // Change the color of links back to default + for (let i = 0; i < links.length; i++) { + const element = links[i]; + element.classList.remove('text-black'); + } + } +}