Skip to content

created fully responsive "events" section #54

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

Open
A-R-P-I-T-JAIN wants to merge 3 commits into
base: main
Choose a base branch
from
Open

created fully responsive "events" section #54

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
df62009
another commit
A-R-P-I-T-JAIN Oct 22, 2023
f332ac6
another commit
A-R-P-I-T-JAIN Oct 22, 2023
53978ca
events section added
A-R-P-I-T-JAIN Oct 22, 2023
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
Binary file added public/images/grid2.jpg
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.
4 changes: 3 additions & 1 deletion src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import LandingPage from "./components/LandingPage";
import Spinner from "./components/Spinner/Spinner";
import JoinUs from "./components/why_join_us/Join_us";
import Signup from "./components/SignupPage/Signup";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Event from "./components/Events/Events.jsx";

function App() {
const [isLoading, setloading] = useState(true);
Expand All @@ -24,6 +25,7 @@ function App() {
<Routes>
<Route exact path="/" element={<LandingPage />}/>
<Route path="/signup" element={<Signup />} />
<Route path="/event" element={<Event />} />
</Routes>
</Router>

Expand Down
261 changes: 261 additions & 0 deletions src/components/Events/Events.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
.evnt_cont {
display: flex;
flex-direction: column;
align-items: center;
gap: 100px;
}
.evnt_main {
margin-top: 100px;
position: relative;
width: 100%;
height: 100vh;
background: radial-gradient(rgba(4, 77, 77, 0.387),black);
background-size: cover;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.evnt_card {
position: relative;
width: 519px;
height: 580px;
background: linear-gradient(rgba(255, 255, 255, 0.102),rgba(255, 255, 255, 0.093));
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 22px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
margin: 100px 0;
}
.evnt_card > img {
width: 440px;
height: 340px;
border-radius: 16px;
}
.evnt_card > div {
width: 440px;
color: white;
}
.evnt_card > div h1 {
font-size: 20px;
font-weight: 600;
}
.evnt_card > button {
position: absolute;
width: 236px;
height: 46px;
border-radius: 40px;
background: linear-gradient(90deg,rgba(1, 179, 255, 1),rgba(56, 161, 187, 1),rgba(250, 255, 0, 1));
bottom: 0;
left: 50%;
transform: translate(-50%,50%);
font-weight: 700;
}
.all_about_event {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.all_about_event h1 {
/* font-family: 'Bebas Neue'; */
font-size: 80px;
font-weight: 900;
background: linear-gradient(90deg,rgba(250, 255, 0, 1),rgba(56, 161, 187, 1),rgba(1, 179, 255, 1));
background-clip: text;
color: transparent;
display: flex;
}
.all_about_event h2 {
color: white;
font-size: 60px;
font-weight: 900;
}
.all_about_event p {
color: aliceblue;
text-align: center;
padding: 0 100px;
}
.evnt_main > img {
position: absolute;
width: 100%;
z-index: 0;
height: 100vh;
top: 0;
left: 0;
filter: opacity(0.2);
}
.upcoming_events {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.upcoming_events > h1 {
font-size: 120px;
background: linear-gradient(90deg,rgba(250, 255, 0, 1),rgba(0, 240, 255, 1));
background-clip: text;
color: transparent;
font-weight: 800;
}
.upcoming_events_cont {
max-width: 1200px;
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.upcoming_events_cont > div {
width: 384px;
height: 96px;
clip-path: polygon(100% 0, 100% 48%, 85% 100%, 0 100%, 0 0);
background: linear-gradient(45deg,rgba(250, 255, 0, 1),rgba(0, 240, 255, 1));
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.upcoming_event_card {
width: 382px;
height: 94px;
clip-path: polygon(100% 0, 100% 48%, 85% 100%, 0 100%, 0 0);
background-color: black;
border-radius: 10px;
display: flex;
align-items: center;
gap: 20px;
padding: 20px;
/* justify-content: space-evenly; */
}
.ue_circle {
width: 56px;
height: 56px;
background-color: white;
border-radius: 100%;
}
.ue_content h1 {
font-size: 20px;
color: white;
}
.ue_content p {
font-size: 15px;
color: white;
}
.upcoming_event_card > h2 {
font-size: 20px;
color: rgba(21, 191, 253, 1);
text-decoration: underline;
margin-left: 30px;
}
.ue_btn {
width: 214px;
height: 60px;
border-radius: 60px;
background: linear-gradient(270deg,rgba(250, 255, 0, 1),rgba(56, 161, 187, 1),rgba(0, 204, 255, 1));
display: flex;
align-items: center;
justify-content: center;
}
.ue_btn button {
width: 210px;
height: 56px;
background-color: black;
font-size: 18px;
color: white;
border-radius: 60px;
}

/* ////////////////////////////////////// */

@media screen and (max-width: 600px) {
.evnt_cont {
gap: 100px;
}
.evnt_main {
margin-top: 40px;
width: 100%;
height: 100vh;
flex-direction: column;
}
.evnt_card {
width: 250px;
height: 300px;
border-radius: 22px;
margin: 20px 0;
}
.evnt_card > img {
width: 220px;
height: 160px;
border-radius: 16px;
}
.evnt_card > div {
width: 220px;
}
.evnt_card > div h1 {
font-size: 13px;
font-weight: 600;
}
.evnt_card > div h3 {
font-size: 10px;
}
.evnt_card > button {
width: 100px;
height: 25px;
border-radius: 30px;
font-weight: 700;
font-size: 12px;
}
.all_about_event h1 {
font-size: 30px;
}
.all_about_event h2 {
font-size: 30px;
}
.all_about_event p {
padding: 0 20px;
}
.upcoming_events {
gap: 40px;
}
.upcoming_events > h1 {
font-size: 32px;
}
.upcoming_events_cont {
max-width:90%;
gap: 20px;
}
.upcoming_events_cont > div {
width: 300px;
height: 70px;
}
.upcoming_event_card {
width: 298px;
height: 68px;
gap: 20px;
padding: 20px;
}
.ue_circle {
width: 30px;
height: 30px;
}
.ue_content h1 {
font-size: 12px;
}
.ue_content p {
font-size: 8px;
}
.upcoming_event_card > h2 {
font-size: 10px;
}
.ue_btn {
width: 150px;
height: 40px;
border-radius: 40px;
}
.ue_btn button {
width: 146px;
height: 36px;
font-size: 15px;
border-radius: 40px;
}
}
104 changes: 104 additions & 0 deletions src/components/Events/Events.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
import React from 'react'
import './Events.css'
import firstEvent from '../../../public/images/interactive session.jpg'
import secondEvent from '../../../public/images/java session.jpg'
import grid2 from '../../../public/images/grid2.jpg'

const Event = () => {

const upcomingEvents = [
{
h1: "Codeathon",
p: "March 2024",
RSPV: true
},
{
h1: "Republic Coders 3.0",
p: "January 2024",
RSPV: false
},
{
h1: "HactoberFest 2023",
p: "October 2023",
RSPV: true
},
{
h1: "Codepentry",
p: "March 2024",
RSPV: true
},
{
h1: "Tech Trends Seminar",
p: "April 2024",
RSPV: false
},
{
h1: "Interactive Session",
p: "May 2024",
RSPV: false
},
]

return (
<div className='evnt_cont'>
<div className="evnt_main">
<img src={grid2} alt="" />
<div className="evnt_card">
<img src={firstEvent} alt="" />
<div className="content1">
<h1>SAMEER BAMANHA</h1>
<h3>Guest Speaker</h3>
</div>
<div className="content2">
<h1>ONLINE</h1>
<h3>Google Meet</h3>
</div>
<button>Read More</button>
</div>
<div className="evnt_card">
<img src={secondEvent} alt="" />
<div className="content1">
<h1>SAMEER BAMANHA</h1>
<h3>Guest Speaker</h3>
</div>
<div className="content2">
<h1>ONLINE</h1>
<h3>Google Meet</h3>
</div>
<button>Read More</button>
</div>
</div>

<div className="all_about_event">
<h1>ALL ABOUT EVENTS</h1>
<h2>OF JEC ACM</h2>
<p>Stay connected and informed about upcoming events and activities organized by ACM JEC Student Chapter. Our events are designed to enhance your knowledge, provide hands-on experience, and foster networking within the tech community. Join us for these exciting opportunities!</p>
</div>

<div className="upcoming_events">
<h1>UPCOMING EVENTS</h1>
<div className="upcoming_events_cont">
{
upcomingEvents.map((item) => (
<div>
<div className="upcoming_event_card">
<div className="ue_circle"></div>
<div className="ue_content">
<h1>{item.h1}</h1>
<p>{item.p}</p>
</div>
{item.RSPV ? (<h2>RSPV</h2>): null}
</div>
</div>
))
}
</div>
<div className="ue_btn">
<button>See More</button>
</div>
</div>
</div>
)
}

export default Event
Loading