Кривая верстка страницы

Silver Raven · November 26, 2018

Народ, выручайте!
Получил курсовую работу на создание web-сайта абстрактного сервисного центра (кое как, с ней справился. хотя весь мой опыт - несколько сайтов-визиток, созданных много лет назад.). Не использовал какие-либо CMS, просто взял понравившийся шаблон на html, да перепилил его в Дримвивере.

Поскольку тащил код отовсюду, вылезли косяки верстки (хотя, в том же Дримвивере, все было ок):

Скриншот:

Код страницы:

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8" />
	<title>Гарантийный ремонт</title>
	<script src="resources/scripts/jquery.min.js" type="text/javascript"></script>
	<script src="resources/scripts/sez.service.center.js" type="text/javascript"></script>
	<link rel="stylesheet" href="resources/styles/main.css" type="text/css" />
</head>

<body>
	<div id="header">
		<div class="inner cf">
			<div id="navigation" class="login-signup">
				<ul>
				<li><a href="login_signup.html">ВХОД | РЕГИСТРАЦИЯ</a></li>
				</ul>
			</div>

			<div id="navigation">
				<ul>
					<li><a href="index.html">О НАС</a></li>
					<li class="current-menu-item"><a href="warranty_service.html">ГАРАНТИЙНЫЙ РЕМОНТ</a></li>
					<li>
						<a href="#">ПЛАТНЫЕ УСЛУГИ</a>
						<ul>
							<li><a href="paid_service_pc.html">&raquo; Ремонт компьютеров<br/> и ноутбуков</a></li>
							<li><a href="paid_service_gadgets.html">&raquo; Ремонт планшетов<br/> и телефонов</a></li>
						</ul>
					</li>
					<li><a href="gallery.html">ГАЛЕРЕЯ</a></li>
					<li><a href="contacts.html">КОНТАКТЫ</a></li>
				</ul>
			</div>
		</div>
	</div>

	<hr />

	<div id="content" class="home">
	  <div class="inner">
			<div id="logo" class="content logo">
				<h1>
				<img src="resources/images/logo.jpg" width="1000" height="180" alt="Сервисный центр SEZ" /></h1>
			</div>
			
		  <h2></h2>
		  
		<div class="section about">
				<h3>Мы обслуживаем технику всех ведущих производителей</h3>
				<center><img src="resources/images/services/warranty_service.jpg" width="565" height="316" alt=""/></center>
			</div>

	<div class="brands_patent text-center" id="pdopage">
    	<div class="pagination" style="display: flex;">
			<ul class="pagination" style="display: flex;"></ul>
		</div>

		<div class="brands brand_hp">
			<a href="https://hp.com">
				<img class="img-responsive" title="Ремонт устройств HP" alt="hp" src="resources/images/icons/partner_hp.jpg">
					<span class="linktomodel">HP</span>
			</a>
		</div>
		
		<div class="brands brand_sony">
			<a href="https://sony.com">
				<img class="img-responsive" title="Ремонт устройств Sony" alt="sony" src="resources/images/icons/partner_sony.jpg">
					<span class="linktomodel">SONY</span>
			</a>
		</div>
		
		<div class="brands brand_asus">
			<a href="https://asus.com">
				<img class="img-responsive" title="Ремонт устройств Asus" alt="asus" src="resources/images/icons/partner_asus.jpg">
					<span class="linktomodel">ASUS</span>
			</a>
		</div>
		
		<div class="brands brand_lenovo">
			<a href="https://lenovo.com">
				<img class="img-responsive" title="Ремонт устройств Lenovo" alt="lenovo" src="resources/images/icons/partner_lenovo.jpg">
					<span class="linktomodel">LENOVO</span>
    		</a>
		</div>
		
		<div class="brands brand_dell">
			<a href="https://dell.com">
				<img class="img-responsive" title="Ремонт устройств Dell" alt="dell" src="resources/images/icons/partner_dell.jpg">
					<span class="linktomodel">DELL</span>
    		</a>
		</div>
		
		<div class="brands brand_msi" style="border-bottom: none;">
			<a href="https://msi.com">
				<img class="img-responsive" title="Ремонт устройств MSI" alt="msi" src="resources/images/icons/partner_msi.jpg">
					<span class="linktomodel">MSI</span>
    		</a>
		</div>
		
		<div class="brands brand_samsung" style="border-bottom: none;">
			<a href="https://samsung.com">
				<img class="img-responsive" title="Ремонт устройств Samsung" alt="samsung" src="resources/images/icons/partner_samsung.jpg">
					<span class="linktomodel">SAMSUNG</span>
    		</a>
		</div>
		
		<div class="brands brand_toshiba" style="border-bottom: none;">
    		<a href="https://toshiba.com">
        		<img class="img-responsive" title="Ремонт устройств Toshiba" alt="toshiba" src="resources/images/icons/partner_toshiba.jpg">
    				<span class="linktomodel">TOSHIBA</span>
			</a>
		</div>
		
		<div class="brands brand_acer" style="border-bottom: none;">
    		<a href="https://acer.com">
        		<img class="img-responsive" title="Ремонт устройств Acer" alt="acer" src="resources/images/icons/partner_acer.jpg">
    				<span class="linktomodel">ACER</span>
    		</a>
		</div>
		
		<div class="brands brand_canon" style="border-bottom: none;">
    		<a href="https://canon.com">
        		<img class="img-responsive" title="Ремонт устройств Canon" alt="canon" src="resources/images/icons/partner_canon.jpg">
					<span class="linktomodel">CANON</span>
    		</a>
		</div>		
	</div>

			<h2></h2>

	<div class="section about">
		<h3>Если производителя вашего устройства нет в списке, вы всегда можете воспользоваться нашими платными услугами</h3>
			<br /><p><a href="paid_service_pc.html" class="ui-button big">Здесь</a></p>
		</div>
	</div>
</div>

	<hr />
	
	<div id="footer">
		<div class="inner">
			<p>
				<span>&copy; 2018 by <a href="index.html">Сервисный центр SEZ</a>.</span>
			</p>
	  </div>
	</div>
</body>
</html>

CSS (все, что добавлял я отделено комментом Silver Raven CSS Styles):

@import url("reset.css");
@import url("form.css");

body {
	background: #444;
	font: 13px/22px Helvetica, Arial, sans-serif;
}

/* #header
==========================================================*/
#header { padding: 19px 0 0; }
	#navigation {}
		#navigation > ul > li { padding-bottom: 17px; }
			#navigation > ul > li > a {
				font-size: 14px;
				padding: 6px 8px;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}
			#navigation li ul {
				margin-top: -2px;
				padding: 7px 0;
				white-space: nowrap;
				z-index: 1111;
				-webkit-border-radius: 5px;
				-webkit-border-top-left-radius: 0;
				-moz-border-radius: 5px;
				-moz-border-radius-topleft: 0;
				border-radius: 5px;
				border-top-left-radius: 0;
			}
				#navigation li ul a {
					color: #c1e4f6;
					line-height: 18px;
					padding: 0 15px 0 9px;
				}

			#navigation ul ul,
			#navigation > ul > li:hover > a { background: #62a6c9; }

		#navigation > ul > li.current-menu-item { background: url("../images/navigation/navigation_cursor.png"); }

