<div id="kapsa">
<div id="ust">
<h4 id="baslik">PERSONAL CODE EDITOR</h4>
<div id="islem">
<div id="y"></div>
<div id="s"></div>
<div id="k"></div>
</div>
<div class="temizle"></div>
</div>
<div id="orta">
<div id="no">
<span class="numara">1</span>
<span class="numara">2</span>
<span class="numara">3</span>
<span class="numara">4</span>
<span class="numara">5</span>
<span class="numara">6</span>
<span class="numara">7</span>
<span class="numara">8</span>
<span class="numara">9</span>
<span class="numara">10</span>
<span class="numara">11</span>
<span class="numara">12</span>
<span class="numara">13</span>
<span class="numara">14</span>
<span class="numara">15</span>
<span class="numara">16</span>
<span class="numara">17</span>
<span class="numara">18</span>
<span class="numara">19</span>
<span class="numara">20</span>
<span class="numara">21</span>
<span class="numara">22</span>
<span class="numara">23</span>
<span class="numara">24</span>
<span class="numara">25</span>
<span class="numara">26</span>
<span class="numara">27</span>
<span class="numara">28</span>
<span class="numara">29</span>
<span class="numara">30</span>
<span class="numara">31</span>
<span class="numara">32</span>
<span class="numara">33</span>
</div>
<div id="satir">
<span class="yorum">/*<br> Here Is My Profile -> <a href="https://codepen.io/codery">Yasin Softaoğlu</a> <br>*/</span>
<br>
<span class="cl">.kisisel</span>
<br>
<span class="beyaz">{</span>
<br>
<span class="secici"> ad</span> <span class="beyaz">:</span>
<span class="ozellik"> Yasin</span><span class="beyaz">;</span>
<br>
<span class="secici"> soyad</span> <span class="beyaz">:</span>
<span class="ozellik"> Softaoğlu</span><span class="beyaz">;</span>
<br>
<span class="secici"> yas</span> <span class="beyaz">:</span>
<span class="ozellik"> 19</span><span class="beyaz">;</span>
<br>
<span class="secici"> hayat</span> <span class="beyaz">:</span>
<span class="ozellik"> aile <span class="onemli">!important</span></span><span class="beyaz">;</span>
<br>
<span class="beyaz">}</span>
<br>
<br>
<span class="cl">.egitim</span>
<br>
<span class="beyaz">{</span>
<br>
<span class="secici"> konum</span> <span class="beyaz">:</span>
<span class="ozellik"> manisa</span><span class="beyaz">;</span>
<span class="yorum" style="display:inline-block;"> /* Memleket Aydın */</span>
<br>
<span class="secici"> okul</span> <span class="beyaz">:</span>
<span class="ozellik"> cbü</span><span class="beyaz">;</span>
<br>
<span class="secici"> bolum</span> <span class="beyaz">:</span>
<span class="ozellik"> <font color="#D6FF00">"Yazılım Mühendisliği"</font></span><span class="beyaz">;</span>
<br>
<span class="beyaz">}</span>
<br>
<br>
<span class="cl">.yetenekler</span>
<br>
<span class="beyaz">{</span>
<br>
<span class="secici"> html</span> <span class="beyaz">:</span>
<span class="ozellik"> 100%</span><span class="beyaz">;</span>
<br>
<span class="secici"> css</span> <span class="beyaz">:</span>
<span class="ozellik"> 100%</span><span class="beyaz">;</span>
<br>
<span class="secici"> responsive</span> <span class="beyaz">:</span>
<span class="ozellik"> 98%</span><span class="beyaz">;</span>
<br>
<span class="secici"> C</span> <span class="beyaz">:</span>
<span class="ozellik"> 70%</span><span class="beyaz">;</span>
<br>
<span class="secici"> bootstrap</span> <span class="beyaz">:</span>
<span class="ozellik"> 98%</span><span class="beyaz">;</span>
<br>
<span class="secici"> Jquery</span> <span class="beyaz">:</span>
<span class="ozellik"> 43%</span><span class="beyaz">;</span>
<br>
<span class="beyaz">}</span>
<br>
<br>
<span class="id">#en-sevdigim-soz</span>
<br>
<span class="beyaz">{</span>
<br>
<span class="secici"> content</span> <span class="beyaz">:</span>
<span class="ozellik"> <font color="#D6FF00">"Your future is created by what you do today not tomorrow."</font></span><span class="beyaz">;</span>
<br>
<span class="beyaz">}</span>
<br>
</div>
<div class="temizle"></div>
</div>
<div id="alt">
© <a href="https://codepen.io/codery">Yasin Softaoğlu</a>
</div>
</div>@import url(https://fonts.googleapis.com/css?family=Roboto:400,300italic,500,700);
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: url(https://cdn.arstechnica.net/wp-content/uploads/2016/10/sierra.jpg);
background-size: cover;
font-family: 'Roboto', sans-serif;
font-size: 14px;
letter-spacing: 1px;
}
.temizle {
clear: both;
}
#kapsa {
width: 100%;
max-width: 800px;
margin: 15px auto 15px auto;
opacity: 0.9;
}
#ust {
background: #CEF3DD;
height: 30px;
line-height: 30px;
border-radius: 15px 15px 0 0;
padding-right: 10px;
padding-left: 14px;
}
#baslik {
display: inline-block;
color: darkslategrey;
}
#islem {
float: right;
}
#y {
background: #03d544;
width: 12px;
height: 12px;
border-radius: 100%;
display: inline-block;
margin: 0 2px;
cursor: pointer;
}
#s {
background: #ffbe03;
width: 12px;
height: 12px;
border-radius: 100%;
display: inline-block;
margin: 0 2px;
cursor: pointer;
}
#k {
background: #ff4545;
width: 12px;
height: 12px;
border-radius: 100%;
display: inline-block;
margin: 0 2px;
cursor: pointer;
}
/* Orta Kısım */
#no {
width: 41px;
background: #263238;
text-align: right;
padding: 7px 10px 7px 0;
float: left;
color: #cdd3de;
}
.numara {
display: block;
}
#satir {
background: #1B2225;
color: #cdd3de;
display: inline-block;
padding: 7px 10px;
width: calc(100% - 41px);
}
.yorum {
color: #98A8B5;
font-weight: 400;
display: block;
}
.yorum a {
text-decoration: none;
border-bottom: 1px dotted;
color: aquamarine;
font-weight: 400;
font-style: italic;
}
.cl {
color: #8EDCF5;
}
.id {
color: #F3A5F7;
}
.beyaz {
color: #cccccc;
}
.secici {
color: #CDFF8E;
}
.ozellik {
color: #FFFFFF;
}
.onemli {
color: #FFA9A9;
font-style: italic;
}
#alt {
background: #CEF3DD;
height: 30px;
line-height: 30px;
border-radius: 0 0 15px 15px;
padding-right: 10px;
text-align: center;
}
#alt a {
margin-left: 5px;
border-bottom: 1px dotted;
text-decoration: none;
color: #213738;
}/* Created By Yasin Softaoğlu */
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.