• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak zrobić by po najechaniu na socialmedia yt fb tw i gp pojawiła się ręka?

VPS Starter Arubacloud
0 głosów
288 wizyt
pytanie zadane 13 kwietnia 2017 w Inne języki przez uMAXa Gaduła (4,290 p.)
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&amp;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 &copy; 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;
}

 

2 odpowiedzi

+1 głos
odpowiedź 13 kwietnia 2017 przez Comandeer Guru (599,730 p.)

Zrobić z nich linki najlepiej + poczytać o wstawianiu ikonek.

W ostateczności cursor: pointer + poczytać o wstawianiu ikonek.

komentarz 13 kwietnia 2017 przez uMAXa Gaduła (4,290 p.)
Coś takiego? Może być?

.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: #ffffff;
}

.fb:hover
{
	color: #4668b3;
}

.yt
{
	width: 250px;
	height: 155px;
	float:left;
}

.yt:hover
{
	color: #d94348;
}

.tw
{
	width: 250px;
	height: 155px;
	float:left;
}

.tw:hover
{
	//color: aqua;
	color: #3095d3;
}

.gplus
{
	width: 250px;
	height: 155px;
	float:left;
}

.gplus:hover
{
	color: #d95333;
}

.info
{
	margin-left: auto;
	margin-rigcht: auto;
	text-align: center;
	padding: 20px;
}
<div class="socials">
			<div class="socialdivs">
				<a href="http://facebook.com" target="_blank" "><div class="fb"><i class="icon-facebook"></i></div></a>
				<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>

 

komentarz 13 kwietnia 2017 przez MMM4CI3J Użytkownik (500 p.)
.info

{

    margin-left: auto;

    margin-right: auto;

    text-align: center;

    padding: 20px;

}

mała literówka przy ,, right" była. Reszta dobrze.
komentarz 13 kwietnia 2017 przez uMAXa Gaduła (4,290 p.)
dzięki za poświęcony czas i cierpliwość do mnie :P
komentarz 13 kwietnia 2017 przez MMM4CI3J Użytkownik (500 p.)
Nie ma za co :)

Mogę jeszcze w czymś pomóc jeśli chcesz.
komentarz 13 kwietnia 2017 przez uMAXa Gaduła (4,290 p.)
Nie trzeba narazie jeżeli wiem to robie jeżeli nie szukam pomocy :D
0 głosów
odpowiedź 13 kwietnia 2017 przez bwl Obywatel (1,530 p.)
W CSS, cursor: pointer;

Podobne pytania

0 głosów
2 odpowiedzi 243 wizyt
0 głosów
1 odpowiedź 161 wizyt
pytanie zadane 27 grudnia 2017 w HTML i CSS przez Neneko Nowicjusz (170 p.)

92,452 zapytań

141,262 odpowiedzi

319,080 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...