diff --git a/src/css/our-yachts.css b/src/css/our-yachts.css index 2e8df96..2c7a88a 100644 --- a/src/css/our-yachts.css +++ b/src/css/our-yachts.css @@ -1,20 +1,64 @@ -/* @media screen and (min-width: 768px) { +.container { + margin-left: auto; + margin-right: auto; +} + +@media screen and (min-width: 320px) and (max-width: 767px) { + .container { + max-width: 375px; + padding-left: 20px; + padding-right: 20px; + } + + .section { + padding-bottom: 80px; + } +} + +@media screen and (min-width: 768px) { + .section { + padding-bottom: 150px; + } +} + +@media screen and (min-width: 768px) and (max-width: 1279px) { .container { - margin-right: auto; - margin-left: auto; max-width: 768px; + padding-left: 32px; + padding-right: 32px; } -} */ +} -@media screen and (max-width: 767px) { -.benetti-oasis-card, -.belle-anna-card { - display: none; +@media screen and (min-width: 1280px) { + .container { + padding-left: 50px; + padding-right: 50px; + } } +@media screen and (min-width: 1280px) and (max-width: 1439px) { + .container { + max-width: 1280px; + } } + +@media screen and (min-width: 1440px) { + .container { + max-width: 1440px; + } +} + +@media screen and (max-width: 767px) { + + .benetti-oasis-card, + .belle-anna-card { + display: none; + } + +} + .our-yachts-section-title { - /*TYPOGRAPHY*/ + /*TYPOGRAPHY*/ color: #FBFBFB; text-align: center; font-family: Inter; @@ -41,24 +85,47 @@ .our-yachts-section-title { max-width: 714px; } + + .yacht-title { + width: 313px; + } + + .yacht-params { + width: 313px; + } +} + +@media screen and (min-width: 1440px) { + + .yacht-title { + width: 328px; + } + + .yacht-params { + width: 328px; + } } + .our-yahts-list { display: flex; justify-content: center; align-items: center; } + @media screen and (min-width: 768px) { .our-yahts-list { display: flex; /* justify-content: space-between; */ align-items: center; gap: 32px; -} + } + } .our-yahts-card { display: flex; flex-direction: column; + align-items: center; row-gap: 32px; padding: 16px 16px 32px 16px; background-color: #FBFBFB; @@ -67,15 +134,18 @@ margin-left: auto; margin-right: auto; } + @media screen and (min-width: 768px) { .our-yahts-card { width: calc((100% - 32px)/2); } } + @media screen and (min-width: 1280px) { .our-yahts-list { gap: 25px; } + .our-yahts-card { width: calc((100% - 50px)/3) } @@ -87,52 +157,64 @@ row-gap: 16px; } */ .yacht-name { - color: #1B414B; - font-family: Inter; - font-size: 14px; - font-style: normal; - font-weight: 500; - line-height: 1.18; - /* 16.52px */ - letter-spacing: -0.05em; - text-transform: uppercase; - justify-content: flex-start; - gap: 16px 125px; - display: flex; - position: relative; - /* padding-left: 16px; - padding-right: 16px; */ - margin: 0 auto; - } + color: #1B414B; + font-family: Inter; + font-size: 14px; + font-style: normal; + font-weight: 500; + line-height: 1.18; + letter-spacing: -0.05em; + text-transform: uppercase; + +} + +.yacht-title { + width: 270px; + display: flex; + justify-content: space-between; + position: relative; +} + @media screen and (min-width: 768px) { .yacht-name { gap: 16px 112px; - font-size: 16px; + font-size: 16px; + } + + .yacht-title { + width: 272px; + } + + .yacht-params { + width: 272px; } + .benetti-card { justify-content: flex-start; gap: 16px 22px; display: flex; - + } + .benetti-card-overflow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 147px; - + } } -.yacht-name:after { + +.yacht-title:after { color: rgba(4, 3, 6, 0.10); background-color: rgba(4, 3, 6, 0.10); content: ""; width: 100%; position: absolute; - bottom:-16px; + bottom: -16px; height: 1px; - + } .yacht-class { @@ -143,38 +225,45 @@ opacity: 0.4; text-align: end; } + @media screen and (min-width: 768px) { .yacht-class { font-size: 13px; } - + } + .yacht-params { display: flex; - flex-wrap: wrap; - justify-content: flex-start; - gap: 6px 114px; - margin: 0 auto; + justify-content: space-between; + /* gap: 16px 114px; */ + width: 270px; + flex-shrink: 1; + flex-grow: 0; /* white-space: nowrap; */ - - - + + + + } + @media screen and (min-width: 768px) { .yacht-params { gap: 6px 116px; } + .benetti-params { gap: 6px 104px; } } .yacht-params-names { - - + + text-transform: uppercase; opacity: 0.4; } + /* @media screen and (min-width: 768px) { .yacht-params-names { color: #040306; @@ -200,9 +289,7 @@ letter-spacing: 0.03em; } } */ -.yacht-params-values { - -} +.yacht-params-values {} .yaht-rental-link-button { margin-top: 40px; @@ -223,7 +310,7 @@ /* 128.571% */ letter-spacing: -0.28px; background-color: inherit; - + } @media screen and (max-width: 767px) { @@ -233,7 +320,7 @@ display: none; } -} +} @media screen and (max-width: 1199px) { .belle-anna-card { diff --git a/src/partials/our-yachts.html b/src/partials/our-yachts.html index 6a538d8..a216039 100644 --- a/src/partials/our-yachts.html +++ b/src/partials/our-yachts.html @@ -1,148 +1,162 @@
-
-

Choose your dream yacht and sail away into the sunset

- + +
+ +
  • + + + + BENETTI OASIS 40M BO122 + +
    +

    + Benetti oasis 40m bo122 +

    +

    Luxury Yahts

    +
    +
    +
      +
    • LENGTH
    • + +
    • SHIPYARD
    • + +
    • BUILT
    • + +
    • GUESTS
    • + +
    • PRICE
    • +
    +
      +
    • 41m (133ft)
    • +
    • Benetti
    • +
    • 2025
    • +
    • 10 in 5 cabins
    • +
    • €23,210,000
    • +
    +
    +
  • +
  • + + + + BELLE ANNA + +
    +

    BELLE ANNA

    +

    Luxury Yahts

    +
    +
    +
      +
    • LENGTH
    • + +
    • SHIPYARD
    • + +
    • BUILT
    • + +
    • GUESTS
    • + +
    • PRICE
    • +
    +
      +
    • 50m(155ft)
    • +
    • ISA
    • +
    • 2012
    • +
    • 12 in 6 cabins
    • +
    • €21,000,000
    • +
    +
    +
  • + + +