html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Делаем страницу-заглушку при помощи HTML5 и CSS3

В этом уроке мы собираемся создать страницу-заглушку при помощи HTML5 и CSS3 в минималистском стиле и светлых тонах. В этом уроке мы будем также использовать некоторые новые теги HTML5  и некоторые интересные атрибуты, такие как «placeholder» и «required» для формы подписки. Атрибут «placeholder»  позволяет нам показывать текст в поле ввода электронной почте, когда он пуст, в то время как атрибут  «required» позволяет сделать, так чтобы пользователь не мог отправить форму без ввода данных. Мы также добавим JQuery-код  этих двух атрибутов для старых браузеров и браузеров, которые  пока их не поддерживают. Для таймера обратного отсчета мы будем использовать JQuery и jQuery countdown plugin от tutorialzine.com. Конечно, мы немного его настроим, чтобы соответствовать нашему дизайну.

 

Окончательный результат:

Смотреть демо

Как видите, страница содержит много градиентов и теней. Мы будем делать её, используя только CSS3. Как вы, наверняка знаете, CSS3 предоставляет нам много новых свойств, которые позволяют создавать интересные эффекты без необходимости использования изображений.

Так, хватит болтать и начнем.

1. Структура файла

Создайте папку и назовите “coming-soon-page”. Внутри этой папки будут следующие файлы и папки:

  • index.html –основной HTML-документ;
  • css— папка со стилями,
    • style.css – основные стили,
    • reset.css – файл для сброса стилей (meyerweb),
    • ie.css – файл для Internet Explorer 7 и 8;
  • js— папка с файлами JavaScript,
    • jquery.countdown.js – плагин jQuery для обратного отсчета времени,
    • script.js – наш JavaScript-файл для установки таймера, для анимации и некоторых атрибутов html5, которые не поддерживаются
    • modernizr.custom.js – файл с шаблоном modernizr;
  • images – папка для изображений;
  • fonts – папка со шрифтами

2. Структура страницы

Ниже вы видите основную HTML-разметку страницы:

<!DOCTYPE html>

<html>

<head>

	<meta charset="utf-8" />

	<title>Minimal Coming Soon Page</title>

	<!-- CSS -->
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="fonts/stylesheet.css">
	<link rel="stylesheet" href="css/style.css">

	<!--[if lt IE 9]> 
		<link rel="stylesheet" href="css/ie.css">
	<![endif]-->

	<!-- IE fix for HTML5 tags -->
	<!--[if lt IE 9]> 
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->

	<!-- jQuery and Modernizr-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="js/modernizr.custom.js"></script>

	<!-- Countdown timer and other animations -->
	<script src="js/jquery.countdown.js"></script>
	<script src="js/script.js"></script>

</head>

<body>

	<header>
		<!-- The headline and description of our page -->
	</header>

	<div id="main">
		<div id="links">
			<!-- The main links, support, download, etc. -->
		</div>

		<div id="counter">
			<!-- The countdown timer -->
		</div>

		<form action="" method="get">
			<!-- The subscription form -->
		</form>

		<div class="social-media-arrow">
			<!-- The social media arrow, on the right of the page -->
		</div>

		<footer>
			<!-- The page's footer that will contain the social icons -->
		</footer>
	</div>

</body>
</html> 

 

Как видите, код HTML очень прост. В теге «head»  мы прикрепили все стили и JavaScript-файлы, которые нам нужны.

Также мы добавили условные комментарии для файла «ie.css». В этом файле мы добавим несколько строк для IE 7-8. Мы также прикрепили файл  «html5.js» для того, чтобы заставить  IE 7 и 8 понимать новые теги HTML5, “header” и “footer”.

Тело нашей страницы содержит хедер, в который мы поместим заголовок и описание страницы, и див «main», в который мы поместим ссылки, таймер обратного отсчета, форму подписки и футер.

Вот стили для тела страницы. Мы будем использовать в основном шрифт Arial (за исключением таймера) и повторяющийся паттерн для фона:

