Испытание: карточка курса [9/18]. Мое решение на 100% и подробная инструкция.

Курсы §14. Мастерская: декоративные элементы
1

Задание не сложное. Для начала напишем HTML-код. Я создал общий контейнер с классом share в котором будет находится все необходимое содержимое, далее в тег span обернул название, в тег p обернул текст, далее создал общий контейнер для иконок и поместил в него 3 ссылки. Вот, что из этого вышло:

<body>
   <div class="share">
      <span>Курс &laquo;Фоны&raquo;</span>
         <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
     <div class="social-pack">
        <a href="" class="social facebook"></a>
        <a href="" class="social twitter"></a>
        <a href="" class="social google"></a> 
     </div>
   </div>
</body>

Теперь перейдем в наш CSS-код и начнем работу над оформлением. Напишем стили для общего контейнера: ширину, высоту, цвет фона, цвет текста, внутренние отступы и свойство box-sizing: border-box; чтобы контент не влиял на заданный размер блока.

.share {
   width: 240px;
   min-height: 235px;
   background-color: #1abc9c;
   color: white;
   padding: 20px;
   padding-bottom: 0;
   box-sizing: border-box;
}

Далее стили для параграфа, тут все просто.

p {
    margin-top: 20px;
    margin-bottom: 25px;
}

Теперь размер текста заголовка:

span {    
   font-size: 20px;
}

Я не использовал для этого теги заголовков, хотя можно использовать и их, но в таком случае нужно будет обнулить все отступы, и задать толщину шрифта. :man_student: Пример ниже, если бы вместо span мы бы использовали h1.

h1 {  
   padding: 0;
   margin: 0;
   font-weight: normal;
   font-size: 20px;
}

Теперь оформим иконки социальных сетей. Для этого я задал им всем по 2 класса, один из которых общий, что задает общий стиль для всех иконок, и различные классы для индивидуальных стилей. Сначала зададим общие стили. Поскольку ссылки по-умолчанию строчные элементы, то их нужно превратить в блочно-строчные, далее уже можем задать высоту и ширину, задать фон и фоновое изображение без повторения, в конце марджин справа:

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

Теперь осталось только спозиционировать наш спрайт (фоновое изображение), для каждой отдельной иконки:

.facebook {
   background-position: 0 0;
}

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

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

:checkered_flag: Готово! Задание выполнено на 100%. Буду рад услышать комментарии. Спасибо за внимание!

7 лайков
2

Семантически верно было бы использование заголовка всё-таки.
# в атрибуте href забыли.
Не рекомендуется ограничивать высоту блока .share.

3

А я решила это задание как раз с h1. Стилизовала его и не пришлось задавать стилизацию для p.
Хотя в этом задании меня вообще занесло - захотелось сделать полноценный рабочий элемент, который можно было бы использовать на реальном сайте (ну, конечно, заменив h1 на h3 примерно) - не разваливающийся, под любое количество текста и ссылок. Я его еще потом (после прохождения курсов) дополняла.

Но это, конечно, вообще лишнее, не рекомендую так все усложнять. :grin:

<div class="course-card">
        <h1>Курс &laquo;Фоны&raquo;</h1>
        <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
        <div class="share">
            <a class="social fb" href="#">Facebook</a>
            <a class="social tw" href="#">Twitter</a>
            <a class="social gg" href="#">Google+</a>
        </div>
    </div>

.course-card {
    position: relative;
    width: 240px;
    min-height: 235px;
    box-sizing: border-box;
    padding: 20px 20px 47px;
    background-color: #1abc9c;
    color: white;    
}

.course-card h1 {
    margin: 0 0 20px;
    font-size: 20px;
    font-weight: normal;
}

.share {
    position: absolute;
    bottom: 17px;
    left: 20px;
}

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

.fb {
    background-position: 0 0;
}

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

.gg {
    background-position: -60px 0;}
4

