Кексби. Полуфинал / Завершаем прайс-лист [13/13]

Курсы Эпичный курс «Кексби»
1

моя нипанимать почему не засчитывает

<!DOCTYPE HTML>
The Great Keksby 
<div class="features">
  <div class="container">
    <ul class="clearfix">
      <li class="feature-item feature-choice">
        <h2 class="feature-title">Выбор</h2>
        <p>Ваш питомец оценит широту нашего ассортимента аксессуаров.</p>
      </li>
      <li class="feature-item feature-quality">
        <h2 class="feature-title">Качество</h2>
        <p>Наши товары не сломаются на второй день. Только на третий.</p>
      </li>
      <li class="feature-item feature-safety">
        <h2 class="feature-title">Безопасность</h2>
        <p>Все изготовлено из натуральных материалов, безопасных для котов.</p>
      </li>
    </ul>
  </div>
</div>


<div class="cat-reference">
  <div class="container">
    <h2 class="section-title">Немного теории</h2>
    <a class="btn to-full-reference" href="#" title="Открыть справочник">Справочник</a>
    <dl>
      <dt>
        <h3 class="reference-title">Окрас кошек и котов</h3>
        <i class="reference-source">источник: <a target="_blank" href="https://ru.wikipedia.org">wikipedia</a></i>
      </dt>
      <dd>
        <img src="img/article-1.jpg" alt="Окрас кошек и котов" width="100" height="100">
        <p>Окрас шерсти, кожи и глаз кошки обусловлен присутствием в них пигмента меланина. Меланин находится в теле волоса в виде микроскопических гранул, которые различаются по форме, размеру и количеству, что и вызывает различия в окрасе.</p>
      </dd>
      <dt>
        <h3 class="reference-title">Кошкин дом</h3>
        <i class="reference-source">источник: <a target="_blank" href="http://kotmur.spb.ru">kotmur.spb.ru</a></i>
      </dt>
      <dd>
        <img src="img/article-2.jpg" alt="Кошкин дом" width="100" height="100">
        <p>Нужен ли кошке Кошкин дом? Свой отдельный, обособленный от пространства городской квартиры Кошкин дом? Да, нужен! Нужен особый Кошкин дом, обустроенный по ее вкусу с лесенкой, с когтеточкой, с замкнутым, своим, отдельным уголком в ее, кошкином, доме.</p>
      </dd>
    </dl>
  </div>
</div>


<div class="reviews">
  <div class="container">
    <h2 class="section-title">Довольные коты</h2>
    <a class="btn to-all-reviews" href="#" title="Посмотреть все отзывы">Все отзывы</a>
    <div class="reviews-list clearfix">
      <blockquote class="review-item">
        <p>Спасибо Кексу за давно напрашивающуюся идею! Набрал себе очков на все случаи жизни: для чтения и для вечеринки с котанами B-)</p>
        <cite class="review-author">Барсик, г. Москва</cite>
      </blockquote>
      <blockquote class="review-item">
        <p>Я просто не могу без шоппинга и теперь не нужно тащить хозяйку в магазин, заказываю все аксессуары на сайте у Кекса он-лайн!</p>
        <cite class="review-author">Мурка, г. Санкт-Петербург</cite>
      </blockquote>
    </div>
  </div>
</div>


<div class="popular-and-price">
  <div class="container">
    <h2 class="section-title">Популярные товары</h2>
    <a class="btn to-catalog" href="#" title="Посмотреть все товары">Каталог</a>
    <div class="popular-items clearfix">
      <div class="catalog-item">
        <img src="img/glasses-1.jpg" alt="очки «Классика жанра»" width="306" height="206">
        <h3>Очки «Классика жанра»</h3>
        <b class="catalog-item-price">300 р.</b>
        <a href="#" class="btn btn-info">Описание</a>
        <a href="#" class="btn btn-buy">Купить</a>
      </div>
      <div class="catalog-item">
        <img src="img/glasses-2.jpg" alt="очки «Жалюзи»" width="306" height="206">
        <h3>Очки «Жалюзи»</h3>
        <b class="catalog-item-price">400 р.</b>
        <a href="#" class="btn btn-info">Описание</a>
        <a href="#" class="btn btn-buy">Купить</a>
      </div>
      <div class="catalog-item">
        <img src="img/glasses-3.jpg" alt="очки «Базилис»" width="306" height="206">
        <h3>Очки «Базилис»</h3>
        <b class="catalog-item-price">500 р.</b>
        <a href="#" class="btn btn-info">Описание</a>
        <a href="#" class="btn btn-buy">Купить</a>
      </div>
    </div>

    <h2 class="section-title">Прайс-лист на услуги</h2>
    <table class="price-list">
      <tr>
        <th class="price-number">№</th>
        <th>Название услуги</th>
        <th class="price-master">Кто оказывает</th>
        <th class="price-cost">Сколько стоит</th>
      </tr>
      <tr>
        <td class="price-number">1.</td>
        <td class="price-name">Стрижка</td>
        <td class="price-master">Грумер</td>
        <td class="price-cost">500 руб.</td>
      </tr>
      <tr>
        <td class="price-number">2.</td>
        <td class="price-name">Заточка когтей</td>
        <td class="price-master">Грумер</td>
        <td class="price-cost">300 руб.</td>
      </tr>
      <tr>
        <td class="price-number">3.</td>
        <td class="price-name">Накрутка усов</td>
        <td class="price-master">Грумер</td>
        <td class="price-cost">100 руб.</td>
      </tr>
      <tr>
        <td class="price-number">4.</td>
        <td class="price-name">Подбор аксессуаров</td>
        <td class="price-master">Стилист</td>
        <td class="price-cost">1550 руб.</td>
      </tr>
    </table>
  </div>
