Added Rules section

This commit is contained in:
James Dinh 2022-06-01 14:37:46 -07:00
parent 8a45d25b6f
commit aed8178bc3
2 changed files with 202 additions and 11 deletions

View File

@ -132,6 +132,12 @@ nav li a:focus::after{
}
/* Responsive Functions */
@media (max-width: 880px) {
#photo-release-container {
transform: scale(0.8);
font-size: 20px;
}
}
@media (max-width: 800px) {
.checkbtn {
display: inline-block;
@ -161,8 +167,11 @@ nav li a:focus::after{
#card-container {
grid-template-columns: repeat(1, 1fr) !important;
}
#event, #rules, #prizes, #team {
transform: scale(0.9);
}
}
@media (max-width: 450px) {
@media (max-width: 470px) {
.checkbtn {
display: none;
}
@ -170,6 +179,9 @@ nav li a:focus::after{
height: 300px;
width: 300px;
}
#prizes-container {
transform: scale(0.8);
}
}
@media (max-height: 700px) {
#logo {
@ -321,9 +333,9 @@ section {
#event-description {
padding: 10px;
margin-right: 20px;
margin: 0 20px;
max-width: 700px;
min-width: 400px;
min-width: 200px;
font-size: 18px;
text-align: left;
}
@ -529,7 +541,6 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
height: auto;
margin-top: 7vh;
margin-left: 0;
padding-bottom: 30px;
}
input, .dot-info {
@ -673,6 +684,24 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
border: 2px solid rgb(155, 144, 144);
}
#rules-description {
margin: 10px 20px;
}
#photo-description {
margin: 10px 20px;
}
#photo-release-container {
border-radius: 10px;
border: 1px solid white;
background-color: #1f2b22;
margin: 10px auto;
max-width: 850px;
min-width: 400px;
padding: 10px;
}
#rules-container {
display: flex;
flex-wrap: wrap;
@ -680,6 +709,71 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
justify-content: center;
}
#guidelines {
margin: 20px;
}
#code-of-conduct {
margin: 20px;
}
.rules-card {
position: relative;
padding: 10px;
margin: 0 0 20px 20px;
background: rgb(47, 55, 70);
color: rgb(179, 179, 179);
border-radius: 8px;
max-width: 400px;
}
#rules-main-card {
width: 400px;
min-width: 300px;
border-radius: 10px;
background-color: #131d29;
margin: 10px auto;
padding: 10px 30px;
box-shadow: 5px 5px 10px rgb(0 0 0 / 20%);
text-align: left;
}
#rules-header {
padding-top: 10px;
}
/* Title of the card */
.rules-title {
color: rgb(253, 103, 103);
position: relative;
font-size: 17px;
}
.rules-card::before {
content: "";
font-size: 30px;
position: absolute;
width: 10px;
height: 10px;
left: -28px;
}
#rules-1::before {
content: "1";
}
#rules-2::before {
content: "2";
}
#rules-3::before {
content: "3";
}
#rules-4::before {
content: "4";
}
#rules-5::before {
content: "5";
}
#prizes-container {
display: grid;
margin: 50px 20px 0;

View File