/* #content
==========================================================*/
#content { padding: 50px 0; }

	/* .home
	==========================================================*/
	.home {}
		.home h2 {}
			.home h2 span {
				padding: 0 30px;
				top: -9px;
			}

		.home .section { padding: 35px 0 50px; }
			.home .logo { padding: 71px 0 90px; }

			.home .about {}
				.home .about h3 {
					font-size: 48px;
					line-height: 50px;
				}

			.home .works-list { margin: -20px 0 0 -20px; }
				.home .works-list li { margin: 20px 0 0 20px; }

			.home .more { margin: -20px 0 0 -20px; }
				.home .more .text {
					margin: 20px 0 0 20px;
					width: 300px;
				}

			.home .blog {}
				.home .blog .text p {
					font-size: 12px;
					line-height: 18px;
				}

				.home .blog .latest-posts {
					margin: -20px 0 0 -20px;
					width: 720px;
				}
					.home .blog .post {
						margin: 20px 0 0 20px;
						width: 220px;
					}
						.home .blog .post h3 {
							line-height: 20px;
							margin-bottom: 15px;
						}

				.home .blog .tweet {
					background-image: url("../images/icons/twetter.png");
					background-position: 0 3px;
					margin-left: 20px;
					padding-left: 35px;
					width: 185px;
				}
					.home .tweet .follow { margin-top: 10px; }

	/* .columns
	==========================================================*/
	.columns {}
		.columns .main {
			margin-left: 80px;
			width: 720px;
		}
			.portfolio .back-to-top {
				margin-top: 50px;
				padding-left: 180px;
			}
				#content .back-to-top span {
					background: #fff url("../images/gallery/back.png") 14px 1px no-repeat;
					padding: 3px 20px 3px 40px;
					top: -9px;
				}
			.portfolio .message { padding-top: 45px; }

		.columns .sidebar { width: 140px; }
			.columns #logo { margin-bottom: 55px; }
			.sidebar .tags-list { font-size: 16px; }

	/* @
	==========================================================*/
	.thumb {
		background-image: url("../images/gallery/gallery_thumb_shadow.png");
		padding-bottom: 8px;
		width: 220px;
	}
		.thumb .thumb-inner { height: 145px; }

	.tags-list {}
		.tags-list li + li { margin-top: 3px; }
		.tags-list li {}
			.tags-list a { padding: 3px 0; }
				.tags-list .posts {
					right: 0;
					top: 7px;
				}

	.badge {
		background: #ddd;
		display: inline-block;
		line-height: 15px;
		padding: 0 5px;
		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px;
	}

	.works-list .work + .work { margin-top: 50px; }
	.work {}
		.work .description { width: 220px; }
		.work .gallery {
			background: url("../images/gallery/gallery_shadow.png");
			padding-bottom: 8px;
			width: 480px;
		}
			.work .gallery .photos {
				height: 340px;
				width: 460px;
			}
				.work .gallery .nivo-controlNav {
					padding: 1px 2px 8px 9px;
					right: 0;
					top: 0;
					z-index: 1112;
				}
					.work .gallery .nivo-controlNav .nivo-control {
						background: url("../images/gallery/pages.png");
						height: 7px;
						text-indent: -9999px;
						width: 7px;
					}
					.work .gallery .nivo-controlNav .nivo-control + .nivo-control { margin-left: 3px; }
					.work .gallery .nivo-controlNav .nivo-control.active { background-position: -7px 0; }

	.message { padding: 2px 0; }
		.message h2 {
			font-size: 36px;
			line-height: 40px;
		}

	.text {}
		.text h2.with-icon,
		.text h3.with-icon { padding-left: 40px; }
		#content h2.with-icon,
		#content h3.with-icon { background-position: 0 3px; }

		.text .checkmark { 
		background-image: url("../images/icons/check_mark.png"); }

		.text h2,
		.text h3,
		.text ul,
		.text p { margin-bottom: 10px; }

		.text ul {}
			.text ul li + li { margin-top: 7px; }
			.text ul li {
				background: url("../images/icons/check_mark_small.png") 0 1px no-repeat;
				padding-left: 25px;
			}

		.text .meta { color: #cbcbcb; }

	.posts .post + .post { margin-top: 50px; }
	.post {}
		.post .meta {}
			.post .meta li + li { margin-left: 20px; }

		.post-header { margin-bottom: 40px; }
			.post-header h2 { margin-bottom: 10px; }

		.post-body {}
			.post-body .thumb { margin: 0 22px 22px 0; }
			.post-body .excerpt { line-height: 30px; }

		.post-footer { margin-top: 15px; }
			.post-footer .meta {
				padding-right: 15px;
				top: -10px;
			}

	.posts + .pagination { margin-top: 60px; }
	.pagination {}
		.pagination .page { top: -11px; }
		.pagination .next { padding-left: 15px; }
			.pagination .next a {
				background: url("../images/posts/next.png") 100% 1px no-repeat;
				padding-right: 30px;
			}
			.pagination .next a:hover { background-position: 100% -17px; }
		.pagination .prev { padding-right: 15px; }
			.pagination .prev a {
				background: url("../images/posts/prev.png") 0 1px no-repeat;
				padding-left: 30px;
			}
			.pagination .prev a:hover { background-position: 0 -17px; }

/* #footer
==========================================================*/
#footer { padding: 20px 0; }
	#footer span + span { margin-left: 8px; }

/* ~
==========================================================*/
body,
#content .tags-list a,
#content .pagination a:hover,
#navigation > ul > li > a { color: #888; }

.home .blog { color: #999; }

.message h2,
.home .about h3 { color: #333; }

.post-header h2,
#content .post-header h2 a,
.text h2, #content .text h2 a,
.text h3, #content .text h3 a { color: #444; }

#content a,
#content .post-header h2 a:hover,
#content .tags-list a:hover,
#content .tags-list .current-menu-item a,
#content .text a:hover { color: #61a5c9; }

#footer a,
#content .badge,
#navigation li li a:hover,
#navigation > ul > li:hover > a { color: #fff; }

.tags-list .current-menu-item .posts,
a:hover .badge,
.badge:hover { background: #62a6c9; }

#content,
.pagination .page,
.home h2 span,
.back-to-top span,
.post-footer .meta,
.work .gallery .nivo-controlNav { background: #fff; }

.thumb,
.home .tweet,
.text h2.with-icon,
.text h3.with-icon,
.work .gallery,
#navigation > ul > li.current-menu-item {
	background-position: 50% 100%;
	background-repeat: no-repeat;
}

.home h2,
.pagination,
.back-to-top { border-top: 1px dashed #ddd; }

.thumb .thumb-inner,
.work .gallery-inner {
	border: 1px solid #dadada;
	padding: 9px;
}

.tags-list a,
.home .tweet .follow,
#navigation li:hover ul,
#navigation li ul a,
.back-to-top, .back-to-top a,
.pagination a,
.work .gallery .nivo-controlNav .nivo-control { display: block; }

hr,
#navigation li ul { display: none; }

.work .gallery,
#navigation,
#navigation > ul > li,
.columns .sidebar,
.columns .main,
.home .works-list li,
.home .more .text,
.home .blog .latest-posts,
.home .blog .tweet,
.message h2,
.post-body .thumb,
.post-footer .meta,
.post .meta li,
.pagination .prev,
.home .blog .latest-posts .post,
.work .gallery .nivo-controlNav .nivo-control { float: left; }

.pagination .next,
.work .description,
.message .ui-button,
.post-footer .back-to-top a,
#header .search { float: right; }

/* Add by Silver Raven */
#header .login-signup { float: right;}

.home .blog .post h3,
.post-body .excerpt { font-size: 18px; }

.text h2,
.text h3,
.home .about p {
	font-size: 24px;
	line-height: 36px;
}

.post-header h2,
.home .about h3 {
	font-size: 48px;
	line-height: 50px;
}

.badge,
.home .blog .meta,
.home .tweet .follow,
#navigation li ul a { font-size: 11px; }

.text h2,
.text h3,
.message h2,
.badge,
.post-header h2,
.home .more .continue,
.home .about h3,
#navigation > ul > li > a { font-weight: bold; }

.home .works-list,
.home .more,
.work .gallery .photos,
.home .blog,
.message,
.work .gallery .nivo-controlNav { overflow: hidden; }

#navigation li ul,
.tags-list .posts,
.nivo-controlNav,
.post-footer .meta,
.tags-list li { position: absolute; }

.tags-list li,
.home h2 span,
.post-footer,
.pagination .page,
#content .back-to-top span,
.work .gallery .photos,
#navigation > ul > li { position: relative; }

#footer,
.home h2,
.home .logo,
.home .about { text-align: center; }

#content .badge:hover,
#content .tags-list a:hover,
#content .text h2 a:hover,
#content .text h3 a:hover,
#content .post-header h2 a:hover,
#content .pagination a:hover,
#content a.back-to-top:hover,
#content .back-to-top a:hover { text-decoration: none; }

#footer a:hover,
#content a:hover { text-decoration: underline; }

.home h2,
#content .pagination .page,
#content .pagination a,
#content .back-to-top,
#content .back-to-top a {
	color: #bbb;
	font-size: 9px;
	text-transform: uppercase;
}

#header > .inner,
#content > .inner,
#footer > .inner {
	margin: 0 auto;
	width: 940px;
}

.cf:before,
.cf:after {
    content: "";
    display: table;
}
.cf:after { clear: both; }


/* ========== Silver Raven CSS Styles ========== */


/* Стили для warranty_service.html */
.brands_patent {
	text-align:center;
}

.brands_patent .brands {
	border:1px solid #ebebeb;
	width:20%;
	display:block;
	float:left;
	margin-bottom:-1px;
	margin-left:-1px;
}

.brands_patent .brands:hover {
	border:1px solid #1ab9ef;
	position:relative;
}

.brands_patent .brands:nth-child(5n+1) {
	border-left:none;
}

.brands_patent .brands:nth-child(5n-5) {
	border-right:none;
}

.brands_patent .brands:nth-child(-n+5) {
	border-top:none;
}

.linktomodel {
	display:block;
	margin-top:5px;
	margin-bottom:10px;
	color:#999;
}

.brands_patent .brands img {
	display:inline-block;
	margin-bottom:10px;
	margin-top:10px;
}

.price-table .paid_service {
	padding-left:5px;
	padding-right:5px;
}


/* Увеличение/закрытие изображения по клику для gallery.html */

/* Картинка на странице */
.minimized {
  width: 200px;
  height: 145px;
  cursor: pointer;
  border: 1px solid #FFF;
}
 
.minimized:hover {
  border: 1px solid gray;
}
 
/* Увеличенная картинка */
#magnify {
  display: none;

  position: fixed;
  max-width: 1000px;
  height: auto;
  z-index: 9999;
}
 
#magnify img {
  width: 100%;
}
 
/* Затемняющий фон */
#overlay {
  display: none;
 
  background: #000;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.5;
  z-index: 9990;
}
 
