Kurs HTML odc. 3 Niewyświetlające się webfonty na localhost



 <!DOCTYPE HTML>
<html lang="pl">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title>Bartosz Łuczak - Portfolio</title>
	<meta name="description" content="Stworzę dla Ciebie wyjątkową stronę www. Zatrudnij programistę webowego: PHP, javaScript, HTML, CSS, MySQL, WordPress, Joomia, Drupal" />
	<meta name="keywords" content="zamów, stronę, www, tworzenie, programista, portfolio, php, javasrcipt, html, css, mysql, wordpress, joomia, drupal" />
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/fontello.css" type="text/css" />
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans|Lato&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
	<div id="container"> 

		<div class="rectangle">
			<a href="zatrudnij-programiste-webowego" class="tilelinkhtml5"><div id="logo">Bartosz Łuczak</div></a>
			<div id="zegar">12:00:00</div>
			<div style="clear: both;"></div> 
		</div>

		<div class="square">
			<div class="tile1">
				<a href="kim-jestem" class="tilelink"><i class="icon-user"></i><br />Kim jestem?</a>
			</div>	
			<a href="oferta-tworzenie-stron-www" class="tilelinkhtml5">
				<div class="tile1">
					<i class="icon-laptop"></i><br />Co oferuję?
				</div>
			</a>
			<div style="clear: both;"></div>
			
			<div class="tile2">
				<a href="cv-programista-php-javascript" class="tilelink"><i class="icon-graduation-cap"></i><br />Curriculum Vitae</a>
			</div>
			
			<div class="tile3">
				<a href="kontakt-programista-php" class="tilelink"><i class="icon-mail"></i><br />Kontakt ze mną</a>
			</div>
			
			<div style="clear: both;"></div>
			
			<div class="tile4">
				<i>Talk is cheap. Show me the code!</i><br />- Linus Torvalds, twórca Linuxa
			</div>
		</div>  
		
		<div class="square">
			<div class="tile5">
				Tytuł podstrony<br /><br />
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacinia, nisl eu rutrum congue, enim neque convallis dolor, et interdum sem tortor at dolor. Duis ullamcorper aliquet augue quis bibendum. Integer sodales blandit turpis non malesuada. Nam sodales molestie diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 	
			</div>
			<div class="yt">
				<a href="http://youtube.com" target="_blank" class="sociallink"><i class="icon-youtube"></i></a> 
			</div>
			<div class="fb">
				<a href="http://facebook.com" target="_blank" class="sociallink"><i class="icon-facebook"></i></a>
			</div>
			
			<div class="gplus">
				<a href="http://plus.google.com" target="_blank" class="sociallink"><i class="icon-gplus"></i></a>
			</div>
			<div class="tw">
				<a href="http://twitter.com" target="_blank" class="sociallink"><i class="icon-twitter"></i></a>
			</div>
			<div style="clear: both;"></div>
		</div>
		
		<div style="clear: both;"></div>
		<div class="rectangle">2017 &copy; Bartosz Łuczak - programista webowy zaprasza do współpracy! <i class="icon-mail-alt"></i> bartosz.luczak@adres.com</div>	
	</div>
</body>
</html>

body
{
	background-color: #404040;
	color: #ffffff;
	font-family: 'Lato', sans-serif;
	font-size: 20px; 
}

#container
{
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

.rectangle
{
	width: 960px;
	margin: 20px;
	text-align: center; 
}

.square
{
	width: 50%;
	float: left;	 
}

#logo
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px; 
	width: 600px;
	text-align: left;
}

#zegar
{
	float: left;
	font-family: 'Josefin Sans', sans-serif;
	font-size: 70px;
	text-align: left;
}

.tile1
{
	margin: 10px;
	width: 230px;
	height: 142px;
	background-color: #3095d3;
	float: left;
	text-align: center;
}

.tile1:hover
{
	background-color: #2085c2;
}

.tile2
{
	margin: 10px;
	width: 230px;
	height: 142px;
	background-color: #666666;
	float: left;
	text-align: center;
}

.tile2:hover
{
	background-color: #555555;
}

.tile3
{
	margin: 10px;
	width: 230px;
	height: 142px;
	background-color: #93c748;
	float: left;
	text-align: center;
}

.tile3:hover
{
	background-color: #82b637;
}

.tile4
{
	margin: 10px;
	width: 420px;
	height: 82px;
	background-color: #ee5a32;
	text-align: center;
	font-sive: 26px;
	padding: 30px;
	line-height: 150%;
}

.tile5
{
	margin: 10px;
	width: 420px;
	height: 244px;
	background-color: #666666; 
	text-align: justify;
	padding: 30px;
}

.yt
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d94348;
	float: left;
}

.yt:hover
{
	background-color: #c83237;
}

.fb
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #4668b3 ;
	float: left;
}

.fb:hover
{
	background-color: #3557a2;
}

.gplus
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #d95333;
	float: left;
}

.gplus:hover
{
	background-color: #b84222;
}

.tw
{
	margin: 10px;
	width: 105px;
	height: 142px;
	background-color: #3095d3;
	float: left;
}

.tw:hover
{
	background-color: #2084b2;
}

a.tilelink
{
	color: #ffffff;
	text-decoration: none;
	display: block;
	width: 230px;
	height: 142px;
}

a.tilelinkhtml5 
{
	color: #ffffff;
	text-decoration: none;
}

a.sociallink
{
	color: #ffffff;
	text-decoration: none;
	display: block;
	width: 105px;
	height: 142px;
}

Kurs HTML odc. 3 Niewyświetlające się webfonty na localhost

Zaloguj lub zarejestruj się, aby skomentować.

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

1 odpowiedź

Zaloguj lub zarejestruj się, aby skomentować.

Podobne pytania

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci