diff --git a/images/Thumbs.db b/images/Thumbs.db new file mode 100644 index 0000000..a5a87ef Binary files /dev/null and b/images/Thumbs.db differ diff --git a/images/avatar-1.jpg b/images/avatar-1.jpg new file mode 100644 index 0000000..42e895e Binary files /dev/null and b/images/avatar-1.jpg differ diff --git a/images/avatar-2.jpg b/images/avatar-2.jpg new file mode 100644 index 0000000..deb381c Binary files /dev/null and b/images/avatar-2.jpg differ diff --git a/images/avatar-3.jpg b/images/avatar-3.jpg new file mode 100644 index 0000000..eb0d912 Binary files /dev/null and b/images/avatar-3.jpg differ diff --git a/images/avatar-4.jpg b/images/avatar-4.jpg new file mode 100644 index 0000000..b07fecb Binary files /dev/null and b/images/avatar-4.jpg differ diff --git a/images/bg-pattern.png b/images/bg-pattern.png new file mode 100644 index 0000000..24d392e Binary files /dev/null and b/images/bg-pattern.png differ diff --git a/images/facebook.svg b/images/facebook.svg new file mode 100644 index 0000000..bd8234d --- /dev/null +++ b/images/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/feature-banner-1.jpg b/images/feature-banner-1.jpg new file mode 100644 index 0000000..aff800c Binary files /dev/null and b/images/feature-banner-1.jpg differ diff --git a/images/feature-banner-2.jpg b/images/feature-banner-2.jpg new file mode 100644 index 0000000..0ad43c1 Binary files /dev/null and b/images/feature-banner-2.jpg differ diff --git a/images/hero.png b/images/hero.png new file mode 100644 index 0000000..0754f20 Binary files /dev/null and b/images/hero.png differ diff --git a/images/iconLogo.png b/images/iconLogo.png new file mode 100644 index 0000000..9f8b4ff Binary files /dev/null and b/images/iconLogo.png differ diff --git a/images/insta.svg b/images/insta.svg new file mode 100644 index 0000000..96ac539 --- /dev/null +++ b/images/insta.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 0000000..b8d5107 Binary files /dev/null and b/images/logo.png differ diff --git a/images/property-1.jpg b/images/property-1.jpg new file mode 100644 index 0000000..caed2ce Binary files /dev/null and b/images/property-1.jpg differ diff --git a/images/property-10.jpg b/images/property-10.jpg new file mode 100644 index 0000000..cc1c6c4 Binary files /dev/null and b/images/property-10.jpg differ diff --git a/images/property-11.jpg b/images/property-11.jpg new file mode 100644 index 0000000..3dbdb29 Binary files /dev/null and b/images/property-11.jpg differ diff --git a/images/property-12.jpg b/images/property-12.jpg new file mode 100644 index 0000000..44f5948 Binary files /dev/null and b/images/property-12.jpg differ diff --git a/images/property-13.jpg b/images/property-13.jpg new file mode 100644 index 0000000..9d79b63 Binary files /dev/null and b/images/property-13.jpg differ diff --git a/images/property-14.jpg b/images/property-14.jpg new file mode 100644 index 0000000..0b61988 Binary files /dev/null and b/images/property-14.jpg differ diff --git a/images/property-15.jpg b/images/property-15.jpg new file mode 100644 index 0000000..ce20690 Binary files /dev/null and b/images/property-15.jpg differ diff --git a/images/property-2.jpg b/images/property-2.jpg new file mode 100644 index 0000000..ed59413 Binary files /dev/null and b/images/property-2.jpg differ diff --git a/images/property-3.jpg b/images/property-3.jpg new file mode 100644 index 0000000..44f0d80 Binary files /dev/null and b/images/property-3.jpg differ diff --git a/images/property-4.jpg b/images/property-4.jpg new file mode 100644 index 0000000..55212d5 Binary files /dev/null and b/images/property-4.jpg differ diff --git a/images/property-5.jpg b/images/property-5.jpg new file mode 100644 index 0000000..f92b892 Binary files /dev/null and b/images/property-5.jpg differ diff --git a/images/property-6.jpg b/images/property-6.jpg new file mode 100644 index 0000000..3c240da Binary files /dev/null and b/images/property-6.jpg differ diff --git a/images/property-7.jpg b/images/property-7.jpg new file mode 100644 index 0000000..c2c754a Binary files /dev/null and b/images/property-7.jpg differ diff --git a/images/property-8.jpg b/images/property-8.jpg new file mode 100644 index 0000000..8d69d0c Binary files /dev/null and b/images/property-8.jpg differ diff --git a/images/property-9.jpg b/images/property-9.jpg new file mode 100644 index 0000000..c8644b2 Binary files /dev/null and b/images/property-9.jpg differ diff --git a/images/story-1.jpg b/images/story-1.jpg new file mode 100644 index 0000000..1c258d5 Binary files /dev/null and b/images/story-1.jpg differ diff --git a/images/story-2.jpg b/images/story-2.jpg new file mode 100644 index 0000000..81c53d9 Binary files /dev/null and b/images/story-2.jpg differ diff --git a/images/story-3.jpg b/images/story-3.jpg new file mode 100644 index 0000000..4f48ef7 Binary files /dev/null and b/images/story-3.jpg differ diff --git a/images/story-4.jpg b/images/story-4.jpg new file mode 100644 index 0000000..3dc8de8 Binary files /dev/null and b/images/story-4.jpg differ diff --git a/images/story-5.jpg b/images/story-5.jpg new file mode 100644 index 0000000..17ef562 Binary files /dev/null and b/images/story-5.jpg differ diff --git a/images/story-6.jpg b/images/story-6.jpg new file mode 100644 index 0000000..b7ed7bc Binary files /dev/null and b/images/story-6.jpg differ diff --git a/images/story-avatar-1.jpg b/images/story-avatar-1.jpg new file mode 100644 index 0000000..c932837 Binary files /dev/null and b/images/story-avatar-1.jpg differ diff --git a/images/story-avatar-2.jpg b/images/story-avatar-2.jpg new file mode 100644 index 0000000..a0f35dc Binary files /dev/null and b/images/story-avatar-2.jpg differ diff --git a/images/story-avatar-3.jpg b/images/story-avatar-3.jpg new file mode 100644 index 0000000..bd47e49 Binary files /dev/null and b/images/story-avatar-3.jpg differ diff --git a/images/story-avatar-4.jpg b/images/story-avatar-4.jpg new file mode 100644 index 0000000..4458835 Binary files /dev/null and b/images/story-avatar-4.jpg differ diff --git a/images/story-avatar-5.jpg b/images/story-avatar-5.jpg new file mode 100644 index 0000000..c5fa06e Binary files /dev/null and b/images/story-avatar-5.jpg differ diff --git a/images/story-avatar-6.jpg b/images/story-avatar-6.jpg new file mode 100644 index 0000000..a5c2c44 Binary files /dev/null and b/images/story-avatar-6.jpg differ diff --git a/images/twitter.svg b/images/twitter.svg new file mode 100644 index 0000000..3fb4577 --- /dev/null +++ b/images/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/images/unnamed.png b/images/unnamed.png new file mode 100644 index 0000000..79068ec Binary files /dev/null and b/images/unnamed.png differ diff --git a/images/video-card.jpg b/images/video-card.jpg new file mode 100644 index 0000000..78f0958 Binary files /dev/null and b/images/video-card.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..ba1949b --- /dev/null +++ b/index.html @@ -0,0 +1,1291 @@ + + + + + + + + + + + + + + + + wealt Home + + + + + + + + + + + + +
+
+ + + + + + +
+
+ +
+
+ +
+
+
+
+

