Fixed Mobile functionality
This commit is contained in:
parent
fc7559c6df
commit
b0ccaa1408
@ -37,6 +37,16 @@ nav * {
|
||||
|
||||
#nav-logo {
|
||||
margin-top: 5px;
|
||||
height: 50px;
|
||||
width: 258px;
|
||||
}
|
||||
|
||||
#nav-logo-div {
|
||||
height: 50px;
|
||||
width: 258px;
|
||||
margin: none;
|
||||
display: inline block;
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
#nav-logo-a {
|
||||
@ -132,12 +142,26 @@ nav li a:focus::after{
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.notification {
|
||||
/* .notification {
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
z-index: 100;
|
||||
visibility: hidden;
|
||||
} */
|
||||
|
||||
@keyframes dropdown{
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
30% {
|
||||
transform: translateY(-30px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0px);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive Functions */
|
||||
@ -146,28 +170,26 @@ nav li a:focus::after{
|
||||
display: inline-block;
|
||||
}
|
||||
nav ul {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin-top: 58px;
|
||||
margin-right: 0;
|
||||
background: rgb(24, 24, 24);
|
||||
top: -100%;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 250px;
|
||||
margin-top: 58px;
|
||||
margin-right: 0;
|
||||
background: rgb(24, 24, 24);
|
||||
visibility: hidden;
|
||||
text-align: center;
|
||||
}
|
||||
nav ul li {
|
||||
display: block;
|
||||
margin: 20px 0;
|
||||
line-height: 30px;
|
||||
display: block;
|
||||
margin: 20px 0;
|
||||
line-height: 30px;
|
||||
}
|
||||
#check:checked ~ul {
|
||||
top: 0;
|
||||
visibility: visible;
|
||||
animation: dropdown 1s ease;
|
||||
}
|
||||
.checkbtn {
|
||||
display: inline-block;
|
||||
}
|
||||
#card-container {
|
||||
grid-template-columns: repeat(1, 1fr) !important;
|
||||
display: inline-block;
|
||||
}
|
||||
#prize-logo, .podium-label {
|
||||
transform: scale(0.9);
|
||||
@ -189,8 +211,13 @@ nav li a:focus::after{
|
||||
}
|
||||
}
|
||||
@media (max-width: 470px) {
|
||||
.checkbtn {
|
||||
/* .checkbtn {
|
||||
display: none;
|
||||
} */
|
||||
#nav-logo {
|
||||
content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico);
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
#logo {
|
||||
height: 300px;
|
||||
@ -243,8 +270,8 @@ nav li a:focus::after{
|
||||
/* Header */
|
||||
#header-background {
|
||||
background-image: url(/img/mountains-1.jpg);
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
/* background-position: center; */
|
||||
/* background-size: cover; */
|
||||
background-repeat: no-repeat;
|
||||
background-attachment: fixed;
|
||||
height: 100vh;
|
||||
@ -1051,7 +1078,7 @@ section {
|
||||
#map-article {
|
||||
margin: 20px auto 0;
|
||||
width: 90%;
|
||||
max-width: 1000px;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
#cal-container {
|
||||
@ -1065,7 +1092,7 @@ section {
|
||||
}
|
||||
|
||||
.cal-card {
|
||||
width: 33%;
|
||||
width: 33.3%;
|
||||
border-radius: 7px;
|
||||
border: 1px solid white;
|
||||
}
|
||||
|
18
index.html
18
index.html
@ -41,7 +41,7 @@
|
||||
<!--Nav-->
|
||||
<nav id="navBar">
|
||||
<a id="nav-logo-a" href="./">
|
||||
<img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" height="50" width="258" alt="logo"/>
|
||||
<img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
|
||||
</a>
|
||||
<div id="nav-links-container">
|
||||
<input type="checkbox" id="check">
|
||||
@ -107,27 +107,27 @@
|
||||
<div class="input-flex-container">
|
||||
<div id="timeline-left-arrow"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg></div>
|
||||
<input id="t1" class="timeline-input" type="radio" name="timeline-dot" data-description="1" checked>
|
||||
<div onclick="checkt('t1')" class="dot-info" data-description="1">
|
||||
<div onclick="check('t1')" class="dot-info" data-description="1">
|
||||
<span class="year">8/12 4:00pm</span>
|
||||
<span class="label">Opening Ceremony</span>
|
||||
</div>
|
||||
<input id="t2" class="timeline-input" type="radio" name="timeline-dot" data-description="2">
|
||||
<div onclick="checkt('t2')" class="dot-info" data-description="2">
|
||||
<div onclick="check('t2')" class="dot-info" data-description="2">
|
||||
<span class="year">8/12 5:00pm</span>
|
||||
<span class="label">Hacking Begins</span>
|
||||
</div>
|
||||
<input id="t3" class="timeline-input" type="radio" name="timeline-dot" data-description="3">
|
||||
<div onclick="checkt('t3')" class="dot-info" data-description="3">
|
||||
<div onclick="check('t3')" class="dot-info" data-description="3">
|
||||
<span class="year">8/14 12:00pm</span>
|
||||
<span class="label">Hacking Ends</span>
|
||||
</div>
|
||||
<input id="t4" class="timeline-input" type="radio" name="timeline-dot" data-description="4">
|
||||
<div onclick="checkt('t4')" class="dot-info" data-description="4">
|
||||
<div onclick="check('t4')" class="dot-info" data-description="4">
|
||||
<span class="year">8/14 2:00pm</span>
|
||||
<span class="label">Project Presentations</span>
|
||||
</div>
|
||||
<input id="t5" class="timeline-input" type="radio" name="timeline-dot" data-description="5">
|
||||
<div onclick="checkt('t5')" class="dot-info" data-description="5">
|
||||
<div onclick="check('t5')" class="dot-info" data-description="5">
|
||||
<span class="year">8/14 3:30pm</span>
|
||||
<span class="label">Awards Ceremony</span>
|
||||
</div>
|
||||
@ -210,7 +210,7 @@
|
||||
<div id="checklist">
|
||||
<input id="01" onclick="save()" type="checkbox" name="r" value="1">
|
||||
<label for="01">
|
||||
<p class="title">1. Sign up w/ this <a onclick="check01()" class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p>
|
||||
<p class="title">1. Sign up w/ this <a onclick="check('01')" class="link" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7" title="Signup Form">form</a></p>
|
||||
</label>
|
||||
<label for="01">
|
||||
<p class="step-desc">- These questions are used to gauge your experience and skills so we can pair you with others</p>
|
||||
@ -223,7 +223,7 @@
|
||||
<div id="checklist">
|
||||
<input id="02" onclick="save()" type="checkbox" name="r" value="2">
|
||||
<label for="02">
|
||||
<p class="title">2. Join the <a onclick="check02()" class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p>
|
||||
<p class="title">2. Join the <a onclick="check('02')" class="link" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></p>
|
||||
</label>
|
||||
<label for="02">
|
||||
<p class="step-desc">- Please change your nickname to your First and Last name</p>
|
||||
@ -558,7 +558,7 @@
|
||||
<div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
|
||||
<div class="team-description">
|
||||
<h4 class="person-name">Aadhavan Magesh</h4>
|
||||
<h5 class="person-subtitle">Head of Administration</h5>
|
||||
<h5 class="person-subtitle">Administrative Manager</h5>
|
||||
<h5 class="person-contact"><span class="discord-text">Discord</span>: Skymon<span class="discord-tag">#0438</span><br><a class="link" target="_blank" href="mailto:aadhavan.magesh@gmail.com" title="Email">aadhavan.magesh@gmail.com</a></h5>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
var i;
|
||||
var checkboxes = document.querySelectorAll('input[type=checkbox]');
|
||||
var checkboxes = document.querySelectorAll('#signup-container input[type=checkbox]');
|
||||
function save() {
|
||||
for (i = 0; i < checkboxes.length; i++) {
|
||||
localStorage.setItem(checkboxes[i].value, checkboxes[i].checked);
|
||||
@ -13,13 +13,7 @@ function load() {
|
||||
checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
|
||||
}
|
||||
}
|
||||
function check01() {
|
||||
document.getElementById('01').checked = true;
|
||||
}
|
||||
function check02() {
|
||||
document.getElementById('02').checked = true;
|
||||
}
|
||||
function checkt(id) {
|
||||
function check(id) {
|
||||
document.getElementById(id).checked = true;
|
||||
}
|
||||
function notifitcation_popup() {
|
||||
@ -28,10 +22,10 @@ function notifitcation_popup() {
|
||||
{
|
||||
if (localStorage.getItem(checkboxes[i].value) != true) {
|
||||
verify = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (verify) {
|
||||
document.getElementById("notification").style.visibility = "visible";
|
||||
|
||||
document.getElementById('notification').style.visibility = visible;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user