Имя пользователя:
Пароль:  
Помощь | Регистрация | Забыли пароль?  | Правила  

Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Сайт для курсовой работы

Ответить
Настройки темы
[решено] Сайт для курсовой работы
Stalker_AleX333


Сообщения: n/a

Профиль | Цитировать


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

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

Скриншот:
Скрытый текст

Код страницы:
Скрытый текст
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> <hr /> <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="acer" src="resources/images/icons/partner_canon.jpg"> <span class="linktomodel">CANON</span> </a> </div> </div> <h2></h2> <div class="section about"> <h3>Если производителя вашего устройства нет в списке, вы всегда можете воспользоваться нашими платными услугами</h3> <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;
}


В будущем, нужно будет подцепить к сайту БД. А пока, дабы было что показать, обойдусь фейком, имитирующим вход пользователя. Окно логина > копия главной страницы, с уже открытым аккаунтом.
Но почему-то не получается подцепить переход по кнопке (<a href="about_us.html"><button class="button button-block"/>Вход</button></a>). Сайт отправляет в главную директорию.

Код страницы входа-регистрации:
Скрытый текст
HTML код: Выделить весь код
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8" /> <title>Сервисный центр SEZ - Вход</title> <script src="resources/scripts/jquery.min.js" type="text/javascript"></script> <link rel="stylesheet" href="resources/styles/login-signup.css" type="text/css" /> </head> <body> <div class="form"> <ul class="tab-group"> <li class="tab"><a href="#login">Вход</a></li> <li class="tab active"><a href="#signup">Регистрация</a></li> </ul> <div class="tab-content"> <div id="signup"> <form action="/" method="post"> <div class="top-row"> <div class="field-wrap"> <label> Имя<span class="req">*</span> </label> <input type="text" required autocomplete="off" /> </div> <div class="field-wrap"> <label> Фамилия<span class="req">*</span> </label> <input type="text"required autocomplete="off"/> </div> </div> <div class="field-wrap"> <label> Номер телефона<span class="req">*</span> </label> <input type="number"required autocomplete="off"/> </div> <div class="field-wrap"> <label> E-mail адрес<span class="req">*</span> </label> <input type="email"required autocomplete="off"/> </div> <div class="field-wrap"> <label> Пароль<span class="req">*</span> </label> <input type="password"required autocomplete="off"/> </div> <a href="about_us.html"><button type="submit" class="button button-block"/>Давайте начнем</button></a> </form> </div> <div id="login"> <h1>С возвращением!</h1> <form action="/" method="post"> <div class="field-wrap"> <label> E-mail адрес<span class="req">*</span> </label> <input type="email"required autocomplete="off"/> </div> <div class="field-wrap"> <label> Пароль<span class="req">*</span> </label> <input type="password"required autocomplete="off"/> </div> <p class="forgot"><a href="#">Забыли пароль?</a></p> <a href="about_us.html"><button class="button button-block"/>Вход</button></a> </form> </div> </div> </div> <script src="resources/scripts/sez.service.center.js" type="text/javascript"></script> </body> </html>


CSS:
Скрытый текст
Код: Выделить весь код
*, *:before, *:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

body {
  background: #444444;
  font-family: 'Titillium Web', sans-serif;
}

a {
  text-decoration: none;
  color: #62A6C9;
  transition: .5s ease;
}
a:hover {
  color: #7CD5FF;
}

.form {
  background: rgba(45, 45, 45, 1.0);
  padding: 40px;
  max-width: 600px;
  margin: 40px auto;
  border-radius: 4px;
  box-shadow: 0 4px 10px 4px rgba(98, 166, 201, 0.2);
}

.tab-group {
  list-style: none;
  padding: 0;
  margin: 0 0 40px 0;
}
.tab-group:after {
  content: "";
  display: table;
  clear: both;
}
.tab-group li a {
  display: block;
  text-decoration: none;
  padding: 15px;
  background: rgba(160, 179, 176, 0.25);
  color: #a0b3b0;
  font-size: 20px;
  float: left;
  width: 50%;
  text-align: center;
  cursor: pointer;
  transition: .5s ease;
}
.tab-group li a:hover {
  background: #7CD5FF;
  color: #ffffff;
}
.tab-group .active a {
  background: #62A6C9;
  color: #ffffff;
}

.tab-content > div:last-child {
  display: none;
}

h1 {
  text-align: center;
  color: #ffffff;
  font-weight: 300;
  margin: 0 0 40px;
}

label {
  position: absolute;
  -webkit-transform: translateY(6px);
          transform: translateY(6px);
  left: 13px;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.25s ease;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  font-size: 22px;
}
label .req {
  margin: 2px;
  color: #62A6C9;
}

