Skip to content

Commit 53637aa

Browse files
vdvibhu20vdvibhu20
authored
Merge pull request #441 from coding-blocks/events-page
Events page
2 parents c3bbd4a + 5a4c4c4 commit 53637aa

File tree

9 files changed

+274
-7
lines changed

9 files changed

+274
-7
lines changed

‎examples/views/events-page.hbs

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<div class="events-page">
2+
<div class="bg-black events-page__section">
3+
<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">
7+
{{!-- Number goes here --}}
8+
</div>
9+
<div class="s-80x80 bg-white br-5">
10+
{{!-- Number goes here --}}
11+
</div>
12+
<div class="bold mx-3" style="font-size: 50px;">:</div>
13+
<div class="s-80x80 bg-white mr-2 br-5">
14+
{{!-- Number goes here --}}
15+
</div>
16+
<div class="s-80x80 bg-white br-5">
17+
{{!-- Number goes here --}}
18+
</div>
19+
</div>
20+
<div class="bold" style="font-size: 4.7rem;">SCHOLARSHIP TEST</div>
21+
<h2 class="mt-2 gradient-text-orange bold">24th march 2020</h2>
22+
<div class="font-md mt-4">
23+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
24+
magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo vive
25+
</div>
26+
<button class="button-solid button-orange mt-5">Register Now</button>
27+
</div>
28+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/test.png">
29+
</div>
30+
</div>
31+
<div class="my-5">
32+
<h2 class="bold t-align-c">Events</h2>
33+
</div>
34+
{{!-- Carousel dots go here --}}
35+
<div class="events-page__events-carousel">
36+
<div class="row c-card-carousel justify-content-center overflow-hidden">
37+
<div class="col-10">
38+
<div class="br-10 events-page__event-card border">
39+
<div class="bg-grey events-page__event-card__head">
40+
<div class="events-page__event-card__head__date-tag s-100x100 round">
41+
<div class="t-align-c">
42+
<div class="font-mdxl bold gradient-text-orange">10</div>
43+
<div class="bold">SEPT</div>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="py-4 px-md-5 px-4">
48+
<div class="row no-gutters justify-content-between align-items-center">
49+
<div class="flex-1">
50+
<h2 class="bold gradient-text-orange">Interview Wednesday</h2>
51+
<div class="font-sm pb-3 mb-3 border-bottom" style="width: fit-content;">Get ‘FAANG’ Ready with Kartik
52+
bhaiya</div>
53+
<div class="card-sm">
54+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
55+
dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus
56+
</div>
57+
</div>
58+
<div class="font-md">7:30 Onwards</div>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
<div class="col-10">
64+
<div class="br-10 events-page__event-card border">
65+
<div class="bg-grey events-page__event-card__head">
66+
<div class="events-page__event-card__head__date-tag s-100x100 round">
67+
<div class="t-align-c">
68+
<div class="font-mdxl bold gradient-text-orange">10</div>
69+
<div class="bold">SEPT</div>
70+
</div>
71+
</div>
72+
</div>
73+
<div class="py-4 px-md-5 px-4">
74+
<div class="row no-gutters justify-content-between align-items-center">
75+
<div class="flex-1">
76+
<h2 class="bold gradient-text-orange">Interview Wednesday</h2>
77+
<div class="font-sm pb-3 mb-3 border-bottom" style="width: fit-content;">Get ‘FAANG’ Ready with Kartik
78+
bhaiya</div>
79+
<div class="card-sm">
80+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
81+
dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus
82+
</div>
83+
</div>
84+
<div class="font-md">7:30 Onwards</div>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
<div class="col-10">
90+
<div class="br-10 events-page__event-card border">
91+
<div class="bg-grey events-page__event-card__head">
92+
<div class="events-page__event-card__head__date-tag s-100x100 round">
93+
<div class="t-align-c">
94+
<div class="font-mdxl bold gradient-text-orange">10</div>
95+
<div class="bold">SEPT</div>
96+
</div>
97+
</div>
98+
</div>
99+
<div class="py-4 px-md-5 px-4">
100+
<div class="row no-gutters justify-content-between align-items-center">
101+
<div class="flex-1">
102+
<h2 class="bold gradient-text-orange">Interview Wednesday</h2>
103+
<div class="font-sm pb-3 mb-3 border-bottom" style="width: fit-content;">Get ‘FAANG’ Ready with Kartik
104+
bhaiya</div>
105+
<div class="card-sm">
106+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
107+
dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus
108+
</div>
109+
</div>
110+
<div class="font-md">7:30 Onwards</div>
111+
</div>
112+
</div>
113+
</div>
114+
</div>
115+
</div>
116+
117+
<div class="events-page__events-carousel__navigation events-page__events-carousel__navigation--left">
118+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/left.svg">
119+
</div>
120+
<div class="events-page__events-carousel__navigation events-page__events-carousel__navigation--right">
121+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/right.svg">
122+
</div>
123+
</div>
124+
<div class="events-page__section">
125+
<div class="row no-gutters justify-content-between align-items-center mb-5">
126+
<div class="flex-1">
127+
<h2 class="bold">Upcoming Workshops and Contests</h2>
128+
</div>
129+
<button class="button-solid button-orange">View All</button>
130+
</div>
131+
<div class="row">
132+
<div class="col-4 pt-5">
133+
<div class="br-10 label-card">
134+
<div class="br-10 label-card__head">
135+
<div class="label-card__label all-center">
136+
<div class="white bold">LIVE WEBINAR</div>
137+
</div>
138+
<img
139+
src="https://previews.123rf.com/images/baranq/baranq1603/baranq160300758/53954805-businessman-portrait.jpg" class="label-card__head__cover">
140+
</div>
141+
<div class="br-10 label-card__foot px-md-5 px-4">
142+
<div class="label-card__foot__tag s-100x100">
143+
<div class="t-align-c">
144+
<div class="font-mdxl bold gradient-text-orange">10</div>
145+
<div class="bold">SEPT</div>
146+
</div>
147+
</div>
148+
<h4 class="bold">Machine Learning</h4>
149+
<div class="mt-1">Face Recognition</div>
150+
<div class="mentor-row my-4">
151+
<div class="mentor-row__image-container">
152+
<img src="https://minio.codingblocks.com/amoeba/4078be4e-72e1-451a-9c4e-9223d2bbcc2c"
153+
alt="photo ofRishab Kapoor" class="mentor-row__image-container__mentor-image s-60x60">
154+
<div class="mentor-row__text-container">
155+
<div>By</div>
156+
<div class="bold">Rishab Kapoor</div>
157+
</div>
158+
</div>
159+
</div>
160+
<div class="row no-gutters justify-content-between align-items-center">
161+
<div class="font-sm">7:30 Onwards</div>
162+
<button class="button-solid button-orange">Register</button>
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
</div>