</div>


<div class="feedback">
  <div class="container">
    <h2 class="section-title">Остались вопросы?</h2>
    <p class="feedback-tip">Свяжитесь с нами и мы развеем оставшиеся у вас сомнения!</p>
    <form class="feedback-form" action="/keksby-mail" method="post">
      <div class="feedback-form-group">
        <label for="fullname">Представьтесь, пожалуйста:</label>
        <input type="text" name="fullname" id="fullname">
      </div>
      <div class="feedback-form-group">
        <label for="phone">Контактный телефон:</label>
        <input type="text" name="phone" id="phone">
      </div>
      <div class="feedback-form-group">
        <label for="email">Электронная почта:</label>
        <input type="text" name="email" id="email">
      </div>
      <div class="checkbox-area">
        <label>
          <input type="checkbox" name="subscription">
          Я согласен получать спам и смс на телефон
        </label>
      </div>
      <div class="feedback-form-group">
        <label for="topic">Тема обращения:</label>
        <select name="topic" id="topic">
          <option value="1">Условия доставки</option>
          <option value="2">Возврат товара</option>
          <option value="3">Жалоба в Роспотребнадзор</option>
        </select>
      </div>
      <div class="feedback-form-group">
        <label for="message">Текст обращения:</label>
        <textarea name="message" id="message"></textarea>
      </div>
      <input type="submit" class="btn" value="Отправить">
    </form>
  </div>
</div>


<div class="page-footer">
  <div class="container">
    <div class="footer-top clearfix">
      <div class="footer-logo">
        <img src="img/logo.png" alt="The Great Keksby" width="205" height="55">
      </div>
      <a href="#" class="btn btn-quick-order">Заказать</a>
    </div>

    <div class="footer-middle clearfix">
      <div class="footer-menu">
        <h3>Магазин</h3>
        <ul>
          <li><a href="#">Домики</a></li>
          <li><a href="#">Одежда</a></li>
          <li><a href="#">Очки</a></li>
        </ul>
      </div>
      <div class="footer-menu">
        <h3>Отзывы</h3>
        <ul>
          <li><a href="#">Показать</a></li>
          <li><a href="#">Оставить</a></li>
        </ul>
      </div>
      <div class="footer-menu">
        <h3>Прайс-лист</h3>
        <ul>
          <li><a href="#">Скачать прайс</a></li>
        </ul>
      </div>
    </div>

    <div class="footer-bottom clearfix">
      <div class="footer-social">
        <b>Давайте дружить!</b>
        <a class="social-btn" href="https://vk.com/htmlacademy">Вконтакте</a>
        <a class="social-btn" href="https://facebook.com/htmlacademy">Фейсбук</a>
        <a class="social-btn" href="https://instagram.com/htmlacademy">Инстаграм</a>
      </div>
      <div class="footer-copyright">
        С <span class="heart">любовью</span> для <a href="https://htmlacademy.ru">HTML Academy</a>
      </div>
    </div>
  </div>
</div>

body {
min-width: 1040px;
margin: 0;
padding: 0;
font-size: 18px;
line-height: 24px;
font-family: "Arial", sans-serif;
color: #404040;
background-color: white;

}

.container {
width: 1020px;
margin: 0 auto;
}

.clearfix::after {
content: “”;
display: table;
clear: both;
}

.page-header {
min-height: 490px;
padding-top: 35px;
background-image: url(“img/header-bg.jpg”);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.page-header,
.page-footer {
color: #c3c3c3;
background-color: #363636;
}

.header-top {
margin-bottom: 125px;
}

.header-logo {
float: left;
width: 205px;
height: 55px;
}

.header-logo img {
width: 205px;
height: 55px;
}

.main-nav {
float: left;
width: 520px;
margin: 0;
margin-top: 18px;
margin-left: 125px;
padding: 0;
list-style: none;
}

.main-nav li {
float: left;
margin-right: 50px;
text-transform: uppercase;
}

.main-nav li:last-child {
margin-right: 0;
}

.main-nav a {
color: #ffffff;
text-decoration: none;
}

.main-nav a:hover {
text-decoration: underline;
}

.main-nav a:active {
color: rgba(255, 255, 255, 0.3);
}

.btn {
display: inline-block;
width: 146px;
padding: 10px;
font: inherit;
vertical-align: top;
text-align: center;
color: #a38b70;
text-transform: uppercase;
text-decoration: none;
word-wrap: break-word;
border: 2px solid #a38b70;
border-radius: 2px;
}

.btn:hover {
color: #8d745a;
border-color: #8d745a;
}

.btn:active {
color: rgba(141, 116, 90, 0.3);
border-color: #8d745a;
}

.btn-quick-order {
float: right;
margin-top: 6px;
border-color: #ffffff;
color: #ffffff;
}

.btn-quick-order:hover {
color: #404040;
background-color: #ffffff;
border-color: #ffffff;
}

.btn-quick-order:active {
color: rgba(64, 64, 64, 0.3);
background-color: #ffffff;
border-color: #ffffff;
}

.promo {
font-weight: bold;
font-size: 45px;
line-height: 55px;
font-family: “Georgia”, serif;
text-align: center;
}

.promo a {
color: #ffffff;
text-decoration: none;
}

.features {
padding-top: 50px;
padding-bottom: 55px;
}

.features ul {
margin: 0;
padding: 0;
list-style: none;
}

.feature-item {
position: relative;
float: left;
width: 279px;
padding-top: 90px;
padding-right: 30px;
padding-left: 30px;
text-align: center;
border-left: 1px solid #d9d9d9;
}

.feature-item:first-child {
border-left-color: transparent;
}

.feature-item::before {
content: “”;
position: absolute;
top: 0;
left: 137px;
width: 65px;
height: 65px;
background-image: url(“img/sprite.png”);
background-repeat: no-repeat;
}

.feature-choice::before {
background-position: -5px -5px;
}

.feature-quality::before {
background-position: -5px -76px;
}

.feature-safety::before {
background-position: 1px -143px;
}

.feature-title {
margin: 0;
margin-bottom: 20px;
font-weight: bold;
font-size: 30px;
line-height: 30px;
font-family: “Georgia”, serif;
color: #a38b70;
}

.feature-item p {
margin: 0;
font-size: 16px;
}

.cat-reference {
padding-top: 70px;
padding-bottom: 90px;
background-color: #f2f2f2;
}

.cat-reference .container {
position: relative;
}

.section-title {
margin: 0;
margin-right: 180px;
margin-bottom: 60px;
font-weight: bold;
font-size: 45px;
line-height: 55px;
font-family: “Georgia”, serif;
color: #a38b70;
}

.to-full-reference {
position: absolute;
top: 5px;
right: 0;
}

.cat-reference dl {
width: 820px;
margin: 0;
padding: 0;
}

.cat-reference dt {
margin: 0;
margin-bottom: 10px;
}

.cat-reference dd {
position: relative;
min-height: 100px;
margin: 0;
padding-left: 130px;
font-size: 16px;
}

.cat-reference dd + dt {
margin-top: 70px;
}

.cat-reference dd img {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 5px;
}

.cat-reference dd p {
margin: 0;
}

.reference-title {
display: inline;
font-size: 24px;
}

.reference-source {
font-size: 16px;
color: #666666;
font-style: italic;
}

.reference-source a {
position: relative;
color: #a38b70;
}

.reference-source a:hover {
color: #8d745a;
}

.reference-source a:active {
color: rgba(141, 116, 90, 0.3);
}

.reference-source a::after {
content: “”;
top: 0;
right: -10px;
position: absolute;
width: 8px;
height: 8px;
background: url(“img/sprite.png”) no-repeat -5px -210px;
}

.reviews {
padding-top: 70px;
padding-bottom: 90px;
}

.reviews .container {
position: relative;
}

.to-all-reviews {
position: absolute;
top: 0;
right: 0;
}

.review-item {
float: left;
width: 377px;
margin: 0;
margin-right: 80px;
padding: 0;
padding-left: 50px;
font-size: 16px;
border-left: 3px solid #a38b70;
}

.review-item p {
margin: 0;
margin-bottom: 15px;
}

.review-author {
font-weight: bold;
font-style: italic;
}

.popular-and-price {
padding-top: 70px;
padding-bottom: 90px;
background-color: #f2f2f2;
}

.popular-and-price .container {
position: relative;
}

.popular-items {
margin-bottom: 50px;
}

.to-catalog {
position: absolute;
top: 0;
right: 0;
}

.catalog-item {
position: relative;
float: left;
width: 262px;
margin-right: 48px;
padding: 15px 22px;
padding-top: 221px;
font-size: 16px;
border: 1px solid #d8d8d8;
}

.catalog-item:last-child {
margin-right: 0;
}

.catalog-item img {
position: absolute;
top: 0;
left: 0;
width: 306px;
height: 206px;
}

.catalog-item h3 {
float: left;
max-width: 205px;
margin: 0;
margin-bottom: 20px;
font-size: 16px;
color: #000000;
}

.catalog-item-price {
float: right;
max-width: 55px;
margin-bottom: 20px;
}

.catalog-item .btn {
width: 101px;
color: #ffffff;
background-color: #a38b70;
}

.catalog-item .btn:hover {
background-color: #8d745a;
}

.catalog-item .btn:active {
color: rgba(255, 255, 255, 0.3);
}

.catalog-item .btn-info {
float: left;
clear: left;
}

.catalog-item .btn-buy {
float: right;
}

.price-list {
width: 100%;
border-collapse: collapse;
line-height: 30px;
}

.price-list th {
font-weight: normal;
font-size: 14px;
text-align: left;
text-transform: uppercase;
}

.price-list td {
border: 1px solid #d8d8d8;
}

.price-list th,
.price-list td {
padding: 10px 17px;
}

.price-list .price-number {
width: 15px;
text-align: center;
}

.price-list .price-name {
width: 422px;
font-weight: bold;
color: #000000;
}

.price-list .price-master {
width: 306px;
}

.price-list .price-cost {
width: 135px;
}

.feedback {
padding-top: 60px;
padding-bottom: 70px;
}

.feedback-tip {
font-size: 16px;
}

.feedback-form {
width: 630px;
padding-right: 390px;
background-image: url(“img/write.jpg”);
background-repeat: no-repeat;
background-position: 100% 40px;
}

.feedback-form-group {
padding: 10px 0;
}

.feedback-form-group label {
font-size: 12px;
text-transform: uppercase;
}

.feedback-form input[type=“text”],
.feedback-form select,
.feedback-form textarea {
font: inherit;
color: inherit;
border: 2px solid #d5d5d5;
}

.feedback-form input[type=“text”]:hover,
.feedback-form select:hover,
.feedback-form textarea:hover {
border-color: #bebebe;
}

.feedback-form input[type=“text”]:focus,
.feedback-form select:focus,
.feedback-form textarea:focus {
border-color: #8d745a;
}

.checkbox-area {
border-bottom: 1px solid #d5d5d5;
}

.page-footer {
padding-top: 45px;
padding-bottom: 50px;
}

.footer-top {
margin-bottom: 45px;
}

.footer-logo {
float: left;
width: 205px;
height: 55px;
}

.footer-middle {
margin-bottom: 50px;
padding-top: 50px;
}

.footer-middle,
.footer-bottom {
border-top: 1px solid #5e5e5e;
}

.footer-menu {
float: left;
width: 150px;
margin-right: 20px;
}

.footer-menu h3 {
font-weight: bold;
font-size: 24px;
font-family: “Georgia”, serif;
color: #a38b70;
}

.footer-menu ul {
list-style: none;
}

.footer-menu a {
font-size: 16px;
color: #c3c3c3;
text-decoration: none;
}

.footer-menu a:hover {
color: #ffffff;
}

.footer-menu a:active {
color: rgba(255, 255, 255, 0.3);
}

.footer-bottom {
padding-top: 50px;
}

.footer-social {
float: left;
width: 490px;
}

.footer-social b {
font-size: 24px;
font-family: “Georgia”, serif;
color: #a38b70;
}

.social-btn {
color: #ffffff;
}

.footer-copyright {
float: right;
width: 236px;
color: #ffffff;
text-transform: uppercase;
}

.footer-copyright a {
color: #ffffff;
text-decoration: none;
}

.footer-copyright a:hover {
text-decoration: underline;
}

.footer-copyright a:active {
color: rgba(255, 255, 255, 0.3);
}

2

3
3.png698×238 12 KB

3

Отправьте html-код текстом, пожалуйста. Кнопка для форматирования </> в редакторе сообщений.

4

Не задавайте названия классов для заголовочных ячеек.
Когда меняете что-то в сообщении, пишите еще одно. Дело в том, что только на измененное сообщение уведомления не приходят. Тема не отображается как обновленная. И то, что я зашла сюда еще раз - это удачное стечение обстоятельств.
@juwain, посмотрите, пожалуйста. Возможно, некорректная формулировка цели №1.

1 лайк