<?xml version='1.0' encoding='UTF-8'?><?xml-stylesheet href="http://www.blogger.com/styles/atom.css" type="text/css"?><feed xmlns='http://www.w3.org/2005/Atom' xmlns:openSearch='http://a9.com/-/spec/opensearchrss/1.0/' xmlns:blogger='http://schemas.google.com/blogger/2008' xmlns:georss='http://www.georss.org/georss' xmlns:gd="http://schemas.google.com/g/2005" xmlns:thr='http://purl.org/syndication/thread/1.0'><id>tag:blogger.com,1999:blog-3412162110564696411</id><updated>2025-10-04T08:56:36.174-07:00</updated><title type='text'>Personal Web Access</title><subtitle type='html'></subtitle><link rel='http://schemas.google.com/g/2005#feed' type='application/atom+xml' href='https://firmansyahbio.blogspot.com/feeds/posts/default'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/3412162110564696411/posts/default'/><link rel='alternate' type='text/html' href='https://firmansyahbio.blogspot.com/'/><author><name>Destruction Frasa</name><uri>http://www.blogger.com/profile/11029937173875469347</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXHXslthjshUwhvxQD9Qsp3manECja60DFdnmS5TtAM7CfL784DPK7G8gI5OTQT6UawYdBtLkukOXKkXcn5Js3hAgsrkebMKU9pTeiinD8q5rZxYb04D7zilXxf9BXS1a0PH5h3GmwZZckAu8sxMtJuPUscanpP1RH8Jqwt0Io6QMrF0/s220/Screenshot_20241126-012745_2.jpg'/></author><generator version='7.00' uri='http://www.blogger.com'>Blogger</generator><openSearch:totalResults>3</openSearch:totalResults><openSearch:startIndex>1</openSearch:startIndex><openSearch:itemsPerPage>25</openSearch:itemsPerPage><entry><id>tag:blogger.com,1999:blog-3412162110564696411.post-5128137618936307525</id><published>2025-02-05T11:39:00.000-08:00</published><updated>2025-02-05T11:39:53.910-08:00</updated><title type='text'>FaceShop</title><content type='html'></content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/3412162110564696411/posts/default/5128137618936307525'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/3412162110564696411/posts/default/5128137618936307525'/><link rel='alternate' type='text/html' href='https://firmansyahbio.blogspot.com/2025/02/faceshop.html' title='FaceShop'/><author><name>Destruction Frasa</name><uri>http://www.blogger.com/profile/11029937173875469347</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXHXslthjshUwhvxQD9Qsp3manECja60DFdnmS5TtAM7CfL784DPK7G8gI5OTQT6UawYdBtLkukOXKkXcn5Js3hAgsrkebMKU9pTeiinD8q5rZxYb04D7zilXxf9BXS1a0PH5h3GmwZZckAu8sxMtJuPUscanpP1RH8Jqwt0Io6QMrF0/s220/Screenshot_20241126-012745_2.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-3412162110564696411.post-5363304390373373877</id><published>2025-01-27T04:53:00.000-08:00</published><updated>2025-02-11T11:52:51.179-08:00</updated><title type='text'>EXTEO - Demo Template</title><content type='html'>&lt;script src=&#39;https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js&#39;&gt;&lt;/script&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://exfrasa.github.io/template/exteo/file/css/style.css&quot; title=&quot;style&quot;&gt;
  




