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


#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%. Буду рад услышать комментарии. Спасибо за внимание!


#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 по умолчанию, у каких-то нет. Текста может быть просто меньше. Если блок с ссылками просто будет идти за последним элементом, то он может оказаться выше, чем требуется. Поэтому я привязала этот блок к низу всей карточки. Например.


#6

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


#7

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


#8

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


#9

А подробнее?


#10

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


#11

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


#12

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


#13

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


#14

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


#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;
}