Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

new UI added for classroom page #966

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

new UI added for classroom page #966

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
7a4dcec
new UI added for classroom page
BipinKalra Apr 30, 2021
5b2991c
add web dev
aggarwalpulkit596 Apr 30, 2021
0cdb411
Ui fixes in classroom pages
BipinKalra Apr 30, 2021
52d1523
update: buy links working and dedicated placement support added
BipinKalra Apr 30, 2021
26ffccd
why choose CB accelerate added
BipinKalra Apr 30, 2021
4dfd24e
Merge branch 'courses-live-classroom' of https://github.com/coding-bl…
BipinKalra Apr 30, 2021
90023cb
updates in why choose section
BipinKalra Apr 30, 2021
188c587
changes in course and mentor logos
BipinKalra Apr 30, 2021
937cfbd
gradients synced
BipinKalra Apr 30, 2021
1a23919
prices updated for all courses
BipinKalra Apr 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
441 changes: 367 additions & 74 deletions src/classroom-courses/advanced-data-structures-and-algorithms-for-interviews.hbs
View file
Open in desktop

Large diffs are not rendered by default.

375 changes: 294 additions & 81 deletions src/classroom-courses/web-development-nodejs.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,84 +1,297 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{title}}</title>
{{> meta}}
{{> head}}
{{> courseSchema}}
</head>
<body class="scroll-assist" style="margin-top: -70px;">
{{> navbar}}
<div class="main-container">
{{> header}}
{{> overview}}
{{> coursehighlights}}
{{> freeAccessBanner}}
{{> coursecontents}}
<section style="">
<div class="container">
<div class="row v-align-children">
<div class="col-md-4 col-sm-6">
<div class="pricing-table pt-1 text-center emphasis">
<h5 class="uppercase">
Regular Batch
</h5>
<div><span class="price">₹22,000</div>
<p class="lead">(20-22 lectures)</p>
<a class="btn btn-white btn-lg" href="#register">Enroll Now</a>
<p>
<a href="/contactus">Contact Us</a>
<br>Call(Toll-free): 1800-2744-504
</p>
</div>
</div>
</div>