/* Кнопка закрытия */
#close-popup {
  width: 30px;
  height: 30px;
 
  background: #FFFFFF;
  border: 1px solid #AFAFAF;
  border-radius: 15px;
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 15px;
}
 
#close-popup i {
  width: 30px;
  height: 30px;
  background: url(../images/gallery/gallery_close_image.png) no-repeat center center;
  background-size: 16px 16px;
  display: block;
}

/* Лого-описание работы платных услуг для paid_service_*.html */
.paid-service-logo { 
	padding: 0px 0 50px;
}

/* Заголовок таблицы-прейскуранта для paid_service_*.html */
.table-header {
	font-size: 24px;
	color: #1ab9ef;
}

/* Таблица-прейскурант для paid_service_*.html */

/* Текст в столбцах */
.tftable {
	font-size: 12px;
	color: #333333;
	width: 100%;
	border-width: 0px;
	border-color: #FFFFFF;
	border-collapse: collapse;
	text-align: center;
}

/* Текст в заголовках столбцов */
.tftable th {
	font-size: 24px;
	background-color: #444444;
	color: #FFFFFF;
	border-width: 5px;
	padding: 15px;
	border-style: solid;
	border-color: #FFFFFF;
	text-align: center;
}

/* Фон столбцов */
.tftable tr {
	background-color: #E5E5E5;
}

