Skip to content

Commit fd9d198

Browse files
BipinKalraBipinKalra
committed
timeline adv modal
1 parent f5fc4d2 commit fd9d198

File tree

4 files changed

+191
-7
lines changed

4 files changed

+191
-7
lines changed

‎examples/views/online-cb/timeline-ad.hbs

Lines changed: 146 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,154 @@
11
<div class="row no-gutters a-ocb">
22
<div class="col-lg-7">
3-
<div class="bg-dark-grey">
4-
<div class="p-5">
5-
<h3 class="bold white mb-5">Recommended Course</h3>
3+
<div class="bg-med-grey white">
4+
<div class="p-md-5 p-4">
5+
<h3 class="bold mb-5">Recommended Course</h3>
66
<div class="row">
7-
<div class="col-7">
8-
<div class="border-card p-md-5 p-4 bg-gradient-dpink">
9-
7+
<div class="col-xl-7 col-lg-12 col-md-7 mb-xl-0 mb-lg-4 mb-md-0 mb-4">
8+
<div class="border-card border-none p-md-5 p-4 bg-gradient-pink white h-100">
9+
<div class="row no-gutters justify-content-between">
10+
<div class="flex-1">
11+
<span class="bg-gradient-yellow py-2 px-3 br-50">
12+
<span class="card-md bold">NEW</span>
13+
</span>
14+
<h3 class="bold mt-4">Build apps with ReactJS</h3>
15+
<div class="mt-2">Learn to build single page applications using ReactJS.</div>
16+
</div>
17+
<div class="s-60x60 round border b-white">
18+
<img src="https://minio.codingblocks.com/amoeba/9c06343d-0b57-4194-85f6-c74352a0047d.png">
19+
</div>
20+
</div>
21+
<div class="mt-4 d-flex align-items-center">
22+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/star_filled.svg" class="mr-2">
23+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/star_filled.svg" class="mr-2">
24+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/star_filled.svg" class="mr-2">
25+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/star_filled.svg" class="mr-2">
26+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/star_unfilled.svg">
27+
<span class="ml-3 card-md">4/5, 490 ratings</span>
28+
</div>
29+
<div class="mentor-row d-flex align-items-center mt-5">
30+
<div class="mentor-row__image-container">
31+
<img src="https://minio.codingblocks.com/amoeba/4078be4e-72e1-451a-9c4e-9223d2bbcc2c"
32+
alt="photo ofRishab Kapoor" class="mentor-row__image-container__mentor-image s-40x40">
33+
<img src="https://minio.codingblocks.com/amoeba/27d05ebd-4820-4abf-a5f5-0846676bac48"
34+
alt="photo ofGarima Chhikara" class="mentor-row__image-container__mentor-image s-40x40"></div>
35+
<div class="mentor-row__text-container">
36+
<div class="card-md">Instructors</div>
37+
<div class="bold mt-1">Rishab Kapoor, Garima Chhikara</div>
38+
</div>
39+
</div>
40+
<div class="divider-h my-4 bg-white w-75" style="opacity: 0.2;"></div>
41+
<div class="row">
42+
<div class="col-9">
43+
<div class="row">
44+
<div class="col-6">
45+
<div class="card-md">Course Language</div>
46+
<div class="bold mt-1">Hindi, English</div>
47+
</div>
48+
<div class="col-6">
49+
<div class="card-md">Course Duration</div>
50+
<div class="bold mt-1">6 Months</div>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
1055
</div>
1156
</div>
57+
<div class="col-xl-5 col-lg-12 col-md-5">
58+
<div class="flex-col justify-content-between h-100">
59+
<div class="w-100 mb-4">
60+
<div class="border-card bg-gradient-orange border-none" style="height: 150px;">
61+
{{!-- Video goes here --}}
62+
</div>
63+
</div>
64+
<div class="border-card p-0 position-relative w-100 white bg-dark-grey border-none">
65+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/gradient-clock.svg"
66+
class="position-absolute" style="right: 1.5rem; top: 1.5rem;">
67+
<div class="p-md-5 p-4">
68+
<div class="side-tag side-tag--orange side-tag--std">
69+
<h6 class="bold mb-1">Special Coupon</h6>
70+
<div>Get extra 10% off on this course</div>
71+
<div class="dashed-border b-orange p-2 mt-3" style="width: max-content;">
72+
<span class="font-md gradient-text-orange bold">REACTEXTRA10</span>
73+
</div>
74+
</div>
75+
</div>
76+
<div class="px-md-5 px-4 py-4 bg-gradient-orange">
77+
<div class="row no-gutters justify-content-between align-items-center">
78+
<div class="flex-1">
79+
<div class="card-md extra-bold">
80+
HURRY UP!
81+
</div>
82+
<div class="card-md mt-1">Coupon expires in</div>
83+
</div>
84+
<div>
85+
<ul class="divided-list timer timer--dots">
86+
<li class="timer-item">
87+
<div class="list-heading white bold">00</div>
88+
<div class="list-data">Days</div>
89+
</li>
90+
<li class="timer-item">
91+
<div class="list-heading white bold">12</div>
92+
<div class="list-data">Hours</div>
93+
</li>
94+
<li class="timer-item">
95+
<div class="list-heading white bold">30</div>
96+
<div class="list-data">Minutes</div>
97+
</li>
98+
</ul>
99+
</div>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
104+
</div>
105+
</div>
106+
<div class="mt-5">
107+
<h4 class="bold">About Course</h4>
108+
</div>
109+
<div class="mt-3">
110+
The online React JS course has been designed keeping in mind the technology of the future. This course is for
111+
anybody having a basic understanding of Javascript and writes code in Javascript. The course trajectory will
112+
begin from the very basics of React, starting from barebones react and moving towards advanced concepts in
113+
React.
114+
</div>
115+
</div>
116+
<div class="divider-h" style="background: #43454A;"></div>
117+
<div class="p-md-5 p-4 white">
118+
<div class="row no-gutters justify-content-between align-items-center">
119+
<div class="flex-1">
120+
<div class="row no-gutters align-items-center">
121+
<div class="mr-sm-5 mr-4">
122+
<div class="bold">Batch</div>
123+
<div class="border b-orange br-50 p-2 v-align-ma mt-2">
124+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/premium.png" class="mr-1">
125+
<span class="gradient-text-orange card-md extra-bold">PREMIUM</span>
126+
</div>
127+
</div>
128+
<div class="flex-1 pr-4">
129+
<div>
130+
<div>
131+
<span class="bold gradient-text-orange font-xl">&#8377;&nbsp;5999&nbsp;&nbsp;&nbsp;</span>
132+
<span class="font-mds extra-bold">&#8377;&nbsp;<del>12999</del></span>
133+
</div>
134+
<div class="mt-1">Enrollment ends Nov 30th 2019</div>
135+
</div>
136+
</div>
137+
</div>
138+
</div>
139+
<div class="v-align-ma t-align-c">
140+
<div class="d-sm-none d-block mb-2">
141+
<a href="#" class="gradient-text-orange font-sm">
142+
Explore Courses
143+
</a>
144+
</div>
145+
<span class="d-sm-inline-block d-none">
146+
<a href="#" class="gradient-text-orange font-sm">
147+
Explore Courses
148+
</a>
149+
</span>
150+
<div class="button-solid button-orange ml-sm-3">Buy Now</div>
151+
</div>
12152
</div>
13153
</div>
14154
</div>

