9/18 Испытание: карточка курса. 100% Проверьте пожалуйста код

ashashko · 14.Август.2018 16:37:46

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="fonts">
    <h1>Курс «Фоны»</h1>
    <p>
    Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
    </p>
    <div class="share">
      <a href="#fb" class="social social-fb"></a>
      <a href="#tw" class="social social-tw"></a>
      <a href="#g" class="social social-g"></a>
    </div>
    </div>
  </body>
</html>

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

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

.fonts {
width: 200px;
height: 195px;
padding: 20px;
background-color: #1abc9c;
color: #ffffff;
}

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

.fonts p {
margin-top: 20px;
}

.share {
margin-top: 25px;
}

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

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

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

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

Valery_S · 14.Август.2018 19:26:59

В .fonts { } height: 195px; можно убрать – пусть рястягивается контентом.

В .social { } рекоментдуется добавить vertical-align: middle;

Координаты лучше указывать явно, даже если кажется, что в этом нет необходимости.

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

ashashko · 24.Август.2018 13:22:05

Если я так делаю, то снизу получается отступ больше чем нужно.

Valery_S · 24.Август.2018 13:43:13

В .social { } рекоментдуется добавить vertical-align: middle;

ashashko · 24.Август.2018 14:43:53

Спасибо

nerealist · 30.Август.2018 07:51:12

Что можете сказать по поводу этого кода? Спасибо.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper">
      <h1>Курс «Фоны»</h1>
      <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
      <div class="social-links">
        <a class="social social-fb" href="#"></a>
        <a class="social social-tw" href="#"></a>
        <a class="social social-gp" href="#"></a>
      </div>
    </div>
  </body>
</html>

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

.wrapper {
  width: 200px;
  background-color: #1abc9c;
  color: white;
  padding-top: 20px;
  padding-left: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
}

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

.wrapper p {
  margin: 0;
  padding: 0;
}

.social-links {
  margin-top: 25px;
}

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

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

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

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

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

Valery_S · 30.Август.2018 08:43:52

風水

только это можно записать короче:

padding-top: 20px; 
padding-left: 20px; 
padding-bottom: 20px; 
padding-right: 20px;

nerealist · 30.Август.2018 14:53:36

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

Den1 · 26.Октябрь.2018 09:01:16

Проверка проходит 100%. Не получается сделать отступ кратный 5! Пожалуйста подскажите что делаю не так.

HTML:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="main">
      <h1>Курс «Фоны»</h1>
      <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
      <div class="ss">
        <a class="social fb" href="#fb"></a>
        <a class="social tw" href="#tw"></a>
        <a class="social go" href="#go"></a>
      </div>
    </div>
  </body>
</html>

CSS:

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;
}
.main{
  background-color: #1abc9c;
  width: 240px;
  height: 235px;
}
.main h1{
  color: white;
  padding: 20px 0 0 20px;
  font-size: 20px;
  font-weight:normal;
}
.main p{
  color: white;
  padding: **6px** 0 0 20px;
  width: 195px;
}
.social{
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 5px;
  background: url(social-challenge.png) no-repeat;
  background-color: #16a085;
}
.ss{
  padding: **11px** 0 0 15px;
}
.fb{
  background-position: 0 0;
  
}
.tw{
  background-position: -30px 0px;
}
.go{
  background-position: -60px 0px;
}

Hierumo · 31.Октябрь.2018 07:16:59

а что вас всех тянет использовать h1?
вы же в коде потом также исправляете все дефолтные значения селектора, не проще ли воткнуть див с классом, которому вы просто зададите размер шрифта? весь блок вряд ли уникален и в реале бы встраивался в какую-нибудь страницу, использование h1 неуместно даже со стороны SEO.

Вот моё “тяп-ляп”:

HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
<div class="container">
  <div class="content">
    <div class="header">Курс «Фоны»</div>
    <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
  </div>
  <div class="share">
    <a href="#vk" class="social social-fb"></a>
    <a href="#twitter" class="social social-tw"></a>
    <a href="#googleplus" class="social social-gp"></a>
  </div>
</div>

CSS

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;
}
.container {
padding: 20px;
width: 200px;
background: #1abc9c;
}
.content {
color: #ffffff;
}
.content .header {
font-size: 20px;
}
.content p {
margin-top: 20px;
}
.share {
margin-top: 25px;
}
.social {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
margin-right: 5px;
background: #16a085 url(‘social-challenge.png’) no-repeat;
}
.social-fb {
background-position: 0 0;
}
.social-tw {
background-position: -30px 0;
}
.social-gp {
background-position: -60px 0;
}

ashashko · 31.Октябрь.2018 08:04:55

у вас получается вообще h1 на странице отсутствует - со стороны сео как раз лучше чтобы на странице был h1