/* Столбцы */
.tftable td {
	font-size: 14px;
	border-width: 5px;
	padding: 15px;
	border-style: solid;
	border-color: #FFFFFF;
}

/* Фон столбцов при наведении мыши (только кнопка заказа. остальное управляется кодом иконки-чекбокса!) */
.tftable tr:hover {
	background-color: #62A6C9;
}

/* Кнопка заказа для столбцов таблицы */
.table-button {
	font-size: 24px;
	padding: 10px 20px;
	color: #000000;
	background-color: transparent;
	border: 0px;
}

/* Иконка-чекбокс услуги в таблице-прейскуранте */
.check-price {
	background: url(../images/icons/check_mark_price.png);
	width: 24px;
	height: 24px;
	background-size: cover;
	display: inline-block;
	margin-right: 20px;
	vertical-align: middle;
	background-position: 0 0;
}

/* Иконка-чекбокс услуги при наведении мыши */
.tableprice table tr:hover .check-price {
	background-position: 24px 0;
}

.tableprice table tr:hover td {
	background: #EAF5F9;
}

.tableprice table tr:not(:first-of-type):hover td:last-of-type {
	background: transparent;
}

/* Дополнительный текст под таблицей прейскурантом для paid_service_*.html */
.paid-service-additional-descr {
	font-size: 15px;
	color: #000000;
}

