Skip to content

Commit 3fc4557

Browse files
anitaparmar26anitaparmar26
committed
added done
1 parent afe3650 commit 3fc4557

2 files changed

Lines changed: 256 additions & 4 deletions

File tree

‎src/assets/scss/_variables.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@ $btn-border-radius: 50rem !default;
123123
$btn-border-radius-sm: 50rem !default;
124124
$btn-border-radius-lg: 50rem !default;
125125
$btn-font-weight: 600 !default;
126+
$input-btn-font-size: 15px !default;
126127

127128
$input-btn-padding-y: 0.55rem !default;
128129
$input-btn-padding-x: 1.25rem !default;

‎src/index.html‎

Lines changed: 255 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -278,7 +278,7 @@ <h3 class="mb-1 fs-6">
278278
</div>
279279
<div class="d-flex justify-content-between align-items-center mt-4">
280280
<span class="fs-5 text-primary fw-bold">$49</span>
281-
<a href="#" class="small link-primary"><span>Enroll now</span>
281+
<a href="#" class="small link-primary stretched-link"><span>Enroll now</span>
282282
<span>
283283
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
284284
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -356,7 +356,7 @@ <h3 class="mb-1 fs-6">
356356
</div>
357357
<div class="d-flex justify-content-between align-items-center mt-4">
358358
<span class="fs-5 text-primary fw-bold">$79</span>
359-
<a href="#" class="small link-primary"><span>Enroll now</span>
359+
<a href="#" class="small link-primary stretched-link"><span>Enroll now</span>
360360
<span>
361361
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
362362
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -434,7 +434,7 @@ <h3 class="mb-1 fs-6">
434434
</div>
435435
<div class="d-flex justify-content-between align-items-center mt-4">
436436
<span class="fs-5 text-primary fw-bold">$129</span>
437-
<a href="#" class="small link-primary"><span>Enroll now</span>
437+
<a href="#" class="small link-primary stretched-link"><span>Enroll now</span>
438438
<span>
439439
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
440440
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -508,7 +508,7 @@ <h3 class="mb-1 fs-6">
508508
</div>
509509
<div class="d-flex justify-content-between align-items-center mt-4">
510510
<span class="fs-5 text-primary fw-bold">$69</span>
511-
<a href="#" class="small link-primary"><span>Enroll now</span>
511+
<a href="#" class="small link-primary stretched-link"><span>Enroll now</span>
512512
<span>
513513
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
514514
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -523,14 +523,265 @@ <h3 class="mb-1 fs-6">
523523
</div>
524524
</div>
525525
</div>
526+
</div>
527+
<div class="row">
528+
<div class="col-12 text-center mt-10">
529+
<a href="#" class="btn btn-outline-dark"> <span>
530+
View All Courses
531+
</span>
532+
<span>
533+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
534+
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
535+
class="icon icon-tabler icons-tabler-arrow-right ms-1">
536+
<line x1="5" y1="12" x2="19" y2="12"></line>
537+
<line x1="13" y1="18" x2="19" y2="12"></line>
538+
<line x1="13" y1="6" x2="19" y2="12"></line>
539+
</svg>
540+
</span>
541+
</a>
542+
</div>
543+
544+
</div>
545+
546+
547+
548+
549+
550+
551+
552+
553+
</section>
554+
555+
<section class="py-13 bg-light">
556+
<div class="container">
557+
<div class="row text-center">
558+
<div class="col-lg-5 mx-auto">
559+
<div class="mb-10">
560+
<span class="text-primary">Mentors</span>
561+
<h2 class="fw-bold mt-4 mb-4">Learn From Industry<span class="text-primary"> Experts</span></h2>
562+
<p class="mb-0">
563+
Our mentors are industry leaders with years of experience in their respective fields.
564+
</p>
565+
</div>
566+
</div>
567+
</div>
568+
569+
<div class="row g-4">
570+
<!-- Mentor Card 1 -->
571+
<div class="col-lg-3 col-md-6 mb-4">
572+
<div class="card border-0 shadow-sm h-100 rounded-4 text-center p-6 card-lift">
573+
<div class="position-relative mb-4"
574+
><img src="./assets/images/avatar/avatar-4.jpg" alt="Mentor 1" class="rounded-circle mb-4 mx-auto avatar avatar-xl border border-3 border-primary" />
575+
<div class="position-absolute bottom-0 start-50 translate-middle-x mb-2">
576+
<span class="badge bg-primary text-xs">
577+
<span> 4.9</span>
578+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"
579+
class="icon icon-tabler icons-tabler-filled icon-tabler-star text-white">
580+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
581+
<path
582+
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.093 -6.26l3.093 6.26l6.9 1l-5 4.867l1.179 6.873z" />
583+
</svg>
584+
</span>
585+
</div>
586+
</div>
587+
588+
<h3 class="h6 fw-bold mb-1">John Smith</h3>
589+
<span class="text-primary mb-3 d-block text-xs">Web Development Expert</span>
590+
<p class="mb-4">
591+
8+ years experience in data analysis and machine learning. Former Data Scientist at Facebook.
592+
</p>
593+
<div class="d-flex justify-content-center gap-6 small">
594+
<div class="d-flex flex-row gap-2">
595+
<span class="fw-bold text-dark">20K+</span>
596+
<span>Students</span>
597+
</div>
598+
<div class="d-flex flex-row gap-2">
599+
<span class="fw-bold text-dark">10</span>
600+
<span>Courses</span>
601+
</div>
602+
</div>
603+
<div class="d-flex flex-row align-items-center justify-content-center gap-2 mt-4 mb-2">
604+
605+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
606+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg>
607+
608+
</a>
609+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
610+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-linkedin text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 11v5" /><path d="M8 8v.01" /><path d="M12 16v-5" /><path d="M16 16v-3a2 2 0 1 0 -4 0" /><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z" /></svg>
611+
612+
</a>
613+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
614+
615+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-brand-github text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12 12 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
616+
617+
</a>
618+
</div>
619+
<a href="#!" class="stretched-link"></a>
620+
</div>
621+
622+
</div>
623+
<!-- Mentor Card 2 -->
624+
<div class="col-lg-3 col-md-6 mb-4">
625+
<div class="card border-0 shadow-sm h-100 rounded-4 text-center p-6 card-lift">
626+
<div class="position-relative mb-4"
627+
><img src="./assets/images/avatar/avatar-5.jpg" alt="Mentor 2" class="rounded-circle mb-4 mx-auto avatar avatar-xl border border-3 border-primary" />
628+
<div class="position-absolute bottom-0 start-50 translate-middle-x mb-2">
629+
<span class="badge bg-primary text-xs">
630+
<span> 4.8</span>
631+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"
632+
class="icon icon-tabler icons-tabler-filled icon-tabler-star text-white">
633+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
634+
<path
635+
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.093 -6.26l3.093 6.26l6.9 1l-5 4.867l1.179 6.873z" />
636+
</svg>
637+
</span>
638+
</div>
639+
</div>
640+
641+
<h3 class="h6 fw-bold mb-1">Sarah Johnson</h3>
642+
<span class="text-primary mb-3 d-block text-xs">Digital Marketing Guru</span>
643+
<p class="mb-4">
644+
10+ years experience in digital marketing and SEO strategies. Former Marketing Manager at Google.
645+
</p>
646+
<div class="d-flex justify-content-center gap-6 small">
647+
<div class="d-flex flex-row gap-2">
648+
<span class="fw-bold text-dark">15K+</span>
649+
<span>Students</span>
650+
</div>
651+
<div class="d-flex flex-row gap-2">
652+
<span class="fw-bold text-dark">8</span>
653+
<span>Courses</span>
654+
</div>
655+
</div>
656+
<div class="d-flex flex-row align-items-center justify-content-center gap-2 mt-4 mb-2">
657+
658+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
659+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg>
660+
661+
</a>
662+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
663+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-linkedin text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 11v5" /><path d="M8 8v.01" /><path d="M12 16v-5" /><path d="M16 16v-3a2 2 0 1 0 -4 0" /><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z" /></svg>
664+
665+
</a>
666+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
667+
668+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-brand-github text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12 12 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
669+
670+
</a>
671+
</div>
672+
<a href="#!" class="stretched-link"></a>
673+
</div>
674+
</div>
675+
<!-- Mentor Card 3 -->
676+
<div class="col-lg-3 col-md-6 mb-4">
677+
<div class="card border-0 shadow-sm h-100 rounded-4 text-center p-6 card-lift">
678+
<div class="position-relative mb-4"
679+
><img src="./assets/images/avatar/avatar-6.jpg" alt="Mentor 3" class="rounded-circle mb-4 mx-auto avatar avatar-xl border border-3 border-primary" />
680+
<div class="position-absolute bottom-0 start-50 translate-middle-x mb-2">
681+
<span class="badge bg-primary text-xs">
682+
<span> 4.9</span>
683+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"
684+
class="icon icon-tabler icons-tabler-filled icon-tabler-star text-white">
685+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
686+
<path
687+
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.093 -6.26l3.093 6.26l6.9 1l-5 4.867l1.179 6.873z" />
688+
</svg>
689+
</span>
690+
</div>
691+
</div>
692+
693+
<h3 class="h6 fw-bold mb-1">Mike Chen</h3>
694+
<span class="text-primary mb-3 d-block text-xs">Data Science Specialist</span>
695+
<p class="mb-4">
696+
7+ years experience in data analysis and machine learning. Former Data Scientist at Facebook.
697+
</p>
698+
<div class="d-flex justify-content-center gap-6 small">
699+
<div class="d-flex flex-row gap-2">
700+
<span class="fw-bold text-dark">18K+</span>
701+
<span>Students</span>
702+
</div>
703+
<div class="d-flex flex-row gap-2">
704+
<span class="fw-bold text-dark">12</span>
705+
<span>Courses</span>
706+
</div>
707+
</div>
708+
<div class="d-flex flex-row align-items-center justify-content-center gap-2 mt-4 mb-2">
526709

