<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="card">
<div class="photo"></div>
<div class="banner"></div>
<ul>
<li><b>HARUN PEHLİVAN</b></li>
<li><a href="https://harunpehlivantebimtebitagem.carrd.co" target="_blank"> FOUNDER,CEO BLOGGER</a></li>
</ul>
<button class="contact" id="main-button">click to get in touch</button>
<div class="social-media-banner">
<a href="https://www.twitter.com/HTERCUMANP"><i class="fa fa-twitter"></i></a>
<a href="https://facebook.com/profile.php?id=100008152065270"><i class="fa fa-facebook"></i></a>
<a href="https://instagram.com/harunpehlivantebimtebitagem"><i class="fa fa-instagram"></i></a>
<a href="https://www.linkedin.com/in/harun-pehlivan-0aa34252"><i class="fa fa-linkedin"></i></a>
</div>
<form class="email-form">
<input id="name" type="text" placeholder="name">
<input id="email" type="text" placeholder="email">
<textarea id="comment" type="text" placeholder="comment"></textarea>
<button class="contact">send</button>
</form>
</div>
</body>
html
{
overflow-x: hidden;
}
body {
font-family: 'Lato', sans-serif;
margin: 0;
background-color: white;
}
a
{
text-decoration: none;
}
.card
{
z-index: 1;
position: relative;
width: 300px;
height:400px;
margin: 0 auto;
margin-top:100px;
background-color: white;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
/*
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.2);
*/
}
.card.active
{
height:490px;
}
.banner
{
z-index: 2;
position: relative;
margin-top: -154px;
width:100%;
height:150px;
background-image: url("https://tebm.files.wordpress.com/2017/07/cropped-arge-proje-egitim-esnasc4b1nda-hallerim-1.jpg?w=1000&h=");
background-size: cover;
border-bottom: solid 1px lightgrey;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
}
.banner.active
{
height: 0;
}
.photo
{
z-index: 3;
position: relative;
border-radius: 50%;
height: 150px;
width: 150px;
background-color: white;
margin: 0 auto;
background-image: url("https://udemy-images.udemy.com/user/200_H/388551_6f04_77.jpg");
background-size: cover;
background-position: 50% 50%;
top:75px;
-webkit-box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.3);
-moz-box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.3);
box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.3);
-webkit-transition: top 0.7s ease-in-out, background 0.15s ease;
-moz-transition: top 0.7s ease-in-out, background 0.15s ease;
-o-transition: top 0.7s ease-in-out, background 0.15s ease;
-ms-transition: top 0.7s ease-in-out, background 0.15s ease;
}
.photo.active
{
top:-80px;
}
.card ul
{
list-style: none;
text-align: center;
padding-left: 0;
margin-top:87px;
margin-bottom:30px;
font-size: 20px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
}
.card ul.active
{
opacity:0;
visibility: hidden;
}
.card i
{
font-size: 25px;
display: inline-block;
margin-top:10px;
margin-left: 40px;
margin-right: 150px;
width: 300px;;
text-align: left;
color: #C7D0E1;
}
button.contact
{
margin: 0 auto;
text-align: center;
margin-top: -15px;
width: 100%;
height: 35px;
display: block;
border:none;
background-color: transparent;
font-family: inherit;
color: white;
background-color: #C7D0E1;
font-size:12px;
text-transform: uppercase;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
button.contact:hover
{
cursor: pointer;
background-color:#979da8;
}
button.contact:focus
{
outline: 0;
}
.social-media-banner
{
width: 300px;
height: 50px;
margin-top: 25px;
text-align: center;
position: absolute;
-webkit-transition: all 1.5s ease-in-out;
-moz-transition: all 1.5s ease-in-out;
-o-transition: all 1.5s ease-in-out;
-ms-transition: all 1.5 ease-in-out;
}
.social-media-banner.active
{
opacity:0;
visibility: hidden;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
}
.social-media-banner a i
{
display: inline;
width: auto;
margin-right:15px;
margin-left: 10px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.social-media-banner a i:hover
{
color:#979da8;
}
.email-form
{
height: 0;
overflow: hidden;
/* background-color: #C7D0E1;*/
width: 300px;
z-index:-1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.email-form.active
{
height: 310px;
z-index: 3;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.email-form input
{
width: 200px;
text-transform: capitalize;
/* background-color: #a4acbc;*/
margin: 0 auto;
font-family: inherit;
border: 1px solid #dadee5;
/* border: 1px solid black;*/
margin-top: 35px;
height: 30px;
display: block;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
}
.email-form input:focus,.email-form textarea:focus
{
/* border: none;*/
border: 1px solid grey;
outline: none;
}
::-webkit-input-placeholder
{
font-size: 12px;
text-transform: uppercase;
text-align: center;
/* color: black;*/
}
.email-form textarea
{
width: 200px;
text-transform: capitalize;
background-color: white;
margin: 0 auto;
display: block;
margin-top:40px;
border: 1px solid #dadee5;
font-family: inherit;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
}
.email-form button
{
margin-top: 60px;
}
$(document).ready(function()
{
$('.contact').click(function (e)
{
$('.card').toggleClass('active');
$('.banner').toggleClass('active');
$('.photo').toggleClass('active');
$('.social-media-banner').toggleClass('active');
$('.email-form').toggleClass('active');
var buttonText = $('button.contact#main-button').text();
if (buttonText === 'back')
{
buttonText = 'click to get in touch';
$('button.contact#main-button').text(buttonText);
}
else
{
buttonText = 'back';
$('button.contact#main-button').text(buttonText);
}
});
});
//turn on to make the photo follow mouse
// $(document).ready(function()
// {
// $(document).mousemove(function( event )
// {
// var docWidth = $(document).width();
// var docHeight = $(document).height();
// var xValue = (event.clientX/docWidth)*100;
// var yValue = (event.clientY/docHeight)*100;
// $('.photo').css('background-position', xValue+'%,'+yValue+'%');
// });
// });