/* Всплывающее окно */

.main {
    background: #aaa url(../images/bg.jpg) no-repeat;
    width: 800px;
    height: 600px;
    margin: 50px auto;
}
.panel {
    background-color: #444;
    height: 34px;
    padding: 10px;
}
.panel a#login_pop, .panel a#join_pop {
    border: 2px solid #aaa;
    color: #FFFFFF;
    display: block;
    float: right;
    margin-right: 10px;
    padding: 5px 10px;
    text-decoration: none;
    text-shadow: 1px 1px #000;

    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}
a#login_pop:hover, a#join_pop:hover {
    border-color: #EEEEEE;
}
.overlay {
    background-color: rgba(0, 0, 0, 0.0);
    bottom: 0;
    cursor: default;
    left: 0;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    visibility: hidden;
    z-index: 999;

    -webkit-transition: opacity .5s;
    -moz-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s;
}
.overlay:target {
    visibility: visible;
    opacity: 1;
}
.popup {
    background-color: #E5E5E5;
    display: inline-block;
    right: 10%;
    opacity: 0;
    padding: 8px;
    position: fixed;
    text-align: center;
	color: #62A6C9;
    top: 40%;
    visibility: hidden;
    z-index: 999;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

    -webkit-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -moz-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -ms-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    -o-box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;
    box-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.4) inset;

    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}
.overlay:target+.popup {
    top: 50%;
    opacity: 1;
    visibility: visible;
}
.close {
    background-color: rgba(98, 166, 201, 0.8);
    height: 30px;
    line-height: 30px;
    position: absolute;
    right: 0;
    text-align: center;
    text-decoration: none;
    top: -15px;
    width: 30px;

    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    font-size: 24px;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
}
.close:hover {
    background-color: rgba(124, 213, 255, 0.8);
}

Edited November 27, 2018 by Silver Raven
Исправлено оформление

klierik · November 27, 2018

Вот это поможет:

.brands_patent .brands {
  border: 1px solid #ebebeb;
  width: 20%;
  display: block;
  float: left;
  margin-bottom: -1px;
  margin-left: -1px;
  box-sizing: border-box; /* это правило выровняет блоки */
}

klierik · November 27, 2018

Добавь этот стиль:

.brands_patent:after {
  display: table;
  width: 100%;
  content: '';
}

Silver Raven · November 27, 2018

То, что нужно, спасибо.

А можно теперь, как-нибудь втиснуть нижние два бренда на поле выше, не меняя размера блоков?

Sign In

Кривая верстка страницы

Question

Silver Raven

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Silver Raven

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information