<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed');
body {font-family: 'Fira Sans Condensed', sans-serif;background: #f4f4f2; margin: 0 auto;font-size:14px;color: #444;}
.navbar {
width: 100%;
height: 60px;
background: #ccc;
}
.accordion {
width: 700px;
margin: 50px auto;
}
.accordion label {
font-family: Arial, sans-serif;
padding: 18px 30px 3px 21px;
position: relative;
display: block;
height: 50px;
cursor: pointer;
color: #adb3b9;
line-height: 33px;
font-size: 19px;
background: #fff;
box-shadow: 0px 1px 1px 0px #ccc;
}
.accordion label:hover {
color: #fff;
background: #ccc;
}
.accordion label:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
margin-top: 10px;
margin-right: 5px;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordion input + label {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
margin-bottom: -6px;
background: #F1F1F1;
color: #777;
}
.accordion input:checked + label,
.accordion input:checked + label:hover {
content: "+";
}
.accordion input {
display: none;
}
.accordion .article {
background: #f4f4f4;
overflow: hidden;
height: 0px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.accordion .article p {
font-style: italic;
color: #777;
line-height: 23px;
font-size: 14px;
padding: 20px;
}
.accordion input:checked ~ .article {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
padding: 25px;
}
.accordion input:checked ~ .article.ac-small {
height: 478px;
}
.accordion input:checked ~ .article.ac-medium {
height: 478px;
}
.accordion input:checked ~ .article.ac-large {
height: 478px;
}
.characters {
-webkit-animation: box 800ms linear 0s 1 forwards;
}
input[type="button"] {
-webkit-appearance: none;
height: 60px;
width: 100px;
border: none;
background-color: tomato;
display: inline-block;
outline: none;
color: #fff;
transition: background-color .7s;
cursor: pointer;
}
input[type="button"]:checked {
background-color: #ffa494;
transition: background-color .7s;
border: none;
}
@media (max-width: 1280px) {
.accordion {
width: 100%;
}
}
</style>
</head>
<body>
<div class="navbar">
<input class="#" type="button" value="+" onClick="zoomIn()"/>
<input class="#" type="button" value="-" onClick="zoomOut()"/>
</div>
<div class="accordion">
<h1 style="font-size:20px;font-weight:500;padding-bottom:53px;text-align:center;margin:0 auto;color:#8A8A8A;">Rafadan Tayfa 1. Bölüm Hikayesi (Ekmek Teknesi)</h1>
<div>
<input id="ac-1" name="accordion-1" type="checkbox">
<label for="ac-1">Sütun-1</label>
<div id="article" class="article ac-small">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-2" name="accordion-1" type="checkbox">
<label for="ac-2">Sütun-2</label>
<div id="article" class="article ac-medium">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-3" name="accordion-1" type="checkbox">
<label for="ac-3">Sütun-3</label>
<div id="article" class="article ac-large">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-4" name="accordion-1" type="checkbox">
<label for="ac-4">Sütun-4</label>
<div id="article" class="article ac-large">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
<div>
<input id="ac-5" name="accordion-1" type="checkbox">
<label for="ac-5">Sütun-5</label>
<div id="article" class="article ac-large">
İstanbul'un bir mahallesinde geçen hikayede Rafadan Tayfa kahramanlarının hikayesi konu alınmaktadır. Mahallenin yaramaz tayfası maç yapmaya karar verirler... Akın yeni tanıştığı Yumak ile oynuyor. Ve Kamil ile Hayri kendi aralarında zıtlaşarak Hayri'nin kaleye geçiyor ve Kamil gol atmak için topa vurmaya çalışsa da ayağına cam parçası batar, tekrar topa vurmaya çalışan Kamil Rüstem abinin köfte arabasını nişan alır. ve macera başlar...
<br><br>
Köfte arabası kırılarak dağılır. Hayri yine aksilik yaparak Rüstem abinin kırılan köfte arasının parasını Kamil'in ödemesini söyler. Hayri yediği köftelerin parasını vermezken Sevim Rüstem abiyi teselli eder. Rafadan Tayfa kendilerinin suçlu olduğunu düşünerek arabayı tamir etmeye karar verirler. Ama Hayri yine aksilik etse de o da arabayı tamir etmeyi kabul eder. Akın evden alzeme çantasını getirir, Hayri bir teneke zeytin yağ ve kamil de sulu boya getirir. Bu duruma çok kızan Mert düşüncelidir. İşten kaçmak isteyen Hayri ve Kamil Sevimden çok korkuyorlar. Hava kararmaya başladı, Hayri ve Kamil yine tembellik yaparak uykuya dalarlar. Mert köfte arabasını tamir ediyor. Mert Hayri'den kurbağacık anahtarını istiyor, fakat haylazlık yapan Hayri'nin elinden kurbağacık anahtarını kapan Yumak doğrudan Basri amcanın bahçesine girer.
<br><br>
Akşam vakti Basri amcanın bahçesine girmeye çalışan yaramazlar duvardan atlayarat bahçeye girerler. Basri amcanın Yumak'a yemek verirken yemek sesini duyan Hayri ses çıkarır ve Basri amca bunları görür yaramaz tayfa kaçar ama Akın bahçede kalır. Basri amca Akın'a kızmaz ve kurbağacık anahtarını Akın'a vererek Yumak'ı da alan Akın korsa da bahçeden çıkar. Araba tamir edilerek Rüstem abiye teslim edilir. Kalacak yeri olmayan Yumak Akın'ın yazdığı bir mektup ile basri amcanın kapısına gider, çok duygulanan Basri amca Yumak'ı evine alır.
</div>
</div>
</div>
<script language="javascript">
var fontSize = 1;
function zoomIn() {
fontSize += 0.1;
document.getElementById("article").style.fontSize = fontSize + "em";
}
function zoomOut() {
fontSize -= 0.1;
document.getElementById("article").style.fontSize = fontSize + "em";
}
</script>
</body>
</html>
Blogger Akordeon etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger Akordeon etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger CSS Akordeon Menü
Blogger Akordeon Blogger Menü<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*,*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
html,body{margin:0;padding:0}
h2{font-weight:normal}
a{display:inline-block;padding:.5em;font-size:0.75em;color:#fff;background:rgba(0,0,0,0.2);text-decoration:none}
.wrapper{margin:auto;width:90%;max-width:960px}
.card{padding:1em;color:#333;background:#fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.25);box-shadow:0 0 10px rgba(0,0,0,.25)}
.card h2:first-child,.card p:first-child{margin-top:0}
@import url('https://fonts.googleapis.com/css?family=Droid+Sans%3Aregular%2C700');
body {line-height: 1.5em;font-size: 13px;font-family: 'Droid Sans',Arial,Verdana,sans-serif;color:#2c3e50;background:#ecf0f1;margin: 0 auto;}
h1{text-align:center}
.half{float:left;width:50%;padding:0 1em}
.tab{position:relative;margin-bottom:1px;width:100%;color:#fff;overflow:hidden}
input{position:absolute;opacity:0;z-index:-1}
label{position:relative;display:block;padding:0 0 0 1em;background:#16a085;font-weight:bold;line-height:3;cursor:pointer}
.blue label{background:#2980b9}
.tab-content{max-height:0;overflow:hidden;background:#1abc9c;-webkit-transition:max-height .35s;transition:max-height .35s}
.blue .tab-content{background:#3498db}
.tab-content p{margin:1em}
input:checked ~ .tab-content{max-height:10em}
label::after{position:absolute;right:0;top:0;display:block;width:3em;height:3em;line-height:3;text-align:center;-webkit-transition:all .35s;transition:all .35s}
input[type=checkbox] + label::after{content:"+"}
input[type=radio] + label::after{content:"\25BC"}
input[type=checkbox]:checked + label::after{-webkit-transform:rotate(315deg);transform:rotate(315deg)}
input[type=radio]:checked + label::after{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}
</style>
</head>
<body>
<div class="wrapper">
<h1>Blogger CSS Akordeon Menü</h1>
<div class="half">
<p><strong>Çoklu</strong> Açma</p>
<div class="tab">
<input id="tab-one" type="checkbox" name="tabs">
<label for="tab-one">Etiket bir</label>
<div class="tab-content">
<p>Bir nefescik, Allah'ın güzelliğini görsen..<br>
Can'ın da ateşlere düşer, vücudun da..!
<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
<div class="tab">
<input id="tab-two" type="checkbox" name="tabs">
<label for="tab-two">Etiket iki</label>
<div class="tab-content">
<p>Ben canımın minneti altında kalmak istemiyorum.<br>
Çünkü ben artık canla değil, aşk ile diriyim...
<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
<div class="tab">
<input id="tab-three" type="checkbox" name="tabs">
<label for="tab-three">Etiket üç</label>
<div class="tab-content">
<p>Ve elimi açıp aşk dilendim ;
Nar olmadan nur olunmaz, nur olunmadan aşka visal bulunmaz. Yak beni Rabbim..!
<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
</div>
<div class="half">
<p><strong>Tekli</strong> Açma</p>
<div class="tab blue">
<input id="tab-four" type="radio" name="tabs2">
<label for="tab-four">Etiket bir</label>
<div class="tab-content">
<p>Ey can! Sana bir daralma gelirse yararınadır. Kaygılanma!
Sürekli yaz mevsimi olsaydı,güneş bahçeyi yakıp kavururdu..
<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
<div class="tab blue">
<input id="tab-five" type="radio" name="tabs2">
<label for="tab-five">Etiket iki</label>
<div class="tab-content">
<p>"Kendinize gelin; Hak’tan isteyin, başkasından değil;
suyu denizde arayın, kuru derede değil!"
<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
<div class="tab blue">
<input id="tab-six" type="radio" name="tabs2">
<label for="tab-six">Etiket üç</label>
<div class="tab-content">
<p>Yum gözünü al eline Kalbim senin'dir...
İstersen "CAM" kenarına koy güneş alsın...
İstersen "CAN" yüreğine koy hep sende kalsın..!<br>
<b>Hz. Mevlana</b>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
Kaydol:
Kayıtlar (Atom)