<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="mainwrap">
<header>
<h1><a href="https://www.doyoubuzz.com/harun-pehlivan">HARUN PEHLİVAN</a></h1>
<h2>IT (CODER,DESIGNER,DEVELOPER,ADMİNİSTRATOR) FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT HP IT GROUP (TEBİM TEBİTAGEM)</h2>
<ul id="menu">
<li><a class="profile" href="#profile" title="Profile">Profile</a><span>Some information about me</span></li>
<li><a class="resume" href="#resume" title="Resume">Resume</a><span>Professional information</span></li>
<li><a class="contact" href="#contact" title="Contact">Contact</a><span>Get in touch</span></li>
</ul>
</header>
<div style="clear:both"></div>
<div id="content">
<div id="profile" class="section">
<div class="column col3">
<table id="bioinfo">
<tbody>
<tr>
<td class="odd">Name</td>
<td class="even">HARUN PEHLİVAN</td>
</tr>
<tr>
<td class="odd">Date of birth</td>
<td class="even">22.07.1984</td>
</tr>
<tr>
<td class="odd">Address</td>
<td class="even">SULUOVA AMASYA</td>
</tr>
<tr>
<td class="odd">Languages</td>
<td class="even">English, Arabic</td>
</tr>
<tr>
<td class="odd">Website</td>
<td class="even">harunpehlivan.fm.tc</td>
</tr>
<tr>
<td class="odd">Email</td>
<td class="even">trcmnhp@hotmail.com</td>
</tr>
</tbody>
</table>
<ul class="social">
<li><a href="https://plus.google.com/111320383727376607540" class="111320383727376607540"><img src="http://andreasviklund.com/files/demo/cv-template-tpy/img/icons/gplus.png" alt="Google Plus" /></a></li>
<li><a href="https://facebook.com/100008152065270" class="100008152065270"><img src="http://andreasviklund.com/files/demo/cv-template-tpy/img/icons/facebook.png" alt="Facebook" /></a></li>
<li><a href="https://www.twitter.com/HTERCUMANP" class="HTERCUMANP"><img src="http://andreasviklund.com/files/demo/cv-template-tpy/img/icons/twitter.png" alt="Twitter" /></a></li>
<li><a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252" class="harun-pehlivan-0aa34252"><img src="http://andreasviklund.com/files/demo/cv-template-tpy/img/icons/linkedin.png" alt="Linkedin" /></a></li>
<li><a href="https://flickr.com/harunpehlivan" class="harunpehlivan"><img src="http://andreasviklund.com/files/demo/cv-template-tpy/img/icons/flickr.png" alt="flickr" /></a></li>
</ul>
</div>
<div class="column col5 pl-50">
<img src="https://avatars2.githubusercontent.com/u/4306341?s=460&v=4" alt="HARUN PEHLİVAN" />
<p></p>
</div>
</div>
<div id="resume" class="section">
<table id="cv">
<tbody>
<tr>
<td class="col2"><div class="date"> </div></td>
<td class="col6 pl-30">
<p class="company">FCC-WebPortfolio</p>
<p class="title"></p>
<p class="description"><a href="https://fcc-webportfolio.glitch.me" rel="nofollow" class="url">
<img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2Ffcc-webportfolio.glitch.me?w=360" alt="Screenshot" width="180">
</p>
</td>
</tr>
<tr>
<td class="col2"><div class="date"></span></td>
<td class="col6 pl-30">
<p class="company"></p>
<p class="title"></p>
<p class="description"></p>
</td>
</tr>
<tr>
<td class="col2"><div class="date"></span></td>
<td class="col6 pl-30">
<p class="company"></p>
<p class="title"></p>
<p class="description"></p>
</td>
</tr>
</tbody>
</table>
</div>
<div id="contact" class="section">
<div class="column col3">
<h3>HARUN PEHLİVAN</h3>
<p>SULUOVA AMASYA</p>
<p>Web:harunpehlivan.fm.tc<br />
E-mail: trcmnhp@hotmail.com</p>
</div>
<div class="column col5 pl-50">
<h3>Send a message</h3>
<form id="contactform">
<p class="column col4"><label for="name">Name:</label><input type="text" name="name" id="name" /></p>
<p class="column col4"><label for="email">E-mail:</label><input type="text" name="email" id="email" /></p>
<p class="column col8"><label for="message">Message:</label><textarea rows="5" name="message" id="message"></textarea></p>
<p class="column col8"><input class="button" type="button" value="Submit" /></p>
</form>
</div>
</div>
</div>
<div id="footer">
© 2023 HARUN PEHLİVAN
</div>
</div>
</body>
*{
border:0;
font:inherit;
font-size:100%;
vertical-align:baseline;
margin:0;
padding:0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font:16px 'PT Sans Narrow', Helvetica, Arial, sans-serif;
font-weight:400;
background-color:#ffffff;
color:#ffffff;
}
ol,ul {
list-style:none;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img {
border:none;
max-width:100%;
}
a img {
border:none;
}
a {
color:#ffffff;
text-decoration:underline;
outline:none;
}
a:hover,a:focus {
color:#333333;
text-decoration:underline;
}
p {
margin:0 0 10px;
}
header h1 {
margin:30px 0 0;
}
header h1 a {
font-size:30px;
text-transform:uppercase;
color:#333333;
text-decoration:none;
}
header h1 a:hover {
color:#00aba9;
text-decoration:none;
}
header h2 {
color:#333;
font-size:22px;
margin:10px 0 0;
}
h3 {
font-size:26px;
font-weight:400;
margin:0 0 20px;
}
/* 8 Column Grid
-----------------------------------------------------------------------------
Span 1: 9.875%
Span 2: 22.75%
Span 3: 35.625%
Span 4: 48.5%
Span 5: 61.375%
Span 6: 74.25%
Span 7: 87.125%
Span 8: 100%
----------------------------------------------------------------------------- */
.column {
margin-left:3%;
padding:0 0%;
float:left;
}
.column:first-child {
margin-left:0;
}
.col1 {
width:9.875%;
}
.col2 {
width:22.75%;
}
.col3 {
width:35.625%;
}
.col4 {
width:48.5%;
}
.col5 {
width:61.375%;
}
.col6 {
width:74.25%;
}
.col7 {
width:87.125%;
}
.col8 {
margin-left:0;
width:100%;
}
.pl-50 {
padding-left:50px;
}
.pl-30 {
padding-left:30px;
}
#mainwrap {
overflow:hidden;
position:relative;
width:840px;
margin:0 auto;
}
#content {
height:400px;
overflow:hidden;
position:relative;
}
#pagecontainer {
position:relative;
width:9999px;
}
.section {
float:left;
height:400px;
margin-right:50px;
position:relative;
width:100%;
padding:30px;
overflow:hidden;
}
#profile {
background-color: #00aba9;
overflow-y:scroll;
}
#resume {
background-color: #76608a;
overflow-y:scroll;
}
#contact {
background-color: #f0a30a;
}
#menu {
margin-top:30px;
overflow:hidden;
}
#menu li {
display:block;
float:left;
width:32.666%;
margin-left:1%;
position:relative;
}
#menu li:first-child {
margin-left:0;
}
#menu li a {
display:block;
height:42px;
line-height:42px;
color:#333;
font-size:18px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
margin-top:20px;
background-color:#e6e6e6;
}
#menu li span {
display:none;
}
#menu li.active span {
display:block;
position:absolute;
bottom:2px;
width:100%;
text-align:center;
line-height:14px;
}
#menu li.active a {
line-height:43px;
height:62px;
margin-top:0;
color:#ffffff;
}
#menu li.active a.profile {
background-color:#00aba9;
}
#menu li.active a.resume {
background-color:#76608a;
}
#menu li.active a.contact {
background-color:#f0a30a;
}
#menu li a:hover {
text-decoration:none;
background-image:none;
}
#menu li.active a {
text-decoration:none;
}
#bioinfo {
width:100%;
border-collapse: collapse;
}
#bioinfo tr td {
padding:5px 10px;
}
#bioinfo .odd {
background: rgba(0,0,0,0.5);
border-right:1px solid #00aba9;
border-bottom:1px solid #00aba9;
}
#bioinfo .even {
background: rgba(0,0,0,0.3);
border-bottom:1px solid #00aba9;
}
.social {
overflow:hidden;
padding:0;
margin:20px 0 0;
}
.social li {
display:block;
float:left;
height:36px;
width:36px;
margin:0 10px 10px 0;
opacity: 0.5
}
#cv {
margin:0;
padding:0;
border-collapse: collapse;
}
#cv .date {
position: relative;
padding: 10px;
color: #ffffff;
background: rgba(0,0,0,0.5);
}
/* creates triangle */
#cv .date:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: absolute;
right: -10px;
top: 50%;
width: 0;
border-width: 10px 0 10px 10px;
border-style: solid;
border-color: transparent rgba(0,0,0,0.5);
margin-top:-10px;
}
#cv .company {
font-size:28px;
margin:0;
padding:0;
}
#cv .title {
font-size:22px;
margin:0;
padding:0;
}
#cv .description {
font-size:15px;
margin:10px 0 30px;
padding:0;
}
#contactform label {
width:100%;
display:block;
}
#contactform input,
#contactform textarea {
width:100%;
background-color:rgba(0,0,0,0.5);
color:white;
border:none;
padding:5px;
}
#contactform input.button {
background-color:#fa6800;
padding:10px;
width:auto;
float:right;
cursor:pointer;
}
#footer {
color:#999;
text-align:center;
width:100%;
padding-top:20px;
margin-top:-2px;
}
#footer a {
color:#999;
}
@media screen and (max-width:850px) {
#mainwrap {
width:95%;
}
#content,
.section {
height:auto;
}
}
@media screen and (max-width:479px) {
.section {
padding:15px;
}
.column {
margin-left:0 0%;
padding:0 0%;
float:none;
}
.col1,
.col2,
.col3,
.col4,
.col5,
.col6,
.col7,
.col8 {
margin-left:0;
width:100%;
}
#cv .col2 {
width: 22.75% !important;
max-width:100px !important;
}
#cv .col6 {
width: auto !important;
}
#menu li.active span {
display:none;
}
}
$(document).ready(function() {
$(".section").not(":first").hide();
$("ul#menu li:first").addClass("active").show();
$("ul#menu li").click(function() {
$("ul#menu li.active").removeClass("active");
$(this).addClass("active");
$(".section").slideUp();
$($('a',this).attr("href")).slideDown('slow');
return false;
});
});
