Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update text formatting, styles, and add event section styling #40

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

Update text formatting, styles, and add event section styling #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
79f1bce
fix: update text formatting and replace separator image in index.html
GreenMonkii Jan 18, 2025
91a4726
style: adjust padding and background color in styles.css
GreenMonkii Jan 20, 2025
025240a
style: add styling for events section tags and registration buttons
GreenMonkii Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 109 additions & 11 deletions css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,13 +190,18 @@ nav ul li a:hover {
.hero h1 {
font-size: 40px;
}

.hero h1 br {
display: none;
}
}

.hero h1 span {
display: inline-block;
padding: 20px;
color: #fbbc04;
padding: 15px 10px 0px 0px;
border: 3px solid #fbbc04;
border-radius: 50%;
background: url("/images/assets/hero/frame.svg") no-repeat center center;
background-size: contain;
}

.hero-cta {
Expand Down Expand Up @@ -295,12 +300,24 @@ nav ul li a:hover {
margin-bottom: 15px;
}

@media (max-width: 760px) {
.about .content p.title {
font-size: 20px;
}
}

.about .content p.sub-title {
font-size: 18px;
font-weight: 400;
color: #1e1e1ecc;
}

@media (max-width: 760px) {
.about .content p.sub-title {
font-size: 14px;
}
}

.about .cta {
padding: 10px 24px 10px 20px;
border-radius: 25px;
Expand All @@ -318,6 +335,15 @@ nav ul li a:hover {
gap: 6px;
}

@media (max-width: 760px) {
.about .cta {
padding: 5px 10px;
}
.about .cta .content {
font-size: 14px;
}
}

/* join section start */

#why-join {
Expand Down Expand Up @@ -355,23 +381,35 @@ nav ul li a:hover {
height: 700px;
width: 300px;
border-radius: 20px;

transform: rotate(90deg);
}

#why-join .slide:not(:first-child) {
margin-top: -24rem;
}

#why-join .section-header .title {
text-align: center;
margin-bottom: 10px;
font-size: 2rem;
font-weight: 700;
}

@media (max-width: 768px) {
#why-join .section-header .title {
font-size: 1.1rem;
}
}

#why-join .title {
text-align: left;
margin-bottom: 10px;
font-size: 2.5rem;
margin-bottom: 5px;
font-size: 1.5rem;
font-weight: 700;
}

#why-join .content {
font-size: 1.3rem;
font-size: 1rem;
font-weight: 400;
}

Expand Down Expand Up @@ -661,10 +699,11 @@ section header {
gap: 0.6em;
background-color: #000;
border-radius: 35px;
padding: 1rem 0;
padding: 0.8rem 0;
width: 20%;
min-width: 300px;
margin: auto;
font-size: 1rem;
}

.view-team button {
Expand Down Expand Up @@ -919,7 +958,7 @@ h3 {
}

.join-us__list-text {
font-size: 1.5rem;
font-size: 1rem;
}

.stroke-double {
Expand Down Expand Up @@ -1163,13 +1202,14 @@ h3 {
gap: 0.6em;
background-color: #000;
border-radius: 35px;
padding: 1rem 0;
padding: 0.5rem 0;
}

.view-events button {
color: #fff;
background-color: transparent;
border: none;
font-size: 1rem;
}

.go-to-icon {
Expand Down Expand Up @@ -1315,6 +1355,63 @@ h3 {

/* end of carousel parallax effect */

/* beginning of events section styling */

#eventsTabContent .tagging {
display: inline-block;
padding: 0.5em 1em;
border-radius: 50px;
font-size: 0.875rem;
text-align: center;
}

#eventsTabContent .tagging.red {
background-color: #ffcdd2;
color: #b71c1c;
}

#eventsTabContent .tagging.green {
background-color: #c8e6c9;
color: #1b5e20;
}

#eventsTabContent .tagging.blue {
background-color: #bbdefb;
color: #0d47a1;
}

#eventsTabContent .tagging.gold {
background-color: #ffecb3;
color: #ff9800;
}

#eventsTabContent .register {
display: inline-block;
padding: 0.5em 1em;
border-radius: 50px;
font-size: 0.875rem;
text-align: center;
color: #fff;
}

#eventsTabContent .register.red {
background-color: #b71c1c;
}

#eventsTabContent .register.green {
background-color: #1b5e20;
}

#eventsTabContent .register.blue {
background-color: #0d47a1;
}

#eventsTabContent .register.gold {
background-color: #ff9800;
}

/* end of events section styling */

/* beginning of subscribe section styling */

.subscribe-section {
Expand Down Expand Up @@ -1346,7 +1443,8 @@ h3 {
}

.subscribe-section button {
background-color: #000;
background-color: #0a2212;
border: none;
flex-basis: 30%;
}

Expand Down
10 changes: 10 additions & 0 deletions images/assets/hero/frame.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 0 additions & 46 deletions images/assets/hero/saparator.svg
View file
Open in desktop

This file was deleted.

56 changes: 56 additions & 0 deletions images/assets/hero/separator.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 6 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
<img class="head-doodle" src="images/assets/hero/head2.svg" alt="">
<img class="head-doodle" src="images/assets/hero/head3.svg" alt="">
<div class="hero-text-container">
<h1>Empowering the next generation of <span>developers</span></h1>
<h1>Empowering the next <br />generation of <span>developers</span></h1>
<p class="sub-title">
At GDSC Unilag, we're dedicated to nurturing the next generation of developers. Through innovation and collaboration, we provide the tools and support needed for success. Join us as we shape the future of technology together.
</p>
Expand All @@ -75,7 +75,7 @@ <h1>Empowering the next generation of <span>developers</span></h1>
</div>

<div class="separator">
<img src="images/assets/hero/saparator.svg" alt="">
<img src="images/assets/hero/separator.svg" alt="">
</div>

<div id="about" class="about">
Expand All @@ -91,7 +91,7 @@ <h1>Empowering the next generation of <span>developers</span></h1>
<section id="why-join" class="section-spacer">
<div class="container-fluid">
<header class="section-header text-center">
<p class="title">Why should you join GDSC?</p>
<p class="title">⭐️Why should you join GDSC?⭐️</p>
</header>
<div class="carouselWrapper" data-carousel>
<ul data-slides>
Expand All @@ -104,7 +104,7 @@ <h1>Empowering the next generation of <span>developers</span></h1>
</p>
</li>
<li class="slide">
<p class="title">Skill development</p>
<p class="title">Skill Development</p>
<p class="content">
Develop your skills in areas such as Android development, web development, cloud computing, and machine learning.
Gain experience with the latest Google Developer tools and technologies.
Expand Down Expand Up @@ -916,9 +916,9 @@ <h2 class="section-title">Subscribe to our Newsletter</h2>
</header>
<form action="">
<div class="subscribe-form">
<input type="email" class="" placeholder="Your email address">
<input type="email" class="" placeholder="Your Email">
<button type="submit">Subscribe</button>
</div>``
</div>
</form>
</section>

Expand Down
Loading