<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Hometask 7-8</title>
	<link rel="stylesheet" href="сss/reset.css">
	<link rel="stylesheet" href="сss/style.css">
	<link rel="stylesheet" media="screen and (min-width:0px) and (max-width:480px)" href="сss/style_320px.css" />
	<link rel="stylesheet" media="screen and (min-width:480px) and (max-width:768px)" href="сss/style_480px.css" />
	<link rel="stylesheet" media="screen and (min-width:768px) and (max-width:960px)" href="сss/style_768px.css" />
</head>
<body>
	<div class="background background__top">
			<header>
				<div class="wrapper top__bar">
					<div class="logo"><img src="img/logo.png" alt="PINGBULLER"></div>
					<ul class="menu">
						<li><a href="#" class="menu__item">HOME</a></li>
						<li><a href="#" class="menu__item">ABOUT</a></li>
						<li><a href="#" class="menu__item">BLOG</a></li>
						<li><a href="#" class="menu__item">PRODUCTS</a></li>
						<li><a href="#" class="menu__item">LOREM IPSUM</a></li>
						<li><a href="#" class="menu__item">DOLOR SIT AMET</a></li>
					</ul>
				</div>
				<div class="clearfix" style="clear: both;"></div>
				<div class="banner">
					<div class="banner__inner">
						<div class="wrapper banner_content">
							<div class="iphone"><img src="img/iphone.png" alt=""></div>
							<div class="content_text">
								<h1>Lorem Ipsum Dolor</h1>
								<h3>IT WILL MAKE ALL OF YOUR DREAMS COME <span class="invisible invisible_320">TRUE</span></h3>
								<p>Semper sollicitudin gravida eget, vestibulum sit amet sapien. Nunc dignissim tincidunt est, et auctor turpis ornare a. Nam venenatis hendrerit est <span class="invisible">at volutpat. Morbi elementum euismod lacus id semper. In odio nunc, imperdiet eget aliquam quis, euismod id lectus. Nulla interdum arcu et felis aliquam a tempus lectus lobortis.</span></p>
							</div>
							<div class="arrows">
								<div class="arrow__right"><a href="#"><img src="img/arrow_r.png" alt=""></a></div>
								<div class="arrow__left"><a href="#"><img src="img/arrow_l.png" alt=""></a></div>
							</div>
							<div class="slider_circles">
								<a href="#" class="circle"></a>
								<a href="#" class="circle"></a>
								<a href="#" class="circle"></a>
								<a href="#" class="circle"></a>
							</div>
						</div>
					</div>
				</div>
			</header>
	</div>
	<div class="background background__articles">
		<div class="wrapper articles">
			<div class="articles__item">
					<div class="sprite icon__1"></div>
					<h2>ABOUT OUR COMPANY</h2>
					<p>Nunc turpis neque, feugiat eget eleifend et, lacinia non neque. Praesent rhoncus<span class="invisible_320"> ultrices posuere. Pellentesque vel lacus <span class="invisible"> eget nisi convallis auctor. Nam</span></span></p>
					<a href="#">READ MORE</a>
			</div>
			<div class="articles__item">
					<div class="sprite icon__2"></div>
					<h2>ABOUT OUR COMPANY</h2>
					<p>Nunc turpis neque, feugiat eget eleifend et, lacinia non neque. Praesent rhoncus<span class="invisible_320"> ultrices posuere. Pellentesque vel lacus <span class="invisible"> eget nisi convallis auctor. Nam</span></span></p>
					<a href="#">READ MORE</a>
			</div>
			<div class="articles__item">
					<div class="sprite icon__3"></div>
					<h2>ABOUT OUR COMPANY</h2>
					<p>Nunc turpis neque, feugiat eget eleifend et, lacinia non neque. Praesent rhoncus<span class="invisible_320"> ultrices posuere. Pellentesque vel lacus <span class="invisible"> eget nisi convallis auctor. Nam</span></span></p>
					<a href="#">READ MORE</a>
			</div>	
		</div>
	</div>
	<div class="background background__content">
		<div class="wrapper content">
			<div class="starts_back">
				<div class="starts_content">
					<img src="img/muzgik.png" alt="Какой-то мужик">
					<h2>PINGBULLER <span>STARTS HERE</span></h2>
					<p>“Nunc turpis neque, feugiat eget eleifend et, lacinia non neque. Praesent rhoncus ultrices po- suere. Pellentesque vel lacus eget nisi convallis auctor. Nam vitae<span class="invisible_320"> lectus eu libero pellentesque pulvinar<span class="invisible"> urna risus, mattis pulvinar bibendum in, venenatis quis neque. Mauris nec metus ultricies erat consequat dignissim non eu nisl.”</span></span></p>
				</div>
				<div class="starts_circles">
					<a href="#" class="circle"></a>
					<a href="#" class="circle"></a>
					<a href="#" class="circle"></a>
					<a href="#" class="circle"></a>
				</div>
			</div>
			<div class="updates">
				<h2>RECENT UPDATES</h2>
				<div class="updates__item update1">
					<h4>Nunc turpis neque<span class="invisible_320"> feugiat eget </span></h4>
					<p>Posted by Admin on March 13<span class="invisible_320"> 2012 <span class="invisible">in Recent News</span></span></p>
				</div>
				<div class="updates__item update2">
					<h4>Nunc turpis neque <span class="invisible_320"> feugiat eget </span></h4>
					<p>Posted by Admin on March 13<span class="invisible_320"> 2012<span class="invisible"> in Category</span></span></p>
				</div>
				<div class="updates__item update3">
					<h4>Nunc turpis neque <span class="invisible_320"> feugiat eget </span></h4>
					<p>Posted by Admin on March 13<span class="invisible_320"> 2012<span class="invisible"> in Blog Updates</span></span></p>
				</div>
				<a href="">READ MORE HERE</a>
			</div>
		</div>
	</div>
	<div class="background background_logos">
		<div class="wrapper logos">
		</div>
	</div>
	<div class="background content__bottom_background">
		<div class="wrapper content__bottom">
			<div class="content__bottom_item pigbull">
				<h2>PIGBULL<span>ER</span></h2>
				<div class="copyright">Copyright 2013, Pingbull AS</div>
				<div class="visible">
					<h3>NEWS CATEGORIES</h3>
					<p class="">Nunc turpis neque, feugiat eget eleifend et, lacinia non neque. Praesent rhoncus ultrices posuere. Pellentesque vel lacus eget nisi convallis auctor. Nam vitae lectus eu libero pellentesque <span class="invisible"> pulvinar. Quisque urna risus, mattis pulvinar bibendum in, venenatis quis</span></p>
				</div>
				<div class="invisible"><p>Nunc turpis neque, feugiat eget eleifend et, lacinia non neque. Praesent rhoncus ultrices posuere. Pellentesque vel lacus eget nisi convallis auctor. Nam vitae lectus eu libero pellentesque pul</p></div>
			</div>
			<div class="content__bottom_item">
				<h3>RECENT COMMENTS</h3>
					<p class="">Nunc turpis neque, feugiat eget eleifend et, lacinia non neque. Praesent rhoncus ultrices posuere. Pellentesque vel lacus eget nisi convallis auctor. Nam vitae lectus eu libero pellentesque <span class="invisible"> pulvinar. Quisque urna risus, mattis pulvinar bibendum in, venenatis quis</span></p>
			</div>
			<div class="content__bottom_item">
				<h3>NEWS CATEGORIES</h3>
					<p class="">Nunc turpis neque, feugiat eget eleifend et, lacinia non neque. Praesent rhoncus ultrices posuere. Pellentesque vel lacus eget nisi convallis auctor. Nam vitae lectus eu libero pellentesque <span class="invisible"> pulvinar. Quisque urna risus, mattis pulvinar bibendum in, venenatis quis</span></p>
			</div>
		</div>
	</div>
	<div class="background footer__background">
		<div class="wrapper footer">
			<div class="footer_menu">
				<a href="#" class="footer_menu__item">HOME</a>
				<a href="#" class="footer_menu__item">ABOUT</a>
				<a href="#" class="footer_menu__item">BLOG</a>
				<a href="#" class="footer_menu__item">PRODUCTS</a>
				<a href="#" class="footer_menu__item">LOREM IPSUM</a>
				<a href="#" class="footer_menu__item">DOLOR SIT AMET</a>
			</div>
			<div class="design">
				<p>Designed by <span>Pingbull AS</span></p>
			</div>
		</div>
	</div>
</body>
</html>