Untitled

mail@pastecode.io avatar
unknown
plain_text
a year ago
20 kB
2
Indexable
Never
/// HTML ///
********

<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./SCSS/index.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <title>Document</title>
  <script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js”
    integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
    crossorigin=”anonymous”></script>

  <script src=”https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js”
    integrity=”sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/”
    crossorigin=”anonymous”></script>
</head>

<body>
  <div class="w-100">
    <div class="w-100 d-flex justify-content-center"><img src="./image/message.png" class="msg-img mt-5 mb-2"
        alt="MESSAGE"></div>
    <ul class="nav container-fluid bg-highlight d-flex justify-content-center">
      <li class="nav-item">
        <a class="nav-cont nav-link active text-dark fs-5" aria-current="page" href="#">Nav1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-dark fs-5" href="#">Nav2</a>
      </li>
      <li class="nav-item dropdown" style="display: flex; align-items: center; position: relative;">
        <a class="nav-link text-dark fs-5" href="#">Nav3</a><span style="color: rgb(173, 165, 165); position: absolute; left: 85%; bottom: 30%;"><img style="width: 14px;" src="./image/dropD.png" alt="dropD"></span>
      </li>
      <li class="nav-item" style="display: flex; align-items: center; position: relative;">
        <a class="nav-link text-dark fs-5" href="#" tabindex="-1">Nav4</a><span style="color: rgb(173, 165, 165); position: absolute; left: 85%; bottom: 30%;"><img style="width: 14px;" src="./image/dropD.png" alt="dropD"></span>
      </li>
      <li class="nav-item">
        <a class="nav-link text-dark fs-5" href="#" tabindex="-1">Nav5</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-dark fs-5" href="#" tabindex="-1">Nav6</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-dark fs-5" href="#" tabindex="-1">Nav7</a>
      </li>
      <li class="nav-item">
        <a class="nav-link text-dark fs-5" href="#" tabindex="-1">Nav8</a>
      </li>
    </ul>

    <hr>

    <div class="mb-5 bg-light w-100 d-flex justify-content-end">
      <div class="first-container">
        <h2 class="first-heading mt-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
        <p class="first-para mt-3 fs-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo
          est.Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim.
          Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
        <button class="mt-5 first-button text-white bg-primary">Check Pricing</button>
      </div>
      <img class="second-img" src="./image/first.png" alt="first">
    </div>
    
    <div class="mt-5 w-100 d-flex flex-column align-items-center">
      <h3 class="second-heading">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</h3>
      <div class="d-flex justify-content-center">
        <div class="cards">
          <h5 class="title">Lorem ipsum dolor sit .</h5>
          <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittisnunc. In hac habitasse.</p>
        </div>
  
        <div class="cards">
          <h5 class="title">Lorem ipsum dolor sit .</h5>
          <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittisnunc. In hac habitasse.</p>
        </div>

        <div class="cards">
          <h5 class="title">Lorem ipsum dolor sit .</h5>
          <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittisnunc. In hac habitasse.</p>
        </div>
      </div>
    </div>

    <div class="d-flex flex-column align-items-center">
      <h3 class="third-heading">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</h3>
      <div class="w-100 h-600px d-flex justify-content-center">
        <div class="cards-2">
          <img class="third-1" src="./IMAGE/thirdrow-1.png" alt="">
          <h5 class="title">Lorem ipsum dolor sit .</h5>
          <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
        </div>
  
        <div class="cards-2">
          <img class="third-2" src="./IMAGE/thirdrow-2.png" alt="">
          <h5 class="title">Lorem ipsum dolor sit .</h5>
          <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
        </div>

        <div class="cards-2">
          <img class="third-3" src="./IMAGE/thirdrow-3.png" alt="">
          <h5 class="title">Lorem ipsum dolor sit .</h5>
          <p class="mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
        </div>
      </div>
    </div>
      <h3 class="fourth-heading">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</h3>
      <div class="cont-1-main-container">
        <div class="cont-container">
          <img src="./IMAGE/handDollar.png" alt="handDoller">
          <h4 class="cont-container-heading">Lorem ipsum dolor sit .</h4>
        </div>
        <p class="cont-container-para">adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. ut maximus ante. Suspendisse varius dolor nec bibendum dignissim</p>
        <button class="cont-container-button bg-primary text-white">Check Pricing</button>
      </div>

      <div class="cont-2-main-container">
        <div class="cont-container">
          <img src="./IMAGE/arrow.png" alt="arrow">
          <h4 class="cont-container-heading">Lorem ipsum dolor sit .</h4>
        </div>
        <p class="cont-container-para">adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. ut maximus ante. Suspendisse</p>
        <button class="cont-container-button bg-primary text-white">Check Pricing</button>
      </div>

      <div class="cont-3-main-container">
        <div class="cont-container">
          <img src="./IMAGE/zoom.png" alt="arrow">
          <h4 class="cont-container-heading">Lorem ipsum dolor sit .</h4>
        </div>
        <p class="cont-container-para">adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. ut maximus ante. Suspendisse varius dolor nec bibendum dignissim</p>
        <button class="cont-container-button bg-primary text-white">Check Pricing</button>
      </div>

      <div class="cont-4-main-container">
        <div class="cont-container">
          <img src="./IMAGE/moneyBack.png" alt="arrow">
          <h4 class="cont-container-heading">Lorem ipsum dolor sit .</h4>
        </div>
        <p class="cont-container-para">adipiscing elit. Ut sed commodo est.Pellentesque eu placerat mauris. ut maximus ante. Suspendisse</p>
        <button class="cont-container-button bg-primary text-white">Check Pricing</button>
      </div>
      <h3 class="fifth-heading">Lorem ipsum dolor sit .</h3>

      <div class="main-box w-75 mx-auto px-4 py-4 position-relative" style="height: 300px;box-shadow: 0px 16px 48px #00000029;background: #F8FAFC 0% 0% no-repeat padding-box;border-radius: 25px;">
        <div class="main-1-box d-flex align-items-center">
          <img class="main-1-box-img" src="./image/star.png" alt="star">
          <h4 class="main-1-box-heading ms-2" style="font-size: 25px;">Lorem ipsum dolor sit .</h4>
        </div>
        <div class="d-flex my-5 position-absolute justify-content-center gap-3" style="bottom: -115px; width: 90%; left: 60px;">
        <div class="card" style="width: 250px;box-shadow: 0px 16px 48px #00000029;height: fit-content; border-radius: 25px;border: none;">
            <div class="card-body">
              <div class="d-flex justify-content-between">
                <div class="d-flex">
                  <div style="width: 30px;">
                    <img src="./image/a1.png" alt="avatar" class="rounded" style="width: 100%;"/>
                  </div>
                  <div class="d-flex flex-column ms-2">
                    <h5 style="font-size: 0.8rem; font-family: normal normal 600 13px/18px Nunito Sans;">Jhone Doe</h5>
                    <span style="font-size: 0.7rem; color: grey;">CEO</span>
                  </div>
                </div>
                <div class="d-flex">
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                </div>

              </div>
              <p class="my-5 mt-4 mb-1" style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
            </div>
        </div>
         <div class="card" style="width: 250px;box-shadow: 0px 16px 48px #00000029;height: fit-content; border-radius: 25px;border: none;">
            <div class="card-body">
              <div class="d-flex justify-content-between">
                <div class="d-flex">
                  <div style="width: 30px;">
                    <img src="./image/a2.png" alt="avatar" class="rounded" style="width: 100%;"/>
                  </div>
                  <div class="d-flex flex-column ms-2">
                    <h5 style="font-size: 0.8rem; font-family: normal normal 600 13px/18px Nunito Sans;">Amanda green</h5>
                    <span style="font-size: 0.7rem; color: grey;">Operations Manager</span>
                  </div>
                </div>
                <div class="d-flex">
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                </div>

              </div>
              <p class="my-5 mt-4 mb-1" style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
            </div>
        </div>
         <div class="card" style="width: 250px;box-shadow: 0px 16px 48px #00000029;height: fit-content; border-radius: 25px;border: none;">
            <div class="card-body">
              <div class="d-flex justify-content-between">
                <div class="d-flex">
                  <div style="width: 30px;">
                    <img src="./image/a3.png" alt="avatar" class="rounded" style="width: 100%;"/>
                  </div>
                  <div class="d-flex flex-column ms-2">
                    <h5 style="font-size: 0.8rem; font-family: normal normal 600 13px/18px Nunito Sans;">Sam Cooper</h5>
                    <span style="font-size: 0.7rem; color: grey;">Customer Service Manager</span>
                  </div>
                </div>
                <div class="d-flex">
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                  <div style="width: 10px;">
                    <img src="./image/rating.png" alt="rating" style="width: 100%;"/>
                  </div>
                </div>

              </div>
              <p class="my-5 mt-4 mb-1" style="font-size: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed commodo est. Pellentesque eu placerat mauris. Etiam ut maximus ante. Suspendisse varius dolor nec bibendum dignissim. Proin in diam a justo sollicitudin mattis eu sagittis nunc. In hac habitasse platea dictumst.</p>
            </div>
        </div>
        </div>
        <span style="position: absolute; right: -15px; bottom: 20%; width: 15px; height: 15px; padding: 20px; border-radius: 100%; display: flex;justify-content: center; align-items: center; background-color: rgb(255, 255, 255); box-shadow: 0.5px 0.5px 10px black
        ;"><img style="width: 20px; height: 20px;" src="./image/leftArr.png" alt="leftArr"></span>
      </div>
      </div>

      <h3 class="sixth-heading">Lorem ipsum dolor sit amet,consectetur adipiscing elit.</h3>

      <div style="width: 60%; padding-bottom: 100px; padding-top: 100px;" class="last-row d-flex justify-content-between mx-auto align-items-center">
        <div>
          <img style="width: 80px; height: 80px; padding-bottom: 10px;" src="./image/fire.png" alt="fire">
          <h5>Forms On Fire</h5>
        </div>

        <div>
          <img style="width: 80px; height: 80px; padding-bottom: 10px;" src="./image/electro.png" alt="fire">
          <h5>ElectroNeek Studio IDE</h5>
        </div>

        <div>
          <img style="width: 80px; height: 80px; padding-bottom: 10px;" src="./image/jot.png" alt="fire">
          <h5>Jot form</h5>
        </div>
      </div>
      <div class="text-white d-flex justify-content-center align-items-end" style="background: #000000 0% 0% no-repeat padding-box; padding-top: 250px; padding-bottom: 50px;">
        <div class="d-flex justify-content-between" style="width: 11%;">
          <h5 style="font-family: normal normal normal 18px/24px Nunito Sans; font-size: 20px;">©</h5>
          <h5 style="font-family: normal normal normal 18px/24px Nunito Sans; font-size: 20px;">Helplama 2021</h5>
        </div>
      </div>
  </div>
</body>
</html>


//// SCSS ////
********

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

// $heading:
//     #000000,
//     normal normal 900 40px/54px Nunito Sans;

h5{
    margin-bottom: 0!important;
}

.msg-img {
    width: 10rem;
    display: block;
}

hr {
    height: 20px;
    background-color: aqua;
}

.first-container {
    width: 40%;
}

.first-heading {
    color: #000000;
    font-family: normal normal 900 40px/54px Nunito Sans;
    font-weight: bold;
}

.first-para {
    font: normal normal normal 18px/24px Nunito Sans;
}

.first-button,
.cont-container-button {
    font-family: normal normal 600 23px/31px Nunito Sans;
    border-radius: 30px;
    border: none;
    padding: 10px 30px;
    font-size: large;
}

.second-img {
    width: 40%;
    height: 450px;
    margin-right: 40px;
}

.second-heading {
    color: #000000;
    font-family: normal normal bold 35px/47px Nunito Sans;
    font-weight: bold;
}

.third-heading {
    font-family: normal normal bold 35px/47px Nunito Sans;
    font-weight: bold;
    color: #000000;
    padding: 100px 0 50px 0;
}

.cards {
    width: 21%;
    margin: 30px;
    padding: 20px 15px 10px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    border: 1px solid rgb(230, 223, 223);
}

.cards-2 {
    width: 21%;
    margin: 30px;
    padding: 20px 15px 10px 15px;
    display: flex;
    flex-direction: column;
    // align-items: center;
    border-radius: 20px;
    // border: 1px solid rgb(230, 223, 223);

    .title {
        font-size: 16px;
        font-weight: bold;
    }
}

.mt-3 {
    font-size: 15px;
}

.third-1 {
    width: 200px;
    height: 200px;
    padding-bottom: 30px;
}

.third-2 {
    width: 200px;
    height: 200px;
    padding-bottom: 30px;
}

.third-3 {
    padding-bottom: 30px;
    width: 200px;
    height: 200px;
}

.fourth-heading, .sixth-heading{
    font-family: normal normal bold 35px/47px Nunito Sans;
    font-weight: bold;
    color: #000000;
    padding: 100px 0 50px 0;
    text-align: center;
}

.sixth-heading{
    font-family: normal normal bold 35px/47px Nunito Sans;
    font-weight: bold;
    color: #000000;
    padding: 100px 0 50px 0;
    text-align: center;
    margin-top: 200px;
}

.fifth-heading{
    font-family: normal normal bold 35px/47px Nunito Sans;
    color: #000000;
    padding: 100px 0 50px 0;
    text-align: center;
}

.cont-1-main-container {
    width: 50%;
    padding-left: 100px;
    margin-right: auto;
}

.cont-2-main-container {
    width: 50%;
    padding-right: 100px;
    margin-left: auto;
}

.cont-3-main-container {
    width: 50%;
    padding-left: 100px;
    margin-right: auto;
}

.cont-4-main-container {
    width: 50%;
    padding-right: 100px;
    margin-left: auto;
}

.cont-container {
    width: 65%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cont-container-heading {
    font-family: normal normal bold 24px/32px Nunito Sans;
    color: #000000;
}

.cont-container-para {
    font-family: normal normal normal 21px/28px Nunito Sans;
    color: #000000;
    font-size: 17px;
    padding: 20px 0;
}

.main-1-box-heading{
    font-family: normal normal bold 24px/32px Nunito Sans;
    color: #000000;
    font-weight: bold;
}

.main-1-box-img {
   width: 64px;
}

@media screen and (max-width: 600px) {
    ul {
        width: 30%;
        border: 1px solid red;
        display: flex;
    }

    .fs-5{
        font-size: 5%;
    }
}

@include media-breakpoint-up(sm) {
    .nav-link {
        font-size: 2px;
    }
 }