body {
	background: url(../images/body-pattern.jpg) top left repeat;
	font-family: Arial, Helvetica, sans-serif;
	padding-bottom: 40px;
} 

3. Хедер

Как было сказано выше, наш хедер будет содержать заголовок и описание. Вот разметка HTML:

<header>
	<h1>We are working our butts off to finish this website</h1>
	<p>Our developer, Michael, is doing his best to finish this website before the counter, but we can’t help him.</p>
</header> 

А вот и стили:

/* ---- Header ---- */

header {
	width: 720px;
	margin: 80px auto 0 auto;
}

header h1 {
	font-size: 30px;
	font-weight: bold;
	color: #272727;
	text-shadow: 0 1px 0 #fff;
}
header p {
	margin: 20px 0 0 3px;
	font-size: 14px;
	color: #272727;
}

Теперь наша страница выглядит следующим образом:

 

4. Основная область

Основная  область будет содержать ссылки, таймер, форму подписки, футер и социальные иконки.
Вот ее стили:

/* ---- Main Area ---- */
#main {
	position: relative;
	width: 700px;
	margin: 50px auto 0 auto;
	padding: 20px 0 0 25px;
	background: url(../images/main-content-pattern.jpg) top left repeat;
}

Она имеет ширину 700 пикселей и повторяющийся рисунок с сеткой в качестве фона и у нее относительное позиционирование.

5. Ссылки

Ниже вы можете увидеть HTML-разметку для ссылок:

<div id="links">
	<div class="home"><a href="">http://1stwebdesigner.com/</a></div>
	<div class="support"><a href="">http://support.1wd.com/</a></div>
	<div class="browser"><a href="">Google Chrome OS. 10.X.23</a></div>
	<div class="books"><a href="">http://1wd.co/e-books/</a></div>
	<div class="download"><a href="">http://1wd.com/download/</a></div>
	<div class="ups"><a href="">UPS Signed Worldwide</a></div>
</div>

И CSS:

/* ---- Links ---- */

#links {
	width: 700px;
	font-size: 12px;
	font-weight: bold;
	color: #aaa;
	line-height: 18px;
	overflow: hidden;
}

#links a {
	position: relative;
	color: #aaa;
	text-decoration: none;
}

#links a:hover {
	color: #aaa;
	text-decoration: none;
}

.home, .support, .browser, .books, .download, .ups {
	float: left;
	width: 180px;
	margin-left: 42px;
	padding-left: 25px;
}

.home { background: url(../images/home.png) left center no-repeat; margin-left: 0; }
.support { background: url(../images/support.png) left center no-repeat; }
.browser { background: url(../images/browser.png) left center no-repeat; clear: right; }

.books, .download, .ups { margin-top: 10px; }
.books { background: url(../images/books.png) left center no-repeat; margin-left: 0; }
.download { background: url(../images/download.png) left center no-repeat; }
.ups { background: url(../images/ups.png) left center no-repeat; clear: right; } 

Область ссылок имеет ширину 700 пикселей, а у каждой ссылки есть своя собственная  иконка. Мы немного поиграли с отступами, чтобы сделать так, чтобы они соответствовали дизайну. А еще мы используем относительное позиционирование для ссылкок, чтобы позже можно было добавить простую анимацию к ним при помощи JQuery.

Страница должна выглядеть следующим образом:

6. Таймер обратного отсчета

Для создания таймера обратного отсчета мы будем использовать jQuery countdown plugin от tutorialzine.com. Наш таймер включает в себя див “counter”.  Вот его HTML-код:

<div id="counter"></div> 

Див “counter” будет пустым, потому что весь HTML-код будет генерироваться плагином jQuery. Вот HTML-код, который генерирует плагин:

