⚝
One Hat Cyber Team
⚝
Your IP:
216.73.216.177
Server IP:
50.6.168.112
Server:
Linux server-617809.webnetzimbabwe.com 5.14.0-570.25.1.el9_6.x86_64 #1 SMP PREEMPT_DYNAMIC Wed Jul 9 04:57:09 EDT 2025 x86_64
Server Software:
Apache
PHP Version:
8.4.10
Buat File
|
Buat Folder
Eksekusi
Dir :
~
/
home
/
ctaacademy
/
www
/
public
/
frontend
/
scss
/
layout
/
View File Name :
_banner.scss
@use '../utils' as *; /*============================= 04. Banner ===============================*/ .banner { &-bg { min-height: 520px; @include flexbox(); align-items: flex-end; padding: 60px 0 0; position: relative; overflow: hidden; @media #{$xl} { min-height: auto; } & .line-shape { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; @media #{$xs} { display: none; } } &-two { @include flexbox(); align-items: flex-end; position: relative; overflow: hidden; padding: 80px 0 60px; background-size: cover; background-position: bottom; z-index: 1; @media #{$xl} { padding: 60px 0 60px; } @media #{$md} { padding: 60px 0 25px; } & .line-shape-two { position: absolute; left: 0; top: 20%; z-index: -1; pointer-events: none; @media #{$xs} { display: none; } } } } &__content { margin: 60px 0 100px; position: relative; z-index: 3; @media #{$xl} { margin: 60px 0 70px; } @media #{$lg} { margin: 40px 0 60px; } @media #{$md} { text-align: center; } @media #{$xs} { margin: 0 0 60px; } & .sub-title { display: inline-block; line-height: 1; background: var(--tg-common-color-gray); @include border-radius(4px); padding: 7px 15px; font-weight: var(--tg-fw-medium); color: var(--tg-theme-primary); margin: 0 0 16px; } & .title { font-size: 40px; line-height: 1.5; font-weight: var(--tg-fw-medium); margin: 0 0 12px; @media #{$lg} { font-size: 35px; } @media #{$xs} { font-size: 30px; } @media #{$sm} { font-size: 40px; } & span:not(.svg-icon) { color: var(--tg-theme-primary); position: relative; color: var(--tg-common-color-white); padding: 0 13px 0 20px; font-weight: var(--tg-fw-bold); z-index: 1; & > svg { position: absolute; left: 0; top: 3px; width: 100%; height: 100%; z-index: -1; color: var(--tg-theme-secondary); } } & .svg-icon { position: absolute; right: -50px; top: -50px; width: 61px; height: 68px; @media #{$xs} { display: none; } & svg { display: block; width: 100%; height: 100%; } & path { stroke: var(--tg-heading-color); } } } & p { max-width: 90%; margin: 0 0 0; font-size: 18px; line-height: 1.6; @media #{$lg} { max-width: 100%; } } &-two { margin: 120px 0 60px; @media #{$xl} { margin: 80px 0 60px; } @media #{$md} { margin: 0 0 60px; text-align: center; } & .title { margin-bottom: 25px; font-size: 44px; font-weight: 700; @media #{$lg} { font-size: 38px; } @media #{$xs} { font-size: 30px; } @media #{$sm} { font-size: 40px; } & span { position: relative; color: var(--tg-common-color-white); padding: 0 13px 0 20px; font-weight: var(--tg-fw-bold); z-index: 1; @media #{$xs} { padding: 0 10px 0 10px; } & svg { position: absolute; left: 0; top: 3px; width: 100%; height: 100%; z-index: -1; color: var(--tg-theme-secondary); } } } } } &__btn { &-wrap { margin: 34px 0 0; @media #{$md} { margin: 28px 0 0; & .tg-button-wrap { justify-content: center; } } } &-two { @include flexbox(); align-items: center; gap: 25px; flex-wrap: wrap; @media #{$md} { justify-content: center; } & .play-btn { font-size: 15px; font-weight: 500; font-family: var(--tg-heading-font-family); line-height: 1.3; @include flexbox(); align-items: center; gap: 15px; color: var(--tg-heading-color); & i { width: 54px; height: 54px; @include flexbox(); align-items: center; justify-content: center; @include border-radius(50%); background: var(--tg-theme-secondary); border: 1px solid var(--tg-heading-color); color: var(--tg-heading-color); font-size: 16px; @include box-shadow(4px 4px 0px 0px #3D3D3D); @include transition(.3s); } &:hover { color: var(--tg-theme-secondary); & i { @include box-shadow(none); } } } } } &__images { position: relative; padding-right: 118px; text-align: right; z-index: 1; @media #{$lg} { padding-right: 105px; } @media #{$md} { margin: 0 auto; text-align: center; max-width: 80%; padding: 0; } @media #{$xs} { max-width: 100%; } @media #{$sm} { max-width: 90%; } & .main-img { max-width: inherit; @media #{$xl} { max-width: 100%; } } & .shape { position: absolute; z-index: -1; &.big-shape { max-width: 618px; bottom: -85px; right: -22px; } &.bg-dots { max-width: 495px; right: 30px; bottom: -33px; z-index: -2; @media #{$xs} { max-width: 100%; right: 0; bottom: 18%; } } &.small-shape { max-width: 136px; left: 35px; bottom: -24px; z-index: -2; @media #{$lg} { left: 10px; } } } &-two { position: relative; text-align: center; margin-right: 60px; @media #{$lg} { margin-right: 0; } & img { @media #{$xl} { width: 400px; } @media #{$lg} { width: 350px; } } & .big-shape { position: absolute; z-index: -1; left: 8%; top: 2%; color: #FFC738; @media #{$xl} { top: 5%; } @media #{$lg} { left: 0; width: 400px; top: 2%; & svg { width: 100%; height: 100%; } } @media #{$xs} { width: 100%; max-width: 400px; } } & .svg-icon { width: 42px; height: 42px; position: absolute; left: 35%; top: -5%; @media #{$md} { left: 30%; top: -8%; } & svg { width: 100%; height: 100%; color: #031333; display: block; } } & .about__enrolled { left: 0; top: 41%; bottom: auto; @media #{$lg} { display: none; } } } } &__student { display: inline-flex; align-items: center; @include border-radius(10px); border: 1px solid var(--tg-common-color-gray-5); background: var(--tg-common-color-white); @include box-shadow(8px 8px 0px 0px rgba(0, 0, 0, 0.15)); position: absolute; right: 18%; top: 16%; padding: 15px 18px; gap: 10px; @media #{$lg} { right: 0; top: 13%; } & .icon { width: 50px; height: 50px; @include flexbox(); align-items: center; justify-content: center; background: var(--tg-common-color-green); color: var(--tg-common-color-white); @include border-radius(50%); @include box-shadow(4px 4px 0px rgba(33, 150, 83, 0.50)); border: 1px solid #149959; } & .content { text-align: left; & span { display: block; line-height: 1; font-size: 14px; font-weight: 500; margin-bottom: 8px; } & .title { margin-bottom: 0; font-size: 24px; font-family: var(--tg-body-font-family); font-weight: 800; line-height: 1; } } } &__author { position: absolute; top: 30px; left: 23px; width: 175px; padding: 11px 30px 11px 14px; border-radius: 6px; background: var(--tg-common-color-white); box-shadow: 9px 10px 0px 0px rgba(0, 0, 0, 0.20); text-align: left; @include flexbox(); flex-direction: column; gap: 6px; @media #{$lg} { top: -30px; left: -10px; width: 155px; padding: 10px 10px 10px 10px; } @media #{$md} { top: 0px; left: 10px; } @media #{$xs} { display: none; } &-item { @include flexbox(); align-items: center; gap: 8px; & .image { flex: 0 0 auto; & img { max-width: 30px; @include border-radius(50%); } } & .name { flex-grow: 1; margin-bottom: 0; font-size: 14px; } } & .arrow-shape { position: absolute; left: calc(100% - 11px); top: 9px; z-index: -1; } } }