File Manager

Editing File: /home/ubuntu/coming-soon-arav-landing-ui/index.html

<head>

.blur-up.lazyloaded {
      opacity: 1;
      filter: blur(0px);
    }
  </style>
<style>
    body {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      -webkit-transition: 0.25s ease;
      transition: 0.25s ease;
      overflow-x: hidden;
      position: relative;
      color: #fff;
      background-color:#fff;
      font-size: 16px !important;
      letter-spacing: 0.8px;
      font-family: "Barlow", sans-serif!important;
    }

.blur-up {
      filter: blur(10px);
      opacity: 0.1;
      transition: opacity 1000ms, filter 1500ms;
    }

.blur-up.lazyloaded {
      opacity: 1;
      filter: blur(0px);
    }

.error-template
    {
        padding: 40px 15px;
        text-align: center;
    }
    .error-actions
    {
        margin-top: 30px;
        margin-bottom: 15px;
    }
    .error-actions .btn
    {
        margin-right: 10px;
    }
    .coming-soon-template{
      position: relative;
    }
    .coming-soon-template h1
    {
        color: #000;
        font-size: 3em;
        font-weight: 700;
        line-height: 1.15;
        margin-bottom: 0.3em;
        background: linear-gradient(45deg, #2196F3 3.44%, #F44336 100%);
        background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: rgb(255, 255, 255) 1px 2px;
        /* text-shadow: rgba(61, 61, 61, 0.3) 1px 1px, rgba(61, 61, 61, 0.2) 2px 2px, rgba(61, 61, 61, 0.3) 3px 3px; */
    }
    .coming-soon-template h1 span{
      color:#4492A3;
    }

.coming-soon-template p{
      color:#a9a8a8;
      font-size: 1em;
      font-weight: 500;
      line-height: 1.7;
      margin-top: 1.5em;
      margin-bottom: 0.6em;
      max-width: 500px;
    }
    .coming-soon-img-sec img{
      width: 100%;
      border-top-right-radius: 16px;
      border-bottom-right-radius: 16px;
    }

.logo{
      max-width: 15em;
      margin-bottom: 1em;
    }

.coming-soon-template-box{
      /* display: flex;
      align-items: center;
      justify-content: center;
      height: calc(100vh - 100px);
      position: relative; */
      padding: 2em;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }

.coming-soon-template-left-sec{
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 2em;
      padding-top: 2em;
      padding-bottom: 2em;
    }

.coming-soon-template-card{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      /* background-color: #000; */
      border-radius: 16px;
    }

.coming-soon-sec{
      background-image: url("assets/img/bg-img.jpg");
      position: relative;
      background-position: center;
      background-size: cover;
    }

.coming-soon-sec::before{
      background-color: #0009;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: '';
    }

.coming-soon-template-card {
      backdrop-filter: blur(40px);
      background-color: #fff3;
    }

.coming-soon-template-list{
      margin-bottom: 0;
    }

.coming-soon-template-list li{
      padding-bottom: 0.5em;
    }

.coming-soon-template-list li:last-child{
      padding-bottom: 0;
    }

@media (max-width: 991.98px) {
      .resp-order-2{
        order: 2;
      }
      .coming-soon-img-sec img {
          width: 90%;
          margin: auto;
      }
      .coming-soon-img-sec {
        text-align: center;
      }
      .coming-soon-template-left-sec{
        padding: 1.5em!important;
      }
      .coming-soon-template h1{
        font-size: 3.5em;
      }
      .coming-soon-template-card{
        grid-template-columns: repeat(1, 1fr);
      }
      .coming-soon-template-right-sec{
        display: none;
      }
      .coming-soon-template-box{
        padding: 0!important;
      }
    }

@media (max-width: 767.98px) {
      .resp-order-2{
        order: 2;
      }
      .coming-soon-img-sec img {
          width: 90%;
          margin: auto;
      }
      .coming-soon-img-sec {
        text-align: center;
      }
      .coming-soon-template-left-sec{
        padding: 1.5em!important;
      }
      .coming-soon-template h1{
        font-size: 3.5em;
      }
      .coming-soon-template-card{
        grid-template-columns: repeat(1, 1fr);
      }
      .coming-soon-template-right-sec{
        display: none;
      }
      .coming-soon-template-box{
        padding: 0!important;
      }
    }

/* Large Device CSS */

@media screen and (min-width: 1400px) {
      .container {
        width: 1320px;
        max-width: 100%;
      }
    }
    @media screen and (min-width: 1600px) {
      .container {
        width: 1320px;
        max-width: 100%;
      }
    }
    @media screen and (min-width: 1900px) {
      .container {
        width: 1520px;
        max-width: 100%;
      }
    }

</style>
</head>

<body>

<section class="coming-soon-sec">
  <div class="container">
    <div class="coming-soon-template-box">
      <div class="coming-soon-template-card">
          <div class="coming-soon-template-left-sec">
              <div class="coming-soon-template">
                  <picture>
                    <source class="lazyload blur-up logo" type="image/webp" srcset="assets/img/logo.svg" />
                    <img data-src="assets/img/logo.svg" type="image/png" class="logo blur-up lazyload"
                      alt="logo" />
                  </picture>
                  <h1>Something <span>Exciting</span> is Coming!</h1>
                  <p>Stay tuned for groundbreaking solutions to help entrepreneurs:</p>
                  <ul class="list-unstyled coming-soon-template-list">
                    <li><strong>Grow faster</strong> with proven strategies.</li>
                    <li><strong>Connect smarter</strong> with the right networks.</li>
                    <li><strong>Scale globally</strong> with seamless tools.</li>
                  </ul>
              </div>
          </div>
          <div class="coming-soon-template-right-sec">
            <div class="coming-soon-img-sec">
              <picture>
                <source class="lazyload blur-up coming-soon-img" type="image/webp" srcset="assets/img/coming-soon.jpg" />
                <img data-src="assets/img/coming-soon.jpg" type="image/png" class="coming-soon-img blur-up lazyload"
                  alt="coming-soon-img" />
              </picture>
            </div>
          </div>
      </div>
    </div>
</div>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  
</body>

</html>

Back to Directory File Manager