Skip to content

Commit 4531e3c

Browse files
BipinKalraBipinKalra
authored
Merge pull request #433 from BipinKalra/course-page-new
Course page new
2 parents e4eb62c + 9faa553 commit 4531e3c

File tree

8 files changed

+319
-3
lines changed

8 files changed

+319
-3
lines changed

‎examples/views/live-classes-course-page-new.hbs

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,246 @@
1+
<div class="px-md-5 px-4 live-courses mb-5">
2+
<div class="border-card p-md-5 p-4 bg-gradient-cyan white mb-5">
3+
<div class="row no-gutters justify-content-between">
4+
<div class="col-sm-8 order-sm-1 order-2">
5+
<div class="bold" style="font-size: 2.85rem;">Master DS and Algo with C++</div>
6+
<div class="mt-4 font-lg">Start from Basics, become a C++ Master!</div>
7+
<div class="my-5">
8+
<div class="mentor-row d-flex align-items-center">
9+
<div class="mentor-row__image-container">
10+
<img src="https://minio.codingblocks.com/amoeba/4078be4e-72e1-451a-9c4e-9223d2bbcc2c"
11+
alt="photo ofRishab Kapoor" class="mentor-row__image-container__mentor-image s-60x60">
12+
<img src="https://minio.codingblocks.com/amoeba/27d05ebd-4820-4abf-a5f5-0846676bac48"
13+
alt="photo ofGarima Chhikara" class="mentor-row__image-container__mentor-image s-60x60"></div>
14+
<div class="mentor-row__text-container">
15+
<div class="font-md">Instructors</div>
16+
<h4 class="bold">Rishab Kapoor, Garima Chhikara</h4>
17+
</div>
18+
</div>
19+
</div>
20+
</div>
21+
<div class="order-sm-2 order-1 mb-sm-0 mb-3">
22+
<img src="https://minio.codingblocks.com/amoeba/e5171581-41d8-46f5-97bf-c47db8214f22.png"
23+
class="round border b-white border-2 s-130x130">
24+
</div>
25+
</div>
26+
<div class="row no-gutters align-items-center justify-content-between">
27+
<h4 class="bold">Batch Starts 1st June 2020</h4>
28+
<div class="d-inline-flex align-items-center">
29+
<span class="font-mdxl bold">&#8377;&nbsp;12499</span>
30+
<span class="font-xl bold del-text-grey pl-3"><del>&#8377;&nbsp;18999</del></span>
31+
</div>
32+
</div>
33+
</div>
34+
<div class="row">
35+
<div class="col-lg-8 mb-lg-0 mb-5">
36+
<div class="border-card p-md-5 p-4 mb-5">
37+
<div class="font-md">
38+
<strong>Summary</strong>
39+
<br /><br />
40+
First of its kind, our C++ Live course for beginners is a uniquely designed course in Data Structures and
41+
Algorithms to aid your journey right from the beginning to the very end in becoming the most skilled software
42+
engineers across the globe.Through these Live classes, the students will not only become more efficient with
43+
their solutions by optimizing space and time but will also provide them a firm base to excel in all their
44+
programming interviews. The core focus of these C++ classes is to maintain an equilibrium between theory and
45+
practical, thus providing the programmers with an ample amount of practice of questions based on Sorting,
46+
Searching, Greedy Algorithms, Divide and Conquer Algorithms and more.
47+
<br /><br />
48+
<strong>Highlights</strong>
49+
<br /><br />
50+
<ul class="list-style-gradient-bullet my-0">
51+
<li>Extensive Data Structures &amp; Algorithmic Coverage</li>
52+
<li>500+ Video Lectures and Code Challenges</li>
53+
<li>Hint Videos for Complex Problems</li>
54+
<li>Lifetime Assignment Access</li>
55+
<li>Basics &amp; Advanced Coding Topics for Interviews</li>
56+
<li>Expert Doubt Support</li>
57+
</ul>
58+
<br />
59+
<strong>Pre-requisites</strong>
60+
<br /><br />
61+
There are no pre-requisites to join this course.
62+
</pre>
63+
</div>
64+
</div>
65+
<div class="border-card p-0 mb-5">
66+
<div class="px-md-5 px-4 py-4 bg-grey">
67+
<div class="row no-gutters align-items-center justify-content-between">
68+
<h2 class="bold flex-1">Lecture Schedule</h2>
69+
<div class="t-align-r">
70+
<h5 class="bold">Mon Tue Wed Fri</h5>
71+
<div class="bold gradient-text-orange mt-1">7 PM - 10 PM</div>
72+
</div>
73+
</div>
74+
</div>
75+
<div class="py-4 overflow-y-auto gradient-orange-scroll" style="max-height: 450px;">
76+
<div class="row no-gutters align-items-center justify-content-between py-3 hover-grey px-md-5 px-4">
77+
<div class="col-5">
78+
<h5 class="bold">Lecture 1</h5>
79+
</div>
80+
<h5 class="bold gradient-text-orange flex-1 pl-4">Introduction to Data Structures &amp; Algorithms</h5>
81+
</div>
82+
<div class="divider-h px-md-5 px-4 content-divider"></div>
83+
<div class="row no-gutters align-items-center justify-content-between py-3 hover-grey px-md-5 px-4">
84+
<div class="col-5">
85+
<h5 class="bold">Lecture 1</h5>
86+
</div>
87+
<h5 class="bold gradient-text-orange flex-1 pl-4">Introduction to Data Structures &amp; Algorithms</h5>
88+
</div>
89+
<div class="divider-h px-md-5 px-4 content-divider"></div>
90+
<div class="row no-gutters align-items-center justify-content-between py-3 hover-grey px-md-5 px-4">
91+
<div class="col-5">
92+
<h5 class="bold">Lecture 1</h5>
93+
</div>
94+
<h5 class="bold gradient-text-orange flex-1 pl-4">Introduction to Data Structures &amp; Algorithms</h5>
95+
</div>
96+
<div class="divider-h px-md-5 px-4 content-divider"></div>
97+
<div class="row no-gutters align-items-center justify-content-between py-3 hover-grey px-md-5 px-4">
98+
<div class="col-5">
99+
<h5 class="bold">Lecture 1</h5>
100+
</div>
101+
<h5 class="bold gradient-text-orange flex-1 pl-4">Introduction to Data Structures &amp; Algorithms</h5>
102+
</div>
103+
<div class="divider-h px-md-5 px-4 content-divider"></div>
104+
<div class="row no-gutters align-items-center justify-content-between py-3 hover-grey px-md-5 px-4">
105+
<div class="col-5">
106+
<h5 class="bold">Lecture 1</h5>
107+
</div>
108+
<h5 class="bold gradient-text-orange flex-1 pl-4">Introduction to Data Structures &amp; Algorithms</h5>
109+
</div>
110+
<div class="divider-h px-md-5 px-4 content-divider"></div>
111+
<div class="row no-gutters align-items-center justify-content-between py-3 hover-grey px-md-5 px-4">
112+
<div class="col-5">
113+
<h5 class="bold">Lecture 1</h5>
114+
</div>
115+
<h5 class="bold gradient-text-orange flex-1 pl-4">Introduction to Data Structures &amp; Algorithms</h5>
116+
</div>
117+
<div class="divider-h px-md-5 px-4 content-divider"></div>
118+
<div class="row no-gutters align-items-center justify-content-between py-3 hover-grey px-md-5 px-4">
119+
<div class="col-5">
120+
<h5 class="bold">Lecture 1</h5>
121+
</div>
122+
<h5 class="bold gradient-text-orange flex-1 pl-4">Introduction to Data Structures &amp; Algorithms</h5>
123+
</div>
124+
<div class="divider-h px-md-5 px-4 content-divider"></div>
125+
<div class="row no-gutters align-items-center justify-content-between py-3 hover-grey px-md-5 px-4">
126+
<div class="col-5">
127+
<h5 class="bold">Lecture 1</h5>
128+
</div>
129+
<h5 class="bold gradient-text-orange flex-1 pl-4">Introduction to Data Structures &amp; Algorithms</h5>
130+
</div>
131+
<div class="divider-h px-md-5 px-4 content-divider"></div>
132+
<div class="row no-gutters align-items-center justify-content-between py-3 hover-grey px-md-5 px-4">
133+
<div class="col-5">
134+
<h5 class="bold">Lecture 1</h5>
135+
</div>
136+
<h5 class="bold gradient-text-orange flex-1 pl-4">Introduction to Data Structures &amp; Algorithms</h5>
137+
</div>
138+
<div class="divider-h px-md-5 px-4 content-divider"></div>
139+
<div class="row no-gutters align-items-center justify-content-between py-3 hover-grey px-md-5 px-4">
140+
<div class="col-5">
141+
<h5 class="bold">Lecture 1</h5>
142+
</div>
143+
<h5 class="bold gradient-text-orange flex-1 pl-4">Introduction to Data Structures &amp; Algorithms</h5>
144+
</div>
145+
<div class="divider-h px-md-5 px-4 content-divider"></div>
146+
</div>
147+
</div>
148+
<div class="border-card bg-grey p-md-5 p-4">
149+
<div class="font-md bold mb-5">About Mentors</div>
150+
<div class="row no-gutters instructor-row">
151+
<img src="https://minio.codingblocks.com/amoeba/ebd9bd9b-5cfc-45da-bee2-1b4b95dbe5d9" class="s-50x50 round">
152+
<div class="ml-3 flex-1">
153+
<div class="font-mds bold">Prateek Narang</div>
154+
<a href="mailto:prateek@codingblocks.com" class="med-grey mb-2">prateek@codingblocks.com</a>
155+
<div class="t-align-j">
156+
<div class="markdown-body">
157+
<p>Currently doing his Masters in Machine Learning from IIT Delhi, Prateek is an ace programmer who has
158+
worked with SanDisk and HackerEarth in the past. He has also won prestigious hackathons including
159+
Google’s Code For India and Smart City Hackathon. A Computer Science Graduate from DTU, he is highly
160+
popular among students for his teaching methods. His interactive CV (<a
161+
href="http://www.prateeknarang.com">www.prateeknarang.com</a>) is also well known in 120+ countries.
162+
</p>
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
170+
<div class="col-lg-4 mb-lg-0 mb-5">
171+
<div class="border-card b-orange p-4 mb-4">
172+
<div class="row justify-content-between align-items-center no-gutters">
173+
<div class="flex-1 pr-3">
174+
<h5 class="bold">Take Demo Class</h5>
175+
<div class="card-md dark-grey">A Glimpse of what we have in store for you!</div>
176+
</div>
177+
<a href="#" class="button-solid button-orange free-trial-button">Try it for free!</a>
178+
</div>
179+
</div>
180+
181+
<div class="border-card bg-gradient-orange white p-4 mb-4">
182+
<div class="row justify-content-between align-items-center no-gutters">
183+
<div class="flex-1 pr-3">
184+
<h5 class="bold">Get Started</h5>
185+
<div class="card-md">Get all the benefits of the Classroom right at your home!</div>
186+
</div>
187+
<a href="#" class="button-solid button-white orange">Register Now</a>
188+
</div>
189+
</div>
190+
191+
<div class="border-card bg-grey p-4 mb-5">
192+
<div class="row justify-content-between align-items-center no-gutters">
193+
<div class="flex-1 pr-3">
194+
<h5 class="bold">Download Syllabus PDF</h5>
195+
</div>
196+
<a href="#" class="button-solid button-white orange"><i class="fas fa-download mx-4 px-3 fa-lg"></i></a>
197+
</div>
198+
</div>
199+
200+
<div class="border-card p-md-5 p-4 mb-5">
201+
<div class="row no-gutters align-items-center justify-content-between">
202+
<h5 class="bold flex-1">Opportunities for Students</h5>
203+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/unlock.svg">
204+
</div>
205+
<div class="mt-2 mb-4 card-md">
206+
Designed to bridge the gap between theoretical knowledge and industry-specific coding skills. Programmers will
207+
be well preparde for the interview processes of various big-wigs.Excel all your programming interviews by
208+
developing an efficient approach to find optimized solutions.Get placed at companies like Amazon, Google,
209+
Microsoft, Directi etc.
210+
</div>
211+
<div class="row no-gutters align-items-center justify-content-between">
212+
<h5 class="bold flex-1">Hands on Projects and Problems</h5>
213+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/puzzle.svg">
214+
</div>
215+
<div class="mt-2 mb-4 card-md">
216+
In-depth Discussion on Important Computer Science Topics Like OS, DBMS etc.Extensive Data Structures &
217+
Algorithmic Coverage. Assignments on the questions asked in Google and other BigWigs.
218+
</div>
219+
<div class="row no-gutters align-items-center justify-content-between">
220+
<h5 class="bold flex-1">Why Choose CB Live</h5>
221+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/question-mark.svg">
222+
</div>
223+
<div class="mt-2 mb-4 card-md">
224+
Two-Way Interaction: Share screen with your mentor for any doubt resolution 24*7.Placement Support: From
225+
Interview recommendations to placement, we are there for you at every step.Get into Bigwigs: Our expert will
226+
help you crack interviews for Amazon, Microsoft, Apple, Google, and Facebook.
227+
</div>
228+
<div class="row no-gutters align-items-center justify-content-between">
229+
<h5 class="bold flex-1">Certificate Course</h5>
230+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/scroll.svg">
231+
</div>
232+
<div class="mt-2 mb-4 card-md">
233+
Learners will get Course certificate from Coding Blocks upon completion of the program. Both e-certificate and
234+
physical copies of the certificate are provided and can be used on LinkedIn profiles and resumes.
235+
</div>
236+
</div>
237+
238+
<div class="border-card bg-gradient-purple white p-md-5 p-4">
239+
<h2 class="bold">Land your dream job</h2>
240+
<div class="mb-4 font-sm">Making you ready for grade A companies</div>
241+
{{!-- Comapany logos vector goes here --}}
242+
</div>
243+
</div>
244+
245+
{{!-- rest of the markup is redundant - All of that goes here after the row --}}
246+
</div>

