Испытание: поиграйся со шрифтами [26/26] 100%

Курсы §25. Оформление текста с помощью CSS. Часть 2
1

`html,
body {
min-width: 570px;
height: 300px;
margin: 0;
font-family: “Arial”, sans-serif;
color: #ffffff;
background: url(“football.jpg”) 50% 50% no-repeat;
}

h1 {
position: relative;
width: 320px;
margin: 0;
padding-left: 40px;
font-size: 80px;
text-indent: 100px;
line-height: 100px;
text-transform: uppercase;
font-weight: 100;
word-wrap: break-word;
letter-spacing: 40px;
text-shadow: -5px 5px 0 rgba(0, 0, 0, 0.5);

}

h1::before {
content: “|”;
position: absolute;
top: -5px;
left: -55px;
font-size: 55px;
font-weight: bold;
text-shadow: 20px 0 #fff, 40px 0 #fff;

}
`

2 лайка
2

У меня так же, только я указал font-weight:normal и в тенях на псевдоелементе не указывал цвет, так как он такой же как и у текста.

1 лайк
3

Нужно поработать только с h1, псевдоэлемент трогать не нужно, так же было и указано в подсказке

body {
margin: 0;
width: 570px;
height: 300px;
background: url(“football.jpg”) -120px -60px no-repeat;
color: #ffffff;
font-family: “Arial”, sans-serif;
}

h1 {
position: relative;
margin: 0;
padding-left: 40px;
width: 320px;
text-transform: uppercase;
text-shadow: -5px 5px 0 rgba(0, 0, 0, 0.5);
font-size: 80px;
font-weight: normal;
word-wrap: break-word;
letter-spacing: 40px;
line-height: 100px;
}

h1::before {
position: relative;
content: “●”;
font-size: 90px;
color: #ffffff;
}

1 лайк
4

h1 {
position: relative;
margin: 0;
padding-left: 40px;
width: 320px;
text-transform: uppercase;
font-size: 80px;
font-weight: 500;
text-shadow: -5px 5px 0px rgba(0, 0, 0, 0.5);
word-wrap: break-word;
letter-spacing: 40px;
line-height: 100px;
}

5 
body {
  margin: 0;
  width: 570px;
  height: 300px;
  background: url("football.jpg") -120px -60px no-repeat;
  color: #ffffff;
  font-family: "Arial", sans-serif;
}

h1 {
  position: relative;
  margin: 0;
  padding-left: 40px;
  width: 320px;
  word-wrap: break-word;
  font-size: 80px;
  text-transform: uppercase;
  font-weight: normal;
  letter-spacing: 40px;
  text-shadow: -5px 5px 0 rgba(0, 0, 0, 0.5);
  line-height: 100px;
}

h1::before {
  position: relative;
  content: "●";
  font-size: 90px;
  color: #ffffff;
}