26 задание, совершенно не получается выровнять логотип

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

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

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

h1::before {
content: ‘|||’; letter-spacing: 5px; font-size: 55px; font-weight: bold; text-shadow: none;
position: relative; top:-13px; left: 5px; padding-right: 39px;
}

2

Ваш вариант можно доделать до 99%.
Таким образом:
h1 {
position: relative;
width: 320px;
font-size: 80px;
font-weight: normal;
word-wrap:break-word;
text-transform: uppercase;
text-shadow: -5px 5px rgba(0,0,0,.5);
line-height: 100px;
letter-spacing: 40px;
margin: 0;
padding-left: 40px;
text-indent: 100px;
}

h1::before {
content: ‘|||’;
letter-spacing: 5px;
font-size: 55px;
font-weight: bold;
text-shadow: none;
position: absolute;
top: -5px;
left: -55px;
}
100% получается только если в content оставить одну вертикальную черту, а две другие сделать с помощью text-shadow.

2 лайка
3

спасибо большое, за тень для content даже и не подумала

4

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;
line-height: 100px;
font-weight: normal;
text-transform: uppercase;
text-shadow: -5px 5px 0px rgba(0,0,0,.5);
letter-spacing: 40px;
word-wrap: break-word;
text-indent: 100px;

}

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

}