Find a place where you can be yourself.

+

+ If you're looking for a place where you can be yourself, don't give up. Keep searching until you find a + place that feels like home. +

+
+ +
+ + + + + + + + + + +
+ +
+ + + + +
+
+ +
+
+
+
+

Best home in your city

+

+ Lorem ipsum dolor sit amet consectetur. In quisque scelerisque eget id facilisis. Aliquam in libero + egestas at dolor sit amet consectetur. +

+
+ + + Explore more + + + + +
+ +
+ +
+
+
+ COVN Home Roalty +
+ New + + + +
+ +
+ + $710.68 + +

COVA Home Realty

+ +
+ 1901 Thornridge Cir. Shiloh, Hawaii 81063 +
+ +
+ +
+ + + 3 Bed +
+ +
+ + 2 Bath +
+ +
+ + 1430 sqft +
+
+ +
+ +
+ +
+
+
+ Exit Realty +
+ + +
+ +
+ + $630.44 + +

Exit Realty

+ +
+ 2972 Westheimer Rd. Santa Ana, Illinois 85486 +
+
+ +
+ + + 5 Bed +
+ +
+ + 4 Bath +
+ +
+ + 1630 sqft +
+
+ +
+ +
+ +
+
+
+ The Real Estate Group +
+ + +
+ +
+ + $475.22 + +

The Real Estate Group

+ +
+ 2118 Thornridge Cir. Syracuse, Connecticut 35624 +
+
+ +
+ + + 8 Bed +
+ +
+ + 5 Bath +
+ +
+ + 1240 sqft +
+
+ +
+ +
+ +
+
+
+ 757 Realty +
+ + + +
+ +
+ + $576.28 + +

757 Realty

+ +
+ 4140 Parker Rd. Allentown, New Mexico 31134 +
+
+ +
+ + + 6 Bed +
+ +
+ + 6 Bath +
+ +
+ + 1260 sqft +
+
+ +
+ +
+ +
+
+
+ Beach Pros Realty Inc +
+ + + +
+ +
+ + $473.85 + +

Beach Pros Realty Inc

+ +
+ 2715 Ash Dr. San Jose, South Dakota 83475 +
+
+ +
+ + + 10 Bed +
+ +
+ + 8 Bath +
+ +
+ + 2350 sqft +
+
+ +
+ +
+ +
+
+
+ Keller Williams Elite Town Center +
+ + + +
+ +
+ + $105.55 + +

Keller Williams Elite Town Center

+ +
+ 3517 W. Gray St. Utica, Pennsylvania 57867 +
+
+ +
+ + + 8 Bed +
+ +
+ + 8 Bath +
+ +
+ + 1950 sqft +
+
+ +
+ +
+ +
+
+
+ All Pros Real Estate +
+ + + +
+ +
+ + $739.65 + +

All Pros Real Estate

+ +
+ 8502 Preston Rd. Inglewood, Maine 98380 +
+
+ +
+ + + 4 Bed +
+ +
+ + 4 Bath +
+ +
+ + 1580 sqft +
+
+ +
+ +
+ +
+
+
+ FIT Realty +
+ + + +
+ +
+ + $948.55 + +

FIT Realty

+ +
+ 4517 Washington Ave. Manchester, Kentucky 39495 +
+
+ +
+ + + 3 Bed +
+ +
+ + 2 Bath +
+ +
+ + 1120 sqft +
+
+ +
+ +
+ +
+
+
+ Remax Hallmark +
+ + + +
+ +
+ + $1250.50 + +

Remax Hallmark

+ +
+ 2468 Willow Street, Riverdale, Kansas 75309 +
+
+ +
+ + + 2 Bed +
+ +
+ + 3 Bath +
+ +
+ + 1220 sqft +
+
+ +
+ +
+ +
+
+
+ Exit Realty +
+ + + +
+ +
+ + $850.50 + +

Exit Realty

+ +
+ 9876 Birch Avenue, Hillcrest, Wyoming 54321 +
+
+ +
+ + + 3 Bed +
+ +
+ + 2 Bath +
+ +
+ + 820 sqft +
+
+ +
+ +
+ +
+
+
+ Better Homes and Gardens Real Estate +
+ + + +
+ +
+ + $1500 + +

Better Homes and Gardens Real Estate

+ +
+ 5432 Pine Street, Mountainview, Texas 87654 +
+
+ +
+ + + 4 Bed +
+ +
+ + 3 Bath +
+ +
+ + 1020 sqft +
+
+ +
+ +
+ +
+
+
+ Century 21 Canada +
+ + + +
+ +
+ + $1300 + +

Century 21 Canada

+ +
+ 8765 Spruce Road, Lakeside, Vermont 43210 +
+
+ +
+ + + 2 Bed +
+ +
+ + 3 Bath +
+ +
+ + 950 sqft +
+
+ +
+ +
+ +
+
+
+ Johnston & Daniel +
+ + + +
+ +
+ + $900 + +

Johnston & Daniel

+ +
+ 3210 Elm Court, Riverside, Missouri 98765 +
+
+ +
+ + + 2 Bed +
+ +
+ + 3 Bath +
+ +
+ + 1100 sqft +
+
+ +
+ +
+ +
+
+
+ Chestnut Park Real Estate +
+ + + +
+ +
+ + $850 + +

Chestnut Park Real Estate

+ +
+ 6543 Maple Lane, Valleyview, Montana 21098 +
+
+ +
+ + + 3 Bed +
+ +
+ + 1 Bath +
+ +
+ + 750 sqft +
+
+ +
+ +
+ +
+
+
+ Forest Hill Real Estate +
+ + + +
+ +
+ + $1100 + +