<div id="counter" class="countdownHolder">

	<div class="countDays">
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="boxName">
			<span class="Days">DAYS</span>
		</span>
	</div>
	<span class="points">:</span>
	<span class="countDiv countDiv0"></span>

	<div class="countHours">
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="boxName">
			<span class="Hours">HRS</span>
		</span>
	</div>
	<span class="points">:</span>
	<span class="countDiv countDiv1"></span>

	<div class="countMinutes">
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="boxName">
			<span class="Minutes">MNTS</span>
		</span>
	</div>
	<span class="points">:</span>
	<span class="countDiv countDiv2"></span>

	<div class="countSeconds">
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="position">
			<span class="digit static">0</span>
		</span>
		<span class="boxName">
			<span class="Seconds">SECS</span>
		</span>
	</div>
</div>

В зависимости от времени, которые мы ставим при инициализации счетчика, плагин будет показывать четыре колонки цифр («Дни», «часы», «минуты», «секунды») и анимировать таймер.

Примечание: Мы не будем объяснять плагин более подробно. Мартин Ангелов (Martin Angelov), создатель этого плагина очень подробно объясняет это на tutorialzine.

Теперь давайте добавим стили нашему счетчику:

/* ---- Counter ---- */

#counter {
	width: 700px;
	height: 145px;
	margin: 55px auto 0 auto;
	font-family: 'LeagueGothicRegular', Arial, Helvetica, sans-serif;
	font-size: 92px;
	color: #272727;
	text-shadow: 0 1px 0 #fff;
	overflow: hidden;
}

.countDays, .countHours, .countMinutes, .countSeconds {
	float: left;
	width: 102px;
	height: 138px;
	padding-left: 36px;
	background: #e7e7e7;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.07)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.07));
	border: 1px solid #ccc;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow:
		0 2px 3px 0 rgba(255,255,255,.2) inset,
		0 2px 2px 0 rgba(0,0,0,.1);
	-webkit-box-shadow:
		0 2px 3px 0 rgba(255,255,255,.2) inset,
		0 2px 2px 0 rgba(0,0,0,.1);
	box-shadow:
		0 2px 3px 0 rgba(255,255,255,.2) inset,
		0 2px 2px 0 rgba(0,0,0,.1);
}

.points {
	float: left;
	width: 40px;
	margin: 0;
	font-family: Georgia, serif;
	font-size: 44px;
	font-weight: bold;
	text-align: center;
	line-height: 138px;
	text-shadow: none;
}

.position {
	position: relative;
	float: left;
	width: 35px;
	height: 92px;
	margin: 8px 0 0 0;
}

.digit {
	position: absolute;
	top: 0;
	left: 0;
}

.boxName {
	float: left;
	width: 80px;
	margin: -5px 0 0 7px;
	font-size: 36px;
	color: #a6a6a6;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.Hours { margin-left: 5px; }
.Seconds { margin-left: 2px; }

Мы выбрали шрифт «League Gothic" .

Как видите, мы использовали только CSS3-свойства для создания теней и градиентов. Эти новые свойства позволяет создавать сложные проекты без необходимости нарезки изображений.

CSS3 свойства, которые  используемые здесь: «border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”.

Мы также использовали атрибут „RGBA“ , потому что  он позволяет присвоить прозрачного цвета с различными свойствами CSS.

Теперь мы инициализируем таймер обратного отсчета путем добавления этих строк в „script.js“ файл (внутри „JS“ папки):

$(document).ready(function(){

	/* ---- Countdown timer ---- */

	$('#counter').countdown({
		timestamp : (new Date()).getTime() + 51*24*60*60*1000
	});
});

Теперь наш счетчик показывает, сколько осталось времени (51 день начиная с настоящего момета). Он выглядит так:

7. Форма подписки

Для формы подписки мы будем использовать 2 новых HTML5-атрибута,о которых мы говорили ранее. Это “placeholder” и “required”. Вот HTML-код нашей формы:

<form action="" method="get">
	<input type="text" class="email" placeholder="Input your e-mail address here..." required />
	<input type="submit" class="submit" value="Let me Notified" />
</form> 

У нас есть текстовое поле и кнопка для отправки формы. В текстовом поле  пользователь обязательно должен ввести  адрес электронной почты перед отправкой формы. Если оно будет незаполненым, появится текст „Введите ваш адрес электронной почты здесь ...“. \

Давайте немного украсим нашу форму:

/* ---- Subscription Form ---- */

form {
	position: relative;
	margin: 40px auto 0 auto;
}

.email {
	width: 498px;
	height: 35px;
	padding: 0 15px;
	background: #f1f1f1;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.02)), to(rgba(0,0,0,.02)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	background-image: linear-gradient(top, rgba(255,255,255,.02), rgba(0,0,0,.02));
	border: 1px solid #cbcbcb;
	-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
	-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #b3b2b2;
	font-style: italic;
}

.email:focus {
	outline: 0;
	border: 1px solid #c0c0c0;
	-moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
	-webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.2) inset;
}