&lt;style&gt;
  @import url(&#39;https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&amp;display=swap&#39;);
  :root {
   --var-color-font: #f0f4f4;
   --var-color-page: #0d141e;
  }
  html {
    box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-x: hidden !important;
  }
  .post,
  body {
    background: var(--var-color-page);
    font-family: &quot;Poppins&quot;, sans-serif;
  }
  header {
    top:-5px;
    color: var(--var-color-font);
    text-align: center;
    min-height: 500px;
    background: var(--var-color-page);
    margin: 0;
    padding: 20% 1.5em;
    line-height: 1.6;
    overflow: hidden;
    position: relative;
    &amp; &gt; h1 {
      z-index: 5;
      margin: 0.9em 0%;
      font-size: 0.5em;
      position: relative;
    }
    &amp; &gt; p {
    z-index: 5;
    text-align: center;
    max-width: 800px;
    margin: 0.5em auto;
    font-size: 0.8em;
      position: relative;
    }
    &amp;::before {
          content:&quot;&quot;;
          z-index: 1;
          top: -40%;
          left: -20%;
          bottom: auto;
          height: calc(80% - 20px);
          width: calc(70% - 20px);
          display: block;
          position: absolute;
      
          transform: skewX(-40deg);
      transform: skewY(-40deg);
      transform: rotate(-60deg);
          background-image: linear-gradient(to top, #0d141e 5%, #4b79a1 95%);
      }
  }
  main {
    min-height: 400px;
    background: var(--var-color-page);
  }
  .navigasi {
    top: 0;
    left:0;
    z-index: 100;
    height: 50px;
    padding: 5px 15px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    background: rgba(13, 20, 30,0.9);
    
    overflow:hidden;
    &amp; .navigasi-bars {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: start;
      &amp; h1 {
        margin:0;
        margin-left: 10px;
      }
      &amp; a.logo {
        text-decoration:none;
        color:#fff;
        font-weight: 900;
        font-family: &quot;Poppins&quot;, sans-serif;
      }
    }
   
    &amp;.active {
     &amp; button {
       
       &amp; svg {
         &amp; .openmenu {
           display: none;
         }
         &amp; .closemenu {
           display: block;
         }
       }
      }
     &amp; .navbars-list {
       opacity:1;
       height: auto;
       z-index: 10; 
       display: block;
       max-height: calc(100% - 50px);
       transition: 0.3s;
       overflow-Y: scroll;
       overflow-X: hidden;
      }
    }
  
  }
  .navigasi {
    &amp;  button.menu-toggle {
        display: none;
        }
    &amp; button {
  width: 40px;
  height: 40px;
  cursor: pointer;
 /* display: flex;*/
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
    &amp; svg {
      color:#fff;
      width: 30px;
      height: 30px;
      &amp; .closemenu {
        display: none;
      }
    }
    
  }
   @media (max-width: 640px){
    
      &amp;  button.menu-toggle {
        display: flex;
        }
      }
    
 }
.content-title {
  font-size: 2em;
  line-height: 40px;
  color: var(--text-color-dark);
  font-weight: 600;

  span {
    font-weight: 400;
  }
}  


  .navbars-list {
  width: 100%;
  opacity: 1;
  position: relative;
  &amp; ul {
    width: 100%;
    &amp; li {
      display: inline-block;
      margin: 2px 0px;
      &amp; a {
        color: #fff;
        font-size: 1.4em;
        font-weight: 500;
        padding: 10px 10px;
        padding-left: 10px;
        letter-spacing: 1px;
        text-decoration: none;
        display: block;
        position: relative;
        transition: 0.2s;
        &amp;::before {
          content:&quot;&quot;;
          top: auto;
          left: 2px;
          bottom: 5px;
          height: 4px;
          width: calc(100% - 4px);
          display: none;
          position: absolute;
          background: #fff;
          }
        }
        &amp; a:hover,&amp; a:focus {
          letter-spacing: 1.5px;
          background-color: #283e51;
          &amp;::before {
            display: block;
            }
        }
      }
    }
  
  @media (max-width: 1007px){
     top: 50px;
     left: 0px;
     z-index: 10;
     height: 0px;
     text-align: left;
     position: fixed;
     background: rgba(13, 20, 30,0.9);
     opacity:0;
     display: none;
     transition: 0.3s;
     &amp; ul {
       &amp; li {
         display: block;
         &amp; a {
           padding-left: 25px;
           &amp;::before {
             top: 2px;
             left: 5px;
             bottom: auto;
             height: calc(100% - 4px);
             width: 4px;
           }
         }
       }
     }
     &amp;.active {
       
     }
   }
 }
 .navbars-list-overlay {
   top: 50px;
   left: 0px;
   z-index: 1;
   display: none;
   width: 100%;
     height: calc(100% - 50px);
     text-align: left;
     position: fixed;
     background: rgba(13, 20, 30,0.3);
     opacity: 1;
     transition: 0.2s;
   &amp;.active {
     display: block;
     }
   }
  
.section {
  color: var(--var-color-font);
  
  width: 100%;
  height: 600px;
  display: block;
  padding-top: 60px;
  text-align: center;
  position: relative;
  border-top: 3px #283e51 solid;
  background: var(--var-color-page);
  &amp;.section-1 {
    background-image: linear-gradient(to right, #4b79a1, #283e51);
    }
  &amp;.section-3 {
    background: #055ef7;
    }
  }
  
 #loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: calc(100% - 0px);
  z-index: 9999;
  background: #0d141e;
  display: flex;
  align-items: center;
  justify-content: center;
}
#loader .loading-page {
 width: 100%;
height: 100%;
background: var(--bg-loading);
display: flex;
  align-items: center;
  justify-content: center;
}
#loader .loading-page .page-load{
 display: flex;
  align-items: center;
  justify-content: center;
 position: relative;
 border-radius: 50%;
 width: 100px;
 height: 100px;
 top: 0%;
 left: 0%;
 right: 0%;
 bottom: 0%;
  background: var(--bg-page);
/* background: #ceecee;*/
 /* background-image:
    linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px),
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;*/
 z-index: 9999;
}
 