Forest Hill Real Estate

+ +
+ 2109 Oak Avenue, Brookside, Colorado 65432 +
+
+ +
+ + + 2 Bed +
+ +
+ + 2 Bath +
+ +
+ + 1000 sqft +
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ feature banner +
+ +
+ +

We Specialize In Quality Home Renovations

+ +

+ Looking to renovate your home to reflect your style and personality? Look no further than our team of + experts who + specialize in quality home renovations to transform your space into a dream home you’ll love. From design + to execution. +

+ +
    + +
  • + + Smart Home +
    • + + +
  • + + Beautiful Scene Around +
    • + + +
  • + + Exceptional lifestyle +
    • + + +
  • + + Complete 24/7 Security +
    • + + + +
+ + +
+ +
+ +
+ +
+
+ +
+ feature banner +
+ +
+ +

We Are Experts In Historic Home Renovations

+ +

+ Looking to renovate your home to reflect your style and personality? Look no further than our team of + experts who + specialize in quality home renovations to transform your space into a dream home you’ll love. From design + to execution. +

+ +
    + +
  • + + Smart Home +
    • + + +
  • + + Beautiful Scene Around +
    • + + +
  • + + Exceptional lifestyle +
    • + + +
  • + + Complete 24/7 Security +
    • + + + +
+ + +
+ +
+ +
+ +
+
+ +
+ +
+ + +
+
+ +
+
+ +
+ +
+

Our Customers

+

We Help 1000+ Family Find Their True Home

+ +
    +
  • + john smith + jahn simth + john smith + jahn simth + +
    + 99+ +
    +
    • +
+
+ + + View All Stories + + + + +
+ + + +
+
+ +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/login.html b/login.html new file mode 100644 index 0000000..c3ac543 --- /dev/null +++ b/login.html @@ -0,0 +1,186 @@ + + + + + + + + wealt Home + + + + +
+
+ + + + + + +
+
+ + + + +
+ +
+
+
login
+
+
+ +
+ +
+ + +
+
+ Forgot password? +
+ +
+ +
+
+
+ Don't have an account? +
+
+ +
+ +
+ +
+ +
+ + + Login with Google + +
+ +
+ +
+
+
Sign up
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+ +
+ +
+ +
+ Already have an account? +
+
+ +
+
+ +
+ +
+ + + Login with Google + +
+ +
+ +
+
+ +
Forgot your password
+

Enter your email address