@ -51,7 +51,7 @@
<li><a href="#event">Event</a></li>
<li><a href="#rules">Rules</a></li>
<li><a href="#prizes">Prizes</a></li>
<li><a href="#teams">Teams</a></li>
<li><a href="#teams">Team</a></li>
</ul>
</div>
</nav>
@ -128,7 +128,7 @@
<h5 class="timeline-description-subtitle">8/12 | 6:00pm - 6:30pm</h5><br>
<p class="timeline-description">The official start of the hackathon where we deliver the opening presentation along with the finalized teams, prompts, rules, and timeline.<br>
<ul class="timeline-description-list">
<li>You are required to attend this portion of the hackathon to participate</li>
<li>It is highly recommended you attend this portion of the hackathon (at least half of your team must attend to participate)</li>
<li><span class="important-text">=IMPORTANT=</span> DO NOT START CODING during this period</li>
</ul>
</p>
@ -231,8 +231,108 @@
<section id="rules">
<h2 class="topic">Rules</h2>
<hr class="line">
<div id=rules-description>
By attending this hackathon, you are required to abide and follow these guidelines and code of conduct.
<br>
Failure to comply with these rules will result in disquilification.</div>
<div id="rules-container">
<article id="guidelines">
<h2 id="signup-header">Hackathon Guidelines</h2>
<div id="rules-main-card">
<div id="signup-container">
<div class="rules-card" id="rules-1">
<p class="rules-title">No cheating</a></p>
<p>
- Do not consult with other teams<br>
</p>
</div>
<div class="rules-card" id="rules-2">
<p class="rules-title">Do not plagiarize</p>
<p>
- You are allowed to use existing libraries and packages with a valid liscence and give credit when credit is due
<br>
- You may also use old projects as frameworks for your product, but you cannot work on any material that is related to the hackathon before the event
</p>
</div>
<div class="rules-card" id="rules-3">
<p class="rules-title">Maintain open communications with your team at all times</p>
<p>
- A good team player is one who is always able to be reached and assists in team duties when needed
</p>
</div>
<div class="rules-card" id="rules-4">
<p class="rules-title">Any resource is at your disposal</p>
<p>
- You may use a combination of software and hardware in your project
</p>
</div>
<div class="rules-card" id="rules-5">
<p class="rules-title">Ask for help when needed</p>
<p>
- Don't be afraid to ask questions in the Discord or ask an organizer directly
<br>
- We want to ensure your team's success in this hackathon, so feel free to ask any questions if you feel unsure
</p>
</div>
</div>
</div>
*subject to change
</article>
<article id="code-of-conduct">
<h2 id="signup-header">Code of Conduct</h2>
<div id="rules-main-card">
<div id="signup-container">
<div class="rules-card" id="rules-1">
<p class="rules-title">Treat everyone with respect</p>
<p>
- This includes team members, judges, organizers, volunteers, etc.
<br>
- We reserve the right to refuse patronage to participants based on their actions
</p>
</div>
<div class="rules-card" id="rules-2">
<p class="rules-title">Be appropriate</p>
<p>- Respond professionally with organizers, answer questions truthfully, and ensure your project does is not offensive in any way <br>
</p>
</div>
<div class="rules-card" id="rules-3">
<p class="rules-title">Privacy is tantamount</p>
<p>
- You may not photograph anyone without consent
<br>
- We take your privacy VERY seriously
</p>
</div>
<div class="rules-card" id="rules-4">
<p class="rules-title">Don't be lazy</p>
<p>
- Help out anyone whenever possible (with navigation, signups, etc.), whether it's your teammate or another participant
<br>
- You are required to provide adequete effort to your team
</p>
</div>
<div class="rules-card" id="rules-5">
<p class="rules-title">Be ethical and equal</p>
<p>
- Consider the ramifications of your actions; do not do anything that will reputably harm others or yourself
<br>
- Split up work and treat others equally; Prizes are required to be split equally among the team
</p>
</div>
</div>
</div>
*subject to change
</article>
</div>
<div id="photo-release-container">
<h2>Photo Release Waiver</h2>
<div id=photo-description>
By participating in this hackathon, you hereby grant us permission to use your likeness and projects in a photograph, video, or other digital media in any and all of its publications, including, but not limited to social media and web-based publications. Any and all photos taken during the hackathon duration will become the proprietary property of Gilroy Hacks.
<br><br>
Upon agreeing to these terms, you authorize Gilroy hacks to edit, copy, or distribute these photoes for any lawful or advertising purpose. Additionally, you waive the right to royalties or compensation as a cause for using these photos.
<br><br>
However, we take your privacy very seriously; if you have a disagreement with any of the terms stated above, please contact an event organizer or email <a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">tech@gilroyhacks.com</a>
</div>
</div>
</section>
<section id="prizes">
@ -266,11 +366,8 @@
</div>
</section>
<section id="teams">
<h2 class="topic">Teams</h2>
<h2 class="topic">Team</h2>
<hr class="line">
<div id="discord-widget">
<iframe src="https://discord.com/widget?id=896884806124728352&theme=dark" width="350" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"></iframe>
</div>
</section>
</main>
<!--Footer-->