Questions CSS වැඩ්ඩෙක් ගෙන් උදව්වක් ඔ්නේ.......

Lakshan-Seram · May 15, 2023

HTML:

<div class="wrapper">
  <div class="hero">
    <div class="hero-inner">
      <div class="hero-top">
        <h2>Where does it come from?</h2>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia</p>
      </div>
      <div class="hero-bottom">
        <div class="boxes">
          <div class="box">
            <div>
              <h3>950+</h3>
            </div>
            <div>
              <h5>Lorem Ipsum has been the</h5>
            </div>
          </div>
          <div class="box">
            <div>
              <h3>950+</h3>
            </div>
            <div>
              <h5>Lorem Ipsum has been the</h5>
            </div>
          </div>
          <div class="box">
            <div>
              <h3>950+</h3>
            </div>
            <div>
              <h5>Lorem Ipsum has been the</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS:

.wrapper {
  background: #eaeaea;
  padding: 20px;
  font-family: sans-serif;
  .hero {
    padding: 15px;
    border-radius: 20px;
    background: #fff;
    .hero-inner {
      /*min-height: 100vh;
      min-height: 100svh;*/
      background: url(https://th.bing.com/th/id/OIP.7slwultOcLvMIjxJLn9ItQHaE6?pid=ImgDet&rs=1) 50% 50% scroll no-repeat #ddd;
      background-size: cover;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .hero-top {
        padding: 8%;
        max-width: 45%;
        h2 {
          font-size: 32px;
          margin-bottom: 0.5em;
        }
      }
      .hero-bottom {
        position: relative;
        background: #fff;
        padding: 15px;
        border-radius: 13px;
        margin-bottom: -15px;
        margin-right: -15px;
        display: flex;
        max-width: 75%;
        margin-left: auto;
        &::before, &::after {
          content: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='%23fff' d='M0,100c8.2-0.5,41.3-3.7,68.8-31.1C96.1,41.6,99.4,8.8,100,0.6c0,33.1,0,66.3,0,99.4 C66.7,100,33.3,100,0,100z'/%3E%3C/svg%3E");
          position: absolute;
          left: -13px;
          bottom: 15px;
          width: 13px;
          height: 13px;
        }
        &::after {
          top: -13px;
          left: auto;
          bottom: auto;
          right: 15px;
        }
        .boxes {
          background: #00ff00;
          padding: 5% 2%;
          display: flex;
          align-items: center;
          border-radius: 10px;
          overflow: hidden;
          .box {
            color: #fff;
            display: flex;
            align-items: center;
            div {
              padding: 10px;
            }
            h3 {
              font-weight: 700;
              font-size: 24px;
            }
            h5 {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

wena weda asse kare godak imporvements karanna athi.. hope this helps

kolavari said:
Naha svg ekak image eka widihata denawa nemei machan..

Image eka original image ekamai .clip path ekata denne svg path ekak..svg wala thiyenne <path> kiyala..

Meka balapan path kiyala thiyena eka

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

clip paths wediya use karala na ban. responsive supports gena ehema idea ekak na. igena ganna one.
------ Post added on May 15, 2023 at 10:20 PM

Nidarshana_k · May 15, 2023

Lakshan-Seram said:

HTML:

<div class="wrapper">
  <div class="hero">
    <div class="hero-inner">
      <div class="hero-top">
        <h2>Where does it come from?</h2>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia</p>
      </div>
      <div class="hero-bottom">
        <div class="boxes">
          <div class="box">
            <div>
              <h3>950+</h3>
            </div>
            <div>
              <h5>Lorem Ipsum has been the</h5>
            </div>
          </div>
          <div class="box">
            <div>
              <h3>950+</h3>
            </div>
            <div>
              <h5>Lorem Ipsum has been the</h5>
            </div>
          </div>
          <div class="box">
            <div>
              <h3>950+</h3>
            </div>
            <div>
              <h5>Lorem Ipsum has been the</h5>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

SCSS:

.wrapper {
  background: #eaeaea;
  padding: 20px;
  font-family: sans-serif;
  .hero {
    padding: 15px;
    border-radius: 20px;
    background: #fff;
    .hero-inner {
      /*min-height: 100vh;
      min-height: 100svh;*/
      background: url(https://th.bing.com/th/id/OIP.7slwultOcLvMIjxJLn9ItQHaE6?pid=ImgDet&rs=1) 50% 50% scroll no-repeat #ddd;
      background-size: cover;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .hero-top {
        padding: 8%;
        max-width: 45%;
        h2 {
          font-size: 32px;
          margin-bottom: 0.5em;
        }
      }
      .hero-bottom {
        position: relative;
        background: #fff;
        padding: 15px;
        border-radius: 13px;
        margin-bottom: -15px;
        margin-right: -15px;
        display: flex;
        max-width: 75%;
        margin-left: auto;
        &::before, &::after {
          content: url("data:image/svg+xml,%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cpath fill='%23fff' d='M0,100c8.2-0.5,41.3-3.7,68.8-31.1C96.1,41.6,99.4,8.8,100,0.6c0,33.1,0,66.3,0,99.4 C66.7,100,33.3,100,0,100z'/%3E%3C/svg%3E");
          position: absolute;
          left: -13px;
          bottom: 15px;
          width: 13px;
          height: 13px;
        }
        &::after {
          top: -13px;
          left: auto;
          bottom: auto;
          right: 15px;
        }
        .boxes {
          background: #00ff00;
          padding: 5% 2%;
          display: flex;
          align-items: center;
          border-radius: 10px;
          overflow: hidden;
          .box {
            color: #fff;
            display: flex;
            align-items: center;
            div {
              padding: 10px;
            }
            h3 {
              font-weight: 700;
              font-size: 24px;
            }
            h5 {
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}

wena weda asse kare godak imporvements karanna athi.. hope this helps

clip paths wediya use karala na ban. responsive supports gena ehema idea ekak na. igena ganna one.
------ Post added on May 15, 2023 at 10:20 PM

Experience Beats the knowledge Supiri

Search

Latest ads

Questions CSS වැඩ්ඩෙක් ගෙන් උදව්වක් ඔ්නේ.......

jzx

Well-known member

Any.key

Well-known member

Lakshan-Seram

Well-known member

Nidarshana_k

Well-known member

Similar threads