+
+
+ +
+
+
+ +
+
+
+ +
+ + + + + \ No newline at end of file diff --git a/login.js b/login.js new file mode 100644 index 0000000..32bb8e4 --- /dev/null +++ b/login.js @@ -0,0 +1,44 @@ +let forms = document.querySelector(".forms"), + pwShowHide = document.querySelectorAll(".eye-icon"), + links = document.querySelectorAll(".link"), + formloginSuindup = document.querySelector(".form"), + forgot = document.querySelector(".forgot-pass"), + bxleftarrowalt = document.querySelector(".bx-left-arrow-alt"), + fromForgot = document.querySelector(".form-Forgot"), + pwFields = document.querySelectorAll(".password"); + +pwShowHide.forEach((eyeIcon) => { + eyeIcon.addEventListener("click", () => { + pwFields.forEach((password) => { + password.type === "password" + ? ((password.type = "text"), + eyeIcon.classList.replace("bx-hide", "bx-show")) + : ((password.type = "password"), + eyeIcon.classList.replace("bx-show", "bx-hide")); + }); + }); +}); +forgot.addEventListener("click", (e) => { + e.preventDefault(); //preventing form submit + formloginSuindup.classList.toggle("active"); + fromForgot.classList.toggle("active"); +}); + +bxleftarrowalt.addEventListener("click", () => { + formloginSuindup.classList.remove("active"); + fromForgot.classList.toggle("active"); +}); + +links.forEach((link) => { + link.addEventListener("click", (e) => { + e.preventDefault(); //preventing form submit + forms.classList.toggle("show-signup"); + }); +}); + +/* Spinner Loading */ +let feadeOut= () => { + let loaderWrapper= document.querySelector(".spinner-contuner"); + loaderWrapper.classList.add("hidden"); +} +window.addEventListener('load', feadeOut); diff --git a/main.js b/main.js new file mode 100644 index 0000000..7becf48 --- /dev/null +++ b/main.js @@ -0,0 +1,41 @@ +/* Spinner Loading */ +let feadeOut= () => { + let loaderWrapper= document.querySelector(".spinner-contuner"); + loaderWrapper.classList.add("hidden"); +} +window.addEventListener('load', feadeOut); + +let navbar = document.querySelector("[data-navbar]"); +let navbarToggler = document.querySelector("[data-nav-toggler]"); +navbarToggler.addEventListener("click", () => { + navbar.classList.toggle("active"); +}); + +let header = document.querySelector("[data-header]"); + +window.addEventListener("scroll", (e) => { + header.classList[window.scrollY > 50 ? "add" : "remove"]("active"); +}); + +// add to favortion button toggle + +let toggleBtn = document.querySelectorAll("[data-toggle-btn]"); +toggleBtn.forEach((toggleBtn) => { + toggleBtn.addEventListener("click", () => { + toggleBtn.classList.toggle("active"); + }); +}); + +let span = document.querySelector(".scroll-up"); +window.onscroll = function () { + + this.scrollY >= 1000 ? span.classList.add("show") : span.classList.remove("show"); +}; + +span.onclick = function () { + window.scrollTo({ + left: 0, + top: 0, + behavior: "smooth", + }); +}; \ No newline at end of file diff --git a/test.css b/test.css new file mode 100644 index 0000000..d37f462 --- /dev/null +++ b/test.css @@ -0,0 +1,1746 @@ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); + +*, +*::before, +*::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +li { + list-style: none; +} + +a, +img, +span, +input, +select, +button { + display: block; +} + +a { + color: inherit; + text-decoration: none; +} + +img { + height: auto; +} + +input, +select, +button { + background: none; + border: none; + font: inherit +} + +button { + cursor: pointer; +} + +input, +select { + width: 100%; + outline: none; +} + +address { + font-style: normal; +} + +select { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; +} + +html { + font-family: var(--font-primary); + font-size: var(--fs-base); + scroll-behavior: smooth; +} + +:root { + /* COLOR*/ + --white: #FFFFFF; + --yellow: #F6BD26; + --primary-100: #2179FF; + --primary-90: #1E6DE5; + --primary-80: #1B61CC; + --primary-70: #1755B2; + --primary-40: #0D3166; + --primary-20: #071833; + --secpndary-100: #21FFFF; + --secpndary-20: #073333; + --neutral-100: #FAFCFF; + --neutral-98: #F2F5FA; + --neutral-95: #E9ECF2; + --neutral-90: #DADFE5; + --neutral-80: #C2C6CC; + --neutral-60: #919499; + --neutral-50: #797C80; + --neutral-40: #616366; + --neutral-30: #494A4D; + --neutral-20: #303133; + --neutral-10: #18131A; + --neutral-5: #0C0C0D; + --error-100: #FF2134; + /* Gradient*/ + --griedent: linear-gradient(270deg, #0F4392 0%, #001D3D 100%); + /* TYPOGRAPHY*/ + + /* Font family*/ + --font-primary: 'Montserrat', 'sana-seerif'; + /* Font Size*/ + --fs-base: 62.5%; + --fs-headline-large: 3.6rem; + --fs-headline-medium: 2.8rem; + --fs-headline-small: 2.8rem; + --fs-title-largo: 2.2rem; + --fs-title-medium: 2rem; + --fs-title-small: 1.8rem; + --fs-body-large: 1.6rem; + --fs-body-medium: 1.6rem; + --fs-lable-large: 1.6rem; + --fs-lable-medium: 1.5rem; + + /*line height*/ + --lh-headline-large: 44px; + --lh-headline-medium: 36px; + --lh-headline-small: 36px; + --lh-headline-small: 28px; + --lh-title-medium: 24px; + --lh-title-small: 24px; + --lh-body-large: 24px; + --lh-body-medium: 24px; + --lh-lable-large: 24px; + --lh-lable-medium: 20px; + + /*line weight*/ + --weight-bold: 700; + --weight-semiBold: 600; + --weight-regular: 400; + + /*letter spacing*/ + --traking-n-025: -0.25px; + --traking-p-05: 0.5px; + + /*redus */ + --radus-small: 8px; + --radus-meduim: 12px; + --radus-large: 16px; + --radus-extra-large: 32px; + --radus-full: 1000px; + --radus-circle: 50%; + /*shadow*/ + --shadoe-1: 0px 2px 4px 0px #00000033; + --shadoe-2: 0px 5px 10px 0px #0000000D; + --shadoe-3: 0px 5px 10px 0px #00000033; + --shadoe-4: 0px 10px 20px 0px #0000001A; + + /* tramstion*/ + --transition-easing-quick: cubic-bezier(0, 0.7, 0.3, 1); + --transition-duration-quick: 200ms; + --transition-duration-smooth: 500ms; +} + +body { + background-color: var(--neutral-98); + color: var(--neutral-5); + font-size: var(--fs-body-medium); + line-height: var(--lh-body-medium); +} + +::-webkit-scrollbar { + width: 12px; +} + +::-webkit-scrollbar-track { + background-color: var(--neutral-90); +} + +::-webkit-scrollbar-thumb { + background-color: var(--neutral-60); + border-radius: 4px; +} + +.headline-learge { + font-size: var(--fs-headline-large); + line-height: var(--lh-headline-large); + font-weight: var(--weight-bold); + letter-spacing: var(--traking-n-025); +} + +.headline-mediume { + font-size: var(--fs-headling-medium); + line-height: var(--lh-headline-medium); + font-weight: var(--weight-bold); +} + +.headline-small { + font-size: var(--fs-headling-small); + line-height: var(--lh-headline-small); + font-weight: var(--weight-bold); +} + +.title-medium { + font-size: var(--fs-title-medium); + line-height: var(--lh-title-medium); + font-weight: var(--weight-semiBold); +} + +.title-small { + font-size: var(--fs-title-small); + line-height: var(--lh-title-small); + font-weight: var(--weight-semiBold); +} + +.title-large { + font-size: var(--fs-title-large); + line-height: var(--lh-title-large); + font-weight: var(--weight-semiBold); +} + +.body-large { + font-size: var(--fs-body-large); + line-height: var(--lh-body-large); + font-weight: var(--weight-regular); +} + +.body-medium { + font-size: var(--fs-body-medium); + line-height: var(--lh-body-medium); + font-weight: var(--weight-regular); +} + +.label-medium { + font-size: var(--fs-lable-medium); + line-height: var(--lh-lable-medium); + font-weight: var(--weight-semiBold); + letter-spacing: var(--traking-p-05); +} + + +/* +menu style +*/ +.material-symbls-rounded { + display: block; + cursor: pointer; + width: 1em; + height: 1em; + overflow: hidden; + font-variation-settings: + 'FILL' 0, + 'wght' 400, + 'GRAD' 0, + 'opsz' 24; +} +/* +spinner +*/ +.spinner-contuner{ + position: fixed; + background: linear-gradient( #0F4392 0%, #001D3D 100%); + z-index: 9999; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + transition: opacity 0.75s, visibility 0.75s; +} +.spinner { + width: 70.4px; + height: 70.4px; + --clr: rgb(251, 249, 248); + --clr-alpha: rgba(56, 36, 21, 0.1); + animation: spinner 1.6s infinite ease; + transform-style: preserve-3d; +} +.hidden{ + opacity: 0; + visibility: hidden; +} + +.spinner > div { + background-color: var(--clr-alpha); + height: 100%; + position: absolute; + width: 100%; + border: 3.5px solid var(--clr); +} + +.spinner div:nth-of-type(1) { + transform: translateZ(-35.2px) rotateY(180deg); +} + +.spinner div:nth-of-type(2) { + transform: rotateY(-270deg) translateX(50%); + transform-origin: top right; +} + +.spinner div:nth-of-type(3) { + transform: rotateY(270deg) translateX(-50%); + transform-origin: center left; +} + +.spinner div:nth-of-type(4) { + transform: rotateX(90deg) translateY(-50%); + transform-origin: top center; +} + +.spinner div:nth-of-type(5) { + transform: rotateX(-90deg) translateY(50%); + transform-origin: bottom center; +} + +.spinner div:nth-of-type(6) { + transform: translateZ(35.2px); +} + +@keyframes spinner { + 0% { + transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); + } + + 50% { + transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); + } + + 100% { + transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); + } +} + +.container { + padding-inline: 16px; + max-width: 580px; + width: 100%; + margin-inline: auto; +} +.container .heart { + color: #fff; + margin-left: 90px; + cursor: pointer; +} +.container .heart:hover { + color: #fd3b3b; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); +} +.section { + padding-block-end: 60px; +} +.title-wapper { + margin-block-end: 32px; +} +.img-holder { + aspect-ratio: var(--width) / var(--height); + background-color: var(--neutral-80); + overflow: hidden; +} +.img-cover { + width: 100%; + height: 100%; + object-fit: cover; +} + +.btn { + display: flex; + justify-content: center; + align-items: center; + gap: 12px; + height: 48px; + padding-inline: 24px; + border-radius: var(--radus-full); + max-width: max-content; + transition: var(--transition-duration-quick) var(--transition-easing-quick); +} + +.btn-fill { + background-color: var(--primary-100); + color: var(--neutral-100); +} + +.btn-fill:where(:hover, :focus) { + background-color: var(--primary-90); + box-shadow: var(--shadoe-1); +} + +.btn-fill:where(:hover, :focus-visible) { + background-color: var(--primary-80); +} + +.btn-outline { + color: var(--primary-100); + box-shadow: inset 0 0 0 2px var(--primary-100); +} + +.btn-outline:where(:hover, :focus, :focus-visible) { + color: var(--neutral-100); +} + +.btn-outline:hover { + background-color: var(--primary-100); +} + +.btn-outline:focus { + background-color: var(--primary-90); +} + +.btn-outline:where(:hover, :focus-visible) { + background-color: var(--neutral-80); +} + +/*icon */ + +.icon-btn { + height: 40px; + width: 40px; + display: grid; + place-items: center; + background-color: var(--neutral-100); + color: var(--neutral-10); + border-radius: var(--radus-small); + box-shadow: var(--shadoe-3); + transition: var(--transition-duration-quick) var(--transition-easing-quick); + +} + +.icon-btn:where(:hover, :focus-visible) { + background-color: var(--neutral-90); +} + +.badge { + height: 32px; + max-width: max-content; + display: grid; + place-items: center; + padding-inline: 16px; + background-color: var(--secpndary-100); + border-radius: var(--radus-small); + box-shadow: var(--shadoe-3); +} + +.card { + border-radius: var(--radus-large); + overflow: hidden; + box-shadow: var(--shadoe-2); + transition: var(--transition-duration-quick) var(--transition-easing-quick); +} +.card:where(:hover, :focus-within) { + box-shadow: var(--shadoe-4); +} +.card-banner { + position: relative; +} +.card-banner .img-cover { + transition: var(--transition-duration-quick) var(--transition-easing-quick); +} +.card:where(:hover, :focus-within) .img-cover { + scale: 1.05; + rotate: 2deg; +} +.card :where(.badge, .icon-btn){ + position: absolute; + top: 20px; +} +.card .badge { + left: 20px; +} +.card .icon-btn{ + right: 20px; + opacity: 0; + visibility: hidden; + scale: 0.8; + transition: var(--transition-duration-quick) var(--transition-easing-quick); +} +.fav-btn { + color: var(--error-100); +} +.fav-btn.active .material-symbols-rounded { + font-variation-settings: 'FILL' 1; +} +.card:where(:hover, :focus-within) .icon-btn{ + scale: 1; + opacity: 1; + visibility: visible; +} +.card-content { + padding: 20px 30px 24px; +} +.card-titel { + margin-block: 8px; + color: var(--neutral-20); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + transition: var(--transition-duration-quick) var(--transition-easing-quick); +} +.card-titel:where(:hover, :focus-visible){ + color: var(--primary-100); +} + +.card-text { + color: var(--neutral-40); +} +.card-meta-list { + padding-block-start :16px ; + margin-block-start: 16px; + border-block-start: 1px solid var(--neutral-90); + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + gap: 12px; +} +.card .meta-item { + display: flex; + align-items: center; + gap: 4px; + color: var(--neutral-20); +} +.property { + padding: 60px 16px; +} +.property .section-text { + margin-bottom: 8px 16px; + color: var(--neutral-60); +} +.property .section-title { + font-size: 28px; + margin-bottom: 6px; +} +.property-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 16px; +} +.btn-outline { + margin: 20px 0; +} + +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100px; + z-index: 4; +} + +.header.active { + animation: slide_in 500ms ease forwards; + height: 72px; + background-color: var(--primary-40); +} + +@keyframes slide_in { + 0% { + transform: translateY(-100%); + } + + 100% { + transform: translateY(0); + } +} + +.header .container { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + height: 100%; + opacity: 0; + animation: sidetop3 2.2s ease forwards; +} +@keyframes sidetop3 { + 0% { + transform: translatey(-100%); + opacity: 0; + } + 100% { + transform: translatey(0%); + opacity: 1; + } +} + +.nav-toggle-btn .close, +.nav-toggle-btn.active .open { + display: block; +} + +.nav-toggle-btn .open, +.nav-toggle-btn.active .close { + display: none; +} + +.navbar { + position: absolute; + top: 85%; + right: 16px; + background-color: var(--neutral-100); + min-width: 260px; + padding: 10px; + border-radius: var(--radus-large); + visibility: hidden; + opacity: 0; + scale: 0.4; + transition: var(--transition-duration-quick) var(--transition-easing-quick); + box-shadow: var(--shadoe-1); + transform-origin: top right; + z-index: 4; +} + +.navbar.active { + visibility: visible; + opacity: 1; + scale: 1; +} + +.navbar, +.navbar-list, +.navbar-wapper { + display: grid; + gap: 8px; +} + +.navbar-link, +.btn-link { + color: var(--neutral-30); + padding: 6px 12px; + transition: var(--transition-duration-quick) var(--transition-easing-quick); +} + +.btn-link { + border-block-start: 1px solid var(--neutral-90); + padding-block-start: 14px; +} + +:is(.navbar-link, .btn-link):is(:hover, :focus-visible), +.navbar-link.active { + color: var(--primary-100); +} + +.navbar .btn { + min-width: 100%; +} + +.scroll-up.show { + right: 25px; + z-index: 1000; +} + +.scroll-up{ + position: fixed; + bottom: 30px; + right: -80px; + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + color: white; + font-weight: bold; + font-size: 12px; + z-index: 1000; + background-color: #217bfe; + cursor: pointer; + border: none; + transition: 0.4s; +} + +.arrow path { + fill: white; +} + +.scroll-up:hover { + opacity: 1; + transition-duration: .7s; +} + +.scroll-up:hover .arrow { + animation: slide-in-bottom .7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; +} + +@keyframes slide-in-bottom { + 0% { + transform: translateY(10px); + opacity: 0; + } + + 100% { + transform: translateY(0); + opacity: 1; + } +} +.conteaner-text{ + opacity: 0; + animation: sidetop2 2.7s ease forwards; + animation-delay:calc(.2s * var(--i)) ; + +} +@keyframes sidetop2 { + 0% { + transform: translatex(-100%); + opacity: 0; + } + 100% { + transform: translatex(0%); + opacity: 1; + } +} +.hero-banner { + display: none; +} +.hero { + position: relative; + background-image: var(--griedent); + color: var(--neutral-90); + padding-block: 130px 60px ; + overflow: hidden; + isolation: isolate; +} +.hero-title { + color: var(--neutral-100); + font-size: 32px; +} +.hero-text { + margin-block: 16px 32px; +} +.search-bar { + background: var(--white); + display: grid; + padding: 8px; + gap: 8px; + border-radius: 16px; + box-shadow: var(--shadoe-4); + opacity: 0; + animation: sidetop1 3.4s ease forwards; + animation-delay:calc(.2s * var(--i)) ; + +} +@keyframes sidetop1 { + 0% { + transform: translatey(-100%); + opacity: 0; + } + 100% { + transform: translatey(0%); + opacity: 1; + } +} +.search-item{ + position: relative; + color: var(--neutral-50); +} +.search-item .search-item-field { + height: 76px; + padding: 1px 16px 12px; + border-radius: var(--radus-meduim); + transition: var(--transition-duration-quick) var(--transition-easing-quick); + cursor: pointer; +} +.search-item .search-item-field:where(:hover, :focus) { + background-color: var(--neutral-95); +} +.search-item :where(.label, .material-symbols-rounded) { + position: absolute; + pointer-events: none; +} +.search-item .label { + top: 12px; + left: 16px; + color: var(--neutral-5); +} +.search-item .material-symbols-rounded { + top: 50%; + right: 16px; + translate: 0 -50%; + color: var(--primary-100); +} +.search-btn { + background: var(--primary-100); + color: var(--neutral-100); + display: flex; + justify-content: center; + align-items: center; + height: 64px; + padding-inline: 24px; + gap: 12px; + border-radius: 12px; + transition: var(--transition-duration-quick) var(--transition-easing-quick); +} +.search-btn:where(:hover, :focus) { + background-color: var(--primary-80); +} +.search-btn:where(:active, :focus-visible){ + background-color: var(--primary-70); +} +.hero .bg-patternr { + position: absolute; + top: 50%; + left: 25%; + right: 0; + translate: 0 -50%; + min-height: 100%; + pointer-events: none; + z-index: -2; +} +.loginBody{ + background-image: var(--griedent); +} +.loginBody { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +.containerLogin{ + height: 100vh; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + column-gap: 30px; + opacity: 0; + animation: sidetop5 1.4s ease forwards; + animation-delay:calc(.2s * var(--i)) ; + +} +@keyframes sidetop5 { + 0% { + transform: translatey(-100%); + opacity: 0; + } + 100% { + transform: translatey(0%); + opacity: 1; + } +} +.form{ + position: absolute; + max-width: 400px; + width: 100%; + padding: 30px; + border-radius: 6px; + background: #FFF; +} +.form.signup{ + opacity: 0; + pointer-events: none; + transition: 0.5s; +} +.forms.show-signup .form.signup{ + opacity: 1; + pointer-events: auto; + transition: 0.5s; +} +.forms.show-signup .form.login{ + opacity: 0; + pointer-events: none; + transition: 0.5s; +} +.headerLogin{ + font-size: 27px; + font-weight: 600; + color: #232836; + text-align: center; +} +form{ + margin-top: 30px; +} +.form .field{ + position: relative; + height: 50px; + width: 100%; + margin-top: 20px; + border-radius: 6px; +} +.field input, +.field button{ + height: 100%; + width: 100%; + border: none; + font-size: 16px; + font-weight: 400; + border-radius: 6px; +} +.field input{ + outline: none; + padding: 0 15px; + border: 1px solid#CACACA; +} +.field input:focus{ + border-bottom-width: 2px; +} +.eye-icon{ + position: absolute; + top: 50%; + right: 10px; + transform: translateY(-50%); + font-size: 18px; + color: #8b8b8b; + cursor: pointer; + padding: 5px; +} +.field button{ + color: #fff; + background-color: #0171d3; + transition: all 0.3s ease; + cursor: pointer; +} +.field button:hover{ + background-color: #016dcb; +} +.form-link{ + text-align: center; + margin-top: 10px; +} +.form-link span, +.form-link a{ + font-size: 14px; + font-weight: 400; + color: #232836; +} +.form a{ + color: #0171d3; + text-decoration: none; +} +.form-content a:hover{ + text-decoration: underline; +} +.line{ + position: relative; + height: 1px; + width: 100%; + margin: 36px 0; + background-color: #d4d4d4; +} +.line::before{ + content: 'Or'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #FFF; + color: #8b8b8b; + padding: 0 15px; +} +.media-options a{ + display: flex; + align-items: center; + justify-content: center; +} +a.facebook{ + color: #fff; + background-color: #4267b2; +} +a.facebook .facebook-icon{ + height: 28px; + width: 28px; + color: #0171d3; + font-size: 20px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + background-color: #fff; +} +.facebook-icon, +img.google-img{ + position: absolute; + top: 50%; + left: 15px; + transform: translateY(-50%); +} +img.google-img{ + height: 20px; + width: 20px; + object-fit: cover; +} +a.google{ + border: 1px solid #CACACA; +} +a.google span{ + font-weight: 500; + opacity: 0.6; + color: #232836; +} + +/* + forgot Form +*/ + + .form-Forgot { + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} +.Forgot-content { + position: absolute; + max-width: 430px; + width: 100%; + padding: 30px; + border-radius: 6px; + background: #FFF; +} +.Forgot-content .enter-email { + text-align: center; + font-size: 17px; + font-weight: 300; + margin-top: 18px; + margin-right: 4px; + color: #141414; +} +.headerForgot{ + font-size: 26px; + font-weight: 600; + color: #232836; + text-align: center; +} +.Forgot-from { + margin: 30px 0; +} +.input-Forgot input { + font-size: 15px; +} +.input-Forgot input, +.button-Forgot button { + height: 50px; + width: 100%; + border: none; + font-size: 16px; + font-weight: 400; + border-radius: 6px; +} +.Forgot-from input{ + outline: none; + padding: 0 45px; + border: 1px solid#CACACA; +} +.input-Forgot input{ + width: 100%; + padding: 15px; +} +.input-Forgot input:focus{ + border-bottom-width: 2px; +} +.buttonForgot{ + color: #FFF; + background: #4070f4; + padding: 10px; + cursor: pointer; + +} +.buttonForgot:hover { + background-color: #016dcb; +} +.form-Forgot{ + opacity: 0; + pointer-events: none; + transition: 0.5s; +} +.form-Forgot.active { + opacity: 1; + pointer-events: auto; + transition: 0.5s; +} +.form.active{ + opacity: 0; + pointer-events: auto; + transition: 0.5s; +} + +.Forgot-content i { + font-size: 30px; + color: #424141; + margin-left: -15px; + margin-bottom: 10px; + cursor: pointer; + +} +/* +Feature +*/ + +.feature-banner { + aspect-ratio: 3 / 2; + overflow: hidden; + border-radius: var(--radus-extra-large); + transition: 0.4s; +} +.feature-content{ + padding: 24px 16px 0; +} +.feature-content h2 { + font-size: 36px; + line-height: 37px; + margin-bottom: 10px; +} +.feature-content .faature-text { + margin-block: 16px; +} +.feature-content .faature-item { + color: var(--neutral-30); +} +.feature-list { + display: grid; + gap: 12px; + margin-top: 15px; + font-size: 15px; + font-weight: 200; +} +.faature-item { + display: flex; + align-items: center; + gap: 8px; +} +.feature-item .body-medium { + font-size: 18px; +} +.feature-icon { + color: var(--primary-100); + font-size: 2.2rem; +} +.feature-banner .img-cover { + transition: 0.4s; +} +.feature-banner .img-cover:hover { + transform: scale(1.1); +} + +/* + video + */ + +.video-card { + height: 260px; + border-radius: 32px; + background: linear-gradient(0deg, #0000004D, #0000004d); + background: url('images/video-card.jpg'); + background-repeat: no-repeat; + background-size: cover; + display: flex; + place-items: center; +} +.play-btn { + margin: auto; + width: 72px; + height: 72px; + display: grid; + place-items: center; + background-color: var(--neutral-100); + color: var(--primary-100); + border-radius: var(--radus-circle); + animation: pulse 1.5s var(--transition-easing-quick) forwards infinite; +} +@keyframes pulse { + 0% { + box-shadow: 0 0 0 0 #ffffff80; + } + 100% { + box-shadow: 0 0 0 20px #ffffff00; + } +} +.play-btn .material-symbols-rounded { + font-size: 4rem; + font-variation-settings: 'FILL' 1; +} + +/* + STORY +*/ + +.story .section-subtitle { + color: var(--primary-100); +} +.story .section-title { + margin-block: 12px; +} +.avatar-list{ + display: flex; + cursor: pointer; +} + +.avatar { + position: relative; + width: 60px; + height: 46px; + border-radius: var(--radus-full); + border: 3px solid var(--neutral-98); + overflow: hidden; +} +.avatar:not(:first-child){ + margin-inline-start: -10px; +} +.avatar .overlay-content { + position: absolute; + inset: 0; + display: grid; + place-items: center; + background-color: #000000BF; + color: var(--neutral-100); +} +.story .title-wrapper{ + display: flex; + gap: 16px; +} +.story-list { + display: grid; + gap: 16px; +} +.story-card { + position: relative; + height: 360px; + background-repeat: cover; + background-size: cover; + background-position: center; + border-radius: var(--radus-large); + transition: var(--transition-duration-quick) var(--transition-easing-quick); +} +.story-card:where(:hover, :focus-visible) { + scale: 0.97; +} +.story-card .overlay-content { + position: absolute; + inset: 0; + background: linear-gradient(180deg, #00000000 33.33%, #00000000 100%); + color: var(--white); + display: flex; + justify-content: space-between; + align-items: flex-end; + padding: 24px; +} +.story-card .rating-wrapper{ + display: flex; + align-items: center; + margin-block-start: 8px; +} +.story-card .rating-text { + margin-inline-start: 12px; + color: var(--neutral-80); +} +.story-card .material-symbols-rounded { + font-variation-settings: 'FILL' 1; + color: var(--yellow) +} +.story-card .card-avatar{ + width: 56px; + height: 56px; + border-radius: var(--radus-circle); + box-shadow: var(--shadoe-3); + overflow: hidden; +} + +/* +footer +*/ + + .footer { + background-color: var(--primary-20); + color: var(--neutral-90); + +} +.footer-top .container { + padding-block: 60px; + display: grid; + gap: 24px; +} +.footer-text{ + margin-block: 16px; +} +.footer-list-title { + margin-block-end: 16px; + color: #F6BD26; +} +.footer-list { + display: grid; + gap: 16px; +} +.footer-link { + transition: var(--transition-duration-quick) var(--transition-easing-quick); +} +.footer-link:where(:hover, :focus-visible){ + color: var(--primary-100); +} +.social-link { + display: flex; + gap: 16px; +} +.footer-bottom { + border-block-start: 1px solid var(--neutral-20); +} +.footer-bottom .container { + padding-block: 20px; + display: grid; + justify-content: center; +} + + +/*-------------------------------------------------------- + # Mwdia queries +/*--------------------------------------------------------*/ +@media (min-width: 270px) and (max-width: 506px) { + .label-medium{ + width: 60px; + } + .overlay-content .label-medium { + padding-left: 13px; + } + .material-symbols-rounded { + margin-right: 5px; + } + .search-bar{ + opacity: 0; + animation: sidetop4 2.3s ease forwards; + animation-delay:calc(.2s * var(--i)) ; + + } + @keyframes sidetop4 { + 0% { + transform: translatey(100%); + opacity: 0; + } + 100% { + transform: translatey(0%); + opacity: 1; + } + }} + +@media (min-width: 365px) and (max-width: 767px) { + .footer-top .container { + padding-block: 80px; + grid-template-columns: repeat(3, 1fr); + } + .footer-brand{ + grid-column: 1 / 4; + } + .footer-text { + max-width: 400px; + } + .search-bar{ + opacity: 0; + animation: sidetop 2.3s ease forwards; + animation-delay:calc(.2s * var(--i)) ; + +} +@keyframes sidetop { + 0% { + transform: translatey(100%); + opacity: 0; + } + 100% { + transform: translatey(0%); + opacity: 1; + } +}} + + @media (min-width: 550px) and (max-width: 768px) { + .container .heart { + margin-left: 200px; + } + } + + @media (min-width: 768px) { + + + :root { + /*font size*/ + --fs-headline-large: 5.2rem; + --fs-headline-medium: 4rem; + --fs-headline-small: 3.6rem; + + --lh-headline-large: 64px; + --lh-headline-meduim: 64px; + --lh-headline-small: 48px; + } + + .container { + max-width: 720px; + } + .section{ + padding-block-end: 80px; + } + + .title-wapper { + display: grid; + grid-template-columns: 1fr max-content; + align-items: center; + gap: 40px; + margin-block-end: 48px; + } + .hero { + padding-block: 160px 100px; + } + .search-bar { + margin-top: 100px; + grid-template-columns: 150px 160px auto max-content; + height: 100px; + gap: 2; + } + .search-item .search-item-field { + height: 61px; + padding: 1px 16px 12px; + } + .search-item .material-symbls-rounded { + display: none; + } + .search-item:not(:last-of-type)::after { + content: ""; + position: absolute; + top: 16px; + left: 100%; + bottom: 16px; + width: 1px; + background-color: var(--neutral-90); + } + .search-btn { + height: 60px; + margin-inline-start: 8px; + margin-top: 11px; + } + /* + #reused style + */ + + .container { + max-width: 720px; + } + .container .heart { + margin-left: 360px; + } + .section { + padding-inline-end: 24px; + } + .title-wrapper { + display: grid; + grid-template-columns: 1fr max-content; + align-items: center; + gap: 48px; + margin-block-end: 48px; + } + .search-item .material-symbols-rounded { + display: none; + } + + .feature-content { + padding-block-start: 32px; + } + .feature-content .feature-text { + margin-block: 16px 24px; + line-height: 28px; + } + .feature-list { + grid-template-columns: 1fr 1fr; + gap: 16px; + } + .video-card { + height: 300px !important; + } + .play-btn { + width: 96px ; + height: 96px; + } + .play-btn .material-symbols-rounded { + font-size: 4.8rem; + } + .story .section-title{ + margin-block: 16px; + } + .avatar { + width: 80px; + height: 60px; + } + .story-list { + grid-template-columns: 1fr 1fr; + } + /*footer*/ + .footer-top .container { + padding-block: 80px; + grid-template-columns: repeat(3, 1fr); + } + .footer-brand{ + grid-column: 1 / 4; + } + .footer-text { + max-width: 400px; + } + + + + } + option { + font-size: 18px; + } + + @media (min-width: 992px) { + + /* + # curstin property + */ + + :root{ + --fs-body-large: 1.8rem; + --lh-body-large: 32px; + } + .container { + max-width: 950px; + } + .container .heart { + margin-left: 20px; + } + .nav-toggle-btn { + display: none; + } + .navbar, + .navbar-list, + .navbar-wapper { + all: unset; + display: flex; + align-items: center; + } + .navbar, + .navbar-list { + flex-grow: 1; + } + .navbar-list { + justify-content: center; + } + .navbar-link, + .btn-link { + color: var(--neutral-80); + line-height: 48px; + } + .navbar-link { + padding: 0 24px; + } + :is(.navbar-link, .btn-link):is(:hover, :focus-visible), + .navbar-link.active { + color: var(--neutral-100); + } + .navbar-link.active { + position: relative; + } + .navbar-link.active::before { + content: ""; + position: absolute; + left: 50%; + translate: -50% 0; + bottom: 8px; + width: 4px; + height: 4px; + border-radius: var(--radus-circle); + background-color: var(--neutral-100); + } + .btn-link{ + color: var(--neutral-100); + border: none; + padding: 0; + } + .navbar .btn { + min-width: max-content; + } + .navbar-wapper { + gap: 24px; + } + + /* + hero + */ + .hero .container { + display: grid; + grid-template-columns: repeat(12, 1fr); + gap: 20px; + } + .hero-content { + grid-column: 1 / 7; + } + + .hero-title { + /* font-size: 1.9rem; */ + line-height: 35px; + } + .search-bar { + min-width: max-content; + grid-template-columns: 127px 162px 1fr max-content ; + padding-left: 29px; + height: 100px; + } + .search-btn { + padding: 0 25px; + height: 55px; + font-size: 20px; + } + .search-item .search-item-field { + height: 57px; + width: 100%; + padding-inline: 25px; + padding-block-end: 16px; + } + .search-item .label { + top: 16px; + left: 24px; + } + .search-item ,.material-symbols-rounded { + display: block; + right: 24px; + } + .hero-banner { + display: block; + position: absolute; + bottom: 0; + left: 50%; + max-width: 720px; + z-index: -1; + } + .label-medium { + margin-left: 30px; + } + + /*property*/ + + .property .section-text { + max-width: 640px; + } + .feature .container { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 20px; + } + .feature-content{ + padding: 40px; + } + .feature-list { + grid-template-columns: 1fr; + } + .feature-banner { + aspect-ratio: auto; + } + .feature-2 .feature-banner { + order: 1; + } + .video-card { + height: 390px !important; + } + .play-btn { + width: 96px; + height: 96px; + } + .play-btn .material-symbols-rounded { + font-size: 5.8rem; + } + + + } + + @media (min-width: 1440px) { + :root { + --fs-headline-large: 7.2rem; + --fs-headline-medium: 5.4rem; + + --lh-headline-large: 92px; + --lh-headline-meduim: 72px; + } + + .container { + max-width: 1460px; + } + .search-item .material-symbols-rounded { + display: block; + } + .card-banner .label-medium { + margin-left: -5px; + } + .hero .container { + min-height: 580px; + align-items: center; + } + .hero-content { + grid-column: 1 / 6; + } + .hero-banner { + max-width: 820px; + width: 100%; + left: calc(50% - 108px); + } + .hero .bg-patternr { + left: 36%; + } + .hero-title { + font-size: 7.9rem; + line-height: 80px; + } + .search-item .search-item-field { + height: 67px; + } + .search-bar { + height: 100px; + } + .search-btn { + padding: 30px 19px; + margin: 10px; + font-size: 20px; + } + .property { + padding: 55px 94px; + + } + .section-title { + font-size: 40px; + } + .feature-content { + padding: 60px; + } + .feature-list { + grid-template-columns: 1fr 1fr; + gap: 20px; + } + .video-card { + height: 490px !important; + } + .play-btn { + width: 96px; + height: 96px; + } + .play-btn .material-symbols-rounded { + font-size: 5.8rem; + } + .btn-stories { + margin-left: 420px; + padding: 10px; + } + .overlay-content .label-medium{ + margin-left: 5px; + } + .story .section-title { + max-width: 810px; + padding: 8px 0; + } + .story-list { + grid-template-columns: repeat(12, 1fr); + } + .story-card:where(:nth-child(1), :nth-child(6)){ + grid-column: span 3; + } + .story-card:where(:nth-child(3), :nth-child(5)){ + grid-column: span 4; + } + .story-card:where(:nth-child(2), :nth-child(4)){ + grid-column: span 5; + } + /* footer*/ + .footer-brand{ + grid-column: auto; + } + .footer-top .container { + grid-template-columns: 580px repeat(3, 1fr); + } + + } \ No newline at end of file