&lt;/style&gt;
&lt;style&gt;
.post-title {display:none}
.item-view .page_body{
  
}
@media (max-width: 1007px){
  
}
@media (max-width: 800px){
  
}
@media (max-width: 640px){
  
}
#demo {
  width: 100%;
  max-width: 100%;
  overflow:hidden;
  &amp; &gt; div summary {
    width: 100%;
                          overflow: hidden;
                                  -webkit-box-orient: vertical;
                                  -webkit-line-clamp: 2;
                                  display: -webkit-box;
    }
  }
.post img {max-width:100%;} 
.sumcod {display: flex;}
.item-view .post-title-container {display: none;}

.item-view .sidebar-container {display: none}
.item-view {
  &amp; .page {
    &amp; .page_body {
      margin: 0;
          padding: 0;
          width: 100%;
          max-width: 100%;
      &amp; .main-page-body-content {
        margin: 0;
          padding: 0;
          width: 100%;
          max-width: 100%;
        &amp; .centered-bottom {
          margin: 0;
          padding: 0;
          width: 100%;
          max-width: 100%;
          &amp; .main,&amp; section {
            margin: 0;
          padding: 0;
          width: 100%;
          max-width: 100%;
           &amp; #Blog1 {
             margin: 0;
          padding: 0;
          width: 100%;
          max-width: 100%;
           &amp; .blog-posts {
             margin: 0;
          padding: 0;
          width: 100%;
          max-width: 100%;
             background: red;
             &amp; .post-outer-container {
                background: red;
                padding: 0;
               &amp; .post {
                margin: 0;
          padding: 0;
          width: 100%;
          max-width: 100%;
                  background: #ccc;
               }
             }
              }
            }
          }
        }
      }
    }
  }
}
.post-body {
  margin:0;
  padding:0;
  min-height: 100vh;
  background: #f1f1f1;
  }
&lt;/style&gt;

&lt;!--div id=&#39;loader&#39;&gt;
&lt;div class=&#39;loading-page&#39;&gt;
&lt;div class=&#39;page-load&#39;&gt;
&lt;div class=&#39;loader&#39;&gt;
  &lt;svg viewBox=&quot;0 0 800 800&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;circle class=&quot;spin2&quot; cx=&quot;400&quot; cy=&quot;400&quot; fill=&quot;none&quot;
      r=&quot;200&quot; stroke-width=&quot;50&quot; stroke=&quot;#FFFFFF&quot;
      stroke-dasharray=&quot;522 1400&quot;
      stroke-linecap=&quot;round&quot; /&gt;
  &lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;


