ForumD.ru - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Финансовая помощьРеклама на сайте
Стать модераторомОтзывы

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Конкурсы и акции » "Я - вебмастер!" Этап 2. Ликвидация жуков.


"Я - вебмастер!" Этап 2. Ликвидация жуков.

Сообщений 1 страница 10 из 17

1

"Я - вебмастер!" Этап 2. Ликвидация жуков.

Итак, начнем второй этап конкурса, уже знакомый прошлогодним участникам "Ликвидация жуков".

Напомню, что в этот этап прошли участники, набравшие 30 и более баллов в предыдущем.  Это 7 участников.

45,5 баллов Рунный
    44 балла faiko
    43 балла Ghоst
    42 балла Eri
    41,5 баллов Leonheart
    35,5 баллов Бу
    34,5 баллов супернатурал

На этот раз этап "Ликвидация жуков" - сложнее, но и интереснее.
К нам в руки попал файл одного очень неумелого верстальщика. Непонятно, что он курил во время верстки, но ошибок допустил - ну ооочень много!
Что там в этом файле - никто не знает, верстальщика уволили и больше его никто не видел, так что секрет он раскрыть никому не успел.
Единственная возможность узнать что там - исправить все ошибки.

Для препарации Вам предложен html-файл со странным содержимым. Можно запустить его в браузере и увидеть следующее:
http://easycaptures.com/fs/uploaded/738/4885385227.jpg
Явно что-то не то.
Единственное, в чем мы уверены, что здесь правильна эта строка (и файл по ссылке)

Код:
<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/18280.css">

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


Правила этапа:
1. Скачайте файл и откройте его через любой html-редактор: http://sadhaka.moy.su/common/index.html
2. Исправьте все ошибки. За каждую найденную и исправленную ошибку Вы получите 1балл.
3. Но не переборщите - если наделаете ошибок сами - потеряете 2 балла.
4. Сохраните файл и пришлите мне ссылку на него в ЛС или опубликуйте в данной теме скрытым текстом с большим цензом постов.
      4.1. Если после того, как Вы сдали свою работу Вы нашли еще ошибки - пришлите ее еще раз или запостите ниже. Проверяться будет ТОЛЬКО последний вариант.

Джекпот:
Те, кто восстановят изначальную картинку и пришлют ее скриншот (вместе с ссылкой), получат бонус в виде 50 баллов и подарок лично от меня (какой подарок - пока секрет, их будет много на выбор).
P.S. чтобы получить исходную картинку не обязательно исправлять совсем ВСЕ ошибки.
P.P.S. используйте для проверки современные браузеры. Желательно mozilla firefox, чтобы результат не отличался от моего.

Для самых любознательных:
Кроме того, Вы можете попытаться оптимизировать верстку (ввести новые классы, сгруппировать правила, вынести правила из встроенных во внутренние и т.п.), чтобы сделать код более читаемым и простым.
За каждый факт оптимизации Вы получите 10 баллов. Если Ваши старания приведут к ошибкам - потеряете 5 баллов.

Вопросы, обсуждения, мнения и т.п. оставляйте, пожалуйста, в соседней теме "Я - вебмастер!" To be continued... до завершения этапа и открытия данной темы для свободного общения.
Помните, что Вы не должны раскрывать ответы до окончания этапа.

Удачи! Не торопитесь! Этот этап на самом деле сложный!

Этап будет закрыт 9(11) декабря в 23.59 по Москве. Продления допустимы согласно правилам.

*запас два дня берется из пункта правила о продлении этапа. В данном случае, этим пунктом буду пользоваться я, так как из-за аварии у нас часто отключают электричество, и я могу просто на сутки остаться без оного.

Отредактировано sadhaka (05.12.2012 15:19:12)

0

2

Еще вчера пришла работа от Leonheart в 22:33:26.
Очень оперативно!

Ждем с нетерпением работ остальных участников!

0

3

Из-за появившихся вопросов и неожиданной, но очень радующей активности участников в рамках расширения поддержки браузеров, добавила такую возможность во внешний файл https://forumstatic.ru/files/0007/e3/f7/18280.css

Перекачайте, пожалуйста, файл или поменяйте ссылку в уже существующем.

Еще раз

https://forumstatic.ru/files/0007/e3/f7/18280.css

+1

4

Сегодня последний день, а работа по-прежнему одна. Точнее полторы. Остальные хотят техническое поражение?

0

5

Таак, в нашем полку прибывает, 2,5 работы :)

0

6

Скрытый текст:

Для просмотра скрытого текста - войдите или зарегистрируйтесь.

0

7

4 работы к 19.22. Еще остается время!

0

8

Этап решено продлить до 11.12.


Начался он довольно внезапно, поэтому необходимо дать участникам собраться с мыслями :)

Ждем Ваших работ!

0

9

Этап закрыт, поучаствовало 4 человека и 1 вне конкурса.

Итоги будут объявлены завтра ближе к вечеру.

Всем спасибо за участие!

0

10

Я все надеялась, что кто-то опомниться и еще поучаствует. Но нет, так нет. Участников становится меньше, но тем вкуснее будут призы для тех, кто пройдет этот марафон :)

Этап 2 был достаточно сложным, упор здесь был сделан не на просто выискивание ошибок, но на понимание сути и улучшение кода.
Ну и собрались воистину профессионалы!

Еще раз напомню, за что можно было получить баллы:
1. За исправленные ошибки по 1 за штуку. Всего было 64 ошибки (некоторые синтаксические ошибки считались за одну, если они были подобными). Max 64 балла.
2. За получение исходной картинки - 50 баллов.
3. За попытку улучшения кода - по 10 за каждый факт. Max 100
Что можно было улучшать:
- Можно было вынести стили из встроенных (атрибут тега style) во внутренние таблицы. 10 баллов
- Можно было сгруппировать классы. 10 баллов
- Можно было использовать обобщающее свойство background. 10 баллов
- Можно было сократить записи свойств и параметров (border, color).  20 баллов
- Можно было расширить поддержку браузеров через указание свойств с вендорными префиксами (border-radius, transform, transform-origin, animation, keyframes). 50 баллов

Всего за конкурс можно было получить 214 баллов.

Посмотрим на присланные работы:

Leonheart

[html]<iframe src="http://sadhaka.moy.su/common/leonheart.html" height="600" width="410"></iframe>[/html]

Исходный код
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
/* ---------------------------------- Title ---------------------------------- */
h1 {
  font-size: 2em;
  text-align: center;
  color: red;
  }

/* ---------------------------------- Parts of body ---------------------------------- */
.cat {
  position: relative;
  margin: 0px auto;
  width: 400px;
  height: 400px;
  background: transparent;
  }

.head {
  position: absolute;
  left: 60px;
  top: 30px;
  width: 280px;
  height: 250px;
  background: #000;

  -webkit-border-radius: 280px/250px;
   -khtml-border-radius: 280px/250px;
     -moz-border-radius: 280px/250px;
       -o-border-radius: 280px/250px;
          border-radius: 280px/250px;
  }

.body {
  position: absolute;
  left: 165px;
  top: 250px;
  width: 66px;
  height: 125px;
  background: #000;

  -webkit-border-radius: 66px/125px;
   -khtml-border-radius: 66px/125px;
     -moz-border-radius: 66px/125px;
       -o-border-radius: 66px/125px;
          border-radius: 66px/125px;
  }

/* ---------------------------------- Legs/Paws ---------------------------------- */
.left-leg, .right-leg {
  position: absolute;
  top: 327px;
  width: 25px;
  height: 60px;
  background: #000;

  -webkit-border-radius: 25px/60px;
   -khtml-border-radius: 25px/60px;
     -moz-border-radius: 25px/60px;
       -o-border-radius: 25px/60px;
          border-radius: 25px/60px;
  }

.left-leg {
  left: 207px;

  -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
       -o-transform: rotate(60deg);
          transform: rotate(60deg);
  }

.right-leg {
  left: 163px;

  -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
       -o-transform: rotate(120deg);
          transform: rotate(120deg);
  }

.left-paw, .right-paw {
  position: absolute;
  top: 350px;
  width: 15px;
  height: 35px;
  background: #000;

  -webkit-border-radius: 16px/35px;
   -khtml-border-radius: 16px/35px;
     -moz-border-radius: 16px/35px;
       -o-border-radius: 16px/35px;
          border-radius: 16px/35px;
  }

.left-paw {
  left: 205px;
  }

.right-paw {
  left: 180px;
  }

/* ---------------------------------- Ears ---------------------------------- */
.left-ear, .right-ear {
  position: absolute;
  top: 40px;
  width: 30px;
  height: 60px;
  background: #000;

  -webkit-border-radius: 30px/60px;
   -khtml-border-radius: 30px/60px;
     -moz-border-radius: 30px/60px;
       -o-border-radius: 30px/60px;
          border-radius: 30px/60px;

  -webkit-transform-origin: 15px 60px;
     -moz-transform-origin: 15px 60px;
       -o-transform-origin: 15px 60px;
  }

.left-ear {
  left: 300px;

  -webkit-animation: left-ear 3s infinite linear normal none;
     -moz-animation: left-ear 3s infinite linear normal none;
  }

.right-ear {
  left: 70px;

  -webkit-animation: right-ear 3s infinite linear normal none;
     -moz-animation: right-ear 3s infinite linear normal none;
  }

/* ---------------------------------- Whiskers ---------------------------------- */
.left-whiskers, .right-whiskers {
  position: absolute;
  top: 140px;
  width: 45px;
  height: 30px;
  }

.left-whiskers {
  left: 330px;

  -webkit-transform-origin: 0px 15px;
     -moz-transform-origin: 0px 15px;
       -o-transform-origin: 0px 15px;

  -webkit-animation: left-whiskers 3s infinite linear normal none;
     -moz-animation: left-whiskers 3s infinite linear normal none;
  }

.right-whiskers {
  left: 25px;

  -webkit-transform-origin: 45px 15px;
     -moz-transform-origin: 45px 15px;
       -o-transform-origin: 45px 15px;

  -webkit-animation: right-whiskers 3s infinite linear normal none;
     -moz-animation: right-whiskers 3s infinite linear normal none;
  }

.w1, .w3, .w5, .w2, .w4, .w6 {
  position: absolute;
  left: 0px;
  width: 45px;
  height: 3px;
  background: #000;
  }

.w1, .w2 {
  top: 15px;
  }

.w3 {
  top: 8px;

  -webkit-transform: rotate(-5deg);
     -moz-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
       -o-transform: rotate(-5deg);
          transform: rotate(-5deg);
  }

.w5 {
  top: 22px;

  -webkit-transform: rotate(-355deg);
     -moz-transform: rotate(-355deg);
      -ms-transform: rotate(-355deg);
       -o-transform: rotate(-355deg);
          transform: rotate(-355deg);
  }

.w4 {
  top: 8px;

  -webkit-transform: rotate(5deg);
     -moz-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
       -o-transform: rotate(5deg);
          transform: rotate(5deg);
  }

.w6 {
  top: 22px;

  -webkit-transform: rotate(355deg);
     -moz-transform: rotate(355deg);
      -ms-transform: rotate(355deg);
       -o-transform: rotate(355deg);
          transform: rotate(355deg);
  }

/* ---------------------------------- Eyes ---------------------------------- */
.left-eye, .right-eye {
  position: absolute;
  top: 95px;
  width: 48px;
  height: 48px;
  background: #fff;

  -webkit-border-radius: 48px;
   -khtml-border-radius: 48px;
     -moz-border-radius: 48px;
       -o-border-radius: 48px;
          border-radius: 48px;
  }

.left-eye {
  left: 271px;

  -webkit-animation: left-eye 3s infinite linear normal none;
     -moz-animation: left-eye 3s infinite linear normal none;
  }

.right-eye {
  left: 81px;

  -webkit-animation: right-eye 3s infinite linear normal none;
     -moz-animation: right-eye 3s infinite linear normal none;
  }

.left-pupil, .right-pupil {
  position: absolute;
  left: 17px;
  top: 15px;
  width: 15px;
  height: 15px;
  background: #000;

  -webkit-border-radius: 15px;
   -khtml-border-radius: 15px;
     -moz-border-radius: 15px;
       -o-border-radius: 15px;
          border-radius: 15px;
  }

.left-pupil {
  -webkit-animation: left-pupil 3s infinite linear normal none;
     -moz-animation: left-pupil 3s infinite linear normal none;
  }

.right-pupil {
  -webkit-animation: right-pupil 3s infinite linear normal none;
     -moz-animation: right-pupil 3s infinite linear normal none;
  }

/* ---------------------------------- Tail ---------------------------------- */
.tail {
  position: absolute;
  left: 200px;
  top: 290px;
  width: 85px;
  height: 70px;
  background: transparent;
  border: 5px solid #000;
  border-top: none;
  border-left: none;

  -webkit-border-radius: 85px/70px;
   -khtml-border-radius: 85px/70px;
     -moz-border-radius: 85px/70px;
       -o-border-radius: 85px/70px;
          border-radius: 85px/70px;
  }

/* ---------------------------------- Mouth ---------------------------------- */
.mouth {
  position: absolute;
  left: 192px;
  top: 245px;
  width: 16px;
  height: 5px;
  background: #900;
  border: 1px solid #600;

  -webkit-border-radius: 16px/5px;
   -khtml-border-radius: 16px/5px;
     -moz-border-radius: 16px/5px;
       -o-border-radius: 16px/5px;
          border-radius: 16px/5px;

  opacity: 0;

  -webkit-animation: mouth 3s infinite linear normal none;
     -moz-animation: mouth 3s infinite linear normal none;
  }

/* ---------------------------------- Teeth ---------------------------------- */
.tooth-tl, .tooth-tr, .tooth-bl, .tooth-br {
  position: absolute;
  left: 50%;
  width: 0px;
  height: 0px;

  -moz-transform: scale(0);
  }

.tooth-tl, .tooth-tr {
  top: 2px;
  border-bottom: 12px solid transparent;
  border-top: 8px solid transparent;
  }

.tooth-bl, .tooth-br {
  bottom: 2px;
  border-bottom: 8px solid transparent;
  border-top: 12px solid transparent;
  }

.tooth-tl {
  margin-left: 5px;
  border-left: 10px solid #fff;

  -webkit-animation: tooth-tl 3s infinite linear normal none;
     -moz-animation: tooth-tl 3s infinite linear normal none;
  }

.tooth-tr {
  margin-left: -15px;
  border-right: 10px solid #fff;

  -webkit-animation: tooth-tr 3s infinite linear normal none;
     -moz-animation: tooth-tr 3s infinite linear normal none;
  }

.tooth-bl {
  margin-left: 5px;
  border-left: 10px solid #fff;

  -webkit-animation: tooth-bl 3s infinite linear normal none;
     -moz-animation: tooth-bl 3s infinite linear normal none;
  }

.tooth-br {
  margin-left: -15px;
  border-right: 10px solid #fff;

  -webkit-animation: tooth-br 3s infinite linear normal none;
     -moz-animation: tooth-br 3s infinite linear normal none;
  }

/* ---------------------------------- Mouth Else ---------------------------------- */
.tongue {
  position: absolute;
  left: 50%;
  margin-left: -40px;
  bottom: -8px;
  width: 80px;
  height: 30px;
  background: #f66;

  -webkit-border-radius: 80px/30px;
   -khtml-border-radius: 80px/30px;
     -moz-border-radius: 80px/30px;
       -o-border-radius: 80px/30px;
          border-radius: 80px/30px;

  -moz-transform: scale(0);

  -webkit-animation: tongue 3s infinite linear normal none;
     -moz-animation: tongue 3s infinite linear normal none;
  }

.throat {
  position: absolute;
  left: 50%;
  margin-left: -25px;
  bottom: -70px;
  width: 50px;
  height: 70px;
  background: #300;

  -webkit-border-radius: 60px;
   -khtml-border-radius: 60px;
     -moz-border-radius: 60px;
       -o-border-radius: 60px;
          border-radius: 60px;

  -moz-transform: scale(0);

  -webkit-animation: throat 3s infinite linear normal none;
     -moz-animation: throat 3s infinite linear normal none;
  }

.uvula {
  position: absolute;
  left: 50%;
  margin-left: -5px;
  top: -20px;
  width: 10px;
  height: 50px;
  background: #900;

  -webkit-border-radius: 10px/50px;
   -khtml-border-radius: 10px/50px;
     -moz-border-radius: 10px/50px;
       -o-border-radius: 10px/50px;
          border-radius: 10px/50px;

  -webkit-transform-origin: 5px 0px;
     -moz-transform-origin: 5px 0px;

  -moz-transform: scale(1);

  -webkit-animation: uvula 0.1s 2s infinite linear normal none;
     -moz-animation: uvula 0.1s 2s infinite linear normal none; 
  }

/* ----------------------------------   ---------------------------------- */

@-moz-keyframes left-ear {
  0% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
 40% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
 42% {left: 302px; top: 50px; -moz-transform: rotate(30deg);}
 44% {left: 304px; top: 60px; -moz-transform: rotate(60deg);}
 46% {left: 306px; top: 70px; -moz-transform: rotate(90deg);}
 48% {left: 310px; top: 80px; -moz-transform: rotate(120deg);}
 50% {left: 315px; top: 90px; -moz-transform: rotate(150deg);}
 80% {left: 315px; top: 90px; -moz-transform: rotate(150deg);}
 82% {left: 310px; top: 80px; -moz-transform: rotate(120deg);}
 84% {left: 306px; top: 70px; -moz-transform: rotate(90deg);}
 86% {left: 304px; top: 60px; -moz-transform: rotate(60deg);}
 88% {left: 302px; top: 50px; -moz-transform: rotate(30deg);}
100% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes right-ear {
  0% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
 40% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
 42% {left: 68px; top: 50px; -moz-transform: rotate(-30deg);}
 44% {left: 66px; top: 60px; -moz-transform: rotate(-60deg);}
 46% {left: 64px; top: 70px; -moz-transform: rotate(-90deg);}
 48% {left: 60px; top: 80px; -moz-transform: rotate(-120deg);}
 50% {left: 55px; top: 90px; -moz-transform: rotate(-150deg);}
 80% {left: 55px; top: 90px; -moz-transform: rotate(-150deg);}
 82% {left: 60px; top: 80px; -moz-transform: rotate(-120deg);}
 84% {left: 64px; top: 70px; -moz-transform: rotate(-90deg);}
 86% {left: 66px; top: 60px; -moz-transform: rotate(-60deg);}
 88% {left: 68px; top: 50px; -moz-transform: rotate(-30deg);}
100% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes left-whiskers {
  0% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
 40% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
 42% {left: 320px; top: 120px; -moz-transform: rotate(-10deg);}
 44% {left: 310px; top: 100px; -moz-transform: rotate(-20deg);}
 46% {left: 300px; top: 80px; -moz-transform: rotate(-30deg);}
 48% {left: 280px; top: 60px; -moz-transform: rotate(-40deg);}
 50% {left: 265px; top: 50px; -moz-transform: rotate(-50deg);}
 80% {left: 265px; top: 50px; -moz-transform: rotate(-50deg);}
 82% {left: 280px; top: 60px; -moz-transform: rotate(-40deg);}
 84% {left: 300px; top: 80px; -moz-transform: rotate(-30deg);}
 86% {left: 310px; top: 100px; -moz-transform: rotate(-20deg);}
 88% {left: 320px; top: 120px; -moz-transform: rotate(-10deg);}
100% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes right-whiskers {
  0% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
 40% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
 42% {left: 35px; top: 120px; -moz-transform: rotate(10deg);}
 44% {left: 45px; top: 100px; -moz-transform: rotate(20deg);}
 46% {left: 55px; top: 80px; -moz-transform: rotate(30deg);}
 48% {left: 75px; top: 60px; -moz-transform: rotate(40deg);}
 50% {left: 90px; top: 50px; -moz-transform: rotate(50deg);}
 80% {left: 90px; top: 50px; -moz-transform: rotate(50deg);}
 82% {left: 75px; top: 60px; -moz-transform: rotate(40deg);}
 84% {left: 55px; top: 80px; -moz-transform: rotate(30deg);}
 86% {left: 45px; top: 100px; -moz-transform: rotate(20deg);}
 88% {left: 35px; top: 120px; -moz-transform: rotate(10deg);}
100% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes left-eye {
  0% {height: 48px; top: 95px; border-radius: 48px;}
 40% {height: 48px; top: 95px; border-radius: 48px;}
 50% {height: 0px; top: 90px; border-radius: 40px/5px;}
 80% {height: 0px; top: 90px; border-radius: 40px/5px;}
100% {height: 48px;}
}

@-moz-keyframes right-eye {
  0% {height: 48px; top: 95px; border-radius: 48px;}
 40% {height: 48px; top: 95px; border-radius: 48px;}
 50% {height: 0px; top: 90px; border-radius: 40px/5px;}
 80% {height: 0px; top: 90px; border-radius: 40px/5px;}
100% {height: 48px;}
}

@-moz-keyframes left-pupil {
  0% {top: 15px;}
 40% {top: 15px;}
 50% {top: -7px;}
100% {top: 15px;}
}

@-moz-keyframes right-pupil {
  0% {top: 15px;}
 40% {top: 15px;}
 50% {top: -7px;}
100% {top: 15px;}
}

@-moz-keyframes mouth {
  0% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 0; border: 1px solid #600;}
 40% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
 55% {top: 45px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
 60% {top: 45px; width: 190px; height: 190px; left: 97px; border-radius: 190px; opacity: 1; border: 8px solid #600;}
 85% {top: 45px; width: 190px; height: 190px; left: 97px; border-radius: 190px; opacity: 1; border: 8px solid #600;}
 99% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
100% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 0; border: 1px solid #600;}
}

@-moz-keyframes tooth-tl {
  0% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
 55% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
 60% {margin-left: 45px; top: 2px; -moz-transform: scale(1);}
 85% {margin-left: 45px; top: 2px; -moz-transform: scale(1);}
 99% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
100% {margin-left: 5px; top: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes tooth-tr {
  0% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
 55% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
 60% {margin-left: -55px; top: 2px; -moz-transform: scale(1);}
 85% {margin-left: -55px; top: 2px; -moz-transform: scale(1);}
 99% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
100% {margin-left: -15px; top: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes tooth-bl {
  0% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
 55% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
 60% {margin-left: 45px; bottom: 2px; -moz-transform: scale(1);}
 85% {margin-left: 45px; bottom: 2px; -moz-transform: scale(1);}
 99% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
100% {margin-left: 5px; bottom: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes tooth-br {
  0% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
 55% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
 60% {margin-left: -55px; bottom: 2px; -moz-transform: scale(1);}
 85% {margin-left: -55px; bottom: 2px; -moz-transform: scale(1);}
 99% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
100% {margin-left: -15px; bottom: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes throat {
  0% {bottom: -70px; -moz-transform: scale(0);}
 40% {bottom: -70px; -moz-transform: scale(0);}
 55% {bottom: -50px; -moz-transform: scale(0.1);}
 60% {bottom: 0px; -moz-transform: scale(1);}
 85% {bottom: 0px; -moz-transform: scale(1);}
 99% {bottom: -30px; -moz-transform: scale(0.1);}
100% {bottom: -70px; -moz-transform: scale(0);}
}

@-moz-keyframes tongue {
  0% {-moz-transform: scale(0);}
 40% {-moz-transform: scale(0);}
 55% {-moz-transform: scale(0.1);}
 60% {-moz-transform: scale(1);}
 85% {-moz-transform: scale(1);}
 99% {-moz-transform: scale(0.1);}
100% {-moz-transform: scale(0);}
}

@-moz-keyframes uvula {
  0% {-moz-transform: rotate(0deg);}
 25% {-moz-transform: rotate(5deg);}
 50% {-moz-transform: rotate(0deg);}
 75% {-moz-transform: rotate(-5deg);}
100% {-moz-transform: rotate(0deg);}
}


/* Else Google */ 
@-webkit-keyframes left-ear { 
  0% {left:300px; top:40px; -webkit-transform:rotate(0deg);} 
 40% {left:300px; top:40px; -webkit-transform:rotate(0deg);} 
 42% {left:302px; top:50px; -webkit-transform:rotate(30deg);} 
 44% {left:304px; top:60px; -webkit-transform:rotate(60deg);} 
 46% {left:306px; top:70px; -webkit-transform:rotate(90deg);} 
 48% {left:310px; top:80px; -webkit-transform:rotate(120deg);} 
 50% {left:315px; top:90px; -webkit-transform:rotate(150deg);} 
 80% {left:315px; top:90px; -webkit-transform:rotate(150deg);} 
 82% {left:310px; top:80px; -webkit-transform:rotate(120deg);} 
 84% {left:306px; top:70px; -webkit-transform:rotate(90deg);} 
 86% {left:304px; top:60px; -webkit-transform:rotate(60deg);} 
 88% {left:302px; top:50px; -webkit-transform:rotate(30deg);} 
100% {left:300px; top:40px; -webkit-transform:rotate(0deg);} 
 } 

@-webkit-keyframes right-ear { 
  0% {left:70px; top:40px; -webkit-transform:rotate(0deg);} 
 40% {left:70px; top:40px; -webkit-transform:rotate(0deg);} 
 42% {left:68px; top:50px; -webkit-transform:rotate(-30deg);} 
 44% {left:66px; top:60px; -webkit-transform:rotate(-60deg);} 
 46% {left:64px; top:70px; -webkit-transform:rotate(-90deg);} 
 48% {left:60px; top:80px; -webkit-transform:rotate(-120deg);} 
 50% {left:55px; top:90px; -webkit-transform:rotate(-150deg);} 
 80% {left:55px; top:90px; -webkit-transform:rotate(-150deg);} 
 82% {left:60px; top:80px; -webkit-transform:rotate(-120deg);} 
 84% {left:64px; top:70px; -webkit-transform:rotate(-90deg);} 
 86% {left:66px; top:60px; -webkit-transform:rotate(-60deg);} 
 88% {left:68px; top:50px; -webkit-transform:rotate(-30deg);} 
100% {left:70px; top:40px; -webkit-transform:rotate(-0deg);} 
} 

@-webkit-keyframes left-whiskers { 
  0% {left:330px; top:140px; -webkit-transform:rotate(0deg);} 
 40% {left:330px; top:140px; -webkit-transform:rotate(0deg);} 
 42% {left:320px; top:120px; -webkit-transform:rotate(-10deg);} 
 44% {left:310px; top:100px; -webkit-transform:rotate(-20deg);} 
 46% {left:300px; top:80px; -webkit-transform:rotate(-30deg);} 
 48% {left:280px; top:60px; -webkit-transform:rotate(-40deg);} 
 50% {left:265px; top:50px; -webkit-transform:rotate(-50deg);} 
 80% {left:265px; top:50px; -webkit-transform:rotate(-50deg);} 
 82% {left:280px; top:60px; -webkit-transform:rotate(-40deg);} 
 84% {left:300px; top:80px; -webkit-transform:rotate(-30deg);} 
 86% {left:310px; top:100px; -webkit-transform:rotate(-20deg);} 
 88% {left:320px; top:120px; -webkit-transform:rotate(-10deg);} 
100% {left:330px; top:140px; -webkit-transform:rotate(0deg);} 
} 

@-webkit-keyframes right-whiskers { 
  0% {left:25px; top:140px; -webkit-transform:rotate(0deg);} 
 40% {left:25px; top:140px; -webkit-transform:rotate(0deg);} 
 42% {left:35px; top:120px; -webkit-transform:rotate(10deg);} 
 44% {left:45px; top:100px; -webkit-transform:rotate(20deg);} 
 46% {left:55px; top:80px; -webkit-transform:rotate(30deg);} 
 48% {left:75px; top:60px; -webkit-transform:rotate(40deg);} 
 50% {left:90px; top:50px; -webkit-transform:rotate(50deg);} 
 80% {left:90px; top:50px; -webkit-transform:rotate(50deg);} 
 82% {left:75px; top:60px; -webkit-transform:rotate(40deg);} 
 84% {left:55px; top:80px; -webkit-transform:rotate(30deg);} 
 86% {left:45px; top:100px; -webkit-transform:rotate(20deg);} 
 88% {left:35px; top:120px; -webkit-transform:rotate(10deg);} 
100% {left:25px; top:140px; -webkit-transform:rotate(0deg);} 
} 

@-webkit-keyframes left-eye { 
  0% {height:48px; top:95px; border-radius:48px;} 
 40% {height:48px; top:95px; border-radius:48px;} 
 50% {height:0; top:90px; border-radius: 40px/5px;} 
 80% {height:0; top:90px; border-radius: 40px/5px;} 
100% {height:48px;} 
} 

@-webkit-keyframes right-eye { 
  0% {height:48px; top:95px; border-radius:48px;} 
 40% {height:48px; top:95px; border-radius:48px;} 
 50% {height:0; top:90px; border-radius: 40px/5px;} 
 80% {height:0; top:90px; border-radius: 40px/5px;} 
100% {height:48px;} 
}

@-webkit-keyframes left-pupil { 
  0% {top:15px;} 
 40% {top:15px;} 
 50% {top:-7px;} 
100% {top:15px;} 
} 

@-webkit-keyframes right-pupil { 
  0% {top:15px;} 
 40% {top:15px;} 
 50% {top:-7px;} 
100% {top:15px;} 
} 

@-webkit-keyframes mouth { 
  0% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;} 
 40% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;} 
 55% {top:45px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;} 
 60% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;} 
 85% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;} 
 99% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;} 
100% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;} 
}

@-webkit-keyframes tooth-tl { 
  0% {margin-left:5px; top:0px; -webkit-transform: scale(0);} 
 55% {margin-left:5px; top:0px; -webkit-transform: scale(0);} 
 60% {margin-left:45px; top:2px; -webkit-transform: scale(1);} 
 85% {margin-left:45px; top:2px; -webkit-transform: scale(1);} 
 99% {margin-left:5px; top:0px; -webkit-transform: scale(0);} 
100% {margin-left:5px; top:2px; -webkit-transform: scale(0);} 
} 

@-webkit-keyframes tooth-tr { 
  0% {margin-left:-15px; top:0px; -webkit-transform: scale(0);} 
 55% {margin-left:-15px; top:0px; -webkit-transform: scale(0);} 
 60% {margin-left:-55px; top:2px; -webkit-transform: scale(1);} 
 85% {margin-left:-55px; top:2px; -webkit-transform: scale(1);} 
 99% {margin-left:-15px; top:0px; -webkit-transform: scale(0);} 
100% {margin-left:-15px; top:2px; -webkit-transform: scale(0);} 
}

@-webkit-keyframes tooth-bl { 
  0% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);} 
 55% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);} 
 60% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);} 
 85% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);} 
 99% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);} 
100% {margin-left:5px; bottom:2px; -webkit-transform: scale(0);} 
}

@-webkit-keyframes tooth-br { 
  0% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);} 
 55% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);} 
 60% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);} 
 85% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);} 
 99% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);} 
100% {margin-left:-15px; bottom:2px; -webkit-transform: scale(0);} 
}

@-webkit-keyframes throat { 
  0% {bottom:-70px; -webkit-transform: scale(0);} 
 40% {bottom:-70px; -webkit-transform: scale(0);} 
 55% {bottom:-50px; -webkit-transform: scale(0.1);} 
 60% {bottom:0; -webkit-transform: scale(1);} 
 85% {bottom:0; -webkit-transform: scale(1);} 
 99% {bottom:-30px; -webkit-transform: scale(0.1);} 
100% {bottom:-70px; -webkit-transform: scale(0);} 
}

@-webkit-keyframes tongue { 
  0% {-webkit-transform: scale(0);} 
 40% {-webkit-transform: scale(0);} 
 55% {-webkit-transform: scale(0.1);} 
 60% {-webkit-transform: scale(1);} 
 85% {-webkit-transform: scale(1);} 
 99% {-webkit-transform: scale(0.1);} 
100% {-webkit-transform: scale(0);} 
}

@-webkit-keyframes uvula { 
  0% {-webkit-transform:rotate(0deg);} 
 25% {-webkit-transform:rotate(5deg);} 
 50% {-webkit-transform:rotate(0deg);} 
 75% {-webkit-transform:rotate(-5deg);} 
100% {-webkit-transform:rotate(0deg);} 
}
    </style>

</head>

<body>
<div id="content">
    <div id="info">
  <h1>Поздравляю!</h1>
        <div class="cat">
           <div class="head"></div>
           <div class="body"></div>
           <div class="left-leg"></div>
           <div class="right-leg"></div>
           <div class="left-paw"></div>
           <div class="right-paw"></div>
           <div class="left-ear"></div>
           <div class="right-ear"></div>
       <div class="left-whiskers">
             <div class="w1"></div>
             <div class="w3"></div>
             <div class="w5"></div>
       </div>
       <div class="right-whiskers">
             <div class="w2"></div>
             <div class="w4"></div>
             <div class="w6"></div>
       </div>
       <div class="left-eye">
             <div class="left-pupil"></div>
       </div>
       <div class="right-eye">
             <div class="right-pupil"></div>
       </div>
       <div class="tail"></div>
       <div class="mouth">
            <div class="tooth-tl"></div>
            <div class="tooth-tr"></div>
            <div class="tooth-bl"></div>
            <div class="tooth-br"></div>
               <div class="throat">
                  <div class="uvula"></div>
               </div>
       <div class="tongue"></div>

            </div>
        </div>
    </div>
</div>
</body>
</html>

Исправлены все ошибки - 64 балла.
Но, допущена небольшая оплошность - поменяна кодировка, из-за чего тест отображается неправильно. -2 балла.
Получена исходная картинка - 50 баллов.
Использованы все возможности для улучшения - 100 баллов.
Но, свойство animation оставлено только с префиксами. Это не очень хорошо, поскольку в более новых версиях браузеров могут включить свойство без префиксов и выключить - с префиксами, придется искать и добавлять. Так что с CSS3 лучше всегда в конце добавлять исходное свойство. -10 баллов (половина, так как это не совсем ошибка, но и улучшение сомнительное).

