Skip to content

Commit

Permalink
major website updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@dssikdar
dssikdar committed Jul 1, 2024
1 parent bea8029 commit 0dd4583
Show file tree
Hide file tree
Showing 8 changed files with 306 additions and 216 deletions.
6 changes: 4 additions & 2 deletions contact_us.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@
</head>
<p style="margin-bottom:200px;"></p>
<body>
<header class="bg-black text-white pt-2 pb-2 pl-8 pr-8">
<div id="left"><img src="image/QC@UCI Logo_small.png" width="125" alt="QC@UCI Logo"></div>
<header class="header">
<a href="index.html">
<img src="image/Anteater+Eq_Logo.png" width="150" alt="Home">
</a>
<nav>
<ul class="header__nav">
<li><a href="index.html">Home</a></li>
Expand Down
99 changes: 71 additions & 28 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -609,7 +609,7 @@ section.join__body {
section.join__body .contact__header {
color: var(--black-color);
width: 80%;
text-align: left;
text-align: center;
font-size: var(--font-huge);
}

Expand All @@ -624,56 +624,99 @@ section.join__body .join__platform {
text-transform: capitalize;
padding: 10px 10px;
font-size: 30px;
margin-top: 15px;
display: flex;
justify-content:center;
color: var(--black-color);
}

section.join__body .join__platform button {
border: none;
}

/* ############# */

section.join__body .join__header {
width: 80%;
margin: 40px 0px;
/*font-size: var(--font-mega);*/
font-size: clamp(1.5rem, 2.5vw, 3rem); /* Changed line: Dynamic font size */
text-align: left;
}

section.join__body .join__platform {
text-transform: capitalize;
padding: 10px 10px;
/*font-size: 30px;*/
font-size: clamp(1rem, 2vw, 2.5rem); /* Changed line: Dynamic font size */
margin-top: 15px;
display: flex;
justify-content: space-between;
flex-direction: column; /* Stack buttons vertically */
align-items: flex-start; /* Align items to the start */
color: var(--black-color);
position: relative; /* Add relative positioning to the parent container */
}

section.join__body .join__platform button {
border: none;
section.join__body .text-container {
position: relative; /* Positioning context for the button */
display: flex; /* Ensure container is inline with text */
justify-content: center;
width: 100%; /* Make text container full width */
margin-bottom: 100px; /* Space between buttons */
text-align: center;
}

section.join__body .join__platform i {
display: block;
width: 85px;
margin: 0 5px;
padding: 10px 5px;
border-radius: var(--border-radius);
section.join__body .button-link {
text-decoration: none;
color: var(--white-color);
/*padding: 10px 20px;*/
padding: clamp(0.5rem, 1vw, 1rem) clamp(1rem, 2vw, 2rem); /* Changed line: Dynamic padding */
border: 2px solid var(--black-color);
border-radius: 15px;
transition: all 0.3s ease;
border-style: none;
font-size: 25px;
/*font-size: var(--font-large);*/
/*font-size: 25px;*/
font-size: clamp(1rem, 2.5vw, 2rem); /* Changed line: Dynamic font size */
position: absolute; /* Overlay button on text */
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Adjust positioning */
pointer-events: auto; /* Ensure the link is clickable */
width: flex; /* Make buttons take up full width of container */
max-width: 200px; /* Set max width for buttons */
z-index: 1; /* Ensure it is above other elements */
white-space: nowrap; /*Prevent the text from wrapping */
}

section.join__body .join__platform .fa-envelope:hover {
background: #2eb67d;
color: var(--white-color);
section.join__body .button-link.email {
background-color: #bd0072; /* Sign Up color */
}

section.join__body .join__platform .fa-discord:hover {
background: #7289da;
color: var(--white-color);
section.join__body .button-link.discord {
background-color: #4a71ff; /* Discord color */
}

section.join__body .join__platform .fa-instagram:hover {
background: var(--lightred-color);
color: var(--white-color);
section.join__body .button-link.instagram {
background-color: #e4ab00; /* Instagram color */
}

section.join__body .join__platform .fa-github:hover {
background: #000000;
color: var(--white-color);
section.join__body .button-link.github {
background-color: #6f6f6f; /* GitHub color */
}

section.join__body .join__platform .fa-calendar-alt:hover {
background: var(--text-color);
color: var(--white-color);
section.join__body .button-link.calendar {
background-color: #08879b; /* Calendar color */
}

section.join__body .button-link:hover {
background: var(--white-color);
color: var(--black-color);
border-color: var(--black-color);
}



/* ############# */

/*************************/
/* Event */
/*************************/
Expand Down
17 changes: 9 additions & 8 deletions event.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@
<p style="margin-bottom:200px;"></p>
<body>

<header class="bg-black text-white pt-2 pb-2 pl-8 pr-8">
<div id="left"><img src="image/QC@UCI Logo_small.png" width="125" alt="QC@UCI Logo"></div>
<header class="header">
<a href="index.html">
<img src="image/Anteater+Eq_Logo.png" width="150" alt="Home">
</a>
<nav>
<ul class="header__nav">
<li><a href="index.html">Home</a></li>
Expand Down Expand Up @@ -46,16 +48,16 @@
<div class="event__text active" data-id="events">
<h2><b>Events</b></h2>
<br>
<!--<ul>
<ul>
<li>
<div class="event__info">
<span>
Qiskit Fall Fest <!--<a href="https://qiskithackathon.global.bemyapp.com/#/event">[link]</a>-->
Qiskit Fall Fest 2024 <!-- <a href="https://qiskithackathon.global.bemyapp.com/#/event">[link]</a> -->
</span>
<span id="edate">Coming Up!</span>
</div>
</li>
</ul>-->
</ul>
</div>

<div class="event__text" data-id="meetings">
Expand Down Expand Up @@ -146,10 +148,9 @@ <h2><b>Newsletters</b></h2>

<footer>
<div class="footer__copyRight">
<p>Follow us on Discord and Instagram.</p>
<p><a href="./contact_us.html">© Quantum Computing at UCI</a> 2023</p>
<p><a href="./contact_us.html">Copyright © 2024 Quantum Computing @ UCI. All Rights Reserved. </a></p>
</div>
</footer>
</footer>

<script src="js/event.js"></script>

Expand Down
7 changes: 3 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@
<header class="header">
<a href="index.html">
<img src="image/Anteater+Eq_Logo.png" width="150" alt="Home">
</a>
</a>
<nav>
<ul class="header__nav">
<li><a href="index.html">Home</a></li>
Expand Down Expand Up @@ -268,10 +268,9 @@ <h2 class="body__title">Hackathons and Conferences</h2>

<footer>
<div class="footer__copyRight">
<p>Follow us on Discord and Instagram.</p>
<p><a href="./contact_us.html">© Quantum Computing at UCI</a> 2024</p>
<p><a href="./contact_us.html">Copyright © 2024 Quantum Computing @ UCI. All Rights Reserved. </a></p>
</div>
</footer>
</footer>

<script type="text/javascript">
let slideIndex = 1;
Expand Down
59 changes: 17 additions & 42 deletions join.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,10 @@

<body>

<header class="bg-black text-white pt-2 pb-2 pl-8 pr-8">
<div id="left"><img src="image/QC@UCI Logo_small.png" width="125" alt="QC@UCI Logo"></div>
<header class="header">
<a href="index.html">
<img src="image/Anteater+Eq_Logo.png" width="150" alt="Home">
</a>
<nav>
<ul class="header__nav">
<li><a href="index.html">Home</a></li>
Expand All @@ -34,53 +36,26 @@

<div class="join__title">Get Involved!</div>
<section class="join__body">
<div class="join__platform">
Sign up
<button class="">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeZtyYb8oV3nUPXUksd5ULrCTAcWEbtvGW-8aNxpvVj6ZAcEw/viewform">
<i class="fas fa-envelope"></i>
</a>
</button>
<div class="text-container">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSeZtyYb8oV3nUPXUksd5ULrCTAcWEbtvGW-8aNxpvVj6ZAcEw/viewform" class="button-link email">Sign Up</a>
</div>
<div class="join__platform">
discord
<button class="">
<a href="https://discord.gg/Q3zzzS7yDJ">
<i class="fab fa-discord"></i>
</a>
</button>
<div class="text-container">
<a href="https://discord.gg/Q3zzzS7yDJ" class="button-link discord">Discord</a>
</div>
<div class="join__platform">
instagram
<button class="">
<a href="https://www.instagram.com/qcatuci/">
<i class="fab fa-instagram"></i>
</a>
</button>
<div class="text-container">
<a href="https://www.instagram.com/qcatuci/" class="button-link instagram">Instagram</a>
</div>
<div class="join__platform">
github
<button class="">
<a href="https://github.com/QC-UCI">
<i class="fab fa-github"></i>
</a>
</button>
<div class="text-container">
<a href="https://calendar.google.com/calendar/u/2?cid=Y192Y2ZhcjJqM3JtYThqZXJxc3JncTFnZThzOEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t" class="button-link calendar">Calendar</a>
</div>
<div class="join__platform">
calendar
<button class="">
<a href="https://calendar.google.com/calendar/u/2?cid=Y192Y2ZhcjJqM3JtYThqZXJxc3JncTFnZThzOEBncm91cC5jYWxlbmRhci5nb29nbGUuY29t">
<i class="far fa-calendar-alt"></i>
</a>
</button>
<div class="text-container">
<a href="https://github.com/QC-UCI" class="button-link github">GitHub</a>
</div>
</section>


<footer>
<div class="footer__copyRight">
<p>Follow us on Discord and Instagram.</p>
<p><a href="./contact_us.html">© Quantum Computing at UCI</a> 2023</p>
<p><a href="./contact_us.html">Copyright © 2024 Quantum Computing @ UCI. All Rights Reserved. </a></p>
</div>
</footer>
</footer>
</body>
</html>
25 changes: 11 additions & 14 deletions learn.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,18 @@
src="https://kit.fontawesome.com/2d323a629b.js"
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/tailwind_style.css">
<link rel="stylesheet" href="css/style.css">
<title>Learn | QC@UCI</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

<meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
<header class="bg-black text-white pt-2 pb-2 pl-8 pr-8>
<div id="left"><img src="image/QC@UCI Logo_small.png" width="125" alt="QC@UCI Logo"></div>
<header class="header">
<a href="index.html">
<img src="image/Anteater+Eq_Logo.png" width="150" alt="Home">
</a>
<nav>
<ul class="header__nav">
<li><a href="index.html">Home</a></li>
Expand All @@ -34,8 +33,7 @@
</nav>
</header>

<p style="margin-bottom:180px;"></p>

<p style="margin-bottom:180px;"></p>
<div class="learn__title">What is Quantum Computing?</div>
<p style="margin-bottom:50px;"></p>

Expand Down Expand Up @@ -102,12 +100,11 @@ <h2>Physics</h2>
</div>


<footer>
<div class="footer__copyRight">
<p>Follow us on Discord and Instagram.</p>
<p><a href="./contact_us.html">© Quantum Computing at UCI</a> 2023</p>
</div>
</footer>
<footer>
<div class="footer__copyRight">
<p><a href="./contact_us.html">Copyright © 2024 Quantum Computing @ UCI. All Rights Reserved. </a></p>
</div>
</footer>

</body>
</html>
Loading

0 comments on commit 0dd4583

Please sign in to comment.