‎examples/views/index.hbs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
<div class="row p-3"><a target="preview" href="items-card.html">items-card</a></div>
5454
<div class="row p-3"><a target="preview" href="my-order.html">my-order</a></div>
5555
<div class="row p-3"><a target="preview" href="new-checkout.html">new-checkout</a></div>
56+
<div class="row p-3"><a target="preview" href="events-page.html">events-page</a></div>
5657
<div class="row p-3"><a target="preview" href="form-input.html">form-input</a></div>
5758
<div class="row p-3"><a target="preview" href="hb-author-card.html">hb-author-card</a></div>
5859
<div class="row p-3"><a target="preview" href="hb-landing.html">hb-landing</a></div>

‎examples/views/layouts/default.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link href="stylesheets/online-cb.css" rel="stylesheet">
77
{{!-- <link href="stylesheets/account.css" rel="stylesheet">
88
<link href="stylesheets/hb.css" rel="stylesheet"> --}}
9-
<link href="stylesheets/hiringblocks.css" rel="stylesheet">
9+
{{!-- <link href="stylesheets/hiringblocks.css" rel="stylesheet"> --}}
1010
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700,800" rel="stylesheet">
1111
<link href="https://minio.codingblocks.com/motley/Gilroy.ttf" rel="stylesheet">
1212
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">

