Skip to content

Commit b902dff

Browse files
likiipedialikiipedia
authored
Merge pull request #183 from Junior-Developer-Group/content-updates
Content updates
2 parents 7376e46 + 250b275 commit b902dff

23 files changed

Lines changed: 479 additions & 98 deletions

‎src/assets/images/learning.jpg‎

75.3 KB
Loading

‎src/components/Footer.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,9 @@ export default {
9797
font-weight: bold;
9898
font-size: 1.4em;
9999
text-decoration-line: underline;
100-
text-decoration-style: dashed;
101-
text-decoration-color: #4358d8;
102-
text-underline-offset: 5px;
100+
text-decoration-style: solid;
101+
text-decoration-color: #ffc22b;
102+
text-underline-offset: 10px;
103103
}
104104
105105
a {

‎src/components/homepage/Events.vue‎

Lines changed: 101 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,23 @@
11
<template>
2-
<div></div>
2+
<div class="events">
3+
4+
<section class="socialMedia__discord">
5+
<iframe src="https://discord.com/widget?id=787411703901978684&amp;theme=dark" height="500" allowtransparency="true" frameborder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" title="discord"></iframe>
6+
</section>
7+
8+
<section class="events-details">
9+
<h2> Events & Meetups 📣 </h2>
10+
<p>
11+
We're a chatty bunch! Our group likes to organise meetings where we run workshops, plan future projects, answer questions or provide some help with tasks we're stuck on.
12+
When each of the meetings (or workshops) are planned we always check in with our members to make sure everyone is available - because, you know, timezones!
13+
</p>
14+
<p>
15+
Our meetings are organised on Discord, but sometimes, we like to pop over to our Gather castle and have some fun as well.
16+
</p>
17+
18+
<a href="https://discord.com/invite/JdGZbZYDvd"> Join our Discord</a>
19+
</section>
20+
</div>
321
</template>
422

523

@@ -8,4 +26,85 @@ export default {
826
// eslint-disable-next-line
927
name: 'Events'
1028
}
11-
</script>
29+
</script>
30+
31+
<style scoped lang="scss">
32+
.events {
33+
width: 100%;
34+
max-width: 950px;
35+
min-height: 500px;
36+
display: flex;
37+
justify-content: space-between;
38+
align-items: center;
39+
padding-bottom: 30px;
40+
padding-top: 30px;
41+
42+
@media (max-width: 900px) {
43+
flex-direction: column-reverse;
44+
}
45+
}
46+
47+
.socialMedia__discord {
48+
width: 20%;
49+
display: flex;
50+
justify-content: center;
51+
align-items: center;
52+
@media (max-width: 900px) {
53+
width: 90%;
54+
}
55+
56+
@media (max-width: 400px) {
57+
iframe {
58+
width: 90%;
59+
}
60+
}
61+
}
62+
63+
.events-details {
64+
width: 55%;
65+
display: flex;
66+
flex-direction: column;
67+
justify-content: center;
68+
align-items: center;
69+
margin-left: 40px;
70+
71+
@media (max-width: 900px) {
72+
width: 90%;
73+
margin-bottom: 60px;
74+
margin-left: 0;
75+
}
76+
}
77+
78+
h2 {
79+
text-align: center;
80+
font-size: 2rem;
81+
}
82+
p {
83+
text-align: center;
84+
font-size: 1.1rem;
85+
}
86+
87+
a {
88+
background: #ffc22b;
89+
border-radius: 10px;
90+
color: var(--dark)!important;
91+
font-style: normal;
92+
font-weight: bold;
93+
font-size: 18px;
94+
line-height: 29px;
95+
text-align: center;
96+
letter-spacing: 2px;
97+
text-transform: uppercase;
98+
display: flex;
99+
justify-content: center;
100+
align-items: center;
101+
margin-top: 45px;
102+
padding: 10px 30px;
103+
max-width: 80%;
104+
transition: 300ms all ease-in-out;
105+
106+
&:hover {
107+
padding: 10px 50px;
108+
}
109+
}
110+
</style>

‎src/components/homepage/GetInvolved.vue‎

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
</ul>
2222
</div>
2323
<div class="column-button">
24-
<a href="/member-application-form">Join us</a>
24+
<a href="/member-application-form">Become a member</a>
2525
</div>
2626
</div>
2727

@@ -98,8 +98,7 @@
9898
width: 100%;
9999
flex-wrap: wrap;
100100
min-height: 900px;
101-
margin-top: 60px;
102-
margin-bottom: 60px;
101+
background: #f5f4f4;
103102
}
104103
105104
.get-involved__column {
@@ -180,24 +179,22 @@
180179
align-items: center;
181180
182181
a {
183-
background: #f8593b;
184-
border-radius: 4px;
185-
font-style: normal;
186-
font-weight: 600;
187-
font-size: 17px;
188-
line-height: 25px;
189-
text-align: center;
190-
letter-spacing: 0.2em;
191-
color: #FFFFFF;
192-
width: 250px;
193-
height: 65px;
194-
margin-top: 20px;
195-
outline: none;
196-
border: none;
197-
cursor: pointer;
198-
display: flex;
199-
justify-content: center;
200-
align-items: center;
182+
background: #ff3e3e;
183+
border-radius: 10px;
184+
color: white;
185+
font-style: normal;
186+
font-weight: bold;
187+
font-size: 20px;
188+
line-height: 29px;
189+
text-align: center;
190+
letter-spacing: 2px;
191+
text-transform: uppercase;
192+
display: flex;
193+
justify-content: center;
194+
align-items: center;
195+
margin-top: 15px;
196+
padding: 10px 20%;
197+
transition: 300ms all ease-in-out;
201198
}
202199
}
203200

