harunpehlivan
4/22/2018 - 7:15 PM
animated portfolio
animated portfolio
.scrollable {
height: 100px;
/*overflow-y:auto;*/
}
.fixed-top{
background-color:#0CF;
}
.profile_at_right{
float:right;
margin-top:-10px;
width:100px;
line-height:50px;
font-size:24px;
}
.customized-btn{
background-color:#C182D7;
height:50px;
color:#000;
transition-duration:3s;
animation-duration:2s;
animation-iteration-count:infinite;
animation-name:blink;
font-size:24px;
}
@keyframes blink{
10%{ color:#F00;
}
20%{ color:#00F;}
30%{color:#0F0;}
40%{color:#C90;}
100%{color:#FF3;}
}
.row:nth-child()
{
color:#F00;
}
body{
background: rgba(76,76,76,1);
background: -moz-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,0.95) 12%, rgba(102,102,102,0.9) 25%, rgba(71,71,71,0.85) 39%, rgba(44,44,44,0.81) 50%, rgba(0,0,0,0.8) 51%, rgba(17,17,17,0.77) 60%, rgba(43,43,43,0.7) 76%, rgba(28,28,28,0.65) 91%, rgba(19,19,19,0.61) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(76,76,76,1)), color-stop(12%, rgba(89,89,89,0.95)), color-stop(25%, rgba(102,102,102,0.9)), color-stop(39%, rgba(71,71,71,0.85)), color-stop(50%, rgba(44,44,44,0.81)), color-stop(51%, rgba(0,0,0,0.8)), color-stop(60%, rgba(17,17,17,0.77)), color-stop(76%, rgba(43,43,43,0.7)), color-stop(91%, rgba(28,28,28,0.65)), color-stop(100%, rgba(19,19,19,0.61)));
background: -webkit-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,0.95) 12%, rgba(102,102,102,0.9) 25%, rgba(71,71,71,0.85) 39%, rgba(44,44,44,0.81) 50%, rgba(0,0,0,0.8) 51%, rgba(17,17,17,0.77) 60%, rgba(43,43,43,0.7) 76%, rgba(28,28,28,0.65) 91%, rgba(19,19,19,0.61) 100%);
background: -o-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,0.95) 12%, rgba(102,102,102,0.9) 25%, rgba(71,71,71,0.85) 39%, rgba(44,44,44,0.81) 50%, rgba(0,0,0,0.8) 51%, rgba(17,17,17,0.77) 60%, rgba(43,43,43,0.7) 76%, rgba(28,28,28,0.65) 91%, rgba(19,19,19,0.61) 100%);
background: -ms-linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,0.95) 12%, rgba(102,102,102,0.9) 25%, rgba(71,71,71,0.85) 39%, rgba(44,44,44,0.81) 50%, rgba(0,0,0,0.8) 51%, rgba(17,17,17,0.77) 60%, rgba(43,43,43,0.7) 76%, rgba(28,28,28,0.65) 91%, rgba(19,19,19,0.61) 100%);
background: linear-gradient(45deg, rgba(76,76,76,1) 0%, rgba(89,89,89,0.95) 12%, rgba(102,102,102,0.9) 25%, rgba(71,71,71,0.85) 39%, rgba(44,44,44,0.81) 50%, rgba(0,0,0,0.8) 51%, rgba(17,17,17,0.77) 60%, rgba(43,43,43,0.7) 76%, rgba(28,28,28,0.65) 91%, rgba(19,19,19,0.61) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1 );
}
footer{
background-color:#000;
color:#FFF;
margin-bottom:-20px;
}
.footer-social{
}
.footer-social img{
height:50px;
width:50px;
border-radius:50%;
margin:50px;
border-radius: 0px 0px 144px 158px;
-moz-border-radius: 0px 0px 144px 158px;
-webkit-border-radius: 0px 0px 144px 158px;
border: 9px solid #c221c2;
}
.footer-social img:hover{
height:52px;
width:52px;
}
.photo-cols:hover{
border-bottom:10px solid #F00;
transform:rotate(20deg);
transition-duration:1s;
}
.foot{
background-color:#666;
margin-bottom:-20px;
padding-bottom:-20px;
}function showPersoneInfo(){
$("#personal-info").show("slow");
}
function showPort()
{
$("#port").show("slow");
}
function showContact(){
$("#contact").show("slow");
}
function hidePersonelInfo(){
$("#personal-info").hide("fast");
}
function hidePort(){
$("#port").hide("fast");
}
function hideContact(){
$("#contact").hide("fast");
}
function imageFunction(){
$("#img.img-thumbnail").fadeIn(3);
}
<head>
<title>myPortfolio</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="portfilio_css.css">
<script src="portfilio_js.js"></script>
<!-- <link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'> -->
<script>
$(document).ready(function(e) {
$("#personal-info").hide();
$("#port").hide();
$("#contact").hide();
});
</script>
</head>
<body>
<div class="fix-top">
<div class="well fixed-top">
<button class="btn btn-info customized-btn" onClick="showPersoneInfo()">Personel Info <nav class=" glyphicon glyphicon-menu-down" ></nav></button>
<button class="btn btn-info customized-btn" onClick="showPort()">Portfolio <nav class="glyphicon glyphicon-menu-down"></nav></button>
<button class="btn btn-info customized-btn" onClick="showContact()">Contact <nav class="glyphicon glyphicon-cloud"></nav></button>
<a href="#social"><button class="btn btn-info customized-btn" onClick="#social">Social Plugins <nav class="glyphicon glyphicon-cloud"></nav></button></a>
</div>
</div>
<div class="container-fluid">
<div class="col-lg-12 col-sm-4 col-xs-12">
<!-- Info closed here -->
</div><!-- col -12 closed here -->
<div class="row">
<div class="col-sm-8">
<div id="info" >
<div class=" col-lg-12 well" id="personal-info">
<div class="close"><button class="btn btn-danger" onClick="hidePersonelInfo()"><b>X</b></button></div>
<h1><nav class="glyphicon glyphicon-baby-formula"></nav><small>About</small></h1>
<div class="row">
<div class="col-sm-6">
<h2>My Personel Information </h2>
<p>HARUN PEHLİVAN </p>
<p>22/07/1984 ÇORUM TR </p>
<p><a href="https://1017556.site123.me" target="_blank">INFORMATION TECHNOLOGY GROUP </a></p>
</div>
<div class="col-sm-6"><img src="https://s-ssl.wordpress.com/mshots/v1/https%3A%2F%2F1017556.site123.me?w=360" class="img-circle"></div>
</div>
</div>
<div id="port">
<div class="col-lg-12 well" id="port">
<div class="close"> <button class="btn btn-danger" onClick="hidePort()"><b>X</b></button></div>
<h1><nav class="glyphicon glyphicon-baby-formula"></nav><small>Portfolio</small></h1>
<h2>Portfolio </h2>
<p><a href="http://harunpehlivantebimtebitagem.bitballoon.com" target="_blank">Hi There</a></p>
</div>
</div>
<div id="contact">
<div class=" col-lg-12 well" id="contact">
<div class="close"><button class="btn btn-danger" onClick="hideContact()"><b>X</b></button></div>
<h1><nav class="glyphicon glyphicon-baby-formula"></nav><small>Contact</small></h1>
<h2>Contact</h2>
<p>MyContact No. +90 358 417 6230</p>
<p>My Email: trcmnhp@hotmail.com </p>
<p>facebook :fb.me/100008152065270 </p>
<h3>For More info You Can Contact Me</h3>
<frameset>
<form class=" form-group">
<legend>Send me feedback </legend>
<table class="table-responsive">
<tr>
<td><label>Your Name</label></td>
<td><input type="text" name="name" required placeholder="enter Your Name" class="input-sm form-control"></td>
</tr>
<tr>
<td><label>E-mail Address</label></td>
<td><input type="email" name="mail" required placeholder="e.g. amitamorablabla@gmail.com" class="input-sm form-control"></td>
</tr>
<tr>
<td><label>Country</label></td>
<td><input type="text" name="country"required placeholder="Your Country Name " class="input-sm form-control"></td>
</tr>
<tr>
<td></td>
<td>
<textarea placeholder="Enter Your Feedback here ..." class="form-control">
</textarea>
</td>
</tr>
<tr>
<td></td>
<td><button type="submit" class="btn btn-success">Send FeedBack</button></td>
</tr>
</table>
</form>
</frameset>
</div>
</div>
</div>
<div class="well">
<h1>HARUN PEHLİVAN</h1>
<img src="https://tebm.files.wordpress.com/2017/07/cropped-cropped-gravatartebm-qr.png" class="img-responsive img-thumbnail" onMouseUp="fadeIn(3)">
</div>
</div>
<div class="col-sm-4">
<div class="col-sm-4">
</div>
<div class="well">
<p><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a></p>
</div>
<div class="row col-sm-12">
<div class="col-sm-6 photo-cols"><div class=""><img src="https://cdn-cms.f-static.com/uploads/1017556/800_5aca4ec48ebbc.png" class=" img-responsive img-thumbnail" >
</div></div>
<div class="col-sm-6 photo-cols"><div class=""> <img src="https://cdn-cms.f-static.com/uploads/1017556/800_5aca4f2a5660f.png" class=" img-responsive img-thumbnail">
</div></div>
</div>
</div>
</div><!-- Row div ends here -->
</div><!-- Container div ends here -->
<div class="row well foot" id="social">
<div class="col-lg-4 "></div>
<div class="col-lg-4 "><h2 HARUN PEHLİVAN="center">About Me at</h2>
<div class="row">
<div class="col-sm-6">
<a href="https://facebook.com/100008152065270" target="new"><img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/square-facebook-128.png" class="img-responsive img-circle img-thumbnail"></a>
</div>
<div class="col-sm-6">
<a href="https://github.com/harunpehlivan" target="new"><img src="https://cdn.tutsplus.com/net/uploads/2013/08/github-collab-retina-preview.gif" class="img-responsive img-circle img-thumbnail">
</a>
</div>
<h2 align="center"><small>© HARUN PEHLİVAN INFORMATION TECHNOLOGY GROUP </small></h2>
</div>
</div>
<div class="col-lg-4 ">
</div>
</div>
</body>
</html>