From 4793535ea9ab04bad435e9c78e81c78222d2f841 Mon Sep 17 00:00:00 2001 From: baole23520112 <23520112@gm.uit.edu.vn> Date: Wed, 21 Aug 2024 10:42:39 +0700 Subject: [PATCH] add header responsive --- assets/css/responsive.css | 97 ++++ assets/css/styles.css | 662 ++++++++++----------- index.html | 1156 +++++++++++++++++++++++-------------- 3 files changed, 1165 insertions(+), 750 deletions(-) create mode 100644 assets/css/responsive.css diff --git a/assets/css/responsive.css b/assets/css/responsive.css new file mode 100644 index 0000000..18dc759 --- /dev/null +++ b/assets/css/responsive.css @@ -0,0 +1,97 @@ +/* PC */ +@media screen and (min-width: 992px) { + .mobile-header { + display: none; + } + + .show-on-mobile { + display: none; + } +} + +/* Avoid overlapping code */ +/* Tablet and mobile */ +@media screen and (max-width: 991px) { + .navbar { + position: relative; + } + + .navbar .logo { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .navbar ul { + display: none; + } + + .toggle-menu svg { + width: 24px; + color: #666; + } + + .menu-overlay { + position: fixed; + inset: 0; + background: rgba(0, 0, 0, 0.3); + z-index: 1; + opacity: 0; + visibility: hidden; + transition: 0.25s ease; + } + + .menu-drawer { + padding: 60px; + position: fixed; + inset: 0 40% 0 0; + background: #fff; + z-index: 2; + transform: translateX(-100%); + transition: 0.25s ease; + font-weight: 500; + } + + .menu-drawer ul { + margin-top: 32px; + } + + .menu-drawer ul a { + display: block; + color: #333; + padding: 14px 0; + } + + .menu-checkbox:checked ~ .menu-overlay { + opacity: 1; + visibility: visible; + } + + .menu-checkbox:checked ~ .menu-drawer { + transform: translateX(0); + } + + .separate { + border-top: 1px solid #ebebeb; + } +} + +/* Tablet */ +@media screen and (min-width: 768px) and (max-width: 991px) { + .show-on-mobile { + display: none; + } +} + +/* Mobile */ +@media screen and (max-width: 767px) { + .menu-drawer { + inset: 0 25% 0 0; + padding: 40px; + } + + .navbar .actions { + display: none; + } +} \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css index 730d020..8e8ac71 100644 --- a/assets/css/styles.css +++ b/assets/css/styles.css @@ -1,643 +1,643 @@ * { - box-sizing: border-box; + box-sizing: border-box; } :root { - --primary-color: #0f1b4c; + --primary-color: #0f1b4c; } html, body { - scroll-behavior: smooth; + scroll-behavior: smooth; } html { - font-size: 62.5%; + font-size: 62.5%; } body { - font-size: 1.6rem; - font-family: "Poppins", sans-serif; + font-size: 1.6rem; + font-family: "Poppins", sans-serif; } /* ===================== Common ===================== */ a { - text-decoration: none; + text-decoration: none; } .content { - width: 1110px; - max-width: calc(100% - 48px); - margin-left: auto; - margin-right: auto; + width: 1110px; + max-width: calc(100% - 48px); + margin-left: auto; + margin-right: auto; } .btn { - display: inline-block; - padding: 18px 16px; - min-width: 98px; - border-radius: 12px; - background: var(--primary-color); - color: #fff; - text-align: center; - font-size: 1.4rem; - font-weight: 500; + display: inline-block; + padding: 18px 16px; + min-width: 98px; + border-radius: 12px; + background: var(--primary-color); + color: #fff; + text-align: center; + font-size: 1.4rem; + font-weight: 500; } .line-clamp { - display: -webkit-box; - -webkit-line-clamp: var(--line-clamp, 2); - -webkit-box-orient: vertical; - overflow: hidden; + display: -webkit-box; + -webkit-line-clamp: var(--line-clamp, 2); + -webkit-box-orient: vertical; + overflow: hidden; } .btn:hover { - opacity: 0.9; + opacity: 0.9; } /* ===================== Header ================ */ .fixed-header { - background: #e6f0ff; - padding-top: 26px; - position: sticky; - top: -26px; - z-index: 1; + background: #e6f0ff; + padding-top: 26px; + position: sticky; + top: -26px; + z-index: 1; } .hero-wrap { - position: relative; - background: #e6f0ff; - height: calc(100vh - 90px); + position: relative; + background: #e6f0ff; + height: calc(100vh - 90px); } .navbar { - display: flex; - align-items: center; - /* padding-top: 38px; collapse */ - padding: 12px 0; + display: flex; + align-items: center; + /* padding-top: 38px; collapse */ + padding: 12px 0; } .navbar ul { - display: flex; - margin-left: 50px; + display: flex; + margin-left: 50px; } .navbar .actions { - margin-left: auto; + margin-left: auto; } .navbar ul a { - color: #4f5361; - font-size: 1.4rem; - font-weight: 500; - padding: 8px 14px; + color: #4f5361; + font-size: 1.4rem; + font-weight: 500; + padding: 8px 14px; } .navbar ul a:hover { - text-decoration: underline; + text-decoration: underline; } .navbar .action-link { - color: var(--primary-color); - font-size: 1.4rem; - font-weight: 500; + color: var(--primary-color); + font-size: 1.4rem; + font-weight: 500; } .navbar .action-btn { - padding: 13px 16px; - margin-left: 18px; - border-radius: 8px; + padding: 13px 16px; + margin-left: 18px; + border-radius: 8px; } .hero { - padding-top: 130px; + padding-top: 130px; } .hero .info { - width: 51%; + width: 51%; } .hero .sub-title { - color: #687690; - font-size: 1.8rem; - font-weight: 500; - letter-spacing: 0.018rem; + color: #687690; + font-size: 1.8rem; + font-weight: 500; + letter-spacing: 0.018rem; } .hero .title { - margin-top: 8px; - color: #000336; - font-size: 6.2rem; - font-weight: 700; - line-height: 118.75%; + margin-top: 8px; + color: #000336; + font-size: 6.2rem; + font-weight: 700; + line-height: 118.75%; } .hero .desc { - margin-top: 30px; - color: #5a6473; - font-size: 1.8rem; - font-weight: 400; - line-height: 177.778%; + margin-top: 30px; + color: #5a6473; + font-size: 1.8rem; + font-weight: 400; + line-height: 177.778%; } .hero-cta { - margin-top: 40px; - min-width: 170px; + margin-top: 40px; + min-width: 170px; } .hero-img { - position: absolute; - bottom: 0; - right: calc((100vw - 1110px) / 2 - 100px); + position: absolute; + bottom: 0; + right: calc((100vw - 1110px) / 2 - 100px); } /* ============= Clients ============ */ .client { - margin-top: 79px; - padding: 43px 0 41px; + margin-top: 79px; + padding: 43px 0 41px; } .client .row { - display: flex; - justify-content: space-between; + display: flex; + justify-content: space-between; } .client .desc { - color: #7d8589; - font-size: 1.6rem; - font-weight: 500; - line-height: 125%; + color: #7d8589; + font-size: 1.6rem; + font-weight: 500; + line-height: 125%; } .client .row-desc { - margin-top: 23px; + margin-top: 23px; } .client .images { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 70px; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 70px; } .client .images a { - display: flex; - height: 90px; - padding: 0 42px; - align-items: center; - border-radius: 12px; + display: flex; + height: 90px; + padding: 0 42px; + align-items: center; + border-radius: 12px; } .client a:not(.client .images a:nth-child(3)):hover { - box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); + box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1); } /* ================ Guides ================ */ .guides { - margin-top: 40px; - padding: 89px 0 79px; + margin-top: 40px; + padding: 89px 0 79px; } .guides .sub-title::before { - content: ""; - position: absolute; - top: -10px; - left: 50%; - width: 41px; - height: 4px; - flex-shrink: 0; - border-radius: 12px; - background: #000339; - transform: translate(-50%); + content: ""; + position: absolute; + top: -10px; + left: 50%; + width: 41px; + height: 4px; + flex-shrink: 0; + border-radius: 12px; + background: #000339; + transform: translate(-50%); } .guides .sub-title { - position: relative; - color: #000339; - text-align: center; - font-size: 3.5rem; - font-weight: 600; - line-height: 1; + position: relative; + color: #000339; + text-align: center; + font-size: 3.5rem; + font-weight: 600; + line-height: 1; } .guides .desc { - width: 459px; - max-width: 100%; - margin: 20px auto 0; - margin-right: auto; - color: #5a6473; - text-align: center; - font-size: 1.6rem; - font-weight: 400; - line-height: 187.5%; + width: 459px; + max-width: 100%; + margin: 20px auto 0; + margin-right: auto; + color: #5a6473; + text-align: center; + font-size: 1.6rem; + font-weight: 400; + line-height: 187.5%; } .list-guides { - display: flex; - justify-content: center; - margin-top: 70px; + display: flex; + justify-content: center; + margin-top: 70px; } .guide-item { - margin: 0 70px; - text-align: center; + margin: 0 70px; + text-align: center; } .guide-item .icon { - margin-bottom: 26px; + margin-bottom: 26px; } .guide-item .title { - color: #3b3c45; - margin-bottom: 10px; - font-size: 2rem; - font-weight: 500; - line-height: 110%; + color: #3b3c45; + margin-bottom: 10px; + font-size: 2rem; + font-weight: 500; + line-height: 110%; } .guide-item .link { - color: #0689ff; - font-size: 1.4rem; - font-weight: 600; + color: #0689ff; + font-size: 1.4rem; + font-weight: 600; } .guide-item .arrow { - margin-left: 6px; + margin-left: 6px; } .guide-cta { - display: flex; - justify-content: center; - margin-top: 50px; + display: flex; + justify-content: center; + margin-top: 50px; } .guide-cta .btn { - min-width: 170px; - color: #fff; - font-size: 1.3rem; - font-weight: 500; + min-width: 170px; + color: #fff; + font-size: 1.3rem; + font-weight: 500; } /* =============== Featured =============== */ .featured { - margin-top: 41px; - padding: 110px 0 110px; - background: #f5fafe; + margin-top: 41px; + padding: 110px 0 110px; + background: #f5fafe; } .featured .sub-title { - color: #000339; - font-size: 3.5rem; - font-weight: 600; - line-height: 100%; + color: #000339; + font-size: 3.5rem; + font-weight: 600; + line-height: 100%; } .featured .row { - display: flex; - justify-content: space-between; - margin-top: 15px; + display: flex; + justify-content: space-between; + margin-top: 15px; } .featured .desc { - color: #5a6473; - font-size: 1.6rem; - font-weight: 400; - line-height: 187.5%; + color: #5a6473; + font-size: 1.6rem; + font-weight: 400; + line-height: 187.5%; } .featured .link { - display: flex; - align-items: center; - color: #0689ff; - font-size: 1.8rem; - font-weight: 600; + display: flex; + align-items: center; + color: #0689ff; + font-size: 1.8rem; + font-weight: 600; } .featured .link .arrow { - margin-left: 6px; + margin-left: 6px; } .featured .list { - display: flex; - margin-top: 70px; - gap: 30px; + display: flex; + margin-top: 70px; + gap: 30px; } .featured .item { - flex: 1; - background: #fff; - border-radius: 12px; - box-shadow: 0px 65px 80px -46px rgba(226, 238, 249, 0.6); + flex: 1; + background: #fff; + border-radius: 12px; + box-shadow: 0px 65px 80px -46px rgba(226, 238, 249, 0.6); } .featured .item .thumb { - width: 100%; - height: 227px; - object-fit: cover; - border-radius: 12px 12px 0 0; + width: 100%; + height: 227px; + object-fit: cover; + border-radius: 12px 12px 0 0; } .featured .item .body { - padding: 17px 20px 24px; + padding: 17px 20px 24px; } .featured .item .title a { - color: #000339; - font-size: 2rem; - font-weight: 600; - line-height: 1.5; + color: #000339; + font-size: 2rem; + font-weight: 600; + line-height: 1.5; } .featured .item .desc { - --line-clamp: 3; - margin-top: 11px; - color: #a3a6ab; - font-size: 1.4rem; - font-weight: 500; - word-break: break-all; + --line-clamp: 3; + margin-top: 11px; + color: #a3a6ab; + font-size: 1.4rem; + font-weight: 500; + word-break: break-all; } .featured .item .info { - margin-top: 21px; - display: flex; - align-items: center; + margin-top: 21px; + display: flex; + align-items: center; } .featured .item .icon ~ .icon { - margin-left: 23px; + margin-left: 23px; } .featured .item .label { - margin-left: 8px; - color: #4d4d52; - font-size: 1.4rem; - font-weight: 500; - letter-spacing: 0.014rem; + margin-left: 8px; + color: #4d4d52; + font-size: 1.4rem; + font-weight: 500; + letter-spacing: 0.014rem; } /* =================== Stats ================= */ .stats { - margin-top: 75px; - padding: 50px 0 50px; + margin-top: 75px; + padding: 50px 0 50px; } .stats .content { - width: 1017px; + width: 1017px; } .stats .row { - display: flex; + display: flex; } .stats .img-block, .stats .info { - width: 50%; + width: 50%; } .stats .img-block { - position: relative; + position: relative; } .stats .img-block .image { - display: block; - margin-left: auto; /* just use for block */ - width: 400px; - height: 460px; - object-fit: cover; - border-radius: 12px; - box-shadow: 40px 80px 155px 0px rgba(30, 103, 113, 0.03); + display: block; + margin-left: auto; /* just use for block */ + width: 400px; + height: 460px; + object-fit: cover; + border-radius: 12px; + box-shadow: 40px 80px 155px 0px rgba(30, 103, 113, 0.03); } .stats .info { - padding: 79px 0 0 165px; + padding: 79px 0 0 165px; } .stats .sub-title::before { - content: ""; - width: 41px; - height: 4px; - position: absolute; - display: block; - border-radius: 12px; - background: #000339; - top: -10px; - left: 0; + content: ""; + width: 41px; + height: 4px; + position: absolute; + display: block; + border-radius: 12px; + background: #000339; + top: -10px; + left: 0; } .stats .info .sub-title { - position: relative; - width: 269px; - color: #000339; - font-size: 3.5rem; - font-weight: 600; - line-height: 128.571%; + position: relative; + width: 269px; + color: #000339; + font-size: 3.5rem; + font-weight: 600; + line-height: 128.571%; } .stats .info .desc { - margin-top: 20px; - width: 309px; - color: #5a6473; - font-size: 1.6rem; - font-weight: 400; - line-height: 187.5%; + margin-top: 20px; + width: 309px; + color: #5a6473; + font-size: 1.6rem; + font-weight: 400; + line-height: 187.5%; } .stats .img-block .stats-trend { - position: absolute; - padding: 45px 22px 40px; - width: 239px; - top: 0; - left: 0; - background: #fff; - box-shadow: 90px 85px 100px 0px rgba(0, 0, 0, 0.06); - border-radius: 0px 0px 12px 12px; + position: absolute; + padding: 45px 22px 40px; + width: 239px; + top: 0; + left: 0; + background: #fff; + box-shadow: 90px 85px 100px 0px rgba(0, 0, 0, 0.06); + border-radius: 0px 0px 12px 12px; } .stats .stats-trend .value { - color: #000339; - font-size: 2.6rem; - font-weight: 700; - letter-spacing: 0.26px; + color: #000339; + font-size: 2.6rem; + font-weight: 700; + letter-spacing: 0.26px; } .stats .stats-trend .icon { - margin-left: auto; + margin-left: auto; } .stats .stats-trend .desc { - margin-top: 8px; - color: #a7a7a7; - font-size: 1.2rem; - font-weight: 400; - line-height: 150%; + margin-top: 8px; + color: #a7a7a7; + font-size: 1.2rem; + font-weight: 400; + line-height: 150%; } .stats .separate { - margin-top: 25px; - width: 193.62px; - height: 1.2px; - background: #e9e9e9; + margin-top: 25px; + width: 193.62px; + height: 1.2px; + background: #e9e9e9; } .stats .avatar-block { - display: flex; - flex-wrap: wrap; - margin-top: 26px; - gap: 16px 14px; + display: flex; + flex-wrap: wrap; + margin-top: 26px; + gap: 16px 14px; } .stats .avatar-group { - display: flex; + display: flex; } .stats .avatar { - width: 16px; - height: 16px; - object-fit: cover; - border-radius: 50%; - margin-left: -3px; - background: var(--bg-color, #fff); - color: #fff; - font-size: 0.7rem; - font-weight: 450; - line-height: 16px; - text-align: center; - letter-spacing: -0.145px; + width: 16px; + height: 16px; + object-fit: cover; + border-radius: 50%; + margin-left: -3px; + background: var(--bg-color, #fff); + color: #fff; + font-size: 0.7rem; + font-weight: 450; + line-height: 16px; + text-align: center; + letter-spacing: -0.145px; } .stats .avatar:first-child { - margin-left: 0; + margin-left: 0; } .stats .row-qty { - margin-top: 110px; - justify-content: space-between; - padding: 0 32px; + margin-top: 110px; + justify-content: space-between; + padding: 0 32px; } .stats .qty { - color: #000; - font-size: 64px; - font-weight: 600; - line-height: 100%; + color: #000; + font-size: 64px; + font-weight: 600; + line-height: 100%; } .stats .qty-desc { - margin-top: 24px; - color: #7b8087; - font-size: 18px; - font-weight: 500; + margin-top: 24px; + color: #7b8087; + font-size: 18px; + font-weight: 500; } /* ============= Subscription ============== */ .subscription { - margin-top: 90px; + margin-top: 90px; } .subscription .body { - position: relative; - display: flex; - align-items: center; - height: 370px; - border-radius: 20px; - background: #063183; + position: relative; + display: flex; + align-items: center; + height: 370px; + border-radius: 20px; + background: #063183; } .subscription .info { - width: 670px; - max-width: 100%; - margin: 0 80px; + width: 670px; + max-width: 100%; + margin: 0 80px; } .subscription .sub-title { - color: #fff; - font-size: 3.5rem; - font-weight: 600; - line-height: 1.5; + color: #fff; + font-size: 3.5rem; + font-weight: 600; + line-height: 1.5; } .subscription .desc { - margin-top: 15px; - color: #fff; - font-size: 1.6rem; - font-weight: 400; - line-height: 187.5%; + margin-top: 15px; + color: #fff; + font-size: 1.6rem; + font-weight: 400; + line-height: 187.5%; } .subscription .btn { - margin-top: 20px; - min-width: 151px; - background: #fff; - color: #002366; + margin-top: 20px; + min-width: 151px; + background: #fff; + color: #002366; } .subscription img { - position: absolute; - bottom: 0; - right: 221px; + position: absolute; + bottom: 0; + right: 221px; } /* =============== Footer ================= */ .footer { - margin-top: 55px; - padding: 50px 0 58px; + margin-top: 55px; + padding: 50px 0 58px; } .footer .row { - display: flex; + display: flex; } .footer .row-top { - gap: 185px; + gap: 185px; } .footer .heading { - color: #1c1c1d; - font-family: Lato, sans-serif; - font-size: 2rem; - font-weight: 700; + color: #1c1c1d; + font-family: Lato, sans-serif; + font-size: 2rem; + font-weight: 700; } .footer .list, .footer .desc { - margin-top: 42px; + margin-top: 42px; } .footer .item { - margin-top: 18px; + margin-top: 18px; } .footer .item a { - color: #7a7a7e; - font-size: 1.6rem; - font-weight: 400; - white-space: nowrap; + color: #7a7a7e; + font-size: 1.6rem; + font-weight: 400; + white-space: nowrap; } .footer .desc { - color: #7a7a7e; - font-size: 1.6rem; - font-weight: 400; - line-height: 175%; + color: #7a7a7e; + font-size: 1.6rem; + font-weight: 400; + line-height: 175%; } .footer .social { - margin-top: 40px; + margin-top: 40px; } .footer .row-bottom { - display: flex; - align-items: center; - justify-content: space-between; - margin-top: 81px; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 81px; } .footer .logo { - width: 107px; - height: 24px; + width: 107px; + height: 24px; } .footer .copyright { - color: #c2c2c2; - font-size: 1.4rem; - font-weight: 400; + color: #c2c2c2; + font-size: 1.4rem; + font-weight: 400; } diff --git a/index.html b/index.html index 10073ce..2f7064d 100644 --- a/index.html +++ b/index.html @@ -1,422 +1,740 @@ - - - - Besnik - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
- -
-
- -
- -
-
-
-
-

Welcome to Besnik Agency

-

- Discover a place you'll love to live. -

-

- Get the best real estate deals first, before they - hit the mass market! HOT FORECLOSURE DEALS with one - simple search. -

- More About Us -
- - Discover a place you'll love to live. -
-
-
- - -
-
-
- - Besnik. - - -
- Stars -
-
- -
-

More than 45,000+ companies trust besnik

-

5 Star Ratings (2k+ Review)

-
- -
- - MeUndies - - - slack - - - amazon - - - WooCommerce - - - sitepoint - -
-
-
- - -
-
-

How its works?

-

- Everything you need to know when you're looking to buy, - rent, or sell - all in one place. -

- - - - -
- Sell Full Guidelines -
-
-
- - - - - -
-
-
-
- You’ve found a neighborhood you love. - - -
-
- 40,000+ - trend -
-

By avarage for 2 bedroom apments in San Francisco, CA

-
- -
-
- - -
-
- - - - -
-
- - - -
-
- - -
-
- - -
B
-
-
- - -
-
- - -
-
-
-
-
-

You’ve found a neighborhood you love.

-

- When you own a home, you’re committing to living in one location for a while. In a recent Trulia survey, we found that five out of six respondents said finding the right neighborhood -

-
-
- -
-
- 2,500 -

Homes For Sale

-
-
- 5,000+ -

Homes Recently Sold

-
-
- 170+ -

Price Reduced

-
-
-
-
- - -
-
-
-
-

Subscribe to our Newsletter!

-

Subscribe to our newsletter and stay updated.

- Subscribe -
- Subscribe to our Newsletter! -
-
-
-
- - - - + + + + Besnik + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
+ + +
+ + + + + + +
+ + Besnik. + + + + +
+
+ +
+ +
+
+
+
+

Welcome to Besnik Agency

+

+ Discover a place you'll love to live. +

+

+ Get the best real estate deals first, before + they hit the mass market! HOT FORECLOSURE DEALS + with one simple search. +

+ More About Us +
+ + Discover a place you'll love to live. +
+
+
+ + +
+
+
+ + Besnik. + + +
+ Stars +
+
+ +
+

+ More than 45,000+ companies trust besnik +

+

5 Star Ratings (2k+ Review)

+
+ +
+ + MeUndies + + + slack + + + amazon + + + WooCommerce + + + sitepoint + +
+
+
+ + +
+
+

How its works?

+

+ Everything you need to know when you're looking to buy, + rent, or sell - all in one place. +

+ + + + +
+ Sell Full Guidelines +
+
+
+ + + + + +
+
+
+
+ You’ve found a neighborhood you love. + + +
+
+ 40,000+ + trend +
+

+ By avarage for 2 bedroom apments in San + Francisco, CA +

+
+ +
+
+ + +
+
+ + + + +
+
+ + + +
+
+ + +
+
+ + +
+ B +
+
+
+ + +
+
+ + +
+
+
+
+
+

+ You’ve found a neighborhood you love. +

+

+ When you own a home, you’re committing to living + in one location for a while. In a recent Trulia + survey, we found that five out of six + respondents said finding the right neighborhood +

+
+
+ +
+
+ 2,500 +

Homes For Sale

+
+
+ 5,000+ +

Homes Recently Sold

+
+
+ 170+ +

Price Reduced

+
+
+
+
+ + +
+
+
+
+

+ Subscribe to our Newsletter! +

+

+ Subscribe to our newsletter and stay updated. +

+ Subscribe +
+ Subscribe to our Newsletter! +
+
+
+
+ + + +