Skip to content

Commit 3c58857

Browse files
aayushmau5akshatagarwl
aayushmau5
authored and
akshatagarwl
committed
Event and Team components with responsive design (JIITODC#8)
1 parent 5e90d72 commit 3c58857

File tree

5 files changed

+175
-72
lines changed

5 files changed

+175
-72
lines changed

‎src/components/EventComponent.svelte

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<script>
2+
export let title;
3+
export let about;
4+
export let time;
5+
export let location;
6+
</script>
7+
8+
<div class="event-container">
9+
<div class="left">
10+
<img src="Poster.png" alt="event poster">
11+
</div>
12+
<div class="right">
13+
<h2 class="title">{title}</h2>
14+
<p class="about">{about}</p>
15+
<p class="time">{time}</p>
16+
<p class="location">{location}</p>
17+
</div>
18+
</div>
19+
20+
<style>
21+
.event-container {
22+
font-family: 'Red Hat Display', sans-serif;
23+
display: flex;
24+
margin-top: 2rem;
25+
padding-bottom: 1rem;
26+
border-bottom: 1px solid white;
27+
}
28+
29+
.right {
30+
padding: 0 0 0 2rem;
31+
font-weight: 100;
32+
}
33+
34+
.title {
35+
font-size: 2rem;
36+
font-weight: bold;
37+
}
38+
39+
@media (max-width:700px) {
40+
.event-container {
41+
flex-direction: column;
42+
/* align-items: center; */
43+
font-size: 1rem;
44+
}
45+
46+
img {
47+
height: auto;
48+
max-width: 200px;
49+
}
50+
51+
.title {
52+
font-size: 1.5rem;
53+
}
54+
55+
.right {
56+
padding: 1rem 0 0 0;
57+
}
58+
}
59+
</style>

‎src/components/Nav.svelte

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<script>
22
let active = false;
3+
let addActive = "";
34
45
const toggleLinks = () => {
56
active = !active;
7+
if (active) addActive = "active";
8+
else addActive = "";
69
}
710
</script>
811

@@ -34,7 +37,8 @@
3437
margin-right: 50px;
3538
}
3639
37-
a {
40+
a,
41+
.toggle-button {
3842
text-decoration: none;
3943
padding: .1em 0.25em;
4044
display: block;
@@ -45,7 +49,8 @@
4549
border-bottom: 2px solid #fff;
4650
}
4751
48-
a::after {
52+
a::after,
53+
.toggle-button::after {
4954
content: "";
5055
position: absolute;
5156
bottom: 0;
@@ -58,20 +63,28 @@
5863
background-color: #fff;
5964
}
6065
61-
a:hover::after {
66+
a:hover::after,
67+
.toggle-button:hover::after {
6268
height: 100%;
6369
opacity: 1;
6470
}
6571
66-
a:hover {
72+
a:hover,
73+
.toggle-button:hover {
6774
color: #000;
6875
}
6976
7077
.toggle-button {
78+
background-color: transparent;
79+
outline: none;
80+
border: none;
81+
border-bottom: 2px solid #fff;
82+
color: white;
7183
font-size: 2rem;
7284
position: absolute;
7385
display: none;
7486
right: 28px;
87+
cursor: pointer;
7588
}
7689
7790
@media (max-width:700px) {
@@ -109,18 +122,10 @@
109122

110123
<nav>
111124
<img src="jodcMascotWB.svg" alt="JODC Mascot" class="jodc-mascot-img">
112-
<a href="#" class="toggle-button" on:click={toggleLinks}>&#9776;</a>
113-
{#if active}
114-
<ul class="nav-links active">
115-
<li><a href=".">home</a></li>
116-
<li><a href="events">events</a></li>
117-
<li><a href="team">team</a></li>
118-
</ul>
119-
{:else}
120-
<ul class="nav-links">
121-
<li><a href=".">home</a></li>
122-
<li><a href="events">events</a></li>
123-
<li><a href="team">team</a></li>
124-
</ul>
125-
{/if}
125+
<button class="toggle-button" on:click={toggleLinks}>&#9776;</button>
126+
<ul class="nav-links {addActive}">
127+
<li><a href=".">home</a></li>
128+
<li><a href="events">events</a></li>
129+
<li><a href="team">team</a></li>
130+
</ul>
126131
</nav>

‎src/components/TeamComponent.svelte

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script>
2+
export let imgSrc;
3+
export let name;
4+
export let about;
5+
export let gitLink;
6+
export let facebookLink;
7+
export let twitterLink;
8+
9+
</script>
10+
11+
<div class="team-member">
12+
<div class="left">
13+
<img src={imgSrc} alt="event poster">
14+
</div>
15+
<div class="right">
16+
<h2 class="name">{name}</h2>
17+
<p class="about">{about}</p>
18+
<div class="socails">
19+
<a href={gitLink}>GITHUB</a>
20+
<a href={facebookLink}>FACEBOOK</a>
21+
<a href={twitterLink}>TWITTER</a>
22+
</div>
23+
</div>
24+
</div>
25+
26+
<style>
27+
.team-member {
28+
display: flex;
29+
padding-bottom: 1rem;
30+
border-bottom: 1px solid white;
31+
margin-top: 2rem;
32+
}
33+
34+
.right {
35+
padding: 0 0 0 2rem;
36+
}
37+
38+
.name {
39+
font-size: 2rem;
40+
font-weight: bold;
41+
}
42+
43+
@media (max-width:700px) {
44+
.team-member {
45+
flex-direction: column;
46+
align-items: center;
47+
font-size: 1rem;
48+
}
49+
50+
img {
51+
height: auto;
52+
max-width: 200px;
53+
}
54+
55+
.name {
56+
font-size: 1.5rem;
57+
}
58+
59+
.right {
60+
padding: 1rem 0 0 0;
61+
}
62+
}
63+
</style>

‎src/routes/events.svelte

Lines changed: 11 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,16 @@
22
<title>Events</title>
33
</svelte:head>
44

5-
<script></script>
5+
<script>
6+
import EventComponent from '../components/EventComponent.svelte';
7+
</script>
68

79

810
<div class="main-title">EVENTS</div>
9-
<div class="event-container">
10-
<div class="left">
11-
<img src="Poster.png" alt="event poster">
12-
</div>
13-
<div class="right">
14-
<h2 class="title">HACKTOBERFEST</h2>
15-
<p class="about">WIN A TSHIRT AT HACKTOBERFEST BY CONTRIBUTING TO OPEN SOURCE PROJECTS.</p>
16-
<p class="time">31 FEB 2023 12:30AM</p>
17-
<p class="location">LT5</p>
18-
</div>
19-
</div>
11+
<EventComponent title="Git/Github Workshop" about="Learn about git and github." time="12:00AM 1 OCT 2002"
12+
location="LT6" />
13+
<EventComponent title="Hacktoberfest" about="Contribute to open source to get a free t-shirt" time="12:00AM 1 OCT 2002"
14+
location="LT5" />
2015

2116

2217
<style>
@@ -25,18 +20,9 @@
2520
font-weight: bold;
2621
}
2722
28-
.event-container {
29-
display: flex;
30-
margin-top: 2rem;
31-
padding-bottom: 1rem;
32-
border-bottom: 1px solid white;
33-
}
34-
35-
.right {
36-
padding: 0 0 0 2rem;
37-
}
38-
39-
.title {
40-
font-size: 2rem;
23+
@media (max-width:700px) {
24+
.main-title {
25+
font-size: 2rem;
26+
}
4127
}
4228
</style>

‎src/routes/team.svelte

Lines changed: 19 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,22 @@
22
<title>Team</title>
33
</svelte:head>
44

5-
<script></script>
5+
<script>
6+
import TeamComponent from '../components/TeamComponent.svelte';
7+
</script>
68

79

810
<div class="main-title">TEAMS</div>
911
<h2 class="team-type">Core Members</h2>
1012
<div class="team-container">
11-
<div class="team-member">
12-
<div class="left">
13-
<img src="Poster.png" alt="event poster">
14-
</div>
15-
<div class="right">
16-
<h2 class="name">HACKTOBERFEST</h2>
17-
<p class="about">WORLD’S GREATEST DETECTIVE. HE SOLVES CRIME AND HATES THE WORLD. GO TO HIS REPO TO SOLVE MURDER
18-
MYSTERIES.</p>
19-
<div class="socails">
20-
<a href="#">GITHUB</a>
21-
<a href="#">FACEBOOK</a>
22-
<a href="#">TWITTER</a>
23-
</div>
24-
</div>
25-
</div>
13+
<TeamComponent imgSrc="Poster.png" name="Aayush Kumar Sahu"
14+
about="Hi there, i am an open source enthusiast and working on web development."
15+
gitLink="https://www.github.com/aayushmau5" facebookLink="https://www.facebook.com"
16+
twitterLink="https://twitter.com/aayushmau5" />
17+
<TeamComponent imgSrc="Poster.png" name="Aachman Mittal"
18+
about="Hey, i am an open source enthusiast and love low level system stuff."
19+
gitLink="https://www.github.com/aarkimos" facebookLink="https://www.facebook.com"
20+
twitterLink="https://twitter.com/aarkimos" />
2621
</div>
2722

2823

@@ -32,22 +27,17 @@
3227
font-weight: bold;
3328
}
3429
35-
.team-container {
36-
margin-top: 2rem;
37-
padding-bottom: 1rem;
38-
border-bottom: 1px solid white;
39-
}
40-
41-
.team-member {
42-
display: flex;
30+
.team-type {
31+
font-weight: bold;
4332
}
4433
45-
.right {
46-
padding: 0 0 0 2rem;
34+
.team-container {
35+
font-family: 'Red Hat Display', sans-serif;
4736
}
4837
49-
.name {
50-
font-size: 3rem;
51-
font-weight: bold;
38+
@media (max-width:700px) {
39+
.main-title {
40+
font-size: 2rem;
41+
}
5242
}
5343
</style>

0 commit comments

Comments
 (0)