| Stalker_AleX333 |
26-11-2018 15:42 2842706 |
Сайт для курсовой работы
Народ, выручайте!
Получил курсовую работу на создание 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">» Ремонт компьютеров<br/> и ноутбуков</a></li>
<li><a href="paid_service_gadgets.html">» Ремонт планшетов<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>© 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);
});
|