‎sass/styles/_components.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,6 @@
1111
@import "components/hamburger-nav.scss";
1212
@import "components/topnav.scss";
1313
@import "components/live-classes.scss";
14-
@import "components/img-review-card.scss";
14+
@import "components/img-review-card.scss";
15+
@import "components/events-page.scss";
16+
@import "components/label-card.scss";

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.events-page {
2+
&__section {
3+
padding: 7.5rem 10rem;
4+
}
5+
6+
&__event-card {
7+
&__head {
8+
height: 500px;
9+
border-top-left-radius: 10px;
10+
border-top-right-radius: 10px;
11+
position: relative;
12+
13+
&__date-tag {
14+
position: absolute;
15+
background: $white;
16+
bottom: -50px;
17+
right: 5%;
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
border: 1px solid $orange;
22+
}
23+
}
24+
}
25+
26+
&__events-carousel {
27+
position: relative;
28+
29+
&__navigation {
30+
position: absolute;
31+
cursor: pointer;
32+
top: calc(40% - 25px);
33+
background: $white;
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
border-radius: 50%;
38+
height: 50px;
39+
width: 50px;
40+
41+
&--left {
42+
left: calc(8.5% - 25px);
43+
}
44+
45+
&--right {
46+
right: calc(8.5% + 5px);
47+
}
48+
}
49+
}
50+
}

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.label-card {
2+
&__head {
3+
height: 225px;
4+
position: relative;
5+
background: $gradient-orange;
6+
7+
&__cover {
8+
border-top-left-radius: 10px;
9+
border-top-right-radius: 10px;
10+
object-fit: cover;
11+
}
12+
}
13+
14+
&__label {
15+
border-top-left-radius: 10px;
16+
border-top-right-radius: 10px;
17+
background: $gradient-orange;
18+
position: absolute;
19+
height: 40px;
20+
width: 55%;
21+
top: -40px;
22+
left: 22.5%;
23+
}
24+
25+
&__foot {
26+
border: 1px solid $search-box-color;
27+
margin-top: -15px;
28+
background: $white;
29+
position: relative;
30+
padding-top: 3.8rem;
31+
padding-bottom: 3rem;
32+
33+
&__tag {
34+
position: absolute;
35+
background: $white;
36+
top: -50px;
37+
right: 7.5%;
38+
display: flex;
39+
align-items: center;
40+
justify-content: center;
41+
border: 1px solid $orange;
42+
border-radius: 50%;
43+
}
44+
}
45+
}

‎sass/styles/objects/buttons.scss

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@
7474
}
7575

7676
&.button-orange {
77-
background-image: $gradient-orange;
77+
// background-image: $gradient-orange;
78+
background-image: linear-gradient(to right, #e74e4b, #fb8133, #e74e4b);
7879
}
7980

8081
&.button-white {

‎sass/styles/objects/card.mentors.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292

9393
.mentor-row {
9494
display: flex;
95-
align-items: center;
95+
align-items: center !important;
9696

9797
&__image-container {
9898
display: flex;

‎sass/styles/settings/settings.color.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ $list-shaded-background: rgba(255, 255, 255, 0.9);
125125

126126
//Gradients
127127
$bg-gradient-blue-lr: linear-gradient(to right, #193b84, #2675bb);
128-
$gradient-orange-lr: linear-gradient(to right, #ec6333, #f19633);
128+
// $gradient-orange-lr: linear-gradient(to right, #ec6333, #f19633);
129129
$gradient-orange-30-deg: linear-gradient(30deg, #ec6333, #f19633);
130130
$gradient-black: linear-gradient(30deg, #333, #000);
131131
$button-gradient: linear-gradient(to right, rgb(237, 114, 152), rgb(236, 136, 113), rgb(237, 114, 152));
@@ -135,7 +135,7 @@ $gradient-blue-30-deg: linear-gradient(30deg, #384282, #34729a);
135135
$gradient-red-blue: linear-gradient(to right, #e9414d, #2d2982);
136136
$button-gradient-blue: linear-gradient(to right, #193b84, #2675bb);
137137

138-
$gradient-orange: linear-gradient(30deg, #ec6333, #f19633);
138+
// $gradient-orange: linear-gradient(30deg, #ec6333, #f19633);
139139
$gradient-purple: linear-gradient(30deg, #271147, #553180);
140140
$gradient-navy: linear-gradient(30deg, #133155, #122a42);
141141
$gradient-dblue-lr: linear-gradient(to right, #0b024e, #003);
@@ -152,7 +152,7 @@ $hi-gradient-blue-lr: linear-gradient(to right, #1c40de, #2ab5ed);
152152
$hi-gradient-purple-lr: linear-gradient(to right, #8008db, #430cd7);
153153

154154
//Palette Colors
155-
$gradient-orange: linear-gradient(30deg, #e74e4b, #fb8133);
155+
$gradient-orange: linear-gradient(to right, #e74e4b, #fb8133);
156156
$gradient-purple: linear-gradient(30deg, #271147, #553180);
157157
$gradient-purple-blue: linear-gradient(30deg, #8108da, #350ed8);
158158
$gradient-blue: linear-gradient(30deg, #1b40de, #2cb4ed);

0 commit comments

Comments
 (0)