SNPR
05.Июнь.2017 10:58:25
1
Выполнил на 100%, но смущает, что у класса “block” пришлось ставить отступ 7px, прошу указать на ошибки.
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Испытание: карточка курса</title>
</head>
<body>
<div class="block"><h1>Курс «Фоны»</h1>
<p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
<a class="social fb" href="#fb"></a>
<a class="social tw" href="#tw"></a>
<a class="social gp" href="#gp"></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;
}
.block {
background-color: #1abc9c;
color: white;
width: 200px;
padding: 7px 20px;
}
h1 {
font-weight: normal;
font-size: 20px;
margin-bottom: 20px;
}
p {
margin-bottom: 25px;
}
.social {
width: 30px;
height: 30px;
background-color: #16a085;
display: inline-block;
margin-right: 5px;
margin-bottom: 10px;
background-image: url("/assets/course14/social-challenge.png");
background-repeat: no-repeat;
}
.fb {
background-position: 0 0;
}
.tw {
background-position: -30px 0;
}
.gp {
background-position: -60px 0;
}
Ineska
05.Июнь.2017 11:51:27
2
Не обнулили отступы по умолчанию у заголовка и параграфа.
1 лайк
SNPR
06.Июнь.2017 04:38:22
3
Благодарю за подсказку, исправил 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;
}
.block {
background-color: #1abc9c;
color: white;
width: 200px;
padding: 0 20px;
min-height: 235px;
}
h1 {
font-weight: normal;
margin: 0;
font-size: 20px;
padding: 20px 0;
}
p {
margin: 0;
padding-bottom: 25px;
}
.social {
width: 30px;
height: 30px;
background-color: #16a085;
display: inline-block;
margin-right: 5px;
margin-bottom: 15px;
background-image: url("/assets/course14/social-challenge.png");
background-repeat: no-repeat;
}
.fb {
background-position: 0 0;
}
.tw {
background-position: -30px 0;
}
.gp {
background-position: -60px 0;
}
1 лайк
Посмотрите, пожалуйста, код...есть ли какие-либо замечания?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Испытание: карточка курса</title>
</head>
<body>
<div class="bg">
<h1>Курс «Фоны»</h1>
<h3>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</h3>
<div class="bottom">
<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;
font-family: "Arial", sans-serif;
line-height: 1.2;
background: #ecf0f1;
}
.bg {
width:200px;
padding:20px;
background:#1abc9c;
color:white;
}
h1 {
font-weight:normal;
font-size:20px;
margin-bottom: 20px;
margin-top:0;
}
h3 {
font-weight:normal;
font-size:14px;
}
.social {
display:inline-block;
width:30px;
height:30px;
background:#16a085 url(/assets/course14/social-challenge.png) no-repeat;
margin-right:5px;
vertical-align: middle;
}
.social-fb {
background-position:0 0;
}
.social-tw {
background-position:-30px 0;
}
.social-g{
background-position:-60px 0;
}
.bottom {
margin-top: 25px;
}
Ineska
06.Июнь.2017 07:52:11
7
Почему два заголовка? Поясните свой выбор.
Вы имеете ввиду, что вместо заголовка 3-го уровня лучше обычный абзац использовать?
Ineska
06.Июнь.2017 14:20:19
9
А вы как считаете? Есть заголовки, а что тогда содержимое?
Лично для меня, текст в испытании логически не закончен. В данном случае, я думаю, что содержимого просто нет. Есть только как бы анонс, аннотация курса. Попробую пояснить свой выбор на примере. Например, если бы было так:
Курс “Фоны” - заголовок 1-го уровня;
Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов. - заголовок 3-го уровня;
Начнём изучение с цвета фона. Цвет фона можно задать с помощью CSS-свойства background-color.
Цвета в CSS можно задавать в разных форматах: в шестнадцатеричном (или HEX), в RGB или RGBA, а также с помощью цветовых констант, таких как red или green. - содержимое (обычный абзац)
В любом случае, мне кажется это не принципиально (или я ошибаюсь?) Есть другие недочеты, не касающиеся заголовка??
Ineska
07.Июнь.2017 06:15:12
11
Вы сами говорите “анонс”, то есть краткое содержание курса. Для заголовка это уже много текста, по моему мнению.
Других замечаний, кроме спора по семантике, нет.
h1v
10.Июнь.2017 21:53:45
13
Кончилось терпение, прошу, подскажите в чем ошибка?
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Испытание: карточка курса</title>
</head>
<body>
<div class="card clearfix">
<h2 class="text">
Курс «Фоны»
</h2>
<div class"content">
<p>
Учимся использовать фоновые
цвета и изображения, разбираемся с форматами,
знакомимся с приёмами создания декоративных эффектов.
> </p>
> </div>
> <div class="social">
> <a href="#fb" class="fb"></a>
> <a href="#tw" class="tw"></a>
> <a href="#goo" class="goo"></a>
> </div>
> </div>
> </body>
> </html>
html,
body {
margin: 0;
padding: 0;
background:#fff;
}
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;
}
.card{
padding:0 20px;
height:235px;
width:200px;
color:white;
background-color:#1ABC9C;
}
.clearfix::before{
content:"";
display:table;
clear:both;
}
h2{
font-size:20px;
font-weight:normal;
margin:20px 0;
}
.social a {
display:inline-block;
height:30px;
width:30px;
margin:10px 5px 0 0;
padding:0;
background-color:#16A085;
}
.social a:first-child{
margin-left:0;
}
.fb{
background:url(/assets/course14/social-challenge.png) no-repeat 0 0;
}
.tw{
background:url(/assets/course14/social-challenge.png) no-repeat -30px 0;
}
.goo{
background:url(/assets/course14/social-challenge.png) no-repeat -60px 0;
}
Ineska
11.Июнь.2017 15:14:37
14
Для чего в коде псевдораспорка, если нет ни одного плавающего элемента?
У параграфа, который вы для верности обернули в div (хотя это и так блочный элемент), как и у заголовка есть отступы по умолчанию. Их нужно переопределить или обнулить, если они не нужны.