Итого: 202 балла.


faiko

[html]<iframe src="http://sadhaka.moy.su/common/faiko.html" height="500" width="420"></iframe>[/html]

Исправлены все ошибки - 64 балла.
Но, допущена ошибка в теге <meta>

<meta content="text/html" charset="UTF-8" http-equiv="Content-Type">

атрибута  charset не существует. -2 балла.
Исходная картинка не получена. Нет анимации язычка.
Использованы возможности для улучшения - свойство background. 10 баллов.

Итого: 72 балла.


Ghоst

[html]<iframe src="http://sadhaka.moy.su/common/ghost.html" height="500" width="410"></iframe>[/html]

Не исправлена ошибка в строке 382
http://s3.uploads.ru/70lwI.png
//отступ единиц измерения от числа

и допущена ошибка в строке 523
http://s3.uploads.ru/yqrEu.png
//дробные единицы измерения пишутся через точку.

Еще мне интересно, что вот это за яваскрипт ))

Код:
script type="text/javascript">window["_GOOG_TRANS_EXT_VER"] = "1";</script>

Исправлены 63 ошибки, -2 балла - 61 балл
Исходная картинка не получена. Нет анимации язычка, беда с хвостом.
Использованы возможности для улучшения - расширение поддержки браузеров: animation, transform, keyframes; группировка свойств через создание класса; использование свойства background - 50 баллов.

Итого: 111 балла.


Eri

[html]<iframe src="http://sadhaka.moy.su/common/eri.html" height="500" width="410"></iframe>[/html]

Оставленные ошибки:
http://s3.uploads.ru/2WxDg.png
http://s2.uploads.ru/b71oc.png
http://s3.uploads.ru/IMDeS.png

Не знакомо оказалось свойство animation - 2балла.
Испорчено свойство border-radius (написание через слеш - не ошибочно) - 2 балла.
Исправлены 61 ошибка (некоторые правда чересчур радикально, поэтому -4 балла), итого 57 баллов.
Исходная картинка не получена.
Не использованы возможности для улучшения.

Итого: 57 баллов.


И еще у нас был один участник вне конкурса, это Хатико. К сожалению, участник не оставил ничего кроме скрина, но за участие и внимание к конкурсу принято решение наградить 30ПБ.

http://uploads.im/VxvPA.jpg


Итак, наши лидеры Leonheart, Ghоst, faiko переходят в последний, финальный этап, а Eri можно выбрать себе поощрительный приз.

Поздравляем!!!

Кроме того, я как и обещала - раздаю подарки. Leonheart за выигрыш джекпота получает дополнительный приз.
Их три, ты можешь выбрать один из:
http://s1.uploads.ru/H7wP4.png Приз для самого любознательного
http://s1.uploads.ru/H7wP4.png Приз для запасливого админа
http://s1.uploads.ru/H7wP4.png Приз для постоянного пользователя ForumDesign

Выбирай, что тебе по душе! =)

Тема открыта для свободного общения.

Финальный этап откроется в воскресенье (к сожалению, завтра плановое отключение света).

Отредактировано sadhaka (15.12.2012 07:26:58)

+1


Вы здесь » ForumD.ru - Дизайн для форумов и техническая поддержка » Конкурсы и акции » "Я - вебмастер!" Этап 2. Ликвидация жуков.