label.active {
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  left: 2px;
  font-size: 14px;
}
label.active .req {
  opacity: 0;
}

label.highlight {
  color: #ffffff;
}

input, textarea {
  font-size: 22px;
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  background: none;
  background-image: none;
  border: 1px solid #a0b3b0;
  color: #ffffff;
  border-radius: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:focus, textarea:focus {
  outline: 0;
  border-color: #62A6C9;
}

textarea {
  border: 2px solid #a0b3b0;
  resize: vertical;
}

.field-wrap {
  position: relative;
  margin-bottom: 40px;
}

.top-row:after {
  content: "";
  display: table;
  clear: both;
}
.top-row > div {
  float: left;
  width: 48%;
  margin-right: 4%;
}
.top-row > div:last-child {
  margin: 0;
}

.button {
  border: 0;
  outline: none;
  border-radius: 0;
  padding: 15px 0;
  font-size: 2rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: #62A6C9;
  color: #ffffff;
  transition: all 0.5s ease;
  -webkit-appearance: none;
}
.button:hover, .button:focus {
  background: #7CD5FF;
}

.button-block {
  display: block;
  width: 100%;
}

.forgot {
  margin-top: -20px;
  text-align: right;
}

JS:
Скрытый текст
Код: Выделить весь код
$(".form")
  .find("input, textarea")
  .on("keyup blur focus", function(e) {
    var $this = $(this),
      label = $this.prev("label");

    if (e.type === "keyup") {
      if ($this.val() === "") {
        label.removeClass("active highlight");
      } else {
        label.addClass("active highlight");
      }
    } else if (e.type === "blur") {
      if ($this.val() === "") {
        label.removeClass("active highlight");
      } else {
        label.removeClass("highlight");
      }
    } else if (e.type === "focus") {
      if ($this.val() === "") {
        label.removeClass("highlight");
      } else if ($this.val() !== "") {
        label.addClass("highlight");
      }
    }
  });

$(".tab a").on("click", function(e) {
  e.preventDefault();

  $(this)
    .parent()
    .addClass("active");
  $(this)
    .parent()
    .siblings()
    .removeClass("active");

  target = $(this).attr("href");

  $(".tab-content > div")
    .not(target)
    .hide();

  $(target).fadeIn(600);
});

Отправлено: 15:42, 26-11-2018

 

Новый участник


Сообщения: 7
Благодарности: 0

Профиль | Отправить PM | Цитировать


А в чем вопрос\задача собственно?

Отправлено: 22:10, 27-11-2018 | #2



Для отключения данного рекламного блока вам необходимо зарегистрироваться или войти с учетной записью социальной сети.

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

Stalker_AleX333


Сообщения: n/a

Профиль | Цитировать


Sarkar21, ну, вообще-то все было описано. Вопросов получается два. 1-ый о поехавшей верстке и 2-ой, о добавлении перехода на нужную страницу с кнопки формы авторизации.

Решены на другом ресурсе. Тему закрываю.

Отправлено: 21:42, 29-11-2018 | #3


Аватара для lxa85

Необычный


Contributor


Сообщения: 4461
Благодарности: 994

Профиль | Сайт | Отправить PM | Цитировать


Stalker_AleX333, а в чем был фокус? Что было не так и почему ехала верстка?

Отправлено: 14:39, 30-11-2018 | #4

Stalker_AleX333


Сообщения: n/a

Профиль | Цитировать


lxa85, нужно было изменить css стили:

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

.brands_patent:after {
  display: table;
  width: 100%;
  content: '';
}
Это сообщение посчитали полезным следующие участники:

Отправлено: 16:26, 07-12-2018 | #5



Компьютерный форум OSzone.net » Компьютеры + Интернет » Вебмастеру » [решено] Сайт для курсовой работы

Участник сейчас на форуме Участник сейчас на форуме Участник вне форума Участник вне форума Автор темы Автор темы Шапка темы Сообщение прикреплено

Похожие темы
Название темы Автор Информация о форуме Ответов Последнее сообщение
ЛВС+сайт+почтовик=настройка совместной работы YDen Microsoft Windows NT/2000/2003 3 15-02-2010 04:59
DNS/DHCP - Сайт на домашнем компе и 2 провайдера для безотказной работы ... kyler Сетевые технологии 0 08-02-2010 10:19
ALTLinux - Пжт, помогите с литературой к курсовой! Polina Программирование и базы данных 0 16-12-2009 19:52
Прочие БД - Помогите с курсовой по БД _EvIL_ Программирование и базы данных 3 02-12-2007 18:43
Народ помогите плиз с курсовой.!!! Vovius Программирование и базы данных 1 04-05-2006 21:09




 
Переход