
	sadet48


	active panel

Web Apps: Sadet Sevinç

Heading 1

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

<!DOCTYPE html>
<html>
<head>
    <title>Web Apps: Sadet Sevinç</title>
    <meta charset="utf-8">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style>
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
@import url('https://fonts.googleapis.com/css?family=Lekton');
* {margin: 0;padding: 0;}
main {
background: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
main .pnl {
   background: #ff9;
    width: 545px;
    height: 200px;
    border: 2px dashed #000;
    display: inline-block;float: left;
    margin: 5px;
}
main .pnl.active {
	background: #fff!important;
	border-radius: 10px;
    border: 2px dashed #f00;
}
main .pnl h1 {
font-family: 'Lekton', sans-serif;
font-size: .5cm;
color: rgba(55,50,55,1);
background: transparent;
text-align: left;
padding-left: 20px;
font-style: italic;
}
main .pnl p{
font-family: 'Comfortaa',cursive;
color: rgba(0,0,0,.8);
background: transparent;
font-size: .4cm;
font-style: italic;
text-indent: 50px;
padding: 10px;
}
main .pnl-default {background: white;}
main .pnl-blue {background: blue;}
main .pnl-yellow {background: yellow;}
main .pnl-red {background: red;}
main .pnl-orange {background: orange;}
main .pnl-green {background: green;}
main .pnl-pink {background: pink;}
main .pnl-gray {background: gray;}
main .pnl-purple {background: purple;}
main .pnl-black {background: black;}
main .pnl-cyan {background: cyan;}
main .pnl-indigo {background: indigo;}
main .pnl-magenta {background: magenta;}
main .pnl-brown {background: brown;}
</style>
</head>
<body>
<header>
   <h1 id="b1"></h1>
</header>
<main>
  <h1 id="b2"></h1>
<div id="sortable">
    <div class="pnl pnl-yellow active">
        <h1 id="dh1">Heading 1</h1>
        <p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
    <div class="pnl pnl-pink">
        <h1 id="dh2">Heading 2</h1>
        <p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
    <div class="pnl pnl-green">
        <h1 id="dh3">Heading 3</h1>
        <p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
        <div class="pnl pnl-indigo">
        <h1 id="dh3">Heading 4</h1>
        <p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
    </div>
</div>
</main>
<script>
/* JQuery JS Files */
$(document).ready(function(){
  $('.pnl').click(function(){
  $('.pnl').removeClass("active");
  $(this).addClass("active");
});
});
/* Sortable Function */
$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});
</script>
</body>
</html>

Toplam 109682 ziyaretçi

sadet48

JQuery Cycle ile Haber Bandı

Sadet Sevinç

sadet48.tr.gg@gmail.com

Facebook beğen

Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?

Ücretsiz kaydol