DURIDWAN YOUTUBE TAWASHI: Tema Web Lokal Pertamaku

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="icon" href="/aset/favicon/DRcjgFaviconDuridwanCijagongtiludua.ico" type="image/x-icon">
<kepala>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Duridwan Guruna Tafkar | IIS Windows | Yapista TeA</title>
<style type="text/css">
<!--
badan {
	color:#000000;
	background-color:#0072C6;
	margin:0;
}
//*--------navigasi Ksscmenu mulai------------*//
#ksscmenu, #ksscmenu ul, #ksscmenu ul li, #ksscmenu ul li a, #ksscmenu #tombol-menu {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#ksscmenu:after,
#ksscmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#ksscmenu #tombol-menu {
display: none;
}
#ksscmenu {
width: auto;
font-family: Raleway, sans-serif;
line-height: 1;
display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}
#ksscmenu > ul {
background: #674ea7;
}
#ksscmenu > ul > li {
float: left;
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;
}
#ksscmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#ksscmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#ksscmenu.align-right > ul > li {
float: right;
}
#ksscmenu > ul > li > a {
padding: 16px 20px;
font-size: 14px;
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
background: #674ea7;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
box-shadow: inset 0 0 4px 4px white;
border-radius: 25px;
}
#ksscmenu > ul > li.active > a {
color: #dff2fa;
}
#ksscmenu > ul > li:hover > a,
#ksscmenu > ul > li > a:hover {
color: #dff2fa;
-webkit-transform: rotateX(90deg) translateY(-23px);
-moz-transform: rotateX(90deg) translateY(-23px);
transform: rotateX(90deg) translateY(-23px);
-ms-transform: none;
}
#ksscmenu > ul > li > a::before {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #dff2fa;
background: #3c2e61;
content: attr(data-title);
-webkit-transition: background 0.3s;
-moz-transition: background 0.3s;
transition: background 0.3s;
-webkit-transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
transform: rotateX(-90deg);
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-ms-transform: translateY(- -18px);
box-shadow: inset 0 0 4px 4px white;
}
#ksscmenu > ul > li:hover > a::before,
#ksscmenu > ul > li > a:hover::before {
background: #674ea7;
}
#ksscmenu.small-screen {
width: 100%;
}
#ksscmenu.small-screen > ul,
#ksscmenu.small-screen.align-center > ul {
width: 100%;
text-align: left;
}
#ksscmenu.small-screen > ul > li,
#ksscmenu.small-screen.align-center {
float: none;
display: block;
border-top: 1px solid rgba(100, 100, 100, 0.1);
}
#ksscmenu.small-screen > ul > li:hover > a,
#ksscmenu.small-screen > ul > li > a:hover {
color: #dff2fa;
-webkit-transform: none;
-moz-transform: none;
transform: none;
-ms-transform: none;
}
#ksscmenu.small-screen > ul > li > a::before {
display: none;
}
#ksscmenu.small-screen #tombol-menu {
display: block;
padding: 16px 20px;
cursor: pointer;
font-size: 14px;
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1px;
background: #674ea7;
}
#ksscmenu.small-screen #tombol-menu:after {
content: "";
position: absolute;
right: 20px;
top: 17px;
display: block;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
border-top: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 22px;
height: 3px;
}
#ksscmenu.small-screen #tombol-menu.menu-opened:after {
border-top: 2px solid #dff2fa;
border-bottom: 2px solid #dff2fa;
}
#ksscmenu.small-screen #tombol-menu:before {
content: "";
position: absolute;
right: 20px;
top: 27px;
display: block;
width: 22px;
height: 2px;
background: #ffffff;
}
#ksscmenu.small-screen #tombol-menu.menu-opened:before {
background: #dff2fa;
}
/*-------------navigasi Ksscmenu selesai------------*/

//slideshow duridwancijagong gurunatafkar_mulai/

#drcjgslideshow,
#drcjgslideshow:after {
    position: absolute;    width: 100%;    height: 100%;    top: 0px;    left: 0px;    z-index: 0;
}

#drcjgslideshow:after {
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}

#drcjgslideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}

#drcjgslideshow li div {
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: titleAnimation 36s linear infinite 0s;
    -moz-animation: titleAnimation 36s linear infinite 0s;
    -o-animation: titleAnimation 36s linear infinite 0s;
    -ms-animation: titleAnimation 36s linear infinite 0s;
    animation: titleAnimation 36s linear infinite 0s;
}