</div>
</section>
{{> courseschedule}}
<section>
<a id="register"></a>
<div class="text-center">
<h3>REGISTER NOW</h3>
</div>
<div class="container">
<div class="course-tabs">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="wide-tab active" id="tab-delhi"><a href="#delhi" aria-controls="home" role="tab" data-toggle="tab" aria-expanded="true">Pitampura</a></li>
<li role="presentation" class="wide-tab" id="tab-noida"><a href="#noida" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false">Noida (Early bird discount)</a></li>
<li role="presentation" class="wide-tab" id="tab-dwarka"><a href="#dwarka" aria-controls="profile" role="tab" data-toggle="tab" aria-expanded="false">Dwarka</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="delhi">
<div class="container widget-container" data-widget-id="{{frame-id-pitampura-wd}}">
<iframe class="payment-widget" {{#if frame-id-pitampura-wd}}id="{{frame-id-pitampura-wd}}"{{/if}} frameborder="0" src="{{{registerLinkPitampuraWD}}}"></iframe>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="noida">
<div class="container widget-container" data-widget-id="{{frame-id-noida-wd}}">
<iframe class="payment-widget" {{#if frame-id-noida-wd}}id="{{frame-id-noida-wd}}"{{/if}} frameborder="0" src="{{{registerLinkNoidaWD}}}"></iframe>
</div>
</div>
{{!-- <div role="tabpanel" class="tab-pane" id="dehradun">
<div class="container widget-container" data-widget-id="{{frame-id-dehradun}}">
<iframe class="payment-widget" {{#if frame-id-dehradun}}id="{{frame-id-dehradun}}"{{/if}} frameborder="0" src="{{{registerLinkDehradunWD}}}"></iframe>
</div>
</div> --}}
<div role="tabpanel" class="tab-pane" id="dwarka">
<div class="container widget-container" data-widget-id="{{frame-id-dwarka-wd}}">
<iframe class="payment-widget" {{#if frame-id-dwarka-wd}}id="{{frame-id-dwarka-wd}}"{{/if}} frameborder="0" src="{{{registerLinkDwarkaWD}}}"></iframe>
</div>
</div>
</div>
</div>
</div>
</section>
{{> team team=mentors}}
{{> coursefaq}}
{{> review-course-section}}
{{> map}}
{{> footer}}
</div>
{{> scripts}}
</body>
</html>
<head>
<title>{{title}}</title>
{{> meta}}
{{> head}}
{{> courseSchema}}
<style>
#page-header {
background: linear-gradient(rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.8),
rgba(0, 0, 0, 0.5)),
url("/assets/images/cb/cover/algo_2.jpg") no-repeat 0 75% !important;
background-size: cover !important;
}
</style>
</head>

<body class="scroll-assist" style="margin-top: -70px;">
{{> navbar}}
<div class="a-cbm mt-100 mb-50">
<div class="width-limiter py-50 mt-100">
<div class="px-md-40 px-20">
<div class="row align-items-center no-gutters">
<div class="flex-1 pr-lg-50 pr-sm-30">
<div class="row no-gutters align-items-center justify-content-between">
<div class="flex-1">
<div class="row no-gutters align-items-center justify-content-between mb-20">
<div class="card all-center s-120x120 course-logo-big-square p-sm-30 p-20 bg-gradient-pink">
<img src="{{logo}}" />
</div>
<div class="flex-1 pl-sm-30 pl-20">
<div class="heading-3 bold text-clamp-ellipses text-clamp-ellipses--3">
{{ title }}
</div>
</div>
</div>
<div class="font-4 mb-20 text-clamp-ellipses text-clamp-ellipses--3 t-align-sm-l t-align-c">
{{description}}
</div>
<div class="row no-gutters justify-content-sm-between justify-content-center">
<div class="row no-gutters align-items-center">
<div class="br-5 d-inline-block p-2 bg-gradient-orange-light mr-20 font-2 white">
<span class="v-align-m">
{{difficulty}}
</span>
</div>
<div class="t-align-sm-l t-align-c">
<div class="font-2">Course Language</div>
<div class="font-4 bold mt-1">
English, Hindi
</div>
</div>
</div>
<div class="d-sm-block d-none">
{{!-- This button would scroll down to the sections where batches are listed --}}
<button class="button-primary buy-scroll-button">
Choose Batch
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 pl-lg-50 pl-sm-30 border-left d-sm-block d-none">
<div class="font-5 bold mb-20">
Also get
</div>
<ul class="list-style-gradient-bullet my-none">
<li class="mb-15">Resume building tips</li>
<li class="mb-15">Interview preparation</li>
<li class="mb-15">Free access to Online Course</li>
<li class="mb-15">Skill enhancement classes</li>
<li class="mb-15">Start with online platforms like Leetcode, Codeforces etc.</li>
</ul>
</div>
</div>
<div class="d-sm-none d-block mt-30 pt-30 border-top t-align-c">
<div class="font-5 bold mb-20">
Also get
</div>
<ul class="list-style-gradient-bullet mx-auto" style="width: fit-content;">
<li class="mb-15">Resume building tips</li>
<li class="mb-15">Interview preparation</li>
<li class="mb-15">Free access to Online Course</li>
<li class="mb-15">Skill enhancement classes</li>
<li class="mb-15">Start with online platforms like Leetcode, Codeforces etc.</li>
</ul>
</div>
<div class="d-sm-none d-block mt-30 t-align-c">
<button class="button-primary buy-scroll-button">Buy Course</button>
</div>


<div class="mt-50">
<div class="row">
{{#each highlights}}
<div class="col-lg-3 col-6 h-inherit mb-lg-none mb-30">
<div class="card bg-grey-light-3 h-100 flex-col justify-content-between">
<div class="w-100">
<img src="{{img}}" style="height: 35px;">
<div class="my-20 bold heading-6">{{title}}</div>
</div>
<div class="text-grey font-2 w-100">
{{body}}
</div>
</div>
</div>
{{/each}}
</div>
</div>

<div class="mt-75">
<div class="card bg-gradient-blue-light position-relative">
<div class="font-4 bold white t-align-sm-l t-align-c">
Get free access to our online course and also get<br />a wildcraft bag absolutely free!
</div>
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/widcraft-bag.png"
class="position-absolute br d-sm-block d-none" style="right: 30px;">
<div class="t-align-c d-sm-none d-block">
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/widcraft-bag.png" class="mt-30">
</div>
</div>
</div>

<div class="mt-50">
<div class="row no-gutters align-items-center justify-content-between mb-50">
<div class="heading-4 bold flex-1">
Course Content
</div>
<a href="#" class="button-secondary">Download Syllabus</a>
</div>
<div class="row no-gutters align-items-center syllabus-grid-section">
{{#each syallabus}}
<div class="col-md-4 col-sm-6 col-12 h-inherit syllabus-grid-card">
<div class="card br-none flex-col h-100 p-sm-30 p-20">
<div class="font-5 bold text-clamp-ellipses text-clamp-ellipses--2 pb-20 border-bottom w-100">{{ title}}
</div>
<ul class="list-style-gradient-bullet mt-20 w-100 mb-none">
{{#each sectionContent}}
<li class="mb-10 text-clamp-ellipses text-clamp-ellipses--2">{{this}}</li>
{{/each}}
</ul>
</div>
</div>
{{/each}}
</div>
</div>

<div class="mt-50">
<div class="row no-gutters align-items-center justify-content-between mb-50">
<div class="heading-4 bold flex-1">
Center and Schedule
</div>
<a href="#" class="button-secondary">Pitampura</a>
</div>
{{#each batches}}
<div class="row no-gutters align-items-center justify-content-between border-bottom py-20">
<div class="col-8">
<div class="row no-gutters align-items-center justify-content-between">
<div class="font-4 bold d-sm-block d-none">{{location}}</div>
<div class="font-4 bold d-sm-none d-block col-12 mb-15">{{location}}</div>
<div class="font-4">
<div class="text-grey-light-1">
Starting from
</div>
<div class="bold">
{{start_date}}
</div>
</div>
<div class="font-4">
<div class="text-grey-light-1">
Weekend Batch
</div>
<div class="bold">
{{days}}
</div>
</div>
</div>
</div>
<div class="flex-1 pl-20 row no-gutters justify-content-end">
<a href="https://dukaan.codingblocks.com/buy?productId={{product_id}}" class="button-primary ml-20">Enroll</a>
</div>
</div>
{{/each}}
</div>

<div class="mt-50">
<div class="heading-4 bold mb-50">
Mentors
</div>
{{#each mentors}}
<div class="row no-gutters align-items-center mentor-list-element">
<div class="s-150x150 round d-sm-block d-none">
<img src="{{img}}" />
</div>
<div class="flex-1 pl-sm-30">
<div class="s-100x100 round mb-20 d-sm-none d-block">
<img src="{{img}}" />
</div>
<div class="heading-6 bold">{{name}}</div>
<div class="mt-10 mb-20 font-2 orange">{{contact}}</div>
<div class="font-4">
{{description}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
<div class="bg-grey-light-3">
<div class="width-limiter">
<div class="py-50 px-md-5 px-4">
<div class="row mx-0 c-card-carousel-lg" style="padding-top: 4rem;">
{{!-- {{#each studentsSay}} --}}
<div class="col-lg-4 col-md-6 col-sm-8 col-12">
<div class="border-card img-review-card p-md-5 p-4" style="height:100%">
<div class="author">
<div class="img-ring s-100x100">
<img class="round img" src="https://images.codingblocks.com/img/mentor/Kartik%20Sapra.png">
</div>
</div>
<div class="icon">
<i class="fas fa-quote-left orange" style="font-size:3rem;"></i>
</div>

<h5 class="bold t-align-c mb-4">Some Name</h5>
<div class="review-body">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,
</div>
</div>
</div>
{{!-- {{/each}} --}}
</div>
</div>
</div>
</div>
<div class="width-limiter">
<div class="py-50 px-md-40 px-20">
<div class="t-align-c mb-30">
<div class="heading-5 bold mb-30">Where our Alumni Work</div>
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/alumni-companies.png">
</div>
</div>
</div>
<div class="width-limiter mb-50">
<div class="px-md-40 px-20">
<div class="t-align-sm-l t-align-c mb-50">
<div class="heading-4 bold mb-10">Frequently Asked Questions</div>
<div class="font-4 text-grey">
Find answers to the questions popping up in your head here.
</div>
</div>
<div class="faq-element-container pointer">
<div class="faq-question row no-gutters align-items-center justify-content-between p-20">
<div class="font-4 bold flex-1">
THIS IS A QUESTION
</div>
{{!-- <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/plus.svg" class="sign" /> --}}
</div>
<div class="faq-answer p-20">
AND THIS IS THE ANSWER
</div>
</div>
<div class="faq-element-container pointer">
<div class="faq-question row no-gutters align-items-center justify-content-between p-20">
<div class="font-4 bold flex-1">
THIS IS A QUESTION
</div>
{{!-- <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/plus.svg" class="sign" /> --}}
</div>
<div class="faq-answer p-20">
AND THIS IS THE ANSWER
</div>
</div>
<div class="faq-element-container pointer">
<div class="faq-question row no-gutters align-items-center justify-content-between p-20">
<div class="font-4 bold flex-1">
THIS IS A QUESTION
</div>
{{!-- <img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/plus.svg" class="sign" /> --}}
</div>
<div class="faq-answer p-20">
AND THIS IS THE ANSWER
</div>
</div>
</div>
</div>
</div>
{{> footer}}
{{> scripts}}
</body>

</html>
Loading