<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 ---------->
<div class="wrapperMain">
<section id="services" class="bounce-inInverse">
<div class="containerContent">
<div class="set_size_section1">
<h2 class="services_h2 center">SERVICES</h2>
<p class="services_p center">hello services, hello services, hello services</p>
<div class="article_center2">
<article class="section1_article">
<img alt="Basket" src="http://icons.iconarchive.com/icons/jozef89/services-flat/512/ecommerce-icon.png" width="78" height="77">
<h3>E-Commerce</h3>
<p>Metus Vestibulum cursus elit pretium auctor cursus lorem Vestibulum eros sagittis. Netus pede Vestibulum Quisque Nam pretium Donec ut vitae quis parturient.</p>
</article>
<article class="section1_article">
<img alt="Laptop" src="http://icons.iconarchive.com/icons/jozef89/services-flat/512/responsive-web-icon.png" width="78" height="77">
<h3>Responsive Web</h3>
<p>Condimentum platea cursus porta tellus eros consectetuer metus Sed aliquet tempus. Laoreet non ac porta urna Vestibulum congue id eu elit dignissim. Sollicitudin vitae ipsum massa enim lacus</p>
</article>
<article class="section1_article">
<img alt="Locked" src="https://cdn0.iconfinder.com/data/icons/web-development-2/512/security_lock_password_protection_secure_locking_system_safe_privacy_private_safety_encryption_flat_design_icon-512.png" width="78" height="77">
<h3>Web Security</h3>
<p>Buspendisse in lorem ipsum ut magna pharera aliquet non sodales lorem ipsum belit. Donec sed odio rera magna pharera aliquet. Nulla uitae elit libero, a pharetra augue nulla ligula massa pharera aliquet</p>
</article>
</div>
</div>
</div>
</section>
<footer>
<div class="about-me-img">
<a href="http://www.jakubtursky.sk" target="_blank">
<img src="http://www.jakubtursky.sk/public/images/logo-brand-shadow-logo.png" alt="Jakub Turský" width="120px" >
</a>
<div class="authorWindowWrapper">
<div class="authorWindow">
<p><strong>Flexbox gallery </strong><br>
Created by - <a href="http://www.jakubtursky.sk" target="_blank"><strong>Jakub Turský</strong></a> <br>
For next info about me you can visit me site - <a href="http://www.jakubtursky.sk" target="_blank"> www.jakubtursky.sk </a> <br>
</p>
</div>
</div>
</div>
</footer>
</div>
<script>
/* BLUR EFFECT */
var $container = $('.article_center2'),
$articles = $container.children('article'),
timeout;
$articles.on('mouseenter', function(event) {
var $article = $(this);
clearTimeout(timeout);
timeout = setTimeout(function() {
if ($article.hasClass('active')) return false;
$articles.not($article).removeClass('active').addClass('blur');
$article.removeClass('blur').addClass('active');
}, 75);
});
$('.article_center2', '#services ').on('mouseleave', function(event) {
clearTimeout(timeout);
$articles.removeClass('active blur');
});
$articles.bind('click', function(){
var title = $(this).find('h3').text();
alert("Nothing interesting,\nonly the actual title of the article = " + title);
});
/* AUTHOR LINK */
$('.about-me-img').hover(function(){
$('.authorWindowWrapper').stop().fadeIn('fast').find('p').addClass('trans');
}, function(){
$('.authorWindowWrapper').stop().fadeOut('fast').find('p').removeClass('trans');
});
</script>
/*IE8, IE9*/
.displayNone{
display: none;
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
vertical-align: baseline;
}
html,body {
width: 100%;
height: 100%;
}
body {
background: #FFF;
color: #666;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
.containerContent {
margin: 0 auto;
width: 100%;
max-width: 1400px;
}
ul {
list-style: none;
list-style-position: outside;
}
a {
outline: none;
}
header, nav, section, article, aside, footer {
display: block;
}
p {
line-height: 150%;
}
a:link,a:visited {
text-decoration: none;
}
.clear {
clear: both;
}
.center {
text-align: center;
}
/*****************************************************************************************************************/
/*GENERAL SECTION SETTINGS*/
section {
width: 100%;
}
#services {
padding: 80px 0px 50px 0px;
position: relative;
display: block;
background: rgba(215, 215, 215, 0.52);
}
.set_size_section1 {
margin-left: auto;
margin-right: auto;
width: 100%;
display: inline-block;
}
/*****************************************************************************************************************/
#services .article_center2 article {
text-align: center;
flex: 0 0 25%;
cursor: pointer;
box-sizing: border-box;
text-transform: none;
margin: 25px;
z-index: 1;
-webkit-transition: opacity 0.4s linear, -webkit-transform 0.4s ease-in-out, -webkit-box-shadow 0.4s ease-in-out;
-moz-transition: opacity 0.4s linear, -moz-transform 0.4s ease-in-out, -moz-box-shadow 0.4s ease-in-out;
-o-transition: opacity 0.4s linear, -o-transform 0.4s ease-in-out, -o-box-shadow 0.4s ease-in-out;
-ms-transition: opacity 0.4s linear, -ms-transform 0.4s ease-in-out, -ms-box-shadow 0.4s ease-in-out;
transition: opacity 0.4s linear, transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
#services article img, #services article h3, #services article p {
-webkit-transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
-moz-transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
-o-transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
-ms-transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
transition: opacity 0.2s linear, text-shadow 0.5s ease-in-out, color 0.5s ease-in-out;
}
#services article.blur {
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9, M12=0, M21=0, M22=0.9, SizingMethod='auto expand')";
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
transform:scale(0.9);
opacity:0.8;
/*zoom:0.9;*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
#services article.active {
-webkit-transform:scale(1.05);
-moz-transform:scale(1.05);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.08, M12=0, M21=0, M22=1.08, SizingMethod='auto expand')";
-o-transform:scale(1.05);
transform:scale(1.05);
z-index:100;
/*zoom:1.08;*/
opacity:1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
#services article.active img, #services article.active p, #services article.active h3 {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
#services article.blur img{
text-shadow:0px 0px 10px rgba(51, 51, 51, 0.9);
color:rgba(51, 51, 51, 0);
opacity:0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
}
#services article.blur h3{
text-shadow:0px 0px 10px rgba(0, 0, 0, 0.9);
color:rgba(100, 100, 100, 0.3);
opacity:0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
}
#services article.blur p{
text-shadow:0px 0px 10px rgba(51, 51, 51, 0.9);
color:rgba(100, 100, 100, 0.3);
opacity:0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
}
.services_h2 {
font-family: 'MontserratBold', sans-serif;
font-family: 'Roboto Slab', sans-serif;
color: black;
margin-bottom: 5px;
margin-top: 20px;
font-size: 30px;
}
.services_p {
font-family: 'Roboto Slab';
font-style: italic;
font-size: 15px;
}
.section1_article {
text-align: center;
}
.section1_article h3 {
font-family: 'Cookie', sans-serif;
color: black;
margin-bottom: 3%;
font-size: 25px;
}
.section1_article img {
margin-bottom: 10px;
}
.section1_article p {
font-family: 'RobotoSlab Regular', serif; */
word-spacing: 1px;
/* font-family: 'Roboto Slab', sans-serif; */
font-size: 13px;
/* line-height: 30px; */
font-family: 'Roboto Slab', sans-serif;
/* font-family: 'Cookie', sans-serif; */
/* font-family: 'Open Sans Condensed', sans-serif; */
/* font-family: 'Sancreek', sans-serif; */
}
.article_center2 {
margin: 0 auto;
width: 80%;
/* align-items: flex-start; */
width: 80%;
flex-direction: row;
justify-content: center;
display: flex;
margin-top: 50px;
/* flex-flow: row wrap; */
/* justify-content: space-between; */
flex-direction: row;
flex-wrap: wrap;
}
/* SECTION LOADING */
.is-hidden {
visibility: hidden;
}
.bounce-inInverse {
-webkit-animation: cd-bounce-2-inverse 1s;
-moz-animation: cd-bounce-2-inverse 1s;
-ms-animation:cd-bounce-2-inverse 1s;
-o-animation:cd-bounce-2-inverse 1s;
animation: cd-bounce-2-inverse 1s;
}
@-webkit-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-20px);
}
100% {
-webkit-transform: translateY(0);
}
}
@-moz-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
60% {
opacity: 1;
-moz-transform: translateY(-20px);
}
100% {
-moz-transform: translateY(0);
}
}
@-o-keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
60% {
opacity: 1;
-o-transform: translateY(-20px);
}
100% {
-o-transform: translateY(0);
}
}
@keyframes cd-bounce-2-inverse {
0% {
opacity: 0;
transform: translateY(200px);
}
60% {
opacity: 1;
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
@media screen and (max-width: 650px){
#services .article_center2 article {
flex: 0 0 100%;
margin-bottom: 7%;
}
}
/* AUTHOR LINK */
footer{
z-index: 100;
padding-top: 50px;
padding-bottom: 50px;
width: 100%;
bottom: 0;
left: 0;
}
footer p {
color: rgba(255, 255, 255, 0.8);
font-size: 16px;
opacity: 0;
font-family: 'Open Sans';
width: 100%;
word-wrap: break-word;
line-height: 25px;
-webkit-transform: translateX(-200px);
transform: translateX(-200px);
margin: 0;
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
transition: all 250ms ease;
}
footer .authorWindow a{
color: white;
text-decoration: none;
}
footer p strong {
color: rgba(255, 255, 255, 0.9);
}
.about-me-img {
width: 120px;
height: 120px;
left: 10px;
/* bottom: 30px; */
position: relative;
border-radius: 100px;
}
.about-me-img img {
}
.authorWindow{
width: 600px;
background: #75439a;
padding: 22px 20px 22px 20px;
border-radius: 5px;
overflow: hidden;
}
.authorWindowWrapper{
display: none;
left: 110px;
top: 0;
padding-left: 25px;
position: absolute;
}
.trans{
opacity: 1;
-webkit-transform: translateX(0px);
transform: translateX(0px);
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
transition: all 500ms ease;
}
@media screen and (max-width: 768px) {
.authorWindow{
width: 210px;
}
.authorWindowWrapper{
bottom: -170px;
margin-bottom: 20px;
}
footer p{
font-size: 14px;
}
}
