Skip to content

Commit 90d480e

Browse files
BipinKalraBipinKalra
authored
Merge pull request #442 from BipinKalra/events-page
Events page
2 parents dd00269 + a4e6c1b commit 90d480e

File tree

4 files changed

+209
-24
lines changed

4 files changed

+209
-24
lines changed

‎examples/views/events-page.hbs

Lines changed: 105 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
<div class="events-page">
22
<div class="bg-black events-page__section">
33
<div class="row no-gutters justify-content-between align-items-center">
4-
<div class="col-6 white">
5-
<div class="row no-gutters mb-5">
6-
<div class="s-80x80 bg-white mr-2 br-5">
4+
<div class="flex-1 white pr-xl-5 t-align-xl-l t-align-c">
5+
<div class="row no-gutters mb-5 justify-content-xl-start justify-content-center events-page__meter">
6+
<div class="bg-white mr-2">
77
{{!-- Number goes here --}}
88
</div>
9-
<div class="s-80x80 bg-white br-5">
9+
<div class="bg-white">
1010
{{!-- Number goes here --}}
1111
</div>
1212
<div class="bold mx-3" style="font-size: 50px;">:</div>
13-
<div class="s-80x80 bg-white mr-2 br-5">
13+
<div class="bg-white mr-2">
1414
{{!-- Number goes here --}}
1515
</div>
16-
<div class="s-80x80 bg-white br-5">
16+
<div class="bg-white">
1717
{{!-- Number goes here --}}
1818
</div>
1919
</div>
20-
<div class="bold" style="font-size: 4.7rem;">SCHOLARSHIP TEST</div>
20+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/test.png" class="d-xl-none d-block mb-5 mx-auto w-40">
21+
<div class="bold" style="font-size: 5vw;">SCHOLARSHIP TEST</div>
2122
<h2 class="mt-2 gradient-text-orange bold">24th march 2020</h2>
2223
<div class="font-md mt-4">
2324
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
2425
magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo vive
2526
</div>
2627
<button class="button-solid button-orange mt-5">Register Now</button>
2728
</div>
28-
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/test.png">
29+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/test.png" class="d-xl-block d-none w-40">
2930
</div>
3031
</div>
3132
<div class="my-5">
@@ -44,9 +45,9 @@
4445
</div>
4546
</div>
4647
</div>
47-
<div class="py-4 px-md-5 px-4">
48+
<div class="events-page__event-card__foot">
4849
<div class="row no-gutters justify-content-between align-items-center">
49-
<div class="flex-1">
50+
<div class="flex-1 pr-sm-4">
5051
<h2 class="bold gradient-text-orange">Interview Wednesday</h2>
5152
<div class="font-sm pb-3 mb-3 border-bottom" style="width: fit-content;">Get ‘FAANG’ Ready with Kartik
5253
bhaiya</div>
@@ -55,8 +56,9 @@
5556
dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus
5657
</div>
5758
</div>
58-
<div class="font-md">7:30 Onwards</div>
59+
<div class="font-md d-sm-block d-none">7:30 Onwards</div>
5960
</div>
61+
<div class="d-sm-none d-block font-md mt-4">7:30 Onwards</div>
6062
</div>
6163
</div>
6264
</div>
@@ -70,9 +72,9 @@
7072
</div>
7173
</div>
7274
</div>
73-
<div class="py-4 px-md-5 px-4">
75+
<div class="events-page__event-card__foot">
7476
<div class="row no-gutters justify-content-between align-items-center">
75-
<div class="flex-1">
77+
<div class="flex-1 pr-sm-4">
7678
<h2 class="bold gradient-text-orange">Interview Wednesday</h2>
7779
<div class="font-sm pb-3 mb-3 border-bottom" style="width: fit-content;">Get ‘FAANG’ Ready with Kartik
7880
bhaiya</div>
@@ -81,8 +83,9 @@
8183
dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus
8284
</div>
8385
</div>
84-
<div class="font-md">7:30 Onwards</div>
86+
<div class="font-md d-sm-block d-none">7:30 Onwards</div>
8587
</div>
88+
<div class="d-sm-none d-block font-md mt-4">7:30 Onwards</div>
8689
</div>
8790
</div>
8891
</div>
@@ -96,9 +99,9 @@
9699
</div>
97100
</div>
98101
</div>
99-
<div class="py-4 px-md-5 px-4">
102+
<div class="events-page__event-card__foot">
100103
<div class="row no-gutters justify-content-between align-items-center">
101-
<div class="flex-1">
104+
<div class="flex-1 pr-sm-4">
102105
<h2 class="bold gradient-text-orange">Interview Wednesday</h2>
103106
<div class="font-sm pb-3 mb-3 border-bottom" style="width: fit-content;">Get ‘FAANG’ Ready with Kartik
104107
bhaiya</div>
@@ -107,8 +110,9 @@
107110
dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus
108111
</div>
109112
</div>
110-
<div class="font-md">7:30 Onwards</div>
113+
<div class="font-md d-sm-block d-none">7:30 Onwards</div>
111114
</div>
115+
<div class="d-sm-none d-block font-md mt-4">7:30 Onwards</div>
112116
</div>
113117
</div>
114118
</div>
@@ -129,14 +133,93 @@
129133
<button class="button-solid button-orange">View All</button>
130134
</div>
131135
<div class="row">
132-
<div class="col-4 pt-5">
136+
<div class="col-xl-4 col-md-6 py-5">
133137
<div class="br-10 label-card">
134138
<div class="br-10 label-card__head">
135-
<div class="label-card__label all-center">
136-
<div class="white bold">LIVE WEBINAR</div>
139+
<div class="label-card__label">
140+
<div class="position-relative all-center h-100">
141+
<div class="white bold">LIVE WEBINAR</div>
142+
</div>
143+
</div>
144+
<img
145+
src="https://previews.123rf.com/images/baranq/baranq1603/baranq160300758/53954805-businessman-portrait.jpg"
146+
class="label-card__head__cover">
147+
</div>
148+
<div class="br-10 label-card__foot px-md-5 px-4">
149+
<div class="label-card__foot__tag s-100x100">
150+
<div class="t-align-c">
151+
<div class="font-mdxl bold gradient-text-orange">10</div>
152+
<div class="bold">SEPT</div>
153+
</div>
154+
</div>
155+
<h4 class="bold">Machine Learning</h4>
156+
<div class="mt-1">Face Recognition</div>
157+
<div class="mentor-row my-4">
158+
<div class="mentor-row__image-container">
159+
<img src="https://minio.codingblocks.com/amoeba/4078be4e-72e1-451a-9c4e-9223d2bbcc2c"
160+
alt="photo ofRishab Kapoor" class="mentor-row__image-container__mentor-image s-60x60">
161+
<div class="mentor-row__text-container align-self-center">
162+
<div>By</div>
163+
<div class="bold">Rishab Kapoor</div>
164+
</div>
165+
</div>
166+
</div>
167+
<div class="row no-gutters justify-content-between align-items-center">
168+
<div class="font-sm">7:30 Onwards</div>
169+
<button class="button-solid button-orange">Register</button>
170+
</div>
171+
</div>
172+
</div>
173+
</div>
174+
<div class="col-xl-4 col-md-6 py-5">
175+
<div class="br-10 label-card">
176+
<div class="br-10 label-card__head">
177+
<div class="label-card__label">
178+
<div class="position-relative all-center h-100">
179+
<div class="white bold">LIVE WEBINAR</div>
180+
</div>
181+
</div>
182+
<img
183+
src="https://previews.123rf.com/images/baranq/baranq1603/baranq160300758/53954805-businessman-portrait.jpg"
184+
class="label-card__head__cover">
185+
</div>
186+
<div class="br-10 label-card__foot px-md-5 px-4">
187+
<div class="label-card__foot__tag s-100x100">
188+
<div class="t-align-c">
189+
<div class="font-mdxl bold gradient-text-orange">10</div>
190+
<div class="bold">SEPT</div>
191+
</div>
192+
</div>
193+
<h4 class="bold">Machine Learning</h4>
194+
<div class="mt-1">Face Recognition</div>
195+
<div class="mentor-row my-4">
196+
<div class="mentor-row__image-container">
197+
<img src="https://minio.codingblocks.com/amoeba/4078be4e-72e1-451a-9c4e-9223d2bbcc2c"
198+
alt="photo ofRishab Kapoor" class="mentor-row__image-container__mentor-image s-60x60">
199+
<div class="mentor-row__text-container align-self-center">
200+
<div>By</div>
201+
<div class="bold">Rishab Kapoor</div>
202+
</div>
203+
</div>
204+
</div>
205+
<div class="row no-gutters justify-content-between align-items-center">
206+
<div class="font-sm">7:30 Onwards</div>
207+
<button class="button-solid button-orange">Register</button>
208+
</div>
209+
</div>
210+
</div>
211+
</div>
212+
<div class="col-xl-4 col-md-6 py-5">
213+
<div class="br-10 label-card">
214+
<div class="br-10 label-card__head">
215+
<div class="label-card__label">
216+
<div class="position-relative all-center h-100">
217+
<div class="white bold">LIVE WEBINAR</div>
218+
</div>
137219
</div>
138220
<img
139-
src="https://previews.123rf.com/images/baranq/baranq1603/baranq160300758/53954805-businessman-portrait.jpg" class="label-card__head__cover">
221+
src="https://previews.123rf.com/images/baranq/baranq1603/baranq160300758/53954805-businessman-portrait.jpg"
222+
class="label-card__head__cover">
140223
</div>
141224
<div class="br-10 label-card__foot px-md-5 px-4">
142225
<div class="label-card__foot__tag s-100x100">
@@ -151,7 +234,7 @@
151234
<div class="mentor-row__image-container">
152235
<img src="https://minio.codingblocks.com/amoeba/4078be4e-72e1-451a-9c4e-9223d2bbcc2c"
153236
alt="photo ofRishab Kapoor" class="mentor-row__image-container__mentor-image s-60x60">
154-
<div class="mentor-row__text-container">
237+
<div class="mentor-row__text-container align-self-center">
155238
<div>By</div>
156239
<div class="bold">Rishab Kapoor</div>
157240
</div>

