Skip to content

Commit 3fdb746

Browse files
BipinKalraBipinKalra
committed
certificate
1 parent 2a584cd commit 3fdb746

File tree

9 files changed

+116
-0
lines changed

9 files changed

+116
-0
lines changed

‎examples/public/fonts/BebasNeue-Bold.ttf

159 KB
Binary file not shown.

‎examples/public/fonts/BebasNeue-Regular.ttf

59.2 KB
Binary file not shown.

‎examples/public/images/cblogo-black.png

51.6 KB
Loading

‎examples/public/images/cpp-white.png

40.8 KB
Loading

‎examples/views/certificate-lite.hbs

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<div class="certificate-lite border row no-gutters">
2+
<div class="certificate-lite__left-section">
3+
<img src="images/cpp-white.png">
4+
</div>
5+
<div class="certificate-lite__right-section">
6+
<img src="images/cblogo-black.png" class="certificate-lite__right-section__logo">
7+
<div class="certificate-lite__right-section__title">
8+
CERTIFICATE OF COMPLETION
9+
</div>
10+
<div class="font-mdxl">This certificate is proudly presented to</div>
11+
<div class="certificate-lite__right-section__badge">
12+
<div class="position-relative h-100">
13+
<div class="extra-bold white position-absolute t-align-c w-100">
14+
LIVE<br>BATCHES
15+
</div>
16+
</div>
17+
</div>
18+
<div class="font-mdxl certificate-lite__right-section__description">
19+
for successfully completing the<br><strong>C++ Launchpad Live Classroom</strong> course.
20+
</div>
21+
<div class="certificate-lite__right-section__signature-row row no-gutters align-items-end">
22+
<div>
23+
<div class="signature-divider"></div>
24+
<div class="font-xl">Date</div>
25+
</div>
26+
27+
<div style="margin-left: 162px;">
28+
<img src="https://cb-thumbnails.s3.ap-south-1.amazonaws.com/mb_sign.svg">
29+
<div class="signature-divider"></div>
30+
<div class="font-xl">Date</div>
31+
</div>
32+
</div>
33+
</div>
34+
</div>

‎examples/views/index.hbs

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
<div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="cast-window.html">cast-window</a></div>
2121
<div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="cb-navbar.html">cb-navbar</a></div>
2222
<div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="cbhire.html">cbhire</a></div>
23+
<div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="certificate-lite.html">certificate-lite</a></div>
2324
<div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="code-editor.html">code-editor</a></div>
2425
<div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="code-window.html">code-window</a></div>
2526
<div class="py-2 px-4 text-ellipses"><a target="preview" class="font-sm" href="competition-card.html">competition-card</a></div>

‎sass/styles/_objects.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,3 +40,4 @@
4040
@import "objects/divided-list-horizontal.scss";
4141
@import "objects/timeline";
4242
@import "objects/tables.scss";
43+
@import "objects/certificate.scss";

‎sass/styles/objects/certificate.scss

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.certificate-lite {
2+
height: 839px;
3+
width: 1381px;
4+
background: $white;
5+
font-family: 'Gilroy', sans-serif;
6+
7+
&__left-section {
8+
width: 220px;
9+
height: 100%;
10+
position: relative;
11+
background: linear-gradient(0deg, #19316c, #01b3c9);
12+
13+
img {
14+
position: absolute;
15+
bottom: 48px;
16+
left: 48px;
17+
}
18+
}
19+
20+
&__right-section {
21+
flex: 1;
22+
padding: 80px 0 0 100px;
23+
position: relative;
24+
25+
&__logo {
26+
height: 80px !important;
27+
}
28+
29+
&__title {
30+
margin-top: 36px;
31+
font-size: 82px;
32+
font-family: "BebasNeue", sans-serif;
33+
margin-bottom: 37px;
34+
}
35+
36+
&__badge {
37+
position: absolute;
38+
background: linear-gradient(0deg, #19316c, #01b3c9);
39+
top: 0;
40+
right: 68px;
41+
width: 235px;
42+
height: 220px;
43+
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
44+
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 50% 100%, 0% 75%);
45+
46+
.position-relative {
47+
.extra-bold {
48+
bottom: 25%;
49+
font-size: 37px;
50+
}
51+
}
52+
}
53+
54+
&__description {
55+
margin-top: 136px;
56+
}
57+
58+
&__signature-row {
59+
margin-top: 38px;
60+
61+
.signature-divider {
62+
height: 1px;
63+
width: 169px;
64+
background: #646464;
65+
margin-bottom: 17px;
66+
}
67+
68+
div:nth-child(2) {
69+
.signature-divider {
70+
margin-top: 21px;
71+
}
72+
}
73+
}
74+
}
75+
}

‎sass/styles/settings/settings.font.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,11 @@ $card-xs: 0.5rem; // 7px
3535
src: url("https://unpkg.com/@coding-blocks/motley@1.0.1/dist/font/Muli-Italic.ttf");
3636
}
3737

38+
@font-face {
39+
font-family: "BebasNeue";
40+
src: url(fonts/BebasNeue-Regular.ttf);
41+
}
42+
3843
$text-size-list: (
3944
"font-xs": $font-xs,
4045
"font-sm": $font-sm,

0 commit comments

Comments
 (0)