Jak zrobić by po najechaniu na socialmedia yt fb tw i gp pojawiła się ręka?
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8">
<title>Philosophia Blog</title>
<meta name="description" content="Blog na temat ciekawych publikacji z dziedziny filozofii. Omówienie wybranych tekstów najsłynniejszych autorów!">
<meta name="keywords" content="filozofia, książki, blog, przemyślenia">
<meta name="author" content="Mortinez Walles">
<meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="css/fontello.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext" rel="stylesheet">
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1 class="logo">Philosophia Blog</h1>
<nav>
<ul class="menu">
<li><a href="#">Strona główna</a></li>
<li><a href="#">Pierwszy raz tutaj?</a></li>
<li><a href="#">Dlaczego filozofia?</a></li>
<li><a href="#">O autorze</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<article>
<section>
<div class="categories">
<header>
<h1>Witaj w świecie filozofii!</h1>
<p>Czy jesteś fanem filozofii? Lubisz świat idei? Ciekawią cię sposoby intepertowania świata przez ludzi? Jeżeli tak, to zapraszam do przygotowanych przeze mnie artykułów inspirowanych publikacjami znanych filozofów.</p>
</header>
<div class="author">
<figure>
<a href="#"><img src="img/alan-watts.jpg" alt="Alan Watts"></a>
<figcaption>Alan Watts</figcaption>
</figure>
</div>
<div class="author">
<figure>
<a href="#"><img src="img/de-mello.jpg" alt="Anthony de Mello"></a>
<figcaption>Anthony de Mello</figcaption>
</figure>
</div>
<div class="author">
<figure>
<a href="#"><img src="img/nietzsche.jpg" alt="Fryderyk Nietzschen"></a>
<figcaption>Fryderyk Nietzsche</figcaption>
</figure>
</div>
<div class="author">
<figure>
<a href="#"><img src="img/platon.jpg" alt="Platon"></a>
<figcaption>Platon</figcaption>
</figure>
</div>
<div class="author">
<figure>
<a href="#"><img src="img/kant.jpg" alt="Immanuel Kant"></a>
<figcaption>Immanuel Kant</figcaption>
</figure>
</div>
<div class="author">
<figure>
<a href="#"><img src="img/emerson.jpg" alt="Ralph Waldo Emerson"></a>
<figcaption>Ralph Waldo Emerson</figcaption>
</figure>
</div>
</div>
</section>
<section id="newest">
<div class="entries">
<header>
<h1>Najnowsze wpisy</h1>
<p>Poniżej znajdziesz trzy ostatnio opublikowane artykuły - dzięki temu łatwo można sprawdzić, czy na blogu pojawiło się coś nowego. Wpisy zazwyczaj pojawiają się we wtorki i piątki, o nowościach informuję także na swoim Twitterze</p>
</header>
<div class="entry">
<div class="entryimg">
<img src="img/de-mello.jpg" alt="Anthony de Mello">
</div>
<div class="entrytxt">
<h2>Anthony de Mello: Poszukiwanie akceptacji</h2>
<p>Ktoś kiedyś pięknie to ujął: życie to coś, co przydarza się nam podczas gdy jesteśmy zajęci układaniem planów. Jesteśmy zajęci imponowaniem wszystkim wokół, dbaniem o to, by na pewno zostać dobrze odebranym. Porozmawiajmy o nałogu poszukiwania akceptacji!</p>
</div>
</div>
<div class="entry">
<div class="entryimg">
<img src="img/nietzsche.jpg" alt="Fryderyk Nietzschen">
</div>
<div class="entrytxt">
<h2>Fryderyk Nietzsche: Zgładzić smoka</h2>
<p>Wielbłąd to zwierzę, na które ludzie nakładają wiele brzemion, w tym ciężar braku własnej autonomii. Wielbłąd (jak to wielbłąd) udaje się z całym tym ciężarem na pustynię. Czym jest na pustynia? To miejsce gdzie jesteś sam, gdzie nie słychać tych wszystkich "powinieneś".</p>
</div>
</div>
<div class="entry">
<div class="entryimg">
<img src="img/alan-watts.jpg" alt="Alan Watts">
</div>
<div class="entrytxt">
<h2>Alan Watts: Potrzeba kontroli</h2>
<p>Zastanawiam się, co byś zrobił, gdybyś miał moc śnić w nocy jakikolwiek wybrany przez siebie sen. I oczywiście miałbyś moc wpływania na swoje odczuwanie czasu we śnie. Mógłbyś przeżyć np. 75 lat subiektywnego czasu w ramach ośmiogodzinnego snu.</p>
</div>
</div>
</div>
</section>
<section>
<div class="contact">
<header>
<h1>Kontakt z autorem</h1>
<p>Jeśli masz ochotę podyskutować, zaproponować temat wpisu lub nawiązać współpracę reklamową - zapraszam do kontaktu mailowego, proszę jednak o wyrozumiałość co do czasu udzielenia przeze mnie odpowiedzi.</p>
</header>
<a href="#" class="bluebutton">Nawiązanie współpracy</a>
</div>
</section>
</article>
</main>
<footer>
<div class="socials">
<div class="socialdivs">
<div class="fb">
<i class="icon-facebook"></i>
</div>
<div class="yt">
<i class="icon-youtube"></i>
</div>
<div class="tw">
<i class="icon-twitter"></i>
</div>
<div class="gplus">
<i class="icon-gplus"></i>
</div>
<div style="clear:both"></div>
</div>
</div>
<div class="info">
Wszelkie prawa zastrzeżone © 2017 Dziękuję za wizytę!
</div>
</footer>
</body>
</html>
css
body
{
margin: 0;
background-color: #2F3336;
color: #efefef;
font-family: 'Open Sans', sans-serif;
font-size: 17px;
}
h1.logo
{
font-size: 44px;
font-weight: 700;
color: #ddd;
text-align: center;
text-transform: uppercase;
letter-spacing: 5px;
margin-top: 50px;
margin-bottom: 40px;
}
nav
{
background-color: #1c74b2;
text-align: center;
}
.menu
{
list-style-type: none;
margin: 0;
padding: 10px;
font-size: 18px;
min-height: 38px;
line-height: 200%;
}
.menu > li
{
display: inline-block;
padding-left: 20px;
padding-right: 20px;
border-right: 1px dashed #0a2b42;
}
.menu > li:first-child
{
border-left: 1px dashed #0a2b42;
}
.menu a
{
color: #fff;
text-decoration: none;
}
.menu a:hover
{
color: #0a2b42;
}
.categories
{
margin-left: auto;
margin-right: auto;
width: 950px;
text-align: center;
padding: 0;
}
h1
{
font-size: 44px;
font-weight: 400;
color: #39a5f1;
margin-bottom: 20px;
}
.author
{
display: inline-block;
margin-top: 10px;
}
.author a
{
opacity: 0.9;
}
.author a:hover
{
opacity: 1;
}
figure
{
margin: 8px;
padding: 0;
}
figcaption
{
margin-top: 8px;
padding: 0px;
}
.entries
{
margin-left: auto;
margin-right: auto;
width: 950px;
text-align: center;
padding-top: 10px;
padding-bottom: 80px;
margin-top: 40px;
}
#newest
{
background-color: #191d21;
}
.entry
{
background-color: #222930;
padding: 10px;
text-align: justify;
margin-top: 40px;
border-radius: 5px;
}
.entryimg
{
display: inline-block;
margin-left: 30px;
width: 110px;
}
.entryimg img
{
width: 90px;
height: 90px;
}
.entrytxt
{
display: inline-block;
width: 700px;
}
h2
{
font-size: 20px;
font-weight: 400;
border-radius: 5px;
}
.contact
{
margin-left: auto;
margin-right: auto;
width: 950px;
text-align: center;
padding-bottom: 70px;
margin-bottom: 50px;
}
.contact p
{
margin-bottom: 50px;
}
.bluebutton
{
background-color: #1c74b2;
padding: 15px;
color: #efefef;
font-size 19px;
text-decoration: none;
border-radius: 5px;
min-width: 300px;
}
.bluebutton:hover
{
background-color: #196499;
}
.socials
{
width:100%;
text-align: center;
background-color: #191d21;
}
.socialdivs
{
width: 1000px;
margin-left: auto;
margin-right: auto;
}
.fb
{
width: 250px;
height: 155px;
float:left;
//color: white;
}
.fb:hover
{
color: #4668b3;
}
.yt
{
width: 250px;
height: 155px;
float:left;
//color: white;
}
.yt:hover
{
color: #d94348;
}
.tw
{
width: 250px;
height: 155px;
float:left;
//color: white;
}
.tw:hover
{
//color: aqua;
color: #3095d3;
}
.gplus
{
width: 250px;
height: 155px;
float:left;
//color: white;
}
.gplus:hover
{
color: #d95333;
}
.info
{
margin-left: auto;
margin-rigcht: auto;
text-align: center;
padding: 20px;
}