Changed profile img

This commit is contained in:
James Dinh 2022-06-30 14:43:32 -07:00
parent 1a2d360f20
commit 2a9baf9f13
5 changed files with 583 additions and 481 deletions

View File

@ -1791,6 +1791,10 @@ section {
border: 1px solid rgb(161, 161, 161);
}
#jd {
border: 0px;
}
.team-description {
text-align: left;
width: auto;

View File

@ -12,14 +12,14 @@ html {
scroll-behavior: smooth;
}
/* Nav */
* {
/* Nav */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
}
nav {
nav {
height: 59px;
width: 100%;
overflow: hidden;
@ -28,66 +28,66 @@ html {
position: fixed;
flex-wrap: nowrap;
z-index: 100;
}
}
nav * {
nav * {
padding: 0;
margin: 0px 5px;
list-style: none;
box-sizing: border-box;
z-index: 100;
text-decoration: none;
}
}
#nav-logo {
#nav-logo {
margin-top: 5px;
height: 50px;
width: 258px;
}
}
#nav-logo:hover {
#nav-logo:hover {
transform: scale(1.03);
transition: 0.5s;
}
}
#nav-logo-div {
#nav-logo-div {
height: 50px;
width: 258px;
margin: none;
display: inline block;
position: fixed;
}
}
#nav-logo-a {
#nav-logo-a {
position: relative;
}
}
nav ul {
nav ul {
float: right;
margin-right: 20px;
}
}
nav ul li {
nav ul li {
display: inline-block;
line-height: 30px;
margin: 10px 7px;
padding: 3px 5px;
cursor: pointer;
}
}
.navlink {
.navlink {
color:rgb(233, 203, 104);
font-size: 18px;
text-decoration: none;
position: relative;
}
}
.navlink.active,a:hover {
.navlink.active,a:hover {
color: rgba(233, 203, 104, 0.774);
transition: .5s;
}
}
.navlink::after {
.navlink::after {
content: '';
position: absolute;
bottom: 0;
@ -101,12 +101,12 @@ html {
transform-origin: center;
}
.navlink:hover::after,
.navlink:focus::after{
.navlink:hover::after,
.navlink:focus::after{
transform: scale(1);
}
}
.checkbtn {
.checkbtn {
font-size: 23px;
color: white;
float: right;
@ -114,13 +114,13 @@ html {
margin-right: 20px;
cursor: pointer;
display: none;
}
}
#check {
#check {
display: none;
}
}
#nav-links-container {
#nav-links-container {
display: flex;
width: auto;
margin: 0;
@ -130,9 +130,9 @@ html {
flex-wrap: nowrap;
flex-direction: row-reverse;
align-content: stretch;
}
}
#sign-up {
#sign-up {
padding: 6px 7px;
margin: 14px 15px 14px 4px;
@ -142,57 +142,53 @@ html {
color: bisque;
display: flex;
place-items: center;
}
}
#sign-up:hover {
#sign-up:hover {
transform: scale(1.05);
background-color: blueviolet;
cursor: pointer;
transition: 0.5s;
}
}
#banner {
height: 100%;
/* width: 50%; */
width: 380px;
margin: auto;
font-size: 20px;
#banner {
width: 70%;
position: absolute;
justify-content: center;
display: inline-flex;
position: relative;
justify-content: left;
overflow: hidden;
align-items: center;
}
top: 16px;
font-size: 20px;
margin: auto;
}
#banner-text {
#banner-text {
text-align: center;
}
}
#timer {
#timer {
color: rgb(184, 184, 184);
animation: blinking 3s infinite;
background-color: rgb(57, 57, 57);
border-radius: 5px;
padding: 2px 5px;
}
}
.tooltip-nav {
.tooltip-nav {
text-decoration: none;
}
}
#timer-link {
#timer-link {
color:rgb(252, 188, 93);
text-decoration: none;
cursor: pointer;
background: unset;
}
}
.link:hover {
.link:hover {
color:rgba(252, 188, 93, 0.719);
}
}
@keyframes blinking {
@keyframes blinking {
0% {
opacity: 1;
}
@ -202,28 +198,9 @@ html {
100% {
opacity: 1;
}
}
/* @keyframes headline {
0% {
transform: translateX(600px);
}
50% {
transform: translateX(-600px);
}
100% {
transform: translateX(-600px);
}
} */
}
/* .notification {
position: absolute;
text-align: center;
margin: auto;
z-index: 100;
visibility: hidden;
} */
@keyframes dropdown{
@keyframes dropdown{
0% {
opacity: 0;
transform: translateY(-30px);
@ -238,15 +215,15 @@ html {
100% {
transform: translateY(0px);
}
}
}
/* Responsive Functions */
@media (max-width: 1150px) {
/* Responsive Functions */
@media (max-width: 1150px) {
#banner {
display: none;
}
}
@media (max-width: 800px) {
}
@media (max-width: 800px) {
.checkbtn {
display: inline-block;
}
@ -294,21 +271,21 @@ html {
display: inline-flex;
width: 300px;
}
}
@media (max-width: 750px) {
}
@media (max-width: 750px) {
#banner {
display: none;
}
}
@media (max-width: 500px) {
}
@media (max-width: 500px) {
#event, #rules, #prizes, #team {
transform: scale(0.9);
}
section {
padding-top: 0 !important;
}
}
@media (max-width: 470px) {
}
@media (max-width: 470px) {
#nav-logo {
content: url(/img/Gilroy-Hacks-Logo-icon-tp.ico);
height: 50px;
@ -321,8 +298,8 @@ html {
#prizes-container {
transform: scale(0.9);
}
}
@media (max-height: 550px) {
}
@media (max-height: 550px) {
#logo {
transform: scale(0.8);
}
@ -338,14 +315,14 @@ html {
#entrance-arrow {
visibility: hidden;
}
}
@media (max-height: 400px) {
}
@media (max-height: 400px) {
#header {
transform: scale(0.7);
}
}
}
.blob {
.blob {
background: black;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
@ -355,15 +332,15 @@ html {
transform: scale(1);
animation: pulse-black 2s infinite;
position: relative;
}
}
.blob.green {
.blob.green {
background: rgba(51, 217, 178, 1);
box-shadow: 0 0 0 0 rgba(51, 217, 178, 1);
animation: pulse-green 2s infinite;
}
}
@keyframes pulse-green {
@keyframes pulse-green {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(51, 217, 178, 0.7);
@ -376,91 +353,97 @@ html {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(51, 217, 178, 0);
}
}
}
/* Header */
#header-background {
/* Header */
#header-background {
background-image: url(/img/mountains-1.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
height: 20%;
}
}
#header {
#header {
width: 100%;
height: 100%;
padding: 70px 0 50px;
display: flex;
flex-flow: column nowrap;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
text-align: center;
position: relative;
/* background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%); */
}
}
#logo {
#logo {
height: 100px;
width: 100px;
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
}
#header-subtitle-date {
padding: 5px;
#header-info {
display: flex;
flex-flow: column nowrap;
align-items: left;
}
#header-subtitle-date {
font-size: 18px;
padding: 5px 7px;
width: fit-content;
margin-top: 5px;
border-radius: 10px;
display: flex;
place-items: center;
border: 1px solid rgb(73, 73, 73);
background-color: rgb(22, 22, 22);
animation: slidein ease 1.5s;
}
}
#spots-container {
#spots-container {
display: flex;
place-items: center;
border-radius: 10px;
margin-top: 5px;
padding: 0 7px;
border: 1px solid rgb(73, 73, 73);
background-color: rgb(22, 22, 22);
animation: slidein-2 ease 3s;
}
}
#header-subtitle-spots {
#header-subtitle-spots {
font-size: 18px;
padding: 5px;
}
}
#spots-container:hover, #header-subtitle-date:hover {
#spots-container:hover, #header-subtitle-date:hover {
transform: translateY(-2px);
transition: 0.5s;
}
}
#entrance-arrow {
#entrance-arrow {
width: 50px;
height: 50px;
position: absolute;
bottom: 10px;
float: bottom;
animation: bounce 3s infinite;
}
}
#entrance-arrow:hover {
#entrance-arrow:hover {
font-size: 17px;
transition: 0.1s;
}
}
#header-gradient {
#header-gradient {
width: 100%;
height: 100%;
background-image: linear-gradient(#0d111733 50%, #0d11175e 60%, #0d1117 100%);
}
}
@keyframes bounce {
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
@ -470,22 +453,66 @@ html {
60% {
transform: translateY(-3px);
}
}
}
@keyframes fadeInAnimation {
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}
/* Main Section */
main {
width: 100%;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
margin: auto;
display: grid;
padding-bottom: 30px;
}
section {
width: auto;
padding-top: 70px;
text-align: center;
justify-content: center;
align-items: center;
max-width: 1500px;
min-width: 200px;
}
.topic {
width: auto;
font-size: 35px;
padding: 0 20px 0 20px;
color:rgb(255, 243, 205);
}
#license-list {
display: flex;
flex-flow: column;
width: 100%;
height: auto;
margin: auto;
}
.license-entry {
width: 100%;
height: auto;
padding: 10px;
text-align: left;
}
/* Utilities */
#line-header {
width: 200px;
margin: 0 auto 5px;
animation: grow-wide ease 2s;
.vertical-line {
width: 2px;
margin: 0 10px;
background-color: rgb(255, 255, 255);
}
@keyframes grow-wide {
@ -552,25 +579,65 @@ html {
footer {
width: auto;
height: 100px;
height: auto;
background-color: rgb(24, 24, 24);
justify-content: center;
align-items: center;
align-items: left;
text-align: center;
padding: 10px 20px 20px 20px;
padding: 20px;
flex-flow: row wrap;
}
footer ul {
float: top;
#footer-container {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
}
#footer-logo {
height: 45px;
width: 232px;
margin-left: -5px;
}
#footer-desc {
width: 350px;
text-align: left;
line-height: 25px;
font-size: 18px;
}
#socials {
width: 100%;
height: auto;
display: flex;
flex-wrap: wrap;
margin-top: 10px;
}
.socials-icon {
margin: 0 10px;
}
#footer-copyright {
color: rgb(129, 129, 129);
}
#footer-line {
width: 100%;
margin: 10px auto;
}
#footer-links {
width: 200px;
margin-top: 7px;
padding-left: 40px;
text-align: left;
}
footer li {
display: inline-block;
margin: 0 7px;
}
footer a {
color:rgb(108, 176, 231);
font-size: 16px;
line-height: 30px;
list-style: none;
}

