Edit background in home
This commit is contained in:
@ -225,7 +225,7 @@ export default function EngineeringHeroFlowbite() {
|
||||
:root { --ehb-primary: #e67e22; --ehb-background: #000000; --ehb-surface: #95a5a6; --ehb-action: #34495e; --base: 16px }
|
||||
|
||||
.hero-section{position:relative;width:100%;height:100%;overflow:hidden}
|
||||
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom, rgba(0,0,0,0.65), rgba(0,0,0,0.35));z-index:3}
|
||||
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(45deg, #4b6173, transparent);z-index:3}
|
||||
.hero-layout{position:relative;z-index:10;height:100%;display:flex;align-items:center;justify-content:space-between;padding:clamp(12px,4vw,40px);gap:2rem;direction:ltr;flex-direction:row}
|
||||
.hero-layout.layout-ltr{flex-direction:row-reverse}
|
||||
.hero-left{flex:1;display:flex;align-items:center;justify-content:flex-start;padding:20px;position:relative;flex-direction:column}
|
||||
@ -242,7 +242,7 @@ export default function EngineeringHeroFlowbite() {
|
||||
}
|
||||
.partner-logos{display:flex;gap:18px;margin-top:20px;align-items:flex-end;justify-content:flex-start}
|
||||
.partner-bubble{
|
||||
width:132px;height:132px;border-radius:9999px;background:linear-gradient(180deg, rgba(255 255 255 / 17%), rgba(255 255 255 / 35%));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.45);backdrop-filter: blur(4px);transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms;
|
||||
width:140px;height:140px;border-radius:9999px;background:linear-gradient(180deg, rgba(255 255 255 / 17%), rgba(255 255 255 / 35%));display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 12px 36px rgba(0,0,0,0.45);backdrop-filter: blur(4px);transition:transform 420ms cubic-bezier(.2,.9,.2,1),box-shadow 420ms;
|
||||
transform-origin:center;
|
||||
transform: translateY(10px) scale(0.95);
|
||||
opacity: 0;
|
||||
@ -281,6 +281,35 @@ export default function EngineeringHeroFlowbite() {
|
||||
.partner-item{min-width:72px;min-height:44px}
|
||||
.partner-item img{max-height:30px}
|
||||
.partner-strip-wrap{padding-left:20px;padding-right:20px;bottom:10px}
|
||||
}
|
||||
.nsc-bubble img {
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
|
||||
.nsc-bubble:hover img {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.nsc-bubble img {
|
||||
max-width: 80% !important;
|
||||
max-height: 80% !important;
|
||||
transform: scale(1.12);
|
||||
}
|
||||
|
||||
.nsc-bubble:hover img {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.nsc-bubble img {
|
||||
max-width: 75% !important;
|
||||
max-height: 75% !important;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
@media (max-width: 640px){
|
||||
.partner-strip{gap:10px;padding:8px;border-radius:10px}
|
||||
@ -392,7 +421,7 @@ export default function EngineeringHeroFlowbite() {
|
||||
<img src={TPSlogo} alt="TPS" />
|
||||
</div>
|
||||
<div
|
||||
className="partner-bubble"
|
||||
className="partner-bubble nsc-bubble"
|
||||
style={{ animationDelay: "180ms" }}
|
||||
aria-label="شريك NSC"
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user