‎sass/styles/_utilities.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,4 @@
1313
@import "utilities/overflow.scss";
1414
@import "utilities/aspect-ratio.scss";
1515
@import "utilities/transition.scss";
16+
@import "utilities/scrollbar.scss";

‎sass/styles/objects/buttons.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@
7676
&.button-orange {
7777
background-image: $gradient-orange;
7878
}
79+
80+
&.button-white {
81+
background: white !important;
82+
}
7983
}
8084

8185
.button-dashed {

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,3 +89,33 @@
8989
}
9090
}
9191
}
92+
93+
.mentor-row {
94+
display: flex;
95+
align-items: center;
96+
97+
&__image-container {
98+
display: flex;
99+
100+
&__mentor-image {
101+
border-radius: 50%;
102+
background-color: $card-mentor;
103+
border: 1px solid $white;
104+
105+
@for $i from 0 through 2 {
106+
&:nth-child(#{$i + 1}) {
107+
108+
z-index: 100 - $i;
109+
-ms-transform: translateX(multiply-px($i, -37%));
110+
-webkit-transform: translateX(multiply-px($i, -37%));
111+
transform: translateX(multiply-px($i, -37%));
112+
}
113+
}
114+
}
115+
}
116+
117+
&__text-container {
118+
flex: 1;
119+
padding-left: 0.5rem;
120+
}
121+
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ $light-grey: #f3f3f3;
3434
$grey: #a2a4a8;
3535
$dark-grey: #666;
3636
$border-grey: #2b2f37;
37+
$del-text-grey: #e7dddd;
3738

3839
$facebook: #3b5998;
3940
$google: #f4695a;
@@ -45,6 +46,8 @@ $global-font-heading-color: #333;
4546
$font-complete: #8dbf75;
4647
$font-sub-heading: #f6776f;
4748

49+
$scrollbar-color: #efefef;
50+
4851
$color-button-primary: #ed8080;
4952
$button-element-level: #f66;
5053

@@ -203,6 +206,7 @@ $text-color-list: (
203206
"pink": $dcb-pink,
204207
"med-grey": $faded-text,
205208
"dark-grey": $dark-grey,
209+
"del-text-grey": $del-text-grey
206210
);
207211

208212
//Gradient Text Colors

‎sass/styles/utilities/border.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
}
99

