Added Content
This commit is contained in:
James Dinh
parent
4049a1584a
commit
768953548c
170
css/general.css
170
css/general.css
@ -314,124 +314,133 @@ nav li a:focus::after{
|
|||||||
|
|
||||||
/* Main Section */
|
/* Main Section */
|
||||||
main {
|
main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px 0 10px 0;
|
padding: 10px 0 10px 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
display: grid;
|
display: grid;
|
||||||
padding-bottom: 30px;
|
padding-bottom: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
section {
|
section {
|
||||||
width: auto;
|
width: auto;
|
||||||
padding-top: 70px;
|
padding-top: 70px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
max-width: 1500px;
|
max-width: 1500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topic {
|
.topic {
|
||||||
width: auto;
|
width: auto;
|
||||||
font-size: 35px;
|
font-size: 35px;
|
||||||
padding: 0 20px 0 20px;
|
padding: 0 20px 0 20px;
|
||||||
color:rgb(255, 243, 205);
|
color:rgb(255, 243, 205);
|
||||||
}
|
}
|
||||||
|
|
||||||
#discord-widget {
|
#discord-widget {
|
||||||
margin: 50px auto 0;
|
margin: 50px auto 0;
|
||||||
/* width: 20%; */
|
/* width: 20%; */
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
#event-container {
|
#event-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#event-description {
|
#event-description {
|
||||||
padding: 10px;
|
margin: 0 20px;
|
||||||
margin: 0 20px;
|
max-width: 700px;
|
||||||
max-width: 700px;
|
min-width: 200px;
|
||||||
min-width: 200px;
|
font-size: 18px;
|
||||||
font-size: 18px;
|
text-align: left;
|
||||||
text-align: left;
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#event-main-box {
|
||||||
|
padding: 10px;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid rgb(68, 68, 68);
|
||||||
}
|
}
|
||||||
|
|
||||||
#description-heading {
|
#description-heading {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
margin-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
padding-left: 20px;
|
padding-left: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list li{
|
.list li{
|
||||||
margin: 10px 0;
|
margin: 10px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Timeline */
|
/* Timeline */
|
||||||
#timeline {
|
#timeline {
|
||||||
|
padding: 10px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 50px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#timeline-heading {
|
#timeline-heading {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-parent {
|
.flex-parent {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-flex-container {
|
.input-flex-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
max-width: 1000px;
|
max-width: 1000px;
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
width: 22px;
|
width: 22px;
|
||||||
height: 22px;
|
height: 22px;
|
||||||
background-color: #2C3E50;
|
background-color: #2C3E50;
|
||||||
position: relative;
|
position: relative;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
display: block;
|
display: block;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
input:focus {
|
input:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
input::before, input::after {
|
input::before, input::after {
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
background-color: #2C3E50;
|
background-color: #2C3E50;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
/* width: 6vw; */
|
/* width: 6vw; */
|
||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
input::before {
|
input::before {
|
||||||
right: calc(2vw);
|
right: calc(2vw);
|
||||||
}
|
}
|
||||||
@ -535,7 +544,7 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 1250px) {
|
@media (max-width: 2250px) {
|
||||||
input::before {
|
input::before {
|
||||||
left: -37.5px;
|
left: -37.5px;
|
||||||
}
|
}
|
||||||
@ -925,7 +934,7 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
|
|||||||
}
|
}
|
||||||
|
|
||||||
#team-container article {
|
#team-container article {
|
||||||
padding: 20px 50px;
|
padding: 20px 35px;
|
||||||
width: 400px;
|
width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -971,7 +980,8 @@ input[data-description="5"]:checked ~ #timeline-descriptions-wrapper div[data-de
|
|||||||
|
|
||||||
.person-contact {
|
.person-contact {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
padding-top: 15px;
|
padding-top: 16px;
|
||||||
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Utilities */
|
/* Utilities */
|
||||||
@ -989,6 +999,10 @@ abbr[title] {
|
|||||||
color:rgb(51, 235, 189);
|
color:rgb(51, 235, 189);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.discord-text {
|
||||||
|
color: rgb(153, 126, 248);
|
||||||
|
}
|
||||||
|
|
||||||
.line {
|
.line {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
|
|||||||
26
index.html
26
index.html
@ -83,15 +83,17 @@
|
|||||||
<div id="event-container">
|
<div id="event-container">
|
||||||
<article id="event-description">
|
<article id="event-description">
|
||||||
<h2 id="description-heading">Description</h2>
|
<h2 id="description-heading">Description</h2>
|
||||||
<ul class="list">
|
<div id="event-main-box">
|
||||||
<li>Even if you're not an expert at coding, this hackathon will offer an opportunity to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind:
|
<ul class="list">
|
||||||
<ul style="margin-left: 25px">
|
<li>Even if you're not an expert at coding, this hackathon will offer an opportunity to strengthen your skills and collaborate with others to create something useful. Below are important dates to keep in mind:
|
||||||
<li><span class="emphasis-text">Aug 11</span> -> Signup Period Ends</li>
|
<ul style="margin-left: 25px">
|
||||||
<li><span class="emphasis-text">Aug 12-14</span> -> Summer 2022 Hackathon</li>
|
<li><span class="emphasis-text">Aug 11</span> -> Signup Period Ends</li>
|
||||||
</ul>
|
<li><span class="emphasis-text">Aug 12-14</span> -> Summer 2022 Hackathon</li>
|
||||||
</li>
|
</ul>
|
||||||
<li>Our program is dedicated to providing the Gilroy/Morgan Hill/Hollister youth with the opportunity to develop their coding skills. We specialize in hackathons where students participate in teams and compete for prizes.</li>
|
</li>
|
||||||
</ul>
|
<li>Our program is dedicated to providing the Gilroy/Morgan Hill/Hollister youth with the opportunity to develop their coding skills. We specialize in hackathons where students participate in teams and compete for prizes.</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
|
<!-- Timeline src: https://codepen.io/cjl750/pen/MXvYmg -->
|
||||||
<div id="timeline">
|
<div id="timeline">
|
||||||
<h2 id="timeline-heading">Timeline</h2>
|
<h2 id="timeline-heading">Timeline</h2>
|
||||||
@ -440,9 +442,9 @@
|
|||||||
<div class="team-entry">
|
<div class="team-entry">
|
||||||
<div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
|
<div class="team-picture"><img src="img/Gilroy Hacks Logo [icon-tp-podium].png" loading="lazy" alt="profile picture"></div>
|
||||||
<div class="team-description">
|
<div class="team-description">
|
||||||
<h4 class="person-name">Isaac Hwang</h4>
|
<h4 class="person-name">James Dinh</h4>
|
||||||
<h5 class="person-subtitle">Lead Organizer</h5>
|
<h5 class="person-subtitle">Lead Website Designer</h5>
|
||||||
<h5 class="person-contact">[Email]</h5>
|
<h5 class="person-contact"><span class="discord-text">Discord</span>: wellfedbison#0607<br><a class="link" target="_blank" href="mailto:jamesdinh77@protonmail.com" title="Email">jamesdinh77@protonmail.com</a></h5>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="team-entry">
|
<div class="team-entry">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user