&lt;/div--&gt;
&lt;!--script type=&#39;text/javascript&#39;&gt;
   $(window).load(function() {
      $(&quot;#loader&quot;).hide();
   });
&lt;/script--&gt;
&lt;header&gt;
  &lt;div class=&quot;navigasi menu-bars&quot;&gt;
   &lt;div class=&quot;navigasi-bars&quot;&gt;
   &lt;button class=&quot;menu-toggle&quot;&gt;
     &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke-width=&quot;2.0&quot; stroke=&quot;currentColor&quot; class=&quot;size-6&quot;&gt;
  &lt;path class=&quot;openmenu&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; d=&quot;M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5&quot; &gt;&lt;/path&gt;
   &lt;path class=&quot;closemenu&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; d=&quot;M6 18 18 6M6 6l12 12&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
     &lt;!--svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke-width=&quot;1.5&quot; stroke=&quot;currentColor&quot; class=&quot;size-6&quot;&gt;
  
&lt;/svg--&gt;

&lt;/button&gt;
  &lt;h1&gt;&lt;a href=&quot;&quot; class=&quot;logo&quot;&gt;EXTEO&lt;/a&gt;&lt;/h1&gt;
  &lt;/div&gt;
  &lt;nav class=&quot;navbars-list&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#product&quot;&gt;Product&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#portofolio&quot;&gt;Portofolio&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href=&quot;#information&quot;&gt;Information&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/nav&gt;
   &lt;button title=&quot;&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; fill=&quot;none&quot; viewBox=&quot;0 0 24 24&quot; stroke-width=&quot;1.5&quot; stroke=&quot;currentColor&quot; class=&quot;size&quot;&gt;
  &lt;path stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot; d=&quot;M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z&quot;&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&quot;navbars-list-overlay menu-overlay&quot;&gt;&lt;/div&gt;
  &lt;h1 class=&quot;content-title&quot;&gt;What Is Your Focus &lt;span&gt;For Today?&lt;/span&gt;&lt;/h1&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus.&lt;/p&gt;
&lt;/header&gt;
&lt;main&gt;
  
  &lt;section class=&quot;section section-1&quot; id=&quot;product&quot;&gt;
    &lt;h2&gt;Section Heading 1&lt;/h2&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus.&lt;/p&gt;
    
        
  
  &lt;/section&gt;
  &lt;section class=&quot;section section-2&quot; id=&quot;portofolio&quot;&gt;
    &lt;h2&gt;Section Heading 2&lt;/h2&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus.&lt;/p&gt;
  &lt;/section&gt;
  &lt;section class=&quot;section section-3&quot; id=&quot;information&quot;&gt;
    &lt;h2&gt;Section Heading 3&lt;/h2&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus.&lt;/p&gt;
  &lt;/section&gt;
&lt;/main&gt;
&lt;footer&gt;
  
&lt;/footer&gt;
&lt;script&gt;
 var menu_toggle = document.querySelector(&#39;.menu-toggle&#39;)
 
 var menu_bars = document.querySelector(&#39;.menu-bars&#39;)
 var menu_overlay = document.querySelector(&#39;.menu-overlay&#39;)

menu_toggle.addEventListener(&#39;click&#39;, function() {
  
  menu_bars.classList.toggle(&#39;active&#39;)
 menu_overlay.classList.toggle(&#39;active&#39;)
})

menu_overlay.addEventListener(&#39;click&#39;, function() {
  resetUI()
})

function resetUI() {
 
 menu_bars.classList.remove(&#39;active&#39;)
  menu_overlay.classList.remove(&#39;active&#39;)
  
}
&lt;/script&gt;


&lt;!--div&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus. Nulla pellentesque dignissim enim sit amet venenatis urna cursus. Sit amet justo donec enim diam. Elementum integer enim neque volutpat ac tincidunt. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut aliquam purus sit. Id interdum velit laoreet id donec ultrices tincidunt arcu. Urna nec tincidunt praesent semper feugiat nibh. Eu augue ut lectus arcu bibendum at varius. Venenatis a condimentum vitae sapien pellentesque. Facilisis magna etiam tempor orci. Mauris a diam maecenas sed enim ut sem viverra. Condimentum lacinia quis vel eros donec ac odio.&lt;/p&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus. Nulla pellentesque dignissim enim sit amet venenatis urna cursus. Sit amet justo donec enim diam. Elementum integer enim neque volutpat ac tincidunt. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut aliquam purus sit. Id interdum velit laoreet id donec ultrices tincidunt arcu. Urna nec tincidunt praesent semper feugiat nibh. Eu augue ut lectus arcu bibendum at varius. Venenatis a condimentum vitae sapien pellentesque. Facilisis magna etiam tempor orci. Mauris a diam maecenas sed enim ut sem viverra. Condimentum lacinia quis vel eros donec ac odio.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus. Nulla pellentesque dignissim enim sit amet venenatis urna cursus. Sit amet justo donec enim diam. Elementum integer enim neque volutpat ac tincidunt. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut aliquam purus sit. Id interdum velit laoreet id donec ultrices tincidunt arcu. Urna nec tincidunt praesent semper feugiat nibh. Eu augue ut lectus arcu bibendum at varius. Venenatis a condimentum vitae sapien pellentesque. Facilisis magna etiam tempor orci. Mauris a diam maecenas sed enim ut sem viverra. Condimentum lacinia quis vel eros donec ac odio.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus. Nulla pellentesque dignissim enim sit amet venenatis urna cursus. Sit amet justo donec enim diam. Elementum integer enim neque volutpat ac tincidunt. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut aliquam purus sit. Id interdum velit laoreet id donec ultrices tincidunt arcu. Urna nec tincidunt praesent semper feugiat nibh. Eu augue ut lectus arcu bibendum at varius. Venenatis a condimentum vitae sapien pellentesque. Facilisis magna etiam tempor orci. Mauris a diam maecenas sed enim ut sem viverra. Condimentum lacinia quis vel eros donec ac odio.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus. Nulla pellentesque dignissim enim sit amet venenatis urna cursus. Sit amet justo donec enim diam. Elementum integer enim neque volutpat ac tincidunt. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut aliquam purus sit. Id interdum velit laoreet id donec ultrices tincidunt arcu. Urna nec tincidunt praesent semper feugiat nibh. Eu augue ut lectus arcu bibendum at varius. Venenatis a condimentum vitae sapien pellentesque. Facilisis magna etiam tempor orci. Mauris a diam maecenas sed enim ut sem viverra. Condimentum lacinia quis vel eros donec ac odio.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus. Nulla pellentesque dignissim enim sit amet venenatis urna cursus. Sit amet justo donec enim diam. Elementum integer enim neque volutpat ac tincidunt. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut aliquam purus sit. Id interdum velit laoreet id donec ultrices tincidunt arcu. Urna nec tincidunt praesent semper feugiat nibh. Eu augue ut lectus arcu bibendum at varius. Venenatis a condimentum vitae sapien pellentesque. Facilisis magna etiam tempor orci. Mauris a diam maecenas sed enim ut sem viverra. Condimentum lacinia quis vel eros donec ac odio.&lt;/p&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu ultrices vitae auctor eu augue ut lectus arcu. Turpis tincidunt id aliquet risus. Nulla pellentesque dignissim enim sit amet venenatis urna cursus. Sit amet justo donec enim diam. Elementum integer enim neque volutpat ac tincidunt. Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Sit amet consectetur adipiscing elit ut aliquam purus sit. Id interdum velit laoreet id donec ultrices tincidunt arcu. Urna nec tincidunt praesent semper feugiat nibh. Eu augue ut lectus arcu bibendum at varius. Venenatis a condimentum vitae sapien pellentesque. Facilisis magna etiam tempor orci. Mauris a diam maecenas sed enim ut sem viverra. Condimentum lacinia quis vel eros donec ac odio.&lt;/p&gt;
  &lt;/div--&gt;
&lt;!--style&gt;
  /* The magic here that makes animations wait */ 
/*.ex-loading *,
.ex-loading *:before,
.ex-loading *:after {
  animation-play-state: paused !important;
}*/

.animated-header {
  background: #000;
 /* overflow: hidden;*/
  position: relative;
    
}

.animated-header:before {
  animation: show-background 60s .5s cubic-bezier(0,1,.5,1) forwards;
  background: url(https://cssanimation.rocks/images/random/space.jpg) no-repeat center;
  background-size: cover;
  content: &quot;&quot;;
  opacity: 0;
  height: 100vh;
  position: absolute;
  width: 100vw;
}
.loading {
  color: #aaa;
  font-size: 48px;
  display: none;
}

.ex-loading .loading {
  display: flex;}
.loading {
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  margin: 0%;
  width: 100%;
  height: 100%;
  z-index: 9999;
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  overflow: hidden;
  background: #0d141e;
  align-items: center;
  justify-content: center;
}


.loading-bars {color:#111;font-size: 30px;}


.logo svg {
  animation: show-logo 2s 1.5s cubic-bezier(0,1.79,.28,.73) forwards;
  opacity: 0;
}

@keyframes show-background {
  0% {
    opacity: 0;
    transform: none;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(2)
  }
}

@keyframes show-logo {
  0% {
    opacity: 0;
    transform: scale(.8);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.loading .loader {
  border: 5px solid #055ef7;
  border-radius: 50%;
  border-top: 5px solid #f3f3f3;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: spin-loading 2s linear infinite; /* Safari */
  animation: spin-loading 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin-loading {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin-loading {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.loader svg {
  width: 40px;
  height: 40px;
  }
&lt;/style--&gt;

&lt;div class=&quot;loading&quot;&gt;
    &lt;div class=&#39;loader&#39;&gt;
  &lt;svg viewBox=&quot;0 0 800 800&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
    &lt;circle class=&quot;spin2&quot; cx=&quot;400&quot; cy=&quot;400&quot; fill=&quot;none&quot;
      r=&quot;200&quot; stroke-width=&quot;50&quot; stroke=&quot;#FFFFFF&quot;
      stroke-dasharray=&quot;522 1400&quot;
      stroke-linecap=&quot;round&quot; /&gt;
  &lt;/svg&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;script&gt;
 document.body.className += &quot; ex-loading&quot;;

window.addEventListener(&quot;load&quot;, showPage, false);
function showPage() {
  document.body.className = document.body.className.replace(&quot;ex-loading&quot;,&quot;&quot;);
}
&lt;/script&gt;  
&lt;!--style&gt;
    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }
  
    @keyframes spin2 {
      0% {
        stroke-dasharray: 1, 800;
        stroke-dashoffset: 0;
      }
      50% {
        stroke-dasharray: 400, 400;
        stroke-dashoffset: -200px;
      }
      100% {
        stroke-dasharray: 800, 1;
        stroke-dashoffset: -800px;
      }
    }
  
    .spin2 {
      transform-origin: center;
      animation: spin2 1.5s ease-in-out infinite,
        spin 2s linear infinite;
      animation-direction: alternate;
    }
  &lt;/style--&gt;
</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/3412162110564696411/posts/default/5363304390373373877'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/3412162110564696411/posts/default/5363304390373373877'/><link rel='alternate' type='text/html' href='https://firmansyahbio.blogspot.com/2025/01/exteo.html' title='EXTEO - Demo Template'/><author><name>Destruction Frasa</name><uri>http://www.blogger.com/profile/11029937173875469347</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXHXslthjshUwhvxQD9Qsp3manECja60DFdnmS5TtAM7CfL784DPK7G8gI5OTQT6UawYdBtLkukOXKkXcn5Js3hAgsrkebMKU9pTeiinD8q5rZxYb04D7zilXxf9BXS1a0PH5h3GmwZZckAu8sxMtJuPUscanpP1RH8Jqwt0Io6QMrF0/s220/Screenshot_20241126-012745_2.jpg'/></author></entry><entry><id>tag:blogger.com,1999:blog-3412162110564696411.post-6744661773438011548</id><published>2024-02-04T18:22:00.000-08:00</published><updated>2025-01-23T17:54:50.913-08:00</updated><title type='text'>Crk</title><content type='html'>&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;



&lt;aside&gt;
&lt;div&gt;
&lt;div class=&#39;widget Label&#39; data-version=&#39;2&#39; id=&#39;Label2&#39;&gt;
&lt;details class=&#39;collapsible extendable&#39;&gt;
&lt;summary&gt;
&lt;div class=&#39;collapsible-title&#39;&gt;
&lt;h3 class=&#39;title&#39;&gt;
Label
&lt;/h3&gt;
&lt;svg class=&#39;svg-icon-24 chevron-down&#39;&gt;
&lt;use xlink:href=&#39;/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&#39;svg-icon-24 chevron-up&#39;&gt;
&lt;use xlink:href=&#39;/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;/div&gt;
&lt;/summary&gt;
&lt;div class=&#39;widget-content list-label-widget-content&#39;&gt;
&lt;div class=&#39;first-items&#39;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a class=&#39;label-name&#39; href=&#39;https://imfrasa.blogspot.com/search/label/Artikel&#39;&gt;Artikel&lt;span class=&#39;label-count&#39;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;label-name&#39; href=&#39;https://imfrasa.blogspot.com/search/label/Blog&#39;&gt;Blog&lt;span class=&#39;label-count&#39;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;label-name&#39; href=&#39;https://imfrasa.blogspot.com/search/label/Catatan&#39;&gt;Catatan&lt;span class=&#39;label-count&#39;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a class=&#39;label-name&#39; href=&#39;https://imfrasa.blogspot.com/search/label/Code&#39;&gt;Code&lt;span class=&#39;label-count&#39;&gt;1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/details&gt;
&lt;/div&gt;
&lt;div class=&#39;widget BlogArchive&#39; data-version=&#39;2&#39; id=&#39;BlogArchive1&#39;&gt;
&lt;details class=&#39;collapsible extendable&#39;&gt;
&lt;summary&gt;
&lt;div class=&#39;collapsible-title&#39;&gt;
&lt;h3 class=&#39;title&#39;&gt;
Arsip
&lt;/h3&gt;
&lt;svg class=&#39;svg-icon-24 chevron-down&#39;&gt;
&lt;use xlink:href=&#39;/responsive/sprite_v1_6.css.svg#ic_expand_more_black_24dp&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;svg class=&#39;svg-icon-24 chevron-up&#39;&gt;
&lt;use xlink:href=&#39;/responsive/sprite_v1_6.css.svg#ic_expand_less_black_24dp&#39; xmlns:xlink=&#39;http://www.w3.org/1999/xlink&#39;&gt;&lt;/use&gt;
&lt;/svg&gt;
&lt;/div&gt;
&lt;/summary&gt;
&lt;div class=&#39;widget-content&#39;&gt;
&lt;div id=&#39;ArchiveList&#39;&gt;
&lt;div id=&#39;BlogArchive1_ArchiveList&#39;&gt;
&lt;div class=&#39;first-items&#39;&gt;
&lt;ul class=&#39;hierarchy&#39;&gt;
&lt;li class=&#39;archivedate&#39;&gt;
&lt;div class=&#39;hierarchy-title&#39;&gt;
&lt;a class=&#39;post-count-link&#39; href=&#39;https://imfrasa.blogspot.com/2023/&#39;&gt;
2023
&lt;span class=&#39;post-count&#39;&gt;2&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&#39;hierarchy-content&#39;&gt;
&lt;ul class=&#39;hierarchy&#39;&gt;
&lt;li class=&#39;archivedate&#39;&gt;
&lt;div class=&#39;hierarchy-title&#39;&gt;
&lt;a class=&#39;post-count-link&#39; href=&#39;https://imfrasa.blogspot.com/2023/07/&#39;&gt;
Juli 2023
&lt;span class=&#39;post-count&#39;&gt;2&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;div class=&#39;hierarchy-content&#39;&gt;
&lt;ul class=&#39;posts hierarchy&#39;&gt;
&lt;li&gt;
&lt;a href=&#39;https://imfrasa.blogspot.com/2023/07/start.html&#39;&gt;Start&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&#39;https://imfrasa.blogspot.com/2023/07/lorem-ipsum.html&#39;&gt;Lorem Ipsum&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/details&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/aside&gt;</content><link rel='edit' type='application/atom+xml' href='https://www.blogger.com/feeds/3412162110564696411/posts/default/6744661773438011548'/><link rel='self' type='application/atom+xml' href='https://www.blogger.com/feeds/3412162110564696411/posts/default/6744661773438011548'/><link rel='alternate' type='text/html' href='https://firmansyahbio.blogspot.com/2024/02/crk.html' title='Crk'/><author><name>Destruction Frasa</name><uri>http://www.blogger.com/profile/11029937173875469347</uri><email>noreply@blogger.com</email><gd:image rel='http://schemas.google.com/g/2005#thumbnail' width='32' height='32' src='//blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJXHXslthjshUwhvxQD9Qsp3manECja60DFdnmS5TtAM7CfL784DPK7G8gI5OTQT6UawYdBtLkukOXKkXcn5Js3hAgsrkebMKU9pTeiinD8q5rZxYb04D7zilXxf9BXS1a0PH5h3GmwZZckAu8sxMtJuPUscanpP1RH8Jqwt0Io6QMrF0/s220/Screenshot_20241126-012745_2.jpg'/></author></entry></feed>