minhnhat/uldp.edu.vn
1
0
Fork 0
forked from UKSOURCE/hailearning.edu.vn
Code Pull Requests 1 Activity

Initial commit

Browse Source
This commit is contained in:
r2xrzh9q2z-lab
2026-02-02 11:00:08 +07:00
commit d53d4417b2
116 changed files with 79533 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

622
public/assets/scss/_hero.scss Normal file
View File

@@ -0,0 +1,622 @@
.hero-1 {
margin: 0 40px;
border-radius: 32px;
position: relative;
z-index: 9;
@include breakpoint (max-xxl) {
margin: 0 30px;
padding-top: 100px;
padding-bottom: 100px;
}
@include breakpoint (max-lg) {
padding-top: 80px;
padding-bottom: 0;
}
@include breakpoint (max-sm) {
margin: 0 15px;
}
.pagi-item {
right: 60px;
top: 345px;
position: absolute;
z-index: 999;
@include breakpoint (max-xxxl) {
top: 310px;
}
@include breakpoint (max-xxl) {
display: none;
}
.dot-number {
@include flex;
gap: 20px;
.swiper-pagination-bullet {
background: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
@include transition;
}
.swiper-pagination-bullet-active {
.dot-num {
span {
color: $white;
font-size: 32px;
font-weight: 700;
@include transition;
}
}
}
.dot-num {
@include transition;
span {
font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 0.50);
@include transition;
}
}
}
}
.left-shape {
position: absolute;
left: 0;
bottom: 0;
@include breakpoint (max-xxl) {
display: none;
}
}
.hero-shape {
position: absolute;
z-index: -1;
right: 10px;
bottom: 0;
margin-right: 0;
@include breakpoint (max-xxxl) {
max-width: 660px;
}
@include breakpoint (max-xxl) {
display: none;
max-width: initial;
}
img {
@include imgw;
}
}
.top-shape {
position: absolute;
top: 0;
right: 0;
@include breakpoint (max-xxl) {
display: none;
}
img {
@include imgw;
}
}
.right-shape {
position: absolute;
right: 0;
top: 0;
@include breakpoint (max-xxl) {
display: none;
}
}
.container-fluid {
padding: 0 124px;
@include breakpoint (max-xl4) {
padding: 0 70px;
}
@include breakpoint (max-xxxl) {
padding: 0 50px;
}
@include breakpoint (max-xxl) {
padding: 0 30px;
}
@include breakpoint (max-sm) {
padding: 0 15px;
}
}
.hero-content {
h6 {
font-size: 18px;
font-weight: 500;
color: $white;
margin-bottom: 20px;
line-height: 1;
padding: 8px 16px;
border-radius: 100px;
display: inline-block;
position: relative;
background-color: $bg-color-2;
}
h1 {
color: $white;
text-transform: uppercase;
margin-bottom: 15px;
.video-btn {
width: 64px;
height: 64px;
line-height: 64px;
display: inline-block;
background-color: $theme-color;
color: $white;
text-align: center;
border-radius: 50%;
font-size: 20px;
margin-left: 60px;
position: relative;
z-index: 1;
transform: translateY(-15px);
@include breakpoint (max-xxxl) {
width: 50px;
height: 50px;
line-height: 50px;
}
@include breakpoint (max-xxl) {
display: none;
}
&::before {
position: absolute;
content: "";
background: rgba(203, 204, 207, 0.24);
width: 48px;
height: 1px;
left: -57px;
top: 30px;
}
&::after {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 10px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
z-index: -1;
}
}
}
p {
max-width: 671px;
color: rgba(255, 255, 255, 0.8);
padding-left: 30px;
border-left: 2px solid $white;
opacity: 0.8;
@include breakpoint (max-xxl) {
border-left: none;
padding-left: 0;
}
}
.hero-button {
@include flex;
gap: 35px;
margin-top: 50px;
@include breakpoint (max-xxl) {
margin-top: 30px;
flex-wrap: wrap;
gap: 25px;
}
.theme-btn {
background-color: $white;
&:hover {
background-color: $theme-color;
border: 1px solid $theme-color;
}
&.style-2 {
border: 1px solid $border-color-2;
background-color: transparent;
color: $white;
i {
background-color: $white;
color: $header-color;
}
&:hover {
background-color: $theme-color;
color: $white;
border: 1px solid $theme-color;
}
}
}
}
}
.hero-image {
margin-top: 20px;
margin-right: -140px;
position: relative;
z-index: 9;
@include breakpoint (max-xxl) {
margin-right: 0;
}
img {
@include imgw;
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease-in-out;
}
}
.swiper-slide-active {
.hero-image {
img {
opacity: 1;
transform: translateY(0);
}
}
}
}
.hero-2 {
position: relative;
@include breakpoint (max-xxl) {
padding-top: 100px;
padding-bottom: 100px;
}
@include breakpoint (max-lg) {
padding-top: 80px;
padding-bottom: 0;
}
.shape {
position: absolute;
left: 0;
top: 0;
@include breakpoint (max-xxl) {
display: none;
}
}
.container-fluid {
padding: 0 65px;
@include breakpoint (max-xxxl) {
padding: 0 50px;
}
@include breakpoint (max-xxl) {
padding: 0 40px;
}
@include breakpoint (max-xxl) {
padding: 0 30px;
}
@include breakpoint (max-sm) {
padding: 0 15px;
}
}
&::before {
@include before;
background:
linear-gradient(279deg, rgba(21, 26, 38, 0.88) 34.84%, rgba(21, 26, 38, 0) 84.02%);
}
.hero-image {
margin-top: 30px;
position: relative;
margin-left: -75px;
@include breakpoint (max-xxl) {
margin-left: 0;
margin-top: 0;
}
img {
@include imgw;
}
}
.hero-content {
position: relative;
z-index: 999;
h6 {
color: $white;
font-size: 18px;
font-weight: 500;
letter-spacing: 6px;
text-transform: uppercase;
margin-bottom: 20px;
}
h1 {
color: $white;
text-transform: uppercase;
margin-bottom: 20px;
}
p {
color: $white;
max-width: 800px;
padding-left: 24px;
border-left: 3px solid $white;
@include breakpoint (max-xxl) {
border-left: none;
padding-left: 0;
}
}
.hero-button {
@include flex;
gap: 35px;
margin-top: 50px;
@include breakpoint (max-xxl) {
flex-wrap: wrap;
gap: 25px;
}
.theme-btn {
background-color: $white;
&:hover {
background-color: $theme-color;
border: 1px solid $theme-color;
}
&.style-2 {
border: 1px solid $border-color-2;
background-color: transparent;
color: $white;
i {
background-color: $white;
color: $header-color;
}
&:hover {
background-color: $theme-color;
color: $white;
border: 1px solid $theme-color;
}
}
}
}
}
}
.hero-3 {
position: relative;
z-index: 9;
@include breakpoint (max-xxl) {
margin: 0 30px;
padding-top: 100px;
padding-bottom: 100px;
}
@include breakpoint (max-lg) {
padding-top: 80px;
padding-bottom: 0;
}
@include breakpoint (max-sm) {
margin: 0 15px;
}
.pagi-item {
right: 60px;
bottom: 120px;
position: absolute;
z-index: 999;
@include breakpoint (max-xxl) {
display: none;
}
.dot-number {
@include flex;
gap: 20px;
.swiper-pagination-bullet {
background: none !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
@include transition;
}
.swiper-pagination-bullet-active {
.dot-num {
span {
color: $white;
font-size: 32px;
font-weight: 700;
@include transition;
}
}
}
.dot-num {
@include transition;
span {
font-size: 18px;
font-weight: 500;
color: rgba(255, 255, 255, 0.50);
@include transition;
}
}
}
}
.hero-shape {
position: absolute;
z-index: -1;
left: 0;
top: 0;
@include breakpoint (max-xxxl) {
max-width: 660px;
}
@include breakpoint (max-xxl) {
display: none;
max-width: initial;
}
img {
@include imgw;
}
}
.container-fluid {
padding: 0 124px;
@include breakpoint (max-xl4) {
padding: 0 70px;
}
@include breakpoint (max-xxxl) {
padding: 0 50px;
}
@include breakpoint (max-xxl) {
padding: 0 30px;
}
@include breakpoint (max-sm) {
padding: 0 15px;
}
}
.hero-content {
h6 {
font-size: 18px;
font-weight: 500;
color: $theme-color;
margin-bottom: 20px;
}
h1 {
color: $white;
text-transform: uppercase;
margin-bottom: 15px;
}
p {
max-width: 772px;
color: rgba(255, 255, 255, 0.8);
opacity: 0.8;
}
.hero-button {
@include flex;
gap: 35px;
margin-top: 50px;
@include breakpoint (max-xxl) {
margin-top: 30px;
flex-wrap: wrap;
gap: 25px;
}
.theme-btn {
background-color: $white;
&:hover {
background-color: $theme-color;
border: 1px solid $theme-color;
}
&.style-2 {
border: 1px solid $border-color-2;
background-color: transparent;
color: $white;
i {
background-color: $white;
color: $header-color;
}
&:hover {
background-color: $theme-color;
color: $white;
border: 1px solid $theme-color;
}
}
}
}
}
.hero-image {
margin-top: 20px;
position: relative;
z-index: 9;
@include breakpoint (max-xxl) {
margin-right: 0;
}
img {
@include imgw;
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease-in-out;
}
}
.swiper-slide-active {
.hero-image {
img {
opacity: 1;
transform: translateY(0);
}
}
}
}