‎src/components/homepage/HeroHeader.vue‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,11 @@
33
<aside class="hero_header-information">
44
<h1>Junior Developer Group</h1>
55
<p>
6-
We're an international community helping early career
7-
developers gain new skills, make meaningful connections and provide
8-
guidance to those entering their first roles in tech.
6+
We're a friendly, international community,
7+
providing an additional way of gaining experience,
8+
practicing your skills and creating meaningful connections while working together
99
</p>
10+
1011
<a href="/about">Find out more</a>
1112
</aside>
1213
<aside class="hero_header-logo">
@@ -21,7 +22,9 @@
2122
align-items: center;
2223
justify-content: center;
2324
margin: 0 auto;
24-
width: 100%;
25+
width: 90%;
26+
max-width: 1200px;
27+
2528
2629
min-height: 950px;
2730
@@ -31,27 +34,38 @@
3134
3235
aside {
3336
width: 50%;
37+
margin: 0 auto;
3438
}
3539
3640
.hero_header-information {
37-
text-align: left;
41+
display: flex;
42+
align-items: center;
43+
justify-content: center;
44+
flex-direction: column;
3845
3946
h1 {
4047
font-weight: bold;
4148
font-size: 44px;
4249
margin-block-start: 0;
4350
margin-block-end: 0;
51+
text-align: center;
4452
}
4553
4654
p {
4755
font-size: 18px;
4856
line-height: 23px;
4957
margin-bottom: 30px;
5058
max-width: 90%;
59+
text-align: center;
60+
61+
@media(max-width:500px) {
62+
max-width: 100%;
63+
margin-top: 30px;
64+
}
5165
}
5266
5367
a {
54-
background: #fc5b5b;
68+
background: #ff3e3e;
5569
border-radius: 10px;
5670
color: white;
5771
font-style: normal;
@@ -61,12 +75,22 @@
6175
text-align: center;
6276
letter-spacing: 2px;
6377
text-transform: uppercase;
64-
display: flex;
65-
justify-content: center;
66-
align-items: center;
78+
6779
margin-top: 15px;
68-
padding: 10px 10px;
69-
max-width: 80%;
80+
padding: 10px 150px;
81+
transition: 300ms all ease-in-out;
82+
83+
&:hover {
84+
padding: 10px 165px;
85+
}
86+
87+
@media(max-width:500px) {
88+
padding: 10px 50px;
89+
90+
&:hover {
91+
padding: 10px 65px;
92+
}
93+
}
7094
}
7195
}
7296

‎src/components/homepage/Learning.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="learning">
3+
4+
<section class="learning-image">
5+
<img src="../../assets/images/learning.jpg" alt=""/>
6+
</section>
7+
8+
<section class="learning-details">
9+
<h2> Things you can learn about 💡 </h2>
10+
<p>
11+
From the very beginnings of our group we wanted to be the place where early career developers gain additional skills that make them stand out and help secure their first roles in tech.
12+
Because of that we've included the follwing topics into every project we've built so far:
13+
</p>
14+
15+
<ul>
16+
17+
<li> Practicing Effective Communication</li>
18+
<li> Planning & Collaborating by using Jira </li>
19+
<li> Exploring Agile Ways Of Working</li>
20+
<li> Nurturing Psychological Safety </li>
21+
<li> Encouraging Public Speaking </li>
22+
<li> Empowering Future Leaders </li>
23+
</ul>
24+
25+
</section>
26+
</div>
27+
</template>
28+
29+
<script>
30+
export default {
31+
name: 'Learning'
32+
}
33+
</script>
34+
35+
<style lang="scss" scoped>
36+
.learning {
37+
display: flex;
38+
justify-content: center;
39+
align-items: center;
40+
width: 100%;
41+
@media (max-width:900px) {
42+
flex-direction: column;
43+
}
44+
}
45+
.learning-details {
46+
width: 40%;
47+
display: flex;
48+
flex-direction: column;
49+
50+
h2 {
51+
text-align: center;
52+
width: 100%;
53+
text-align: center;
54+
font-size: 2rem;
55+
}
56+
57+
@media (max-width:900px) {
58+
width: 80%;
59+
}
60+
}
61+
.learning-image {
62+
width: 50%;
63+
display: flex;
64+
justify-content: center;
65+
66+
@media (max-width:900px) {
67+
width: 80%;
68+
}
69+
70+
img {
71+
height: auto;
72+
width: 80%
73+
}
74+
}
75+
</style>

0 commit comments

Comments
 (0)