Skip to content

Commit 699ea77

Browse files
BipinKalraBipinKalra
committed
events page markup
1 parent 4129cb6 commit 699ea77

File tree

6 files changed

+190
-6
lines changed

6 files changed

+190
-6
lines changed

‎examples/views/events-page.hbs

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
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">
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">
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>
132+
</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: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,4 +11,5 @@
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";

‎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/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/settings/settings.color.scss

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

124124
//Gradients
125125
$bg-gradient-blue-lr: linear-gradient(to right, #193b84, #2675bb);
126-
$gradient-orange-lr: linear-gradient(to right, #ec6333, #f19633);
126+
// $gradient-orange-lr: linear-gradient(to right, #ec6333, #f19633);
127127
$gradient-orange-30-deg: linear-gradient(30deg, #ec6333, #f19633);
128128
$gradient-black: linear-gradient(30deg, #333, #000);
129129
$button-gradient: linear-gradient(to right, rgb(237, 114, 152), rgb(236, 136, 113), rgb(237, 114, 152));
@@ -133,7 +133,7 @@ $gradient-blue-30-deg: linear-gradient(30deg, #384282, #34729a);
133133
$gradient-red-blue: linear-gradient(to right, #e9414d, #2d2982);
134134
$button-gradient-blue: linear-gradient(to right, #193b84, #2675bb);
135135

136-
$gradient-orange: linear-gradient(30deg, #ec6333, #f19633);
136+
// $gradient-orange: linear-gradient(30deg, #ec6333, #f19633);
137137
$gradient-purple: linear-gradient(30deg, #271147, #553180);
138138
$gradient-navy: linear-gradient(30deg, #133155, #122a42);
139139
$gradient-dblue-lr: linear-gradient(to right, #0b024e, #003);
@@ -150,7 +150,7 @@ $hi-gradient-blue-lr: linear-gradient(to right, #1c40de, #2ab5ed);
150150
$hi-gradient-purple-lr: linear-gradient(to right, #8008db, #430cd7);
151151

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

0 commit comments

Comments
 (0)