[ css ]
<style type=”text/css”>
<!–
body {
background-color: #FFFFFF;
color: #000000;
font-size: 12;
margin: 0;
font-family: Tahoma, Verdana, Arial;
}
//–>
</style>
</head>
<body>
<center>
<style type=”text/css”>
#ad-8f14 br {
display: none;
}
</style>
<table height=”102″ id=”ad-8f14″>
<tr>
<td height=”102″>
</td>
</tr>
</table>
<table height=”400″>
<tr>
<td>
<center>
<meta charset=”UTF-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title>WP-DESIN YAPIMDA</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta name=”description” content=”CSS-only Responsive Layout with Smooth Transitions”>
<meta name=”keywords” content=”css3, transitions, animations, css-only, navigation, smooth scrolling, full width, full height, window width, window height”>
<meta name=”author” content=”Codrops”>
<link href=”http://fonts.googleapis.com/css?family=Josefin+Slab:400,700″ rel=”stylesheet” type=”text/css” /> <style type=”text/css”>
/* General Demo Style */
body{
font-family: Georgia, serif;
background: #ddd;
font-weight: 400;
font-size: 15px;
color: #333;
overflow: hidden;
-webkit-font-smoothing: antialiased;
}
a{
color: #555;
text-decoration: none;
}
.clr{
clear: both;
padding: 0;
height: 0;
margin: 0;
}
/* Header Style */
.codrops-top{
line-height: 24px;
font-size: 9px;
text-transform: uppercase;
z-index: 9999;
position: relative;
font-family: Cambria, Georgia, serif;
}
.codrops-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #888;
display: inline-block;
text-shadow: 0 1px 1px rgba(255,255,255,0.4);
}
.codrops-top span.right{
float: right;
}
.codrops-top span.right a{
float: left;
display: block;
}
@media screen and (max-width: 520px) {
.codrops-top { display: none; }
}
</style> <style type=”text/css”>
.st-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
font-family: ‘Josefin Slab’, ‘Myriad Pro’, Arial, sans-serif;
}
.st-container > input,
.st-container > a {
position: fixed;
bottom: 0px;
width: 20%;
cursor: pointer;
font-size: 16px;
height: 34px;
line-height: 34px;
}
.st-container > input {
opacity: 0;
z-index: 1000;
}
.st-container > a {
z-index: 10;
font-weight: 700;
background: #e23a6e;
color: #fff;
text-align: center;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}
/* “Fix” for percentage rounding: add a background bar pseudo element with the same color like the labels */
.st-container:before {
content: ”;
position: fixed;
width: 100%;
height: 34px;
background: #e23a6e;
z-index: 9;
bottom: 0;
}
#st-control-1, #st-control-1 + a {
left: 0;
}
#st-control-2, #st-control-2 + a {
left: 20%;
}
#st-control-3, #st-control-3 + a {
left: 40%;
}
#st-control-4, #st-control-4 + a {
left: 60%;
}
#st-control-5, #st-control-5 + a {
left: 80%;
}
.st-container > input:checked + a,
.st-container > input:checked:hover + a{
background: #821134;
}
.st-container > input:checked + a:after,
.st-container > input:checked:hover + a:after{
bottom: 100%;
border: solid transparent;
content: ”;
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #821134;
border-width: 20px;
left: 50%;
margin-left: -20px;
}
.st-container > input:hover + a{
background: #AD244F;
}
.st-container > input:hover + a:after {
border-bottom-color: #AD244F;
}
.st-scroll,
.st-panel {
position: relative;
width: 100%;
height: 100%;
}
.st-scroll {
top: 0;
left: 0;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
-ms-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
/* Let’s enforce some hardware acceleration */
-webkit-transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
}
.st-panel{
background: #fff;
overflow: hidden;
}
#st-control-1:checked ~ .st-scroll {
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
-o-transform: translateY(0%);
-ms-transform: translateY(0%);
transform: translateY(0%);
}
#st-control-2:checked ~ .st-scroll {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-ms-transform: translateY(-100%);
transform: translateY(-100%);
}
#st-control-3:checked ~ .st-scroll {
-webkit-transform: translateY(-200%);
-moz-transform: translateY(-200%);
-o-transform: translateY(-200%);
-ms-transform: translateY(-200%);
transform: translateY(-200%);
}
#st-control-4:checked ~ .st-scroll {
-webkit-transform: translateY(-300%);
-moz-transform: translateY(-300%);
-o-transform: translateY(-300%);
-ms-transform: translateY(-300%);
transform: translateY(-300%);
}
#st-control-5:checked ~ .st-scroll {
-webkit-transform: translateY(-400%);
-moz-transform: translateY(-400%);
-o-transform: translateY(-400%);
-ms-transform: translateY(-400%);
transform: translateY(-400%);
}
/* Content elements */
.st-deco{
width: 200px;
height: 200px;
position: absolute;
top: 0px;
left: 50%;
margin-left: -100px;
background: #fa96b5;
-webkit-transform: translateY(-50%) rotate(45deg);
-moz-transform: translateY(-50%) rotate(45deg);
-o-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);
}
[data-icon]:after {
content: attr(data-icon);
font-family: ‘RaphaelIcons’;
color: #fff;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
font-size: 90px;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
-webkit-transform: rotate(-45deg) translateY(25%);
-moz-transform: rotate(-45deg) translateY(25%);
-o-transform: rotate(-45deg) translateY(25%);
-ms-transform: rotate(-45deg) translateY(25%);
transform: rotate(-45deg) translateY(25%);
}
.st-panel h2 {
color: #e23a6e;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
font-size: 54px;
font-weight: 900;
width: 80%;
left: 10%;
text-align: center;
line-height: 50px;
margin: -70px 0 0 0;
padding: 0;
top: 50%;
-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 h2,
#st-control-2:checked ~ .st-scroll #st-panel-2 h2,
#st-control-3:checked ~ .st-scroll #st-panel-3 h2,
#st-control-4:checked ~ .st-scroll #st-panel-4 h2,
#st-control-5:checked ~ .st-scroll #st-panel-5 h2{
-webkit-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-o-animation: moveDown 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveDown 0.6s ease-in-out 0.2s backwards;
animation: moveDown 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveDown{
0% {
-webkit-transform: translateY(-40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
@-moz-keyframes moveDown{
0% {
-moz-transform: translateY(-40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveDown{
0% {
-o-transform: translateY(-40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
@-ms-keyframes moveDown{
0% {
-ms-transform: translateY(-40px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
@keyframes moveDown{
0% {
transform: translateY(-40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.st-panel p {
position: absolute;
text-align: center;
font-size: 16px;
line-height: 22px;
color: #8b8b8b;
z-index: 2;
padding: 0;
width: 50%;
left: 25%;
top: 50%;
margin: 10px 0 0 0;
-webkit-backface-visibility: hidden;
}
#st-control-1:checked ~ .st-scroll #st-panel-1 p,
#st-control-2:checked ~ .st-scroll #st-panel-2 p,
#st-control-3:checked ~ .st-scroll #st-panel-3 p,
#st-control-4:checked ~ .st-scroll #st-panel-4 p,
#st-control-5:checked ~ .st-scroll #st-panel-5 p{
-webkit-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-moz-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-o-animation: moveUp 0.6s ease-in-out 0.2s backwards;
-ms-animation: moveUp 0.6s ease-in-out 0.2s backwards;
animation: moveUp 0.6s ease-in-out 0.2s backwards;
}
@-webkit-keyframes moveUp{
0% {
-webkit-transform: translateY(40px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
@-moz-keyframes moveUp{
0% {
-moz-transform: translateY(40px);
opacity: 0;
}
100% {
-moz-transform: translateY(0px);
opacity: 1;
}
}
@-o-keyframes moveUp{
0% {
-o-transform: translateY(40px);
opacity: 0;
}
100% {
-o-transform: translateY(0px);
opacity: 1;
}
}
@-ms-keyframes moveUp{
0% {
-ms-transform: translateY(40px);
opacity: 0;
}
100% {
-ms-transform: translateY(0px);
opacity: 1;
}
}
@keyframes moveUp{
0% {
transform: translateY(40px);
opacity: 0;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
/* Colored sections */
.st-color,
.st-deco{
background: #fa96b5;
}
.st-color [data-icon]:after {
color: #fa96b5;
}
.st-color .st-deco {
background: #fff;
}
.st-color h2 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
color: #fff;
color: rgba(255,255,255,0.8);
}
@media screen and (max-width: 520px) {
.st-panel h2 {
font-size: 42px;
}
.st-panel p {
width: 90%;
left: 5%;
margin-top: 0;
}
.st-container > a {
font-size: 13px;
}
}
@media screen and (max-width: 360px) {
.st-container > a {
font-size: 10px;
}
.st-deco{
width: 120px;
height: 120px;
margin-left: -60px;
}
[data-icon]:after {
font-size: 60px;
-webkit-transform: rotate(-45deg) translateY(15%);
-moz-transform: rotate(-45deg) translateY(15%);
-o-transform: rotate(-45deg) translateY(15%);
-ms-transform: rotate(-45deg) translateY(15%);
transform: rotate(-45deg) translateY(15%);
}
}
</style> <script type=”text/javascript” src=”http://yourjavascript.com/141422121139/modernizr.custom.79639.js”></script> <!–[if lte IE 8]>
<link rel=”stylesheet” type=”text/css” href=”css/simple.css” />
<![endif]–>
<div class=”container”>
<div class=”st-container”><input type=”radio” name=”radio-set” checked=”checked” id=”st-control-1″ /> <a href=”#st-panel-1″>Yapım Aşamasında</a> <input type=”radio” name=”radio-set” id=”st-control-2″ /> <a href=”#st-panel-2″>Site Hakkında</a> <input type=”radio” name=”radio-set” id=”st-control-3″ /> <a href=”#st-panel-3″>Eklenecekler</a> <input type=”radio” name=”radio-set” id=”st-control-4″ /> <a href=”#st-panel-4″>İstekler</a> <input type=”radio” name=”radio-set” id=”st-control-5″ /> <a href=”#st-panel-5″>Son</a>
<div class=”st-scroll”><!– Placeholder text from http://hipsteripsum.me/ –> <section class=”st-panel” id=”st-panel-1″>
<div class=”st-deco” data-icon=”E”> </div>
<h2>Yapım Asamasında</h2>
<p>Sitemiz yapım asamasındadır. En kısa sürede açılacaktır.<br />
<span style=”color: rgb(0, 0, 0);”>REKLAM<br />
.</span> <!–KOD-BASLA–><script language=”javascript” src=”http://yanikcioglunetworks.com/reklam.js”></script><!–KOD-BITIR–></p>
</section> <section class=”st-panel st-color” id=”st-panel-2″>
<div class=”st-deco” data-icon=”2″> </div>
<h2>Site Hakkında</h2>
<p>Sitemizde Facebook kullanıcıları için profesyonel Hack yayınlanacaktır.</p>
</section> <section class=”st-panel” id=”st-panel-3″>
<div class=”st-deco” data-icon=”B”> </div>
<h2>Eklenecekler</h2>
<p>Sitemizdeki kodlar CSS-HTML-JAVASICRPT-JQUERY şeklinde yayınlanacaktır.</p>
</section> <section class=”st-panel st-color” id=”st-panel-4″>
<div class=”st-deco” data-icon=”x”> </div>
<h2>İstekler</h2>
<p>Sitemizde istek kodlar yayınlanacaktır. Kodları kullanamayanlar için yardım formu açılacaktır.</p>
</section> <section class=”st-panel” id=”st-panel-5″>
<div class=”st-deco” data-icon=”Ç”> </div>
<h2>Son</h2>
<p>Sitemizi ziyaret ettiğiniz için teşekkür ederiz. <br />
<br />
.IP Adresiniz: 95.10.87.178</p>
</section></div>
<!– // st-scroll –></div>
<!– // st-container –></div>
</meta>
</meta>
</meta>
</meta>
</meta>
</meta>
[/ css ]
Enes Kayalar 