1010
.border-2 {
11-
border-width: 2px;
11+
border-width: 2px !important;
1212
}
1313

1414
@each $direction in ('top', 'right', 'bottom', 'left') {
@@ -23,7 +23,8 @@
2323
('green', $light-green),
2424
('black', $black),
2525
('orange', $orange),
26-
('white', $white) {
26+
('white', $white),
27+
('orange', $orange) {
2728
.b-#{$type} {
2829
border-color: $color !important;
2930
}

‎sass/styles/utilities/scrollbar.scss

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
::-webkit-scrollbar {
2+
background-color: $white;
3+
width: 12px;
4+
}
5+
6+
::-webkit-scrollbar-track {
7+
background-color: $white;
8+
9+
&:hover {
10+
background-color: $scrollbar-color;
11+
}
12+
}
13+
14+
::-webkit-scrollbar-thumb {
15+
background-color: $dark-grey-list;
16+
border-radius: 12px;
17+
border: 3px solid $white;
18+
19+
&:hover {
20+
border: 2px solid $scrollbar-color;
21+
}
22+
}
23+
24+
.gradient-orange-scroll {
25+
&::-webkit-scrollbar-thumb {
26+
&:hover {
27+
background: $gradient-orange;
28+
}
29+
}
30+
}

‎sass/styles/utilities/width-x-height.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@for $i from 1 through 12 {
1+
@for $i from 1 through 15 {
22
$width: ($i * 10px);
33
$height: ($i * 10px);
44

0 commit comments

Comments
 (0)