.submit {
	width: 140px;
	height: 37px;
	margin: 0 0 0 5px;
	padding: 0;
	background: #888;
	background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
	background-image: -webkit-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -moz-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -ms-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -o-linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: linear-gradient(top, rgba(255,255,255,.1), rgba(0,0,0,.1));
	border: 1px solid #636363;
	-moz-box-shadow:
		0 1px 2px 0 rgba(253,252,252,.35) inset,
		0 -1px 2px 0 rgba(0,0,0,.15) inset;
	-webkit-box-shadow:
		0 1px 2px 0 rgba(253,252,252,.35) inset,
		0 -1px 2px 0 rgba(0,0,0,.15) inset;
	box-shadow:
		0 1px 2px 0 rgba(253,252,252,.35) inset,
		0 -1px 2px 0 rgba(0,0,0,.15) inset;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.35);
	line-height: 13px;
	cursor: pointer;
}

.submit:hover {
	background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));
	background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -moz-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -ms-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: -o-linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	background-image: linear-gradient(bottom, rgba(255,255,255,.1), rgba(0,0,0,.1));
	-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
	-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;
}
.submit:active {
	-moz-box-shadow:
		0 1px 2px 0 rgba(0,0,0,.15) inset,
		0 3px 13px 3px rgba(0,0,0,.3) inset;
	-webkit-box-shadow:
		0 1px 2px 0 rgba(0,0,0,.15) inset,
		0 3px 13px 3px rgba(0,0,0,.3) inset;
	box-shadow:
		0 1px 2px 0 rgba(0,0,0,.15) inset,
		0 3px 13px 3px rgba(0,0,0,.3) inset;
	color: #ddd;
} 

Как видите, мы использовали псевдо-классы :hover, :focus и :active и те же CSS3-свойства для нашего счетчика, “border-radius”, “box-shadow”, “linear-gradient” и “text-shadow”.

Так будет выглядеть наша форма, если поле будет незаполнено:

Два новых атрибутов HTML5 (placeholder” и “required”) очень полезны и могут сэкономить много времени, но они не поддерживаются старыми браузерами, такими  как Internet Explorer 7 и 8. Мы решим эту проблему при помощи библиотеки Modernizr.

Safari также не поддерживает атрибут „required“ , но Modernizr возвращает „true“ при проверке

.
После подключения Modernizr (файл „modernizr.custom.js“) в „head“ , мы должны добавить эти строки в „script.js“ файл:

/* ---- Using Modernizr to check if the "required" and "placeholder" attributes are supported ---- */

if (!Modernizr.input.placeholder) {
	$('.email').val('Input your e-mail address here...');
	$('.email').focus(function() {
		if($(this).val() == 'Input your e-mail address here...') {
			$(this).val('');
		}
	});
}

