Решение тестового задания для верстальщика от ЯНДЕКСА

Не призываю, да вы и сами понимаете, ‛копипастить‛ мое решение с 0. Вы можете использовать это решения, например, для вдохновения. Будут еще тестовые задания от яндекса – присылайте мне на почту, решим.

ИТАК перед вами тестовое задание для верстальщика от яндекса и решение к нему:
"Мы доделали третью версию задания, которое будем предлагать всем желающим верстать в Яндексе"

1. Напишите небольшой текст (ну, скажем, в пару твитов) на важную для вас тему, связанную с профессией. Сверстайте его в начале задания.

Решение: Тут вы справитесь и без меня

1. Сверстайте контрол оценки и показа рейтинга

   Практически все наши контролы должны быть очень гибкими к окружающему пространству, должны уметь располагаться на любом фоне и при желании легко менять свой "скин". Учитывайте это в этом и других заданиях.
   Обратите внимание, что контрол должен не только выставлять оценку, но и показывать текущую.

Решение:

HTML

<p class="zP"><b>Звездный рейтинг</b></p>
<div class="clearfix">
<fieldset class="rating ">
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="5">5</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="4">4</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="3">3</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="2">2</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="1">1</label>
</fieldset>
</div>

CSS

.rating {float: left;}
.rating label {float:right; width:16px; height: 16px; overflow:hidden;
 white-space:nowrap; cursor:pointer; text-indent: -9999px; }
.rating:not(:checked) > input { position:absolute; top:-9999px; clip:rect(0,0,0,0); }
.rating:not(:checked) > label {background: url('../img/star.png') no-repeat 0 -16px;}
.rating > input:checked ~ label {
width: 16px;height: 16px;background: url('../img/star.png') no-repeat 0 0px;}
.rating:not(:checked) > label:hover,
.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > label:hover ~ input:checked ~ label,
.rating:not(:checked) > label:hover ~ label {background: url('../img/star.png') no-repeat 0 0;}

1. Сверстайте прогресс-бар

Решение:

HTML

<div class="w-progressBlVal">
    <div class="progressVal">20%</div>
    <div class="progressBl ui-progressbar"><span></span>

        <div class="progressBl__RC"></div>
        <div class="ui-progressbar-value" style="width: 20%;">
            <div class="progressBl__LC"></div>
            <div class="ui-progressbar-value__RC"></div>
            <div class="ui-progressbar-value__C" ></div>
        </div>
    </div>
</div>

CSS

.w-progressBlVal { height: 13px;  position: relative; width: 210px; clear: both;  }
.ui-progressbar { height: 13px; background: url('../img/progree_whiteGrey.png')
    repeat-x; overflow: hidden; }
.progressBl { position: relative;}
.progressBl__LC { background:#fff url('../img/progress_corner.png'); display: block; width: 7px; height: 13px;
position: absolute; top: 0; left: 0;     }
.progressBl__RC{ background:#fff url('../img/progress_corner.png') -7px 0; display: block; width: 7px;
height: 13px; position: absolute; top: 0; right: 0;   }
.ui-progressbar-value { height: 13px;  position: absolute; overflow: hidden; }
.progressVal { text-align: center;  position: absolute; right: 0; left: 0;
    height: 13px;  z-index: 1;  font: 9px/13px Verdana ;}
.ui-progressbar-value__RC {  height: 13px; width: 7px; right: 0; top:0;
background: url('../img/progree_greenCor.png') repeat-x; position: absolute;}
.ui-progressbar-value__C {  height: 13px;   top:0; left:7px;
background: url('../img/progree_green.png') repeat-x;  position: absolute; right: 7px;}

1. Сверстайте кнопку

   Пожалуйста, учитывайте, что эта кнопка должна быть кнопкой-на-все-случаи-жизни. Сделайте несколько примеров кнопки в различном окружении и различном html-представлении.

Решение:

HTML

    <a class="button">
    <span class="button__L"></span>
    <span class="button__R"></span>
    <span class="button__txt">
        Кнопка
    </span>
</a>

CSS

.button { position: relative; display: inline-block; height: 22px;
    line-height: 20px; cursor: pointer; color:#000; }
.button__L { position: absolute; left: 0px; top: 0;
    background: url('../img/bC.png') 0 0 ; width: 10px; height: 22px; }
.button__R { position: absolute; right: 0px; top: 0;
    background: url('../img/bC.png')  100% 0; width: 10px; height: 22px; }
.button__txt {   margin: 0 10px;
    background: url('../img/bV.png') 0 0 ;   display: block;
    line-height: 22px; font-size: 12px;  }
.button:hover .button__txt{  background-position: 0 -22px;}
.button:hover .button__R{  background-position: 100% -22px;}
.button:hover .button__L {background-position: 0 -22px; }
.button:focus .button__txt{  background-position: 0 -66px;}
.button:focus .button__R{  background-position: 100% -66px;}
.button:focus .button__L {background-position: 0 -66px; }
.button:active  .button__txt{  background-position: 0 -44px;}
.button:active  .button__R{  background-position: 100% -44px;}
.button:active  .button__L {background-position: 0 -44px; }

1. Сверстайте список из иконок

   Список должен занимать всю ширину родителя, расстояние между последней иконкой и предпоследней должно занимать все свободное пространство. Иконки должны быть прозрачными (png24).
   В случае если пользователь отключил картинки или они по какой-то причине не загрузились, интерфейс должен отреагировать на это оформленным текстом.

Решение:

HTML

<table class="ic">
    <tbody>
        <tr class="ic__r">
            <td>
                <div class="ic__it ic__it_chr">
                    <div class="ic__alt">
                        <span class="ic__ltr__green">
                        Ch</span><span class="ic__ltr__red">ro</span><span class="ic__ltr__ylw">me
                        </span>
                    </div>
                    <div class="ic__w-img">
                        <img class="ic__img" alt="" src="img/browsers/chrome.png"/>
                    </div>
                </div>
            </td>
            <td>
                <div  class="ic__it ic__it_ff">
                    <div class="ic__alt">
                        <span class="ic__ltr__orange">Firefox</span>
                    </div>
                    <div class="ic__w-img">
                        <img class="ic__img" alt=""  src="img/browsers/firefox.png"/>
                    </div>
                </div>
            </td>
            <td>
                <div  class="ic__it ic__it_op">
                    <div class="ic__alt">
                        <span class="ic__ltr__red_op">Opera</span>
                    </div>
                    <div class="ic__w-img">
                        <img class="ic__img" alt=""  src="img/browsers/opera.png"/>
                    </div>
                </div>
            </td>
            <td>
                <div class="ic__it ic__it_s">
                    <div class="ic__alt">
                        <span class="ic__ltr__grey">Safari</span>
                    </div>
                    <div class="ic__w-img">
                        <img class="ic__img" alt="" src="img/browsers/safari.png"/>
                    </div>
                </div>
            </td>
            <td style=" width: 100%">
                <div class="ic__it ic__it_e">
                    <div class="ic__alt">
                        <span class="ic__ltr__blue">Internet<br/> Explorer</span>
                    </div>
                    <div class="ic__w-img">
                        <img class="ic__img" alt=""  src="img/browsers/ie.png"/>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

CSS

.ic { width: 100%; min-width:590px;  }
.ic__r {height:125px; }
.ic__it {float: left; position: relative;  }
.ic__it.ic__it_chr {width: 126px; }
.ic__it.ic__it_ff { width: 120px; }
.ic__it.ic__it_op {  width: 108px; }
.ic__it.ic__it_s { width: 111px; }
.ic__it.ic__it_e {  width: 125px; float: right; }

.ic__w-img {background: #fff; position: relative; left:0; }
.ic__alt { position: absolute; left:0; top: 0; right: 0; }

.ic__ltr__green { color: #22a12a; }
.ic__ltr__red { color: #c90000; }
.ic__ltr__ylw {color: #f9d411;}
.ic__ltr__orange { color: #f5b860;}
.ic__ltr__red_op {color: #c10e0e;}
.ic__ltr__grey {color: #646464;}
.ic__ltr__blue { color: #036da3;}

1. Сверстайте текст

Решение:

HTML

<div class="textBl clearfix">
    <h2>Тема: «Сюжетный анапест:<br/> основные моменты»</h2>
    <div class="textBl__L">
        <p>Нельзя восстановить истинной хронологической ....

        </p>
    </div>
    <div class="textBl__R">
        <p>Представленный лексико-семантический анализ ....

        </p>
        <ul class="olDash">
            <li class="olDash-it">Курит ли трупка мой</li>
            <li class="olDash-it"><a href="#">из трупка тфой пихтишь</a></li>
            <li class="olDash-it">Или мой кафе пил</li>
            <li class="olDash-it">тфой в щашешка сидишь</li>
        </ul>
    </div>
</div>

CSS

@font-face {
font-family: 'PT Sans';
    src: url('font/pts55f_w.eot');
    src: local('PT Sans'),
    url('font/PTS55F_W.woff') format('woff'),
    url('font/PTS55F_W.ttf') format('truetype'),
    url('font/PTS55F_W.svg#PTSans-Regular') format('svg');
}
body  { font:1em/1.3 'PT Sans', Arial, Helvetica, sans-serif; padding: 20px;  }
.textBl__L { float:left; width: 47.5%; margin-right: 2.5%; }
.textBl__R { float:left; width: 47.5%; margin-left: 2.5%;  }
.olDash-it{ padding: 0 0 0 20px; list-style-type: none;
    background: url('../img/li.gif') no-repeat 0 0.6em;
    margin-left: -20px;}

PSD файл задания