Untitled

dabblet.css

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

.name-container{
	padding: 30px 10%;
	font-size: 
	displ
ay: flex;

	justify-content: }

.name-container a{
	color: gray;
	text-decoration: none;
	font-size: 0.6em;
}

.name-container img{
	width: 32px;
}
.name-container a:hover{
	text-decoration: underline;
}

.tools{
	width: 100%;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(to right bottom, 
	rgb(200,200,200), white, black);
	border-bottom: 1px solid gray;
}

.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;
}

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

.tools .delete:hover{
	background: indianred;
}
	
.info{
	position: relative;
	width: 80%;	display: flex;
	flex-direction: column;
	justfy-content: flex-start;
	align-items: flex-start;
	margin: 40px auto;
	padding: 10px 40px;
	border: 1px solid gray;
	border-radius: 8px;
}

.info span:nth-child(1){
	position: absolute;
	top: -25px;
	left: 4%;
	color: gray;	
}

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

dabblet.html

<div class='tools'>
	<button class="edit">Düzenle</button>
	<button class="delete">Sil</button>
	<button class="post">E-Posta </button>
</div>

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

<div class="personal info">
	<span>Kişisel Bilgiler</span>
	<span>İsim: Gökhan Aslan</span>
	<span>Unvan: Satış danışmanı</span>
</div>
<div class="company info">
	<span>Şirket Bilgieri</span>
	<span>Şirket ismi: Beymen</span>
</div>

<div class="contact info">
	<span>İletişim Bilgileri</span>
</div>

dabblet.js

// alert('Hello world!');

settings.json

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