<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>JS Dual Sliding Panels | Webdevtrick.com</title>
<meta name="viewport" content="width=device-width">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<section class="panels">
<article class="panel left-panel">
<div class="panel inner-left-panel">
<p>IT (CODER,DESIGNER,DEVELOPER,ADMİNİSTRATOR) FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT</p>
</div>
<div class="panel name">
<h1 class="title">HARUN PEHLİVAN</h1>
<svg class="arrow arrow-left" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z"/></svg>
</div>
</article>
<article class="panel right-panel">
<div class="panel name">
<h1 class="title">HE SAYS</h1>
<svg class="arrow arrow-right" width="40" height="40" viewBox="0 0 24 24"><path d="M0 0h24v24h-24z" fill="none"/><path d="M12 4l-1.41 1.41 5.58 5.59h-12.17v2h12.17l-5.58 5.59 1.41 1.41 8-8z"/></svg>
</div>
<div class="panel inner-right-panel">
<p>"<marquee align="middle" scrollamount="1" height="200" width="100%" direction="up"scrolldelay="1">
<p>Ne olacağıma değil yeteneklerimin, becerilerimin ve ne yapabilirim'in peşinde koşarım </p><br>
<p>Sonsuz hamd olsun gerçekleştiremediğim ütopyam olmadı</p><br>
<p>Bal Arısı gibiyim bal yapmak için 7/24 çiçeklerden nektar ve polen toplarım </p><br>
<p>Kahramanlığım bana bela getirmiştir
adamdan sayılmayanların kahramanlığını yaptım gün geldiğinde dün adamdan sayılmayanlar adamdan sayılınca şahsıma ihanet ettiler anladım ki bundan böyle hiç bir kimseye kahramanlık yapmamayı öğrendim</p><br>
<p>Kahramanlığım Bedava Değil kahramanlığımın bedeli kahramanlığını yapacağım şeyden/kişden menfaat beklerim ki menfaati oldu günü gelince rahata erince şahsıma ihanet edince ya enayi olur yada hain her ne kadar zarar görsemde her zaman ben kazanırım lakin tek sıkıntı kahramanlığını yaptığım gün gelir beni istemediğim ve gerçekle bağdaşmayan alakasız profille imajla bilmesi ve reklam ilan etmesi işte bu nedenlidir'ki kahramanlıktan pişmanım</p><br>
<p>Sonsuz hamd olsun hainlerin eninde sonunda ani fani dünyada esamesi okunmadı okunmayacak köle olacak eski hainlik ettikleri günleri arayacaklar lakin oda olmayacak tek adamdan sayıldıkları ihanetleridir</p><br>
<p>Sonsuz hamd olsun kaderimi hayallerimi düşüncelerimi hislerimi yaşarım madem dünyaya bir sefer geldim oda ben olmalıyım keşkelerim bana ait iyiki yaptıklarımda bana ait</p><br>
<p>Sonsuz hamd olsun kısır ve hastalıklı değilim aciz olarak görenler dün kahramanlığını yaptığım rahata erince bana ihanet eden</p><br>
<p>Sonsuz hamd olsun Rahim ve Rahman olan Allah (cc) bazan imtihanım gereği bazanda yola gelmem için şiddetli veya şefkatli tekme ve tokadı bir seferliktir lakin ani fani adi kulların azda olsa attığı tekme ve tokadı ağırdır fırsatını buldukça çoğaltır sebepsiz yere</p><br>
<p>Bir insanın başarılı olması veya uzman profesyonel yetkin olması için aynı kategori veya başka kategoriye sahip kişilerle bağlantılı olması yeterlimi evet lakin bağlantıları az olmsı veya hiç olmamasıda başarısız uzman profesyonel yetkin değil anlamınada gelmez bu ister internet ortamında olsun ister gerçek hayatta olsun değişmez lakin bulunduğum ilde 0 bağlantım var 0 bağlantımın olması sadece insanların bakış açıları 4 4 lük sütten çıkmış ak kaşık olsamda değişen bir şey olmaz lakin bulunduğum ildeki profilimle internet ortamında varım herkesin malumu nerede ise Twitter hasebım kapalı kapanmadan önce 1000'e aşkın yerli yabancı takipcim vardı facebook 433 arkadaş yerli yabancı LinkedIn 547 bağlantım yerli yabancı instagramda eski paylaştığım fotoğraflar dışında fotoğraf paylaşmıyorum 190 yerli yabancı takipcim var YouTube de bir kaç video ile 13 abonem var eğer bulunduğum ildeki profil bağlantım 0 a baktığımda akıntıya boşa kürek çekiyorum diyorum lakin aynı profille internet ortamında nerede ise 1000 2000 yakın bağlantım var o zaman doğru yoldayım diyorum eğer bu rüya ise ebediyen uyanmayayım kendimi uzman profesyonel başarılı olarakta etiketlemiyorum lakin olmak istiyorum türkiyede dünyada tanınmış bağlantılarım var
internet ortamında bağlantılarımı takiçilerimi abonelerimi artırmanın yolu içerik üretmekten ve şeffaf profilden geçiyor bu kolayda bulunduğum ildeki bağlantılarımın 0 olmasını anlayamam</p><br>
<p>Resim,Müzik görsel işitsel duygusal zekaya dayanan yetenektir ve zordur Bilim,Teknik,Teknoloji daha zordur matematik ve mantıksal zekaya dayanan yetenektir</p><br>
<p>Geçmişimi unutamam bu konuma gelmemde arkadaş oldu geleceğimide tayin eder</p><br>
<p>Sonsuz hamd olsun kaderim fani ani şeytan-i aleyhillane emrine amade olanlara göre asla ve kat a belirlenmiyor
kaderimi ancak sonsuz hamd olsun rahim ve rahman olan Allah (cc) belirler
mühim olan rahim ve rahman olan Allah (cc)'nun razı olduklarına razı olmam bana verdiği nimetlere şükretmem az küçük hor görmemem teffekkür etmem şeytan-ı aleyhillanenin emrine amade olmamamdır vermediklerini dert etmemem razı olmadıklarına razı olmamam vermediklrtini elde etmek için hem niyetimden vazgeçmem hemde amelde bulunmamam</p><br>
<p>Bilim kurgu kitaplarını okumak filmleri izlemek oyunları oynamak hayal kurmamıza yardımcı olabilir</p><br>
<p>Ortaokul yıllarımda kendime üç meslek belirlemiştim biri şuan ki mesleğim olan bilişim teknolojileri diğeri elektrik ve elektronik bir diğeride doktorluktur doktorluk dışında şuanki mesleğim olan bilişim teknolojileri ile elektrik ve elektronik meslekleri kişiliğime uygundur fakat asıl kişiliğime uygun olan meslek bilişim teknolojileridir elektrik ve elektronik mesleğe sahip olsa idim bilişim teknolojileri mesleğimdeki başarıyı görme problemimden dolayı yakalayamazdım doktorlukta başarılı olabilirmiyim veya olamazmıyım bu konuda elektrik ve elektronik mesleğinde olduğu gibi görme problemim sıkıntı yapar zaten çevremdekiler doktor vücut yapısına sahip olduğumu ellerimin doktor eline benzediğini söylüyorlar sonsuz hamd olsun gerçekleştiremediğim hiç ütopyam olmadı</p><br>
<p>İlkokulda yeteneğim resim ve müzik olarak belirlendi ortaokulda hayalim bilim teknik teknoloji idi lisede hayallerimi projelendirme idi üniversitede var olan projelerimi mükemmel yapma vardı</p><br>
<p>Neydim ne oldum ve yarın ne olacağım diye yaşamak hayat dediğimiz şey</p><br>
<p>Eğitim ve öğretim hayatım boyunca kendimden utanmam için kendimden nefret etmem için tüm çabaları boşa çıkardım tek başardıkları beni yalnız bırakmaları oldu</p><br>
<p>Sonsuz hamd olsun kaderimde hayallerimi ütopyalarımı gerçekleştirme var oldu
hayalindeki ütopyasındaki yetenek meslek ilgi alanına sahip olup ve bunu ilgili eğitim öğretimle ister lisede ister üniversitede destekleyerek diplomalı üretici yani aldığı eğitim ve öğretim süresince ve sonrasında aldığı eğitim ve öğretimine uygun bir şeyler üretmesidir</p><br>
<p>Geribildirim ve eleştiri sanaatına sahip olmak için kendisi eleştirildiğinde
ve kendisinine geribildirim yapıldığında göstereceği olumlu tutumlardır
</p><br>
<p>İnsanların beni beğenmesi için fani ani dünyada 4 4 lük sütten çıkmış ak kaşık varlıklı olmama bağlı</p><br>
<p>Yükseldikçe düşmeme neden olacak tüm ağırlıklarımı uzaydan dünyaya tek tek bırakıyorum</p></marquee>"</p>
</div>
</article>
</section>
</div>
<script src="function.js"></script>
</body>
</html>
* {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(255,255,255,0);
overflow-x: hidden;
}
body {
font-family: 'Montserrat';
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
.container {
height: 100vh;
container: hidden;
}
.panels {
width: 200%;
}
.panel {
float: left;
width: 50%;
-webkit-perspective: 400px;
perspective: 400px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.left-panel,
.right-panel {
will-change: transform;
position: relative;
left: -25%;
-webkit-transform: translate(0, 0);
transform: translate(0, 0);
}
.left-panel {
background: #6a6d82;
}
.left-panel:hover .arrow {
-webkit-transform: translate(-100%, -50%);
transform: translate(-100%, -50%);
}
.right-panel {
background: #4c5866;
}
.right-panel:hover .arrow {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.left-panel-active {
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
}
.left-panel-active .inner-left-panel {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.left-panel-active .arrow {
-webkit-transform: translate(-50%, -50%) rotate(180deg) !important;
transform: translate(-50%, -50%) rotate(180deg) !important;
}
.right-panel-active {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.right-panel-active .inner-right-panel {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}
.right-panel-active .arrow {
-webkit-transform: translate(-50%, -50%) rotate(180deg) !important;
transform: translate(-50%, -50%) rotate(180deg) !important;
}
.left-panel-hidden {
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.right-panel-hidden {
-webkit-transform: translate(50%, 0);
transform: translate(50%, 0);
}
.name {
cursor: pointer;
}
.inner-left-panel,
.inner-right-panel,
.name {
will-change: transform;
padding: 0 5vw;
height: 100vh;
}
.inner-left-panel {
-webkit-transform-origin: right center;
transform-origin: right center;
-webkit-transform: rotateY(-90deg);
transform: rotateY(-90deg);
transition-delay: 0.1s;
background: url("https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1574751674/16442994_1720628841517058_1290232932_o_qovium.jpg") center/cover;
}
.inner-left-panel:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #4c5866;
z-index: -1;
opacity: 0.85;
}
.inner-right-panel {
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: rotateY(90deg);
transform: rotateY(90deg);
transition-delay: 0.1s;
background: url("https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1559427301/index1_ku8rly.png") center/cover;
}
.inner-right-panel:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #606e8c;
z-index: -1;
opacity: 0.85;
}
.title {
margin: 0;
font-size: 40px;
text-align: center;
color: #9bbdd5;
}
.panels p {
font-size: 30px;
margin: 0;
}
@media (max-width: 640px) {
.panels {
width: 100%;
height: 200vh;
}
.panel {
float: none;
width: 100%;
height: 100vh;
display: block;
text-align: center;
}
.left-panel,
.right-panel {
top: -25%;
left: 0;
}
.left-panel:hover .arrow {
-webkit-transform: translate(-50%, -80%) rotate(90deg);
transform: translate(-50%, -80%) rotate(90deg);
}
.right-panel:hover .arrow {
-webkit-transform: translate(-50%, -20%) rotate(90deg);
transform: translate(-50%, -20%) rotate(90deg);
}
.left-panel-active {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.left-panel-active .inner-left-panel {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
.left-panel-active .arrow {
-webkit-transform: translate(-50%, -50%) rotate(-90deg) !important;
transform: translate(-50%, -50%) rotate(-90deg) !important;
}
.right-panel-active {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.right-panel-active .inner-right-panel {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
.right-panel-active .arrow {
-webkit-transform: translate(-50%, -50%) rotate(-90deg) !important;
transform: translate(-50%, -50%) rotate(-90deg) !important;
}
.left-panel-hidden {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
.right-panel-hidden {
-webkit-transform: translate(0, 50%);
transform: translate(0, 50%);
}
.inner-left-panel,
.inner-right-panel,
.name {
height: 50vh;
padding: 2vh 8vw;
display: flex;
align-items: center;
justify-content: center;
}
.inner-left-panel {
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.inner-right-panel {
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotateX(-90deg);
transform: rotateX(-90deg);
}
.title {
font-size: 32px;
}
.panels p {
font-size: 20px;
}
}
.arrow {
position: absolute;
top: 75%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
fill: #bde0ff;
border: 3px solid #212121;
border-radius: 50%;
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 640px) {
.arrow {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
}
.arrow-left {
top: 25%;
}
}
var Panels = (function() {
var panelLeft = document.querySelector('.left-panel');
var panelRight = document.querySelector('.right-panel');
var openLeft = function() {
panelLeft.classList.toggle('left-panel-active');
panelRight.classList.toggle('right-panel-hidden');
};
var openRight = function() {
panelRight.classList.toggle('right-panel-active');
panelLeft.classList.toggle('left-panel-hidden');
};
var bindActions = function() {
panelLeft.addEventListener('click', openLeft, false);
panelRight.addEventListener('click', openRight, false);
};
var init = function() {
bindActions();
};
return {
init: init
};
}());
Panels.init();