Hierumo · 31.Октябрь.2018 09:00:35

я к тому, чтобы подобные селекторы без повода не вставлять в код, тем более что потом после него придется исправлять все дефолтные стили. или вы в каждом задании вставляете h1, памятуя о поисковой оптимизации?

maxGreen · 18.Декабрь.2018 07:00:37

Ребята, привет! Посмотрите мой код по этому заданию, пожалуйста. Нужны ваши замечания. Так и не понял почему список “.socials” в моем случае отображается в центре контейнера. Пытался использовать float: left, но тогда список просто исчезал. Пришлось ограничиться костылем в виде margin-left: -40px. Помогите разобраться, плиз.

HTML:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="course-card">
    <h1>Курс «Фоны»</h1>
    <p>
    Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
    </p>
    <ul class="socials">
      <li><a href="#facebook" class="social social-fb"></a></li>
      <li><a href="twitter" class="social social-tw"></a></li>
      <li><a href="googleplus" class="social social-gp"></a></li>
    </ul>
    </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;
  line-height: 1.2;
  font-family: "Arial", sans-serif;

  background-color: #ecf0f1;
}

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

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

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

.socials {
  display: inline-block;
  list-style: none;
  margin-top: 11px;
  margin-left: -40px;
  margin-bottom: 0;
}

.socials li,a {
  display: inline-block;
}

.socials .social {
  width: 30px;
  height: 30px;
  margin-right: 5px;
  background-color: #16a085;
  background-image: url("social-challenge.png");
  background-repeat: no-repeat;
}

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

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

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

Valery_S · 18.Декабрь.2018 09:35:03

Нужно обнулить отступы у списка.

PozorPolka · 17.Август.2020 10:11:22

Доброго времени , у меня для ссылок вышел margin 11px; Хотя всё должно быть кратно 5 ) 100% кажет проверка

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;
}
.course {
width:200px;
background-color:#1abc9c;
padding: 20px;
color:white;
}
.course h2 {
margin:0;
font-size:20px;
font-weight:normal;
}
.course p {
margin-top:20px;
}
.link{
display: inline-block;
width: 30px;
height: 30px;
margin: 11px 5px 0 0;
vertical-align: middle;
background: #16a085 url(“social-challenge.png”) no-repeat;
}
.link-fb {
background-position: 0 0;
}
.link-tw {
background-position: -30px 0;
}
.link-go {
background-position: -60px 0;
}
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта — social-challenge.png
*/

KonstantinShmarin · 23.Август.2020 11:14:34

Скажите пожалуйста - чего не так с кодом?
H1 поставил сюда формально, по СEO он сюда не подходит.
HTML

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="card">
   <h1> Курс «Фоны»</h1>
   <p>
    Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
    </p>
    <div class="share">
      <a class="social fb" href="#"></a>
      <a class="social tw" href="#"></a>
      <a class="social go" href="#"></a>
    </div>
    </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;
  line-height: 1.2;
  font-family: "Arial", sans-serif;

  background-color: #ecf0f1;
}

 h1 {
   margin: 0;
   font-size: 20px;
   font-weight: normal;
   padding-top: 10px;
   padding-bottom: 5px;

   }
   
.card {
  width: 200px;
  color: #ffffff;
  padding: 10px 20px;
  background-color: #1abc9c;
  }
   
.share {
  margin-top: 25px;
  margin-bottom: 10px;
  }

.social {
  display: inline-block;
  height: 30px;
  width: 30px;
  margin-right: 5px;
  vertical-align: middle;
  background: #16a085 url("social-challenge.png") no-repeat;
  
  }   
  
.fb {
  background-position: 0 0;  
  }
  
.tw {
  background-position: -30px 0px;;  
  }
  
.go {
  background-position: -60px 0px;  
  }
   
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта — social-challenge.png
*/

Eleven · 24.Август.2020 10:51:17

Добрый день!

Можно у заголовка увеличить отступ вниз до 6 пикселей и испытание будет пройдено на 100%.

Pavel_Kruglik · 22.Декабрь.2020 08:06:57

100%.

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;
color: white;

}

section {
background-color: #1abc9c;
width: 240px;
padding: 3px 20px 20px 20px;
box-sizing: border-box
}

h1 {
font-size: 20px;
margin-bottom: 20px;
font-weight: 200
}
p {
margin-bottom: 25px
}

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

.fb {
background-position: 0 0
}

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

.go {
background-position: -60px 0px
}

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

kava13 · 05.Январь.2021 19:35:57

Подскажите, никак не могу понять, что делает это свойство для блока social в рамках этого задания. Почему блок с ним становится меньше?

Chilly_Willy · 28.Апрель.2022 02:44:08

Вот за вертикальное выравнивание благодарю. А то пришлось отрицательным маржином закрывать расхождение.