Untitled

dabblet.css

* {
	box-sizing: border-box;
	font-family: 'Helvetica';
}  
 
 body{
	margin:0;
 }

.tools{
	width: 100%;
	height: 60px; 
	padding: 13px 30px 0 15%;
	border-bottom: 1px solid gray;
	background: lightgray;
	background: linear-gradient(to right bottom, rgb(200,200,200), rgb(240,240,240), rgb(200,200,200));
	background: -ms-linear-gradient(to right bottom, rgb(200,200,200), rgb(240,240,240), rgb(200,200,200));
	background: -webkit-linear-gradient(to right bottom, rgb(200,200,200), rgb(240,240,240), rgb(200,200,200));
	background: -moz-linear-gradient(to right bottom, rgb(200,200,200), rgb(240,240,240), rgb(200,200,200));
	background: linear-gradient(170deg, rgb(200, 200, 200), rgb(250, 250, 250), rgb(200, 200, 200));	
}

.tools button{
	padding: 8px 20px;
	border-radius: 3px;
	border:none;
	outline: none;
	margin-left: 20px;
}

.tools button:active{
	transform: scale(0.92);
}

.tools .edit{
	background: mediumspringgreen;
	border: 1px solid green;
}

.tools .edit:hover{
	background: mediumseagreen;
}

.tools .delete{
	background: red;
	border: darkred 1px solid;
}

.tools .delete:hover{
	background: indianred;
}

.tools .send-mail{
	border: 1px solid gray;
}

.tools .send-mail:hover{
	background: rgb(140, 140, 140);
}

.switch-pages{
	float: right;
	display: flex;
}

.switch-pages a{
	text-decoration: none;
	margin-right: 10px;
}

.switch-pages div{
	width: 25px;
	height: 25px;
	margin-top: 5px;
	transform: rotate(45deg);
	transition: transform 0.1s;
}

.switch-pages a #left{
	border-left: 2px solid black;
	border-bottom: 2px solid black;
}

.switch-pages a #right{
	border-top: 2px solid black;
	border-right: 2px solid black;
}

.switch-pages div:hover{
	transform: rotate(45deg) scale(1.15);
}

.switch-pages div:active{
	transform: rotate(45deg) scale(0.9);
}
	
.name-container{
	width: 100%;
	height: 32px;
	padding: 30px 15%;
	font-size: 29px;
	display: flex;
	justify-content: flex-start;
	algin-items: center;
	margin-bottom: 70px;
}

.name-container img{
	width: 32px;
	height: 30px;
	transition: transform 0.3s;
}

.name-container img:hover{
	transform: scale(1.1);
}

.name-container img:active{
	transform: scale(0.9);
}

.name-container #name{
	padding: 0 10px 0 20px;
}

.name-container a{
	color: gray;
	text-decoration: none;
	font-size: 0.7em; 
	line-height: 35px;
}

.name-container a:hover{
	text-decoration: underline;
}

.name-container #firm{
	padding-left: 10px;
}

.info{
	position: relative;
	width: 70%;
	display: flex;
	justfy-content: flex-start;
	align-items: flex-start;
	margin: 90px auto;
	padding: 30px 40px;
	border: 1px solid gray;
	border-radius: 8px;
	box-shadow: 2px 2px 25px 1px rgba(0, 0, 0, 0.15);
}

.info #title{
	position: absolute;
	top: -25px;
	left: 4%;
	color: gray;	
}

.info span{
	margin-bottom: 10px;
}

.info .labels{
	width: 100px;
	color: gray;
}

dabblet.html

<div class='tools'>
	<button class="edit">Düzenle</button>
	<button class="delete">Sil</button>
	<button class="send-mail">E-Posta </button>
	<div class="switch-pages">
		<a href="#" id="">
			<div id="left"></div>
		</a>
		<a href="#" style="transform: rotaeY(180deg)">
			<div id="right"></div>	
		</a>
	</div>
</div>

<div class="name-container">
	<a href="#">
		<img src="https://cdn3.iconfinder.com/data/icons/social-productivity-line-art-3/128/arrow-left2-512.png" alt="back">
	</a>
	<span id="name">Gökhan Aslan </span>
	<span> - </span>
	<a id="firm" href="firm">Beymen</a>
</div>

<div class="personal info">
	<span id="title">Kişisel Bilgiler</span>
	<div class="labels">
		<span>Unvan</span>
	</div>
	<div class="values">
		<span>Satış Danışmanı</div>
	</div>

</div>

<div class="company info">	
	<span id="title">Şirket Bilgileri</span>
	<div class="labels">
		<span>Şirket ismi</span>
	</div>
	<div class="values">
		<span>Beymen</div>
	</div>
</div>



<div class="contact info">
	<div class="labels">
		<span id="title">Adres Bilgisi</span>
		<span>Adres</span>
		
	</div>
	<div class="values">
		<span>Koru sok. no2/221</div>
	</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}