710+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
711+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg>
527712

713+
</a>
714+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
715+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-linkedin text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 11v5" /><path d="M8 8v.01" /><path d="M12 16v-5" /><path d="M16 16v-3a2 2 0 1 0 -4 0" /><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z" /></svg>
528716

717+
</a>
718+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
529719

720+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-brand-github text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12 12 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
530721

722+
</a>
723+
</div>
724+
<a href="#!" class="stretched-link"></a>
725+
</div>
726+
</div>
727+
<!-- Mentor Card 4 -->
728+
<div class="col-lg-3 col-md-6 mb-4">
729+
<div class="card border-0 shadow-sm h-100 rounded-4 text-center p-6 card-lift">
730+
<div class="position-relative mb-4"
731+
><img src="./assets/images/avatar/avatar-2.jpg" alt="Mentor 4" class="rounded-circle mb-4 mx-auto avatar avatar-xl border border-3 border-primary" />
732+
<div class="position-absolute bottom-0 start-50 translate-middle-x mb-2">
733+
<span class="badge bg-primary text-xs">
734+
<span> 4.8</span>
735+
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="currentColor"
736+
class="icon icon-tabler icons-tabler-filled icon-tabler-star text-white">
737+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
738+
<path
739+
d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.093 -6.26l3.093 6.26l6.9 1l-5 4.867l1.179 6.873z" />
740+
</svg>
741+
</span>
742+
</div>
743+
</div>
744+
745+
<h3 class="h6 fw-bold mb-1">Emma Davis</h3>
746+
<span class="text-primary mb-3 d-block text-xs">Graphic Design Artist</span>
747+
<p class="mb-4">
748+
9+ years experience in graphic design and visual arts. Former Creative Director at Adobe.
749+
</p>
750+
<div class="d-flex justify-content-center gap-6 small">
751+
<div class="d-flex flex-row gap-2">
752+
<span class="fw-bold text-dark">22K+</span>
753+
<span>Students</span>
754+
</div>
755+
<div class="d-flex flex-row gap-2">
756+
<span class="fw-bold text-dark">9</span>
757+
<span>Courses</span>
758+
</div>
759+
</div>
760+
<div class="d-flex flex-row align-items-center justify-content-center gap-2 mt-4 mb-2">
761+
762+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
763+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-x text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4l11.733 16h4.267l-11.733 -16z" /><path d="M4 20l6.768 -6.768m2.46 -2.46l6.772 -6.772" /></svg>
531764

765+
</a>
766+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
767+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-brand-linkedin text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 11v5" /><path d="M8 8v.01" /><path d="M12 16v-5" /><path d="M16 16v-3a2 2 0 1 0 -4 0" /><path d="M3 7a4 4 0 0 1 4 -4h10a4 4 0 0 1 4 4v10a4 4 0 0 1 -4 4h-10a4 4 0 0 1 -4 -4z" /></svg>
532768

769+
</a>
770+
<a href="#" class="icon-shape icon-sm bg-primary bg-opacity-10 rounded-circle">
533771

772+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-brand-github text-primary"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12 12 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
773+
774+
</a>
775+
</div>
776+
<a href="#!" class="stretched-link"></a>
777+
</div>
778+
779+
780+
781+
782+
783+
</div>
784+
</div>
534785
</section>
535786

536787

0 commit comments

Comments
 (0)