‎sass/styles/elements/tag.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,20 @@
1010
height: 100%;
1111
background: $gradient-yellow;
1212
}
13+
14+
&--orange {
15+
&::after {
16+
background: $gradient-orange;
17+
}
18+
}
19+
20+
&--std {
21+
&::after {
22+
left: -3rem;
23+
24+
@media screen and (max-width: 767px){
25+
left: -1.5rem;
26+
}
27+
}
28+
}
1329
}

‎sass/styles/objects/timer.scss

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
margin: 0;
33

44
.timer-item {
5-
padding: 0 15px 0 0;
5+
padding: 0 1rem 0 0;
66
float: left;
77
display: inline-block;
88

@@ -16,6 +16,31 @@
1616
text-align: center;
1717
}
1818
}
19+
20+
&--dots {
21+
.timer-item {
22+
padding: 0 1.5rem 0 0;
23+
position: relative;
24+
25+
&:not(:last-child)::after {
26+
content: ":";
27+
font-size: $font-md;
28+
font-weight: $extra-bold;
29+
color: $white;
30+
position: absolute;
31+
right: 0.7rem;
32+
top: 0;
33+
}
34+
}
35+
36+
.list-heading {
37+
font-weight: $extra-bold;
38+
}
39+
40+
.list-data {
41+
font-size: $card-sm;
42+
}
43+
}
1944
}
2045

2146
ul.divided-list.timer > *:not(:last-child) {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,8 @@ $black-grey: #14161c;
113113
$dcb-pink: #e54461;
114114
$hello-intern-pink: #f24f60;
115115

116+
$timeline-grey: #292c33;
117+
116118
//threads
117119
$threads-separator: #666;
118120
$threads-invert: #191919;
@@ -188,6 +190,7 @@ $bg-color-list: (
188190
"grey": $grey,
189191
"light-grey": $light-grey,
190192
"dark-grey": $interview-grey,
193+
"med-grey": $timeline-grey,
191194
"black-grey": $black-grey
192195
);
193196

0 commit comments

Comments
 (0)