// for detecting if the browser is Safari
var browser = navigator.userAgent.toLowerCase();
if(!Modernizr.input.required || (browser.indexOf("safari") != -1 && browser.indexOf("chrome") == -1)) {
	$('form').submit(function() {
		$('.popup').remove();
		if(!$('.email').val() || $('.email').val() == 'Input your e-mail address here...') {
			$('form').append('<p class="popup">Please fill out this field.</p>');
			$('.email').focus();
			return false;
		}
	});
	$('.email').keydown(function() {
		$('.popup').remove();
	});
	$('.email').blur(function() {
		$('.popup').remove();
	});
}

Вот CSS-код для  всплывающего окна и поля под текстовым полем:

.popup {
	position: absolute;
	top: 45px;
	left: 0;
	width: 140px;
	padding: 10px;
	background: #e7e7e7;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
	-webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.1);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #888;
}

Теперь, если вы открыли  Safari  и нажали кнопку „submit“  и не ввели текст, наша форма будет выглядеть так:

8. Футер

В футер мы добавим социальные иконки с прикрепленными к ним ссылками.

Вот разметка футера:

<footer>
	<ul>
		<li><a class="digg" href=""></a></li>
		<li><a class="twitter" href=""></a></li>
		<li><a class="vimeo" href=""></a></li>
		<li><a class="skype" href=""></a></li>
	</ul>
</footer>

И CSS:

/* ---- Footer ---- */

footer {
	width: 700px;
	margin: 0 auto;
	padding: 35px 0 25px 0;
	overflow: hidden;
}

footer ul {
	float: right;
	width: 125px;
	height: 22px;
}

footer ul li {
	float: left;
}

footer a {
	position: relative;
	display: block;
	margin-left: 10px;
}

.digg {
	width: 10px;
	height: 16px;
	background: url(../images/digg.png) center center no-repeat;
}

.twitter {
	width: 21px;
	height: 16px;
	background: url(../images/twitter.png) center center no-repeat;
}

.vimeo {
	width: 16px;
	height: 16px;
	background: url(../images/vimeo.png) center center no-repeat;
}
.skype {
	width: 16px;
	height: 16px;
	background: url(../images/skype.png) center center no-repeat;
}

Мы также добавим стрелку, чтобы наша страница выглядела профессионально. Для этого нам понадобится пустой див:

<div class="social-media-arrow"></div> 

А также добавим следующие стили:

.social-media-arrow {
	position: absolute;
	top: 125px;
	right: -95px;
	width: 108px;
	height: 256px;
	background: url(../images/social-media-arrow.png) top left no-repeat;
}

Наша страница должна выглядеть так:

9. Немного jQuery-анимации

Теперь давайте немного анимируем социальные иконки и ссылки, когда пользователь наводит на них мышкой. Для этого добавим несколько строчек  в файл “script.js” :

/* ---- Animations ---- */

$('#links a').hover(
	function(){ $(this).animate({ left: 3 }, 'fast'); },
	function(){ $(this).animate({ left: 0 }, 'fast'); }
);
$('footer a').hover(
	function(){ $(this).animate({ top: 3 }, 'fast'); },
	function(){ $(this).animate({ top: 0 }, 'fast'); }
)

10. Добавляем стили для Internet Explorer 7 – 8

Добавьте следующие стили в файл “ie.css” :

.email {
	line-height: 35px;
}

Мы добавили эти стили потому, что в IE 7 и 8 текстовое поле не отражает текст центрированым по вертикали.

Заключение

Наконец мы создали страницу-»заглушку" и готовы использовать ее на нашем сайте. Мы использовали некоторые новые свойства CSS3 и несколько новых тегов HTML5 и атрибуты, которые спасли нам много времени и сделали нашу страницы быстрой и легкой.

Итак, что вы думаете по поводу этого урока? Узнали ли вы что-то новое? Кроме того, что вы думаете об этих новых свойств? Будете ли вы использовать их? Или вы хотите, чтобы ждать, пока они лучше поддерживаются различными браузерами?

Примечание: Исходники вы можете скачать на сайте автора

Автор: 1stwebdesigner

Перевод: Дежурка

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с dejurka.ru

3

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • dejurka-magazine
          • домен dejurka.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции