read more main

Read more

import style

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader1 {
position: inherit;
top:inherit;
left: 0;
  right:0;
 text-align: center;
  z-index: 1;
  width: 50px;
  height: 50px;
 margin: auto;
}

.loader1:before {
  content: '';
  display: block;
  padding-top: 200%;
}

.circular1{
  -webkit-animation: rotate 2s linear infinite;
  animation: rotate 2s linear infinite;
  height: 100%;
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  width: 100%;
  position: inherit;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.path1{
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  -webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
}
 @-webkit-keyframes 
rotate {  100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
 @keyframes 
rotate {  100% {
 -webkit-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
@-webkit-keyframes 
dash {  0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}
@keyframes 
dash {  0% {
 stroke-dasharray: 1, 200;
 stroke-dashoffset: 0;
}
 50% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -35;
}
 100% {
 stroke-dasharray: 89, 200;
 stroke-dashoffset: -124;
}
}
@-webkit-keyframes 
color {  100%, 0% {
 stroke: #d62d20;
}
 40% {
 stroke: #0057e7;
}
 66% {
 stroke: #008744;
}
 80%, 90% {
 stroke: #ffa700;
}
}
@keyframes 
color {  100%, 0% {
 stroke: #d62d20;
}
 40% {
 stroke: #0057e7;
}
 66% {
 stroke: #008744;
}
 80%, 90% {
 stroke: #ffa700;
}


.myDiv1 {
  display: none; 

}
  </style> 

  <style>
.loadmorex {

 position: absolute;

left: 0;

  right:0;

  font-size:17px;

  text-align: center;

  z-index: 1;

   margin: auto;

 color: #000 !important;

letter-spacing:02px;

text-decoration: none;

background: #dddfff;

padding: 5px;

width:45%;

border-radius: 25px;

display: inline-block;

border: none;

transition: all 0.4s ease 0s;

}

.loadmorex:hover {
background: #d8d8d8;
letter-spacing: 1px;
-webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
-moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
transition: all 0.4s ease 0s;
}
</style>

main section 1 last paragraph start

<!--LAST PARAGRAP START-->
<span style="font-family: 'Baloo Chettan 2', cursive;font-size:17px; font-weight:400;">

main sectin last paragraph end

<span id="dots">.......</span></span><!--LAST PARAGRAP END-->
<!-- MAIN SECTION END -->

<!--For Loading Part 1-->
<div id="loader1" class="loader1" style="display:none;" > 
</div>
<div style="display:none;" id="myDiv1" class="animate-bottom">
<!-- read more hide SECTION start -->

read more hide areas end

<!-- read more hide SECTION end -->
</div><br/>
 <button class="loadmorex" id="hideme" onclick="myFunction()" type="button">Read more<i class='fas fa-caret-down'></i></button>

<!--TIP : CHECK ALL ID NAME MATCH-->
<!-- By Suntrident.com-->
<br/><br/>

<script>
var myVar;

function myFunction() {
 // on button click below line displays loader :
 document.getElementById("loader1").style.display = "inline";
 
 // on button click below line hides button:
        document.getElementById("hideme").style.display = "none";
  document.getElementById("dots").style.display = "none";    
// set on-timeout display content in below line:
  myVar = setTimeout(showPage, 200);
}

function showPage() {
  document.getElementById("loader1").style.display = "none";
    document.getElementById("myDiv1").style.display = "inline";
      
}
</script>
<!-- By Suntrident.com-->

read more main

import style

main section 1 last paragraph start

main sectin last paragraph end

read more hide paragrsph 1 start

read more hide paragrsph 1 end

read more hide areas end

Post a Comment

Contact Form