BIN
img/jd.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

View File

@ -633,7 +633,7 @@
<article id="tech">
<h3 class="team-title">Tech</h3>
<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 id="jd" src="img/jd.png" loading="lazy" alt="profile picture"></div>
<div class="team-description">
<h4 class="person-name">James Dinh</h4>
<h5 class="person-subtitle">Lead Website Designer</h5>

View File

@ -14,7 +14,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Gilroy Hacks Liscences</title>
<title>Gilroy Hacks · Liscences</title>
<link href="css/licenses.css" rel="stylesheet" type="text/css" media="all">
<link href="css/scroll_nav.css" rel="stylesheet" type="text/css" media="all">
<link rel="icon" href="img/Gilroy-Hacks-Logo-icon-tp.ico">
@ -49,6 +49,12 @@
<a id="nav-logo-a" href="./">
<img id="nav-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
</a>
<div id="banner">
<p id="banner-text"><a class="navlink" id="timer-link" href="#timeline">Opening Ceremony</a> in
<abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr>
<!-- <span id="nav-tooltip" data-text="Aug 12, 4pm"></span> -->
</p>
</div>
<div id="nav-links-container">
<input onclick="btnToggle()" type="checkbox" id="check">
<label for="check" class="checkbtn">
@ -61,9 +67,6 @@
<li><a class="navlink" onclick="uncheck('check')" href="#prizes">Prizes</a></li>
<li><a class="navlink" onclick="uncheck('check')" href="#team">Team</a></li>
</ul>
<div id="banner">
<p id="banner-text"><a class="navlink" id="timer-link" href="#timeline" title="Click for more info">Opening Ceremony</a> in<abbr class="tooltip-nav" title="Aug 12, 4pm"><span id="timer"></span></abbr></p>
</div>
</div>
</nav>
<header>
@ -71,11 +74,13 @@
<div id="header-gradient">
<div id="header">
<img id="logo" src="img/Gilroy Hacks Logo [Summer].png" height="100" width="100" alt="logo"/>
<hr id="line-header">
<div class="vertical-line"></div>
<div id="header-info">
<h2 id="header-subtitle-date">Aug 12 - 14</h2>
<div id="spots-container">
<div class="blob green" aria-hidden="true"></div>
<h2 id="header-subtitle-spots">35 spots remaining</h2>
<h2 id="header-subtitle-spots">32 spots remaining</h2>
</div>
</div>
</div>
</div>
@ -83,26 +88,52 @@
</header>
<main>
<section>
hi
<h2 class="topic">Licenses</h2>
<hr class="line">
<div id="license-list">
<article class="license-entry">
img/bars.png
</article>
</div>
</section>
</main>
<!--Footer-->
<footer>
<div id="footer-container">
<article id="footer-desc">
<img id="footer-logo" src="img/Gilroy Hacks Logo [Summer-wide-2].png" alt="logo"/>
<p>
Gilroy Hacks is a student-led organization focused on promoting community engagement and improving STEM exposure for local high school students.
</p>
<div id="socials">
<div><a target="_blank" href="https://www.facebook.com/profile.php?id=100082498013066" title="Facebook"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm4 7.278V4.5h-2.286c-2.1 0-3.428 1.6-3.428 3.889v1.667H8v2.777h2.286V19.5h2.857v-6.667h2.286L16 10.056h-2.857V8.944c0-1.11.572-1.666 1.714-1.666H16z"/></svg></a></div>
<div class="socials-icon"><a target="_blank" href="https://www.instagram.com/gilroyhacks/" title="Instagram"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 0c6.6274 0 12 5.3726 12 12s-5.3726 12-12 12S0 18.6274 0 12 5.3726 0 12 0zm3.115 4.5h-6.23c-2.5536 0-4.281 1.6524-4.3805 4.1552L4.5 8.8851v6.1996c0 1.3004.4234 2.4193 1.2702 3.2359.7582.73 1.751 1.1212 2.8818 1.1734l.2633.006h6.1694c1.3004 0 2.389-.4234 3.1754-1.1794.762-.734 1.1817-1.7576 1.2343-2.948l.0056-.2577V8.8851c0-1.2702-.4234-2.3589-1.2097-3.1452-.7338-.762-1.7575-1.1817-2.9234-1.2343l-.252-.0056zM8.9152 5.8911h6.2299c.9072 0 1.6633.2722 2.2076.8166.4713.499.7647 1.1758.8103 1.9607l.0063.2167v6.2298c0 .9375-.3327 1.6936-.877 2.2077-.499.4713-1.176.7392-1.984.7806l-.2237.0057H8.9153c-.9072 0-1.6633-.2722-2.2076-.7863-.499-.499-.7693-1.1759-.8109-2.0073l-.0057-.2306V8.885c0-.9073.2722-1.6633.8166-2.2077.4712-.4713 1.1712-.7392 1.9834-.7806l.2242-.0057h6.2299-6.2299zM12 8.0988c-2.117 0-3.871 1.7238-3.871 3.871A3.8591 3.8591 0 0 0 12 15.8408c2.1472 0 3.871-1.7541 3.871-3.871 0-2.117-1.754-3.871-3.871-3.871zm0 1.3911c1.3609 0 2.4798 1.119 2.4798 2.4799 0 1.3608-1.119 2.4798-2.4798 2.4798-1.3609 0-2.4798-1.119-2.4798-2.4798 0-1.361 1.119-2.4799 2.4798-2.4799zm4.0222-2.3589a.877.877 0 1 0 0 1.754.877.877 0 0 0 0-1.754z"/></svg></a></div>
</div>
<hr id="footer-line">
<p id="footer-copyright">
© 2022 Gilroy Hacks. All Rights Reserved
</p>
</article>
<article id="footer-links">
<h3>Links</h3><br>
<ul>
<li><a class="link" onclick="check('02'); save()" target="_blank" href="https://discord.gg/nkTDKMcYbr" title="Discord Invite Link">Discord</a></li>
<li><a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">Contact Us</a></li>
<li><a class="link" target="_blank" href="https://forms.gle/jhVFg4hN42k7EMZs7" title="Volunteer Signup Form">Volunteer Signup</a></li>
<li><a class="link" onclick="check('01'); save();" target="_blank" href="https://forms.gle/coK7q43RwBV2f15i7">Signup Form</a></li>
<li><a class="link" target="_blank" href="https://sccl.bibliocommons.com/events/62acbe100685eb4200c37c48" title="Gilroy Library Event">Library Event Entry</a></li>
<li><a class="link" target="_blank" href="mailto:tech@gilroyhacks.com" title="Email">Email Us</a></li>
</ul>
<hr id="footer-line">
© 2022 Gilroy Hacks <br>
All Rights Reserved
</article>
<article id="footer-links">
<h3>Location</h3><br>
<ul>
<li>Gilroy Library<br>350 W 6th St, Gilroy, CA 95020</li>
</ul>
</article>
</div>
</footer>
<!-- JavaScript Refs -->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/scroll_nav.js"></script>
<script src="js/scroll_element.js"></script>
<script src="js/timer.js"></script>
<script src="js/data_checkbox.js"></script>
<script src="js/map.js"></script>
</body>
</html>