Настолько ли необходимо вырывать блок со ссылками из потока?

5

Ну я писала код для карточки как будто под реальный сайт. А в таких условиях наполнение может быть разным - текст, изображения, списки ul, ol и т.д. У каких-то тегов есть margin по умолчанию, у каких-то нет. Текста может быть просто меньше. Если блок с ссылками просто будет идти за последним элементом, то он может оказаться выше, чем требуется. Поэтому я привязала этот блок к низу всей карточки. Например.

2 лайка
6

С помощью flexbox было бы красивее)

1 лайк
7

Только еще дальше от исходного задания)) На том уровне я еще не прошла раздел с флексами. :grin:
Но, вообще - да. Я прямо таки влюблена в них)

8

поправил, но как-то не логично вышло.

9

А подробнее?

10

Ну типо нижний паддинг 0, а минимальная высота 235, а если бы была 100, то задача не решилась бы. К примеру если не ограничивать высоту, но при этом обнулить нижний паддинг, то при добавлении контента он будет прилипать.

11

Padding снизу был бы не лишним, конечно. Можно вычесть размер нижнего отступа от общей высоты, например.

12

Я тоже об это подумал уже, но лучше чтобы паддинги были одинаковыми.

13

Любите симметрию?

14

Люблю пиксель перфект, симметрию и кратность 8)

1 лайк
15 
Мне удалось пройти испытание изменив padding в body.
<body>
    <div class="share">
      <h1>Курс «Фоны»</h1>
    <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
      <a class="social social-fb" href="https://vk.com/htmlacademy"></a>
      <a class="social social-tw" href="https://www.facebook.com/htmlacademy"></a>
      <a class="social social-g" href="https://twitter.com/htmlacademy_ru"></a>
    </div>
  </body>
html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 280px;
  min-height: 280px;
  padding-top: 7px;
  padding-left: 20px;

  font-size: 14px;
  line-height: 1.2;
  font-family: "Arial", sans-serif;

  background-color: #ecf0f1;
}
.social {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  margin-top: 11px;
  background-repeat: no-repeat;
  vertical-align: middle;
  background: #16a085 url("social-challenge.png") no-repeat;
  
}
.share {
  background-color: #1abc9c;
  margin: 0;
  width: 240px;
  height: 235px;
  
  }
.social-fb {
  background-color: #16a085;
  background-position: 0 0;
  margin-left: 20px;
}

.social-tw {
  background-color: #16a085;
  background-position: -30px 0;
}

.social-g {
  background-color: #16a085;
  background-position: -60px 0;
}
.share h1 {
font-weight: normal;
font-size: 20px;
color: #ffffff;
padding: 20px 20px 0;

}

p {
color: #ffffff;
padding: 6px 20px 0;
font-weight: normal;
}
17

Не получается иконки соц.сетей сделать в строчку. Что делать??

2020-06-29 (20)
2020-06-29 (20)1920×1080 191 KB

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

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

.share{
width: 240px;
height: 235px;
background: #1abc9c;
color: white;
padding: 20px;
padding-bottom:0;
box-sizing: border-box;
}

h1{
margin: 0;
padding: 0;
font-size: 20px;
font-weight: normal;
}

p{
margin-top: 20px;
margin-bottom: 25px;
}

.social{
display: inline-block;
width: 30px;
height: 30px;
background: #16a085 url(“social-challenge.png”) no-repeat;
margin-right: 5px;

}

.fecebook{
background-position: 0 0;
}

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

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

19

Добрый день!
Прикрепите ваш HTML-код, пожалуйста.

20

2020-06-30 (9)
2020-06-30 (9)1920×1080 187 KB

21

У div-а, в котором лежат ссылки, уберите класс. Можно и весь div убрать, не оборачивая ссылки в него. Так как этот класс задаёт высоту и ширину 30 px, ссылки из него вываливаются и ведут себя не так, как нужно.

22

спасибо все получилось)) :grinning: