479 lines
12 KiB
SCSS
479 lines
12 KiB
SCSS
/*-------------------
|
|
Categorie Styles
|
|
---------------------*/
|
|
.categorie-area-3 {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url(../../images/bg/bg-image-4.webp);
|
|
background-size: cover;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
.categorie-grid {
|
|
padding: 50px 30px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
transition: var(--transition);
|
|
.icon {
|
|
height: 80px;
|
|
width: 80px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 48px;
|
|
margin: 0 auto 28px;
|
|
transition: var(--transition);
|
|
}
|
|
.content {
|
|
.title {
|
|
margin-bottom: 15px;
|
|
transition: var(--transition);
|
|
}
|
|
p {
|
|
color: var(--color-heading);
|
|
margin-bottom: 25px;
|
|
transition: var(--transition);
|
|
}
|
|
.course-remain {
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
padding: 2px 18px;
|
|
border-radius: 5px;
|
|
transition: var(--transition);
|
|
}
|
|
}
|
|
&:hover {
|
|
.content {
|
|
.title {
|
|
color: var(--color-white);
|
|
}
|
|
p {
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
.icon {
|
|
svg {
|
|
path {
|
|
stroke: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-primary-style {
|
|
background-color: rgba(26,182,157, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(26,182,157, .1);
|
|
color: var(--color-primary);
|
|
}
|
|
&:hover {
|
|
background-color: rgba(26,182,157, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
&.color-secondary-style {
|
|
background-color: rgba(238,74,98, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(238,74,98, .1);
|
|
color: var(--color-secondary);
|
|
}
|
|
&:hover {
|
|
background-color: rgba(238,74,98, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
&.color-tertiary-style {
|
|
background-color: rgba(248,184,31, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(248,184,31, .1);
|
|
color: var(--color-tertiary);
|
|
}
|
|
&:hover {
|
|
background-color: rgba(248,184,31, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
&.color-extra01-style {
|
|
background-color: rgba(14,205,115, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(14,205,115, .1);
|
|
color: var(--color-extra01);
|
|
}
|
|
&:hover {
|
|
background-color: rgba(14,205,115, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
&.color-extra02-style {
|
|
background-color: rgba(142,86,255, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(142,86,255, .1);
|
|
color: var(--color-extra02);
|
|
}
|
|
svg {
|
|
path {
|
|
fill: var(--color-extra02) !important;
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: rgba(142,86,255, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
svg {
|
|
path {
|
|
fill: var(--color-white) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra03-style {
|
|
background-color: rgba(249,37,150, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(249,37,150, .1);
|
|
color: var(--color-extra03);
|
|
}
|
|
&:hover {
|
|
background-color: rgba(249,37,150, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
&.color-extra04-style {
|
|
background-color: rgba(88,102,235, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(88,102,235, .1);
|
|
color: var(--color-extra04);
|
|
}
|
|
&:hover {
|
|
background-color: rgba(88,102,235, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
&.color-extra05-style {
|
|
background-color: rgba(248,148,31, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(248,148,31, .1);
|
|
color: var(--color-extra05);
|
|
}
|
|
&:hover {
|
|
background-color: rgba(248,148,31, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
&.color-extra06-style {
|
|
background-color: rgba(57,192,250, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(57,192,250, .1);
|
|
color: var(--color-extra06);
|
|
}
|
|
svg {
|
|
path {
|
|
fill: var(--color-extra06) !important;
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: rgba(57,192,250, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
svg {
|
|
path {
|
|
fill: var(--color-white) !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra07-style {
|
|
background-color: rgba(218,4,248, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(218,4,248, .1);
|
|
color: var(--color-extra07);
|
|
}
|
|
&:hover {
|
|
background-color: rgba(218,4,248, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
&.color-extra08-style {
|
|
background-color: rgba(70,100,228, .07);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(70,100,228, .1);
|
|
color: var(--color-extra08);
|
|
}
|
|
&:hover {
|
|
background-color: rgba(70,100,228, 1);
|
|
.icon,
|
|
.course-remain {
|
|
background-color: rgba(255,255,255, .15);
|
|
color: var(--color-white);
|
|
}
|
|
}
|
|
}
|
|
&.categorie-style-2 {
|
|
padding: 16px 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
text-align: left;
|
|
min-height: 80px;
|
|
.icon {
|
|
background-color: transparent;
|
|
margin-bottom: 0;
|
|
justify-content: flex-start;
|
|
height: auto;
|
|
width: auto;
|
|
min-width: 84px;
|
|
.art-design {
|
|
font-size: 45px;
|
|
}
|
|
.personal-development {
|
|
font-size: 44px;
|
|
}
|
|
.health-fitness {
|
|
font-size: 46px;
|
|
}
|
|
.data-science {
|
|
font-size: 41px;
|
|
}
|
|
.computer-science {
|
|
font-size: 33px;
|
|
}
|
|
.video-photography {
|
|
font-size: 37px;
|
|
}
|
|
}
|
|
.content {
|
|
flex: 1;
|
|
.title {
|
|
margin-bottom: 0;
|
|
font-size: 15px;
|
|
font-weight: var(--p-semi-bold);
|
|
}
|
|
}
|
|
&:hover {
|
|
.icon {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
}
|
|
&.categorie-style-3 {
|
|
background-color: var(--color-white);
|
|
padding: 40px 20px 35px;
|
|
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.05);
|
|
|
|
|
|
.icon {
|
|
font-size: 40px;
|
|
&.laptop-icon {
|
|
font-size: 34px;
|
|
}
|
|
&.design-pencil-icon {
|
|
font-size: 34px;
|
|
}
|
|
}
|
|
.content {
|
|
.title {
|
|
font-size: 18px;
|
|
color: var(--color-heading);
|
|
}
|
|
}
|
|
&.color-primary-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-secondary-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-secondary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra01-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra01);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra02-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra02);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra03-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra03);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra04-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra04);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra05-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra05);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra06-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra06);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-extra07-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-extra07);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.color-tertiary-style {
|
|
.content {
|
|
.title {
|
|
&:hover {
|
|
color: var(--color-tertiary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:hover {
|
|
background-color: var(--color-white);
|
|
box-shadow: 0px 10px 45px 0px rgba(0,0,0,0.1);
|
|
&.color-primary-style {
|
|
.icon {
|
|
background-color: var(--color-primary);
|
|
}
|
|
}
|
|
&.color-secondary-style {
|
|
.icon {
|
|
background-color: var(--color-secondary);
|
|
}
|
|
}
|
|
&.color-extra01-style {
|
|
.icon {
|
|
background-color: var(--color-extra01);
|
|
}
|
|
}
|
|
&.color-extra02-style {
|
|
.icon {
|
|
background-color: var(--color-extra02);
|
|
}
|
|
}
|
|
&.color-extra03-style {
|
|
.icon {
|
|
background-color: var(--color-extra03);
|
|
}
|
|
}
|
|
&.color-extra04-style {
|
|
.icon {
|
|
background-color: var(--color-extra04);
|
|
}
|
|
}
|
|
&.color-extra05-style {
|
|
.icon {
|
|
background-color: var(--color-extra05);
|
|
}
|
|
}
|
|
&.color-extra06-style {
|
|
.icon {
|
|
background-color: var(--color-extra06);
|
|
}
|
|
}
|
|
&.color-extra07-style {
|
|
.icon {
|
|
background-color: var(--color-extra07);
|
|
}
|
|
}
|
|
&.color-tertiary-style {
|
|
.icon {
|
|
background-color: var(--color-tertiary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
} |