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

Join Us Section is UI / UX Update #436

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Join Us Section is UI / UX Update #436

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
59 changes: 59 additions & 0 deletions public/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2567,4 +2567,63 @@ body {

background-color: #0056b3; /* Darker shade for hover */

}

#why-join-us {
padding: 60px 20px;
background-color: #f9f9f9;
text-align: center;
}

.section-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 40px;
color: #333;
}

.cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

.card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 100%;
max-width: 300px;
transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
transform: translateY(-10px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.icon {
font-size: 40px;
margin-bottom: 15px;
color: #007BFF;
}

.card h3 {
font-size: 24px;
margin-bottom: 10px;
color: #333;
}

.card p {
font-size: 16px;
color: #666;
}

/* Responsive Design */
@media (max-width: 768px) {
.cards {
flex-direction: column;
}
}
68 changes: 39 additions & 29 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<link rel="stylesheet" type="text/css" href="css/faq_style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>

<link rel="apple-touch-icon" sizes="180x180" href="images/Research_Nexas_favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/Research_Nexas_favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/Research_Nexas_favicon_io/favicon-16x16.png">
Expand Down Expand Up @@ -377,34 +377,44 @@ <h3>Career Opportunities</h3>

<main>
<!-- join us section -->
<section class="join">
<h2>Why Join Us</h2>
<div class="join_box">
<div class="join_boxes animated-box1 join_animation1">
<img src="https://img.freepik.com/free-vector/flat-design-join-us-message_23-2148954904.jpg" alt="">
<p>"At Research Nexas", we believe in the power of collaboration to drive innovation. We're
looking for bold thinkers and creators to join us in transforming ideas into real-world
solutions.
When you join us, you become part of a dynamic community that fosters creativity, growth, and
impact. Together, we’ll push boundaries, explore new possibilities, and shape the future. Ready
to make a difference? Let's innovate together.</p>
</div>
<div class="join_boxes" style="z-index: 1;">
<img src="https://t3.ftcdn.net/jpg/04/87/16/34/360_F_487163480_u4q13pQTIIbcVbolPiHKZFFlkfVrnVP3.jpg"
alt="">
<p> we bring together innovators, creators, and visionaries to turn bold ideas into real-world
solutions.By joining us, you’ll be part of a collaborative environment where your ideas can
flourish and make a tangible impact. We offer the resources, network, and support to help you
push boundaries and achieve your full potential. Together, we’ll drive innovation and shape the
future of progress.</p>
</div>
<div class="join_boxes animated-box2 join_animation2">
<img src="https://img.freepik.com/free-vector/flat-design-join-us-message_23-2148954904.jpg" alt="">
<p>Join and become part of a dynamic community that believes in the power of
collaboration to foster innovation. Here, your creativity and ideas are valued, and you’ll work
alongside talented professionals to transform concepts into impactful solutions. If you're ready
to explore new possibilities, grow your skills, and make a difference, this is the place for
you. Together, let’s innovate and build a better tomorrow.</p>
<section id="why-join-us" class="why-join-us">
<div class="container">
<h2 class="section-title">Why Join Us?</h2>
<div class="cards">
<div class="card">
<div class="icon">💼</div>
<h3>Professional Growth</h3>
<p>"At Research Nexas", we believe in the power of collaboration to drive innovation. We're
looking for bold thinkers and creators to join us in transforming ideas into real-world
solutions.
When you join us, you become part of a dynamic community that fosters creativity, growth,
and
impact. Together, we’ll push boundaries, explore new possibilities, and shape the future.
Ready
to make a difference? Let's innovate together</p>
</div>
<div class="card">
<div class="icon">🌐</div>
<h3>Global Networking</h3>
<p>we bring together innovators, creators, and visionaries to turn bold ideas into real-world
solutions.By joining us, you’ll be part of a collaborative environment where your ideas can
flourish and make a tangible impact. We offer the resources, network, and support to help
you
push boundaries and achieve your full potential. Together, we’ll drive innovation and shape
the
future of progress.</p>
</div>
<div class="card">
<div class="icon">🚀</div>
<h3>Innovative Projects</h3>
<p>Join and become part of a dynamic community that believes in the power of
collaboration to foster innovation. Here, your creativity and ideas are valued, and you’ll
work
alongside talented professionals to transform concepts into impactful solutions. If you're
ready
to explore new possibilities, grow your skills, and make a difference, this is the place for
you. Together, let’s innovate and build a better tomorrow.</p>
</div>
</div>
</div>
</section>
Expand Down
Loading