‎sass/styles/components/events-page.scss

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
padding: 7.5rem 10rem;
44
}
55

6+
&__meter {
7+
& > div.bg-white {
8+
height: 80px;
9+
width: 80px;
10+
border-radius: 5px;
11+
}
12+
}
13+
614
&__event-card {
715
&__head {
816
height: 500px;
@@ -21,6 +29,10 @@
2129
border: 1px solid $orange;
2230
}
2331
}
32+
33+
&__foot {
34+
padding: 1.5rem 3rem;
35+
}
2436
}
2537

2638
&__events-carousel {
@@ -47,4 +59,47 @@
4759
}
4860
}
4961
}
62+
63+
@media screen and (max-width: 1199px) {
64+
&__section {
65+
padding: 5rem 7.5rem;
66+
}
67+
}
68+
69+
@media screen and (max-width: 991px) {
70+
&__section {
71+
padding: 3rem 5rem;
72+
}
73+
}
74+
75+
@media screen and (max-width: 767px) {
76+
&__section {
77+
padding: 2rem 3rem;
78+
}
79+
80+
&__event-card {
81+
&__foot {
82+
padding: 1.5rem 1.5rem;
83+
}
84+
}
85+
}
86+
87+
@media screen and (max-width: 575px) {
88+
&__section {
89+
padding: 2rem 1.5rem;
90+
}
91+
92+
&__event-card {
93+
&__foot {
94+
padding: 4.5rem 1.5rem 1.5rem 1.5rem;
95+
}
96+
}
97+
98+
&__meter {
99+
& > div.bg-white {
100+
height: 60px;
101+
width: 60px;
102+
}
103+
}
104+
}
50105
}

