Завершающие испытания / Испытание 2: слайдер - 100%

Курсы Завершающие испытания
1

Подскажите, что можно улучшить в коде

<!DOCTYPE html>
<html>
<head>
    <title>Испытание 2: слайдер</title>
    <meta charset="utf-8">
</head>
<body>
    <div class="slider">
        <div class="promo_slider">
       `Текст "как есть" (без применения форматирования)` <h2>Долго, дорого, скрупулезно</h2>
   <p> Математически выверенный дизайн для вашего сайта или мобильного приложения.</p>
   <a class="btn"> Узнать больше</a>
   </div>
   <div class="pagination">
       <a class="active" href="#"></a>
       <a href="#"></a>
       <a href="#"></a>
   </div>
    </div>
</body>
</html>
html,body{
margin:0;
padding:0;
}
body{
width:500px;
height:300px;
font-size:16px;
font-family:"Tahoma", sans-serif;
line-height:20px;
color:black;
background:#eeeeee;
}
.slider{
position: relative;
height: 300px;
background: url('/assets/ifmo/slide-bg.png') no-repeat;
background-position: 280px 50%; 
}
.promo_slider    {
width: 250px;
padding: 40px 20px 0;
}
.promo_slider h2{
font-size: 25px;
line-height: 25px;
margin:0;
} 
.promo_slider p{
margin-bottom: 25px;
}    
.btn {
display: block;
width: 180px;
text-align: center;
background:#fb565a;
color: white;
padding: 10px;
border-radius: 5px;
text-transform: uppercase;
font-size:15px;

}    
.pagination {
position: absolute;
display: block;
bottom: 21px;
left: 225px;
   

}
.pagination a {
position: relative;
display: inline-block;
width: 15px;
height: 15px;
background:#666666;
border-radius: 100%;
margin-right: 5px;
} 
.pagination .active::before{
content:"";
position: absolute;
   border-radius: 15px;;
width: 5px;
height: 5px;
background: #ffffff;
top:5px;
left:5px;
}    

/* 
Адрес фоновой картинки слайда:
/assets/ifmo/slide-bg.png
Используемые цвета:
#666666
#ffffff
#fb565a
*/
[/quote]
2

Отсутствует href.
Блочно-строчные ссылки не выравнены по вертикали. Абсолютное позиционирование для .pagination смотрится некрасиво с координатой left в 225px.
Гораздо лучше на мой взгляд будет такой вариант:

.pagination {
text-align: center; // выравнивание блочно-строчных ссылок по центру
margin-top: 29px; // отступ сверху; 30px не подходит для 100% варианта
padding-left: 20px; /* внутренний отступ слева (всё же ссылки получаются 
 немного смещены вправо от предполагаемого центра */
}

Здесь целесообразнее использовать %.

3

Спасибо

4

Доброго времени суток! Задачка решена на 100%, но подскажите верно ли все сделано? Если где-то ошибки поправьте пожалуйста.

<body>
        <div class=slider>
          <div class=left>
             <h2>Долго, дорого, скрупулезно</h2>
             <p>Математически выверенный дизайн для вашего сайта или мобильного приложения.</p>
             <a class=button href=#>Узнать больше</a>
          </div>
          <div class=image>
          </div>
          <div class=slide>
             <a class="sercle active" href=#></a>
             <a class=sercle href=#></a>
             <a class=sercle href=#></a>
          </div>
        </div>
    </body>

div.slider {position:relative;}

div.left {position:absolute;
          background:none;
          width:220px;
          left:20px;
          top:40px;}
          
h2 {line-height:25px;
    font-size:25px;
    margin:0;}
          
p {margin-bottom:25px;}
          
a.button {background:#fb565a;
         display:block;
         width:200px;
         height:40px;
         border-radius:5px;
         color:white;
         font-size:15px;
         text-decoration:none;
         text-align:center;
         line-height:40px;
         text-transform:uppercase;}
         
div.image {
         position:absolute;
         background:url(/assets/ifmo/slide-bg.png) no-repeat;
         width:200px;
         height:150px;
         left:280px;
         top:82px;}
         
div.slide {position:absolute;
           
           width:100px;
           height:15px;
           top:259px;
           left:225PX;}
         
a.sercle {display:inline-block;
          background:#666666; 
          width:15px;
          height:15px;            
          border-radius:50%;
          margin-right:5px;}

a.active:after {content:'';
                position:absolute;
                display:block;
                background:white;
                width:5px;
                height:5px;
                border-radius:50%;
                top:6px;
                left:5px;
                }

Заранее благодарю за разбор!

5

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