EVOLUTION-NINJA

Edit File: Clinicalguideline_home_v.php

<?php echo view('NewIncludes/Header.php');?>

<div class="container-fluid">
    <div class="row">
        
        <div class="col-sm-2">
            <div class="med-side-bar">
                <div class="side-heading">
                    
                    <h3><u>Clinical Guidelines & Protocols Suite</u></h3>
                </div>
            </div>
        </div>
        
        <div class="col-sm-10">
            <div class="container-fluid">
                
                <div class="row">
                    <div class="col-sm-9"></div>
                    <div class="col-sm-2 mt-4">
						<button class="custom-btn btn-2" onclick="back()">
                        <img src="<?php echo base_url('public/assets/images/Import_fill.png'); ?>" alt="back">
                         Back</button>
					</div>
                </div>
                
                
                
                <div class="row">
                    <div class="col-sm-12 side-text">
                        <h2><b>Clinical Guidelines & Protocols Suite</b></h2>
                        <p>Systematic statements to assist doctors with an aim to standardize and improve the quality of healthcare delivery. Clinical guidelines provide guidance on the best available evidence and expert consensus for the diagnosis, treatment, and management of various medical conditions.</p>
                    </div>
                </div>
                <div class="col-sm-10 coming" >
            <div class="row">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">

<div class="container">
                        <div class="loader1"></div>
                        <div class="loader1"></div>
                        <div class="loader1"></div>
                    </div>
                    
                    <div class="card">
                        <div class="loader">
                          <p>COMING</p>
                          <div class="words">
                            <span class="word">SOON</span>
                            <span class="word">SOON</span>
                            <span class="word">SOON</span>
                            <span class="word">SOON</span>
                            <span class="word">SOON</span>
                          </div>
                        </div>
                      </div>
                </div>
                <div class="col-sm-4"></div>
            </div>
            
              
        </div>
            </div>
        </div>
    </div>
</div>

<style>
    @media only screen and (max-width: 600px){
        .card{
            margin-left: 51px !important;
        }
    }
    
    .card {
  margin-top: 280px;
  margin-left: 75px;
  border: none;

}
.loader {
  color: #00599C;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 37px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 50px;
  padding: 10px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-radius: 8px;
  width: 130%;
  margin-left: -56px;

}

.words {
  overflow: hidden;
  position: relative;
}
.words::after {
  content: "";
  position: absolute;
  inset: 0;
  color:  rgba(5, 141, 251, 1);

z-index: 20;
}

.word {
  display: block;
  height: 100%;
  padding-left: 6px;
  color:  rgba(5, 141, 251, 1);
  animation: spin_4991 4s infinite;
}

@keyframes spin_4991 {
  10% {
    -webkit-transform: translateY(-102%);
    transform: translateY(-102%);
  }

25% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }

35% {
    -webkit-transform: translateY(-202%);
    transform: translateY(-202%);
  }

50% {
    -webkit-transform: translateY(-200%);
    transform: translateY(-200%);
  }

60% {
    -webkit-transform: translateY(-302%);
    transform: translateY(-302%);
  }

75% {
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
  }

85% {
    -webkit-transform: translateY(-402%);
    transform: translateY(-402%);
  }

100% {
    -webkit-transform: translateY(-400%);
    transform: translateY(-400%);
  }
}
.loader1 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 10;
  width: 160px;
  height: 100px;
  margin-left: -80px;
  margin-top: -50px;
  border-radius: 5px;
  background: #1e3f57;
  animation: dot1_ 3s cubic-bezier(0.55,0.3,0.24,0.99) infinite;
}

.loader1:nth-child(2) {
  z-index: 11;
  width: 150px;
  height: 90px;
  margin-top: -45px;
  margin-left: -75px;
  border-radius: 3px;
  background: #3c517d;
  animation-name: dot2_;
}

.loader1:nth-child(3) {
  z-index: 12;
  width: 40px;
  height: 20px;
  margin-top: 50px;
  margin-left: -20px;
  border-radius: 0 0 5px 5px;
  background: #6bb2cd;
  animation-name: dot3_;
}

@keyframes dot1_ {
  3%,97% {
    width: 160px;
    height: 100px;
    margin-top: -50px;
    margin-left: -80px;
  }

30%,36% {
    width: 80px;
    height: 120px;
    margin-top: -60px;
    margin-left: -40px;
  }

63%,69% {
    width: 40px;
    height: 80px;
    margin-top: -40px;
    margin-left: -20px;
  }
}

@keyframes dot2_ {
  3%,97% {
    height: 90px;
    width: 150px;
    margin-left: -75px;
    margin-top: -45px;
  }

30%,36% {
    width: 70px;
    height: 96px;
    margin-left: -35px;
    margin-top: -48px;
  }

63%,69% {
    width: 32px;
    height: 60px;
    margin-left: -16px;
    margin-top: -30px;
  }
}

@keyframes dot3_ {
  3%,97% {
    height: 20px;
    width: 40px;
    margin-left: -20px;
    margin-top: 50px;
  }

30%,36% {
    width: 8px;
    height: 8px;
    margin-left: -5px;
    margin-top: 49px;
    border-radius: 8px;
  }

63%,69% {
    width: 16px;
    height: 4px;
    margin-left: -8px;
    margin-top: -37px;
    border-radius: 10px;
  }
}
@media only screen and (max-width:600px) {

.loader {
   
    margin-left: -15px;
}
.custom-btn{
    margin-right:20px;
}
}
    </style>

<script>
    function back(){
        window.location.href="<?php echo base_url('mels-cme'); ?>"
    }
    </script>
<?php echo view('NewIncludes/Footer.php');?>