‎sass/styles/components/label-card.scss

Lines changed: 48 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,53 @@
2020
width: 55%;
2121
top: -40px;
2222
left: 22.5%;
23+
24+
& > div {
25+
&::after,
26+
&::before,
27+
& > div::after,
28+
& > div::before {
29+
content: "";
30+
position: absolute;
31+
bottom: 0;
32+
}
33+
34+
&::before {
35+
background: #e74e4b;
36+
left: -10px;
37+
}
38+
39+
&::after {
40+
background: #fb8133;
41+
right: -10px;
42+
}
43+
44+
&::before,
45+
&::after {
46+
z-index: 1;
47+
width: 10px;
48+
height: 10px;
49+
}
50+
51+
& > div {
52+
&::before {
53+
left: -20px;
54+
}
55+
56+
&::after {
57+
right: -20px;
58+
}
59+
60+
&::before,
61+
&::after {
62+
width: 20px;
63+
height: 20px;
64+
border-radius: 10px;
65+
z-index: 2;
66+
background: $white;
67+
}
68+
}
69+
}
2370
}
2471

2572
&__foot {
@@ -42,4 +89,4 @@
4289
border-radius: 50%;
4390
}
4491
}
45-
}
92+
}

‎sass/styles/utilities/text.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ $vertical-align: (
5858
// responsive versions of text-aligns;
5959
// works similarly as boostrap 4
6060

61-
@each $size, $label in (576px, sm), (768px, md), (992px, lg) {
61+
@each $size, $label in (576px, sm), (768px, md), (992px, lg), (1200px, xl) {
6262
@media screen and(min-width: $size) {
6363
.t-align-#{$label}-r {
6464
text-align: right !important;

0 commit comments

Comments
 (0)