#drcjgslideshow li div h3 {
  font-family: "helvetica neue", helvetica;
  text-transform: uppercase;
  font-size: 80px;
  padding: 0;
  line-height: 200px;
  color: rgba(255,255,255, 0.8);
}
#drcjgslideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykZ6AZpELaGChC0-AYsbXEG4Augk7TjNmL7KDA3RSU5OPFBtAyBS3h3yQXUm2kF8OiQ4WlHEHU6ubhCi-0Z7mWBCl7HHLwTy1ARauiRqxlHAA42vFtjLIhHUgCaiyfoHX44u40RWbDVo/s1600/IMG_50nhs0.jpg) }
#drcjgslideshow li:nth-child(2) span {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsxwZXSi3y0JFxgg8sJyylfOQUkXTspJpvMrKkrHH0P-MpYSvqcaqg42eEYv68y8aK-nhMcnjLf9U6MuwlfRbjTBSKN_Dy75PIoQ3K005oY57jWjGiTlATeimNO2tNe0VhoaO1XhdsvqQ/s1600/IMG_20180513_201018.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

#drcjgslideshow li:nth-child(3) span {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoWoJY2KsmvGd-bEBuytAsA6tXTj5EGXd4qpjKwjELBWQ6vxaix6oEmFonqvGL7OjFBH_bVDBhnqZp5Fj3HVLlGLwpYNZvCHtEfBsVzNxk4eHhJzzfRpwA2UelgNKwkO4Y_WL5iYnzGh0/s1600/IMG_20180512_130406.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}

#drcjgslideshow li:nth-child(4) span {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqRylL2EzmLl7eOl9OGmoPMBD4s0aKQAIHm6YZEP9SPEkOy80BxcQn70X9CUEXnC3DPqgy-cJixFjDMxjV4GdyeRxGSsq8P0d_ItrsYOSJkozQMHnJWjzbrmObmfFc1Wfflje3L4R7pgk/s1600/IMG_20180608_073840.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

#drcjgslideshow li:nth-child(5) span {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqRylL2EzmLl7eOl9OGmoPMBD4s0aKQAIHm6YZEP9SPEkOy80BxcQn70X9CUEXnC3DPqgy-cJixFjDMxjV4GdyeRxGSsq8P0d_ItrsYOSJkozQMHnJWjzbrmObmfFc1Wfflje3L4R7pgk/s1600/IMG_20180608_073840.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}

#drcjgslideshow li:nth-child(6) span {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNv86_miO3cchUUWaoT6wPKnl5twAerihPKQPxteLYkq65helynyvj5UGYSxg_NGhBim8Y0xs4UArDNb3xdKkigHpkxySnpnGotop0uZvbK3pG54zy5f2OiyyxeK49GhwUrfqyI7uDeJo/s1600/Header+drid1+mena1+blog.gif);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}

#drcjgslideshow li:nth-child(2) div {
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s;
}

#drcjgslideshow li:nth-child(3) div {
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s;
}

#drcjgslideshow li:nth-child(4) div {
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s;
}

#drcjgslideshow li:nth-child(5) div {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s;
}

#drcjgslideshow li:nth-child(6) div {
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s;
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
}

8% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    -webkit-animation-timing-function: ease-out;
}

17% {
    opacity: 1;
    -webkit-transform: scale(1.1);
}

25% {
    opacity: 0;
    -webkit-transform: scale(1.1);
}

100% { opacity: 0 }
}

@-moz-keyframes imageAnimation { 
0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
}

8% { opacity: 1; -moz-transform: scale(1.05); -moz-animation-timing-function: ease-out;
}

17% { opacity: 1; -moz-transform: scale(1.1);
}

25% {
    opacity: 0;
    -moz-transform: scale(1.1);
}

100% { opacity: 0 }
}

@-o-keyframes imageAnimation { 
0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
}

8% {
    opacity: 1;
    -o-transform: scale(1.05);
    -o-animation-timing-function: ease-out;
}

17% {
    opacity: 1;
    -o-transform: scale(1.1);
}

25% {
    opacity: 0;
    -o-transform: scale(1.1);
}

100% { opacity: 0 }
}

@-ms-keyframes imageAnimation { 
0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
}

8% {
    opacity: 1;
    -ms-transform: scale(1.05);
    -ms-animation-timing-function: ease-out;
}

17% {
    opacity: 1;
    -ms-transform: scale(1.1);
}

25% {
    opacity: 0;
    -ms-transform: scale(1.1);
}

100% { opacity: 0 }
}

@keyframes imageAnimation { 
0% {
    opacity: 0;
    animation-timing-function: ease-in;
}

8% {
    opacity: 1;
    transform: scale(1.05);
    animation-timing-function: ease-out;
}

17% {
    opacity: 1;
    transform: scale(1.1);
}

25% {
    opacity: 0;
    transform: scale(1.1);
}

100% { opacity: 0 }
}

/* Animation for the title */

@-webkit-keyframes titleAnimation { 
0% {
    opacity: 0;
    -webkit-transform: translateY(200px);
}

8% {
    opacity: 1;
    -webkit-transform: translateY(0px);
}

17% {
    opacity: 1;
    -webkit-transform: scale(1);
}
19% { opacity: 0 }
25% {
    opacity: 0;
    -webkit-transform: scale(10);
}
100% { opacity: 0 }
}

@-moz-keyframes titleAnimation { 
0% {
    opacity: 0;
    -moz-transform: translateY(200px);
}

8% {
    opacity: 1;
    -moz-transform: translateY(0px);
}

17% {
    opacity: 1;
    -moz-transform: scale(1);
}
19% { opacity: 0 }
25% {
    opacity: 0;
    -moz-transform: scale(10);
}

100% { opacity: 0 }
}

@-o-keyframes titleAnimation { 
0% {
    opacity: 0;
    -o-transform: translateY(200px);
}

8% {
    opacity: 1;
    -o-transform: translateY(0px);
}

17% {
    opacity: 1;
    -o-transform: scale(1);
}

19% { opacity: 0 }
25% { opacity: 0; -o-transform: scale(10);}
100% { opacity: 0 }
}

@-ms-keyframes titleAnimation { 
0% { opacity: 0;  -ms-transform: translateY(200px)}
8% { opacity: 1;  -ms-transform: translateY(0px)}
17% {  opacity: 1;  -ms-transform: scale(1)}
19% { opacity: 0 }
25% { opacity: 0; -webkit-transform: scale(10)}
100% { opacity: 0 }
}

@keyframes titleAnimation { 
0% { opacity: 0;  transform: translateY(200px)}
8% { opacity: 1;  transform: translateY(0px)}
17% { opacity: 1;  transform: scale(1)}
19% { opacity: 0 }
25% { opacity: 0;  transform: scale(10)}
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations #drcjgslideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) { 
#drcjgslideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) { 
#drcjgslideshow li div h3 { font-size: 50px }
}
//slideshow duridwancijagong gurunatafkar_selesai/

#drcjgkonteneur {
	margin-left:auto;
	margin-right:auto;
	text-align:center;
	}

a img {
	border:none;
}

#kaki {
        text-align:center;
        background:green;   
        position: absolute;
       }
-->
</style>
</kepala>
</head>
<badan>
<ul id="drcjgslideshow">
<li><span>Image 01</span><div>
<h3>DUDI RIDWAN POPI SYAPI'AH</h3>
</div></li>
<li><span>Image 02</span></li>
<li><span>Image 03</span></li>
<li><span>Image 04</span></li>
<li><span>Image 05</span></li>
<li><span>Image 06</span></li>
</ul>
<div id="ksscmenu">
<div id="tombol-menu">Menu</div>
  <ul style="display: block;">
     <li class="active"><a href="#" target="_blank" data-title="Home">Home</a></li>
     <li><a href="/aset/bmtt/DRcjgWifi_hotspot/hotspot/login.html" target="_blank" data-title="Home">Masuk</a></li>
     <li><a href="http://kesiswaansmaptea.blogspot.com/p/profil.html" data-title="Profil">Profil</a></li>
     <li><a href="http://ypitauhidulafkar.blogspot.co.id/" target="_blank" data-title="Yapista TeA">Yapista TeA</a></li>
     <li><a href="http://duridwangurunatafkar.blogspot.com/" target="_blank" data-title="Duridwan TeA">Duridwan TeA</a></li>
     <li><a href="#" data-title="Kelas 10">Kelas 10</a></li>
     <li><a href="#" data-title="Kelas 11">Kelas 11</a></li>
     <li><a href="#" data-title="Kelas 12">Kelas 12</a></li>
     <li><a href="//basunda-duridwangurunatafkar.blogspot.com/p/sunda-batur.html" target="_blank" data-title="SundaBatur">SundaBatur</a></li>
     <li><a href="//basunda-duridwangurunatafkar.blogspot.com/p/konversi-sunda-di-kairaga.html" target="_blank" data-title="KonversiSL">KonversiSL</a></li>
     <li><a href="https://basunda-duridwangurunatafkar.blogspot.com/p/daring_6.html" data-title="Daring">Daring</a></li>
  </ul>
</div>
<div id="drcjgkonteneur">
<a href="http://go.microsoft.com/fwlink/?linkid=66138&clcid=0x409"><img src="iisstart.png" alt="IIS" width="960" height="600" /></a>
</div>
<div id="drcjgmenubarnav">

</div>
</badan>
<kaki>
<div id="cokor" style="text-align: center;">
Terima Kasih dan Ucap Syukurku pada ((A)) Alloh SWT. Hak Cipta © 2013. Desainer ((D)) <a href="https://duridwancjg.site.bm"> Dudi Ridwan</a> untuk :. Diberdayakan oleh <a href="https://www.blogger.com" target="_blank">Blogger</a>.
</div>
</kaki>
</html>

DURIDWAN YOUTUBE TAWASHI

Senin, 16 Agustus 2021

Tema Web Lokal Pertamaku

0 Komentar:

Mengenai Saya

Postingan Sebelumnya