Мастерская: декоративные элементы / Испытание: карточка курса [9/18] - 100%

andreyiginov · 08.Апрель.2018 14:22:46

Здравствуйте! Хотел бы если можно получить замечания/критику.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
</head>
<body>
    <div class="course-card">
        <p class="title">Курс &laquo;Фоны&raquo;</p>
        <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
        <a class="social fb" href="#"></a>
        <a class="social tw" href="#"></a>
        <a class="social gp" href="#"></a>
    </div>
</body>
</html>

/*CSS*/

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 280px;
    min-height: 280px;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 14px;
    font-family: "Arial", sans-serif;
    line-height: 1.2;
    background: #ecf0f1;
}

p,
a {
     margin: 0;
     padding: 0;
}

.course-card {
    background-color: #1abc9c;
    padding: 20px;
    width: 200px;
    color: white;
    height: 195px;
}

.course-card .title {
    font-size: 20px;
    margin-bottom: 20px;
}

.course-card p {
    margin-bottom: 25px;
}

.course-card .social {
    display: inline-block;
    background-color: #16a085;
    height: 30px;
    min-width: 30px;
    margin-right: 5px;
    background-image: url("/assets/course14/social-challenge.png");
    background-repeat: no-repeat;
}

.fb {
    background-position: 0px 0px;
}

.tw {
    background-position: -30px 0px;
}

.gp {
    background-position: -60px 0px;
}

/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта:
/assets/course14/social-challenge.png
*/

Valery_S · 08.Апрель.2018 16:02:21

HTML тоже вставьте.

andreyiginov · 08.Апрель.2018 16:25:25

Всё, исправил.

Valery_S · 08.Апрель.2018 16:58:28

Эту часть логичнее сделать заголовком h1.

.course-card {
    background-color: #1abc9c;
    padding: 20px;
    width: 200px;
    color: white;
    height: 195px;  /* высоту указывать не обязательно, иногда лучше когда блок растягивается контентом */
}

andreyiginov · 08.Апрель.2018 17:15:09

Почему h1? Ведь на курсах говорили что h1 нужно использовать раз за страницу и в действительно важном месте, а в других случаях лучше h2 или h3 и походу обучения мы действительно редко пользуемся h1 в основном h2 или h3. Насчёт высоты, то без её указания у меня не выходит 100%. Видимо я что-то не так сделал. Возможно дело как раз в заголовке.

Gantz · 19.Апрель.2018 10:54:35

Доброго дня!
Сделал так:

<body>
    
   <div class="main">
       <h3> Курс &laquo;Фоны&raquo;</h3>
    <p>
        Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
    </p>
    
    <div class="buttons">
        
        <a class="social social-fb" href='#'></a>
        
        <a class="social social-tw" href='#'></a>
        
        <a class="social social-gplus" href='#'></a>
    
    </div>
</body>

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 280px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
background: #ecf0f1;
}

.main {
width: 205px;
height: 220px;
padding: 5px 15px 10px 20px;
color: #fff;
background-color: #1abc9c;
}

h3 {
font-weight: normal;
font-size: 20px;
margin-top: 15px;
}

p {
font-size: 14px;
margin: 10px 10px 10px 0px;

}

.buttons {
margin-top: 25px;
margin-bottom: 10px;

}

.social {
display: inline-block;
width: 20px;
height: 20px;
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat;
padding: 5px;
margin-right: 5px;
vertical-align: middle;
}

.social-fb {
background-position: 0 0;
}

.social-tw {
background-position: -30px 0;
}

.social-gplus {
background-position: -60px 0;
}

Самое приятное, что все координаты действительно получились кратны 5 или 10
Паддинги в .main подгонял как и ширину/высоту. Это не является зазорным, так делать? ))

Valery_S · 19.Апрель.2018 12:45:48

…блок не закрыт…

Alexey42 · 11.Май.2018 19:05:09

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

Alexey42 · 11.Май.2018 19:06:00

Я вставил просто картинкой, поэтому полоса не работает.

Ineska · 11.Май.2018 19:06:57

Я знаю)
Сделайте красиво и приберите за собой, пожалуйста.

Alexey42 · 11.Май.2018 19:07:59

Не получается вставить код.

Ineska · 11.Май.2018 19:11:25

Пример работы кнопки

code_format

Alexey42 · 11.Май.2018 19:13:19

Спасибо большое Вам за помощь.

Alexey42 · 11.Май.2018 19:15:10

HTML-код (мой вариант решения):

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
    </head>
    <body>
        <div class="container">
            <h2>Курс &laquo;Фоны&raquo;</h2>
            <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
            <a class="social social-fb" href="http://www.facebook.com"></a>
            <a class="social social-tw" href="http://twitter.com"></a>
            <a class="social social-gl" href="http://google.com"></a>
        </div>
    </body>
</html>

Alexey42 · 11.Май.2018 19:15:49

CSS:

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 280px;
    min-height: 280px;
    padding-top: 20px;
    padding-left: 20px;
    font-size: 14px;
    font-family: "Arial", sans-serif;
    line-height: 1.2;
    background: #ecf0f1;
}

.container {
    width: 220px;
    background: #1abc9c;
    color: white;
    padding-top: 5px;
    padding-left: 20px;
}

.container h2 {
    font-weight: normal;
    margin: 0;
    padding: 0;
    padding-top: 15px;
    padding-bottom: 10px;
    font-size: 20px;
}

.container p {
    margin: 0;
    padding: 0;
    padding-top: 10px;
    padding-bottom: 25px;
    width: 200px;
    font-size: 14px;
}

.social {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #16a085;
    margin-right: 5px;
    margin-bottom: 20px;
    vertical-align: middle;
    background-image: url("/assets/course14/social-challenge.png");
    background-repeat: no-repeat;
}

.social-fb {
    background-position: 0 0;    
}

.social-tw {
    background-position: -30px 0;    
}

.social-gl {
    background-position: -60px 0;    
}

/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта:
/assets/course14/social-challenge.png
*/

Ineska · 11.Май.2018 19:19:07

Делите отступ сверху на два, почему?
Параграфу ширину можно было не писать. В остальном неплохо.

Alexey42 · 11.Май.2018 19:24:35

Параграфу задал ширину, чтобы слова текста стали как ТЗ.
Попробую как Вы советуете. Спасибо.