Skip to content

Instantly share code, notes, and snippets.

@kianurivzzz
Created September 28, 2024 16:48
Show Gist options
  • Save kianurivzzz/8bccd42ec731ba1f6b004357d695c4de to your computer and use it in GitHub Desktop.
Save kianurivzzz/8bccd42ec731ba1f6b004357d695c4de to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>Steve Vai</title>
</head>
<body>
<header>
<div class="logo">Artist Magazine</div>
<nav>
<ul class="nav">
<li><a href="#">News</a></li>
<li><a href="#">Rewiew</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Magazine</a></li>
</ul>
</nav>
</header>
<article class="interview">
<header>
<h1 class="interview-header">Steve Vai: “I don’t watch the news as I believe the vast majority of it is fear based”</h1>
<p class="interview-description">The legendary guitarist on Game Of Thrones, The Great British Bake Off, and almost jamming with the Foo Fighters in a haunted house.</p>
<div class="interview-footer">
<a href="#" class="interview-author">Joe Bosso</a>
<br>
<span class="interview-time">13th July 2020</span>
</div>
<figure>
<img src="https://i.pinimg.com/736x/07/e7/bb/07e7bbb7381efe501078f06b24329e72.jpg" alt="Steve Vai">
<figcaption>Image: C Flanigan / FilmMagic</figcaption>
</figure>
</header>
<hr>
<div class="interview-text">
<p>While thousands of bands and musicians have been forced to cancel or postpone tours in the face of COVID-19, Steve Vai counts himself as one of the lucky ones – he had no live dates on the books for 2020. However, the global pandemic did throw a rather sizeable wrench into an elaborate recording project he had been planning.</p>
<p>“I was going to be in Europe for four weeks recording my orchestra music with the Metropole Orchestra in Holland and the Aarhus Denmark Radio Symphony,” the guitarist says. “It was supposed to kick off the last week of May and go all the way through June. It’s about four hours of orchestra music that I have that I haven’t released yet. It’s been performed, and some of the compositions are orchestrations of songs like Velorum, Call It Sleep and other selections from my catalogue. Probably about two-thirds of it is pretty intense, complex and dense, contemporary orchestra music. That I had to postpone. It’s fine – it’s just what is.”</p>
<p>Speaking from his Los Angeles home, Vai reports that the ongoing lockdown hasn’t affected his day-to-day life to any great extent. “I’m fortunate. I haven’t gotten sick, at least not that I know of,” he says. “For me, it’s relatively business as usual because I live in my studio anyway. I roll with the punches and I don’t even feel them as punches.</p>
</div>
</article>
</body>
</html>
/* тут можно написать код */
/* тут можно написать код */
body {
width: 790px;
margin: 0 auto;
padding: 50px 0 100px;
/* тут можно написать код */
/* тут можно написать код */
background-color: #ebebeb;
}
figure {
margin: 50px 0 0;
}
figcaption {
font-size: 12px;
}
img {
width: 100%;
}
.logo {
margin-bottom: 30px;
/* тут можно написать код */
/* тут можно написать код */
letter-spacing: 15px;
text-transform: uppercase;
}
.nav {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.nav > * {
margin: 0;
padding: 0;
list-style: none;
}
.nav a {
/* тут можно написать код */
/* тут можно написать код */
letter-spacing: 0.3em;
text-transform: uppercase;
text-decoration: none;
}
.interview {
/* тут можно написать код */
/* тут можно написать код */
}
.interview-header {
/* тут можно написать код */
/* тут можно написать код */
}
.interview-description {
/* тут можно написать код */
/* тут можно написать код */
}
.interview-footer {
/* тут можно написать код */
/* тут можно написать код */
}
.interview-text {
/* тут можно написать код */
/* тут можно написать код */
}

В этом задании вам необходимо настроить текстовые стили для небольшой части страницы портала «Artist Magazine».

Используйте обобщенное свойство font на больших контейнерах. В остальных случаях используйте отдельные свойства.

Для логотипа и заголовка статьи используется шрифт Cormorant. Их нужно скачать из Google Fonts и положить в папку fonts.

Стили body

Размер шрифта: 16px

Межстрочный интервал: 1.5

Тип шрифта: без засечек

Логотип

Логотип портала «Artist Magazine» находится в блоке с классом .logo. Установите следующие стили:

Цвет: #333

Размер текста: 30px

Межстрочный интервал: normal

Тип шрифта: Cormorant. В качестве семейства установите шрифт с засечками

Ссылки навигации

Цвет: #616161

Жирная насыщенность

##Секция с интервью

Основная секция страницы имеет класс .interview. Для этого блока установите следующие стили:

Цвет: #333

Размер шрифта: 18px

Межстрочный интервал: 1.5

Тип шрифта: с засечками

Заголовок интервью

Заголовок интервью имеет класс .interview-header. Для заголовка установите следующие стили:

Размер текста: 50px

Межстрочный интервал: 1.2

Тип шрифта: Cormorant. В качестве семейства установите шрифт с засечками

Жирная насыщенность

Вступление

Вступление, или краткое описание интервью расположено в блоке с классом .interview-description. Установите следующие стили для блока:

Цвет: #686868

Тип шрифта: без засечек

Информация об авторе

Информация об авторе и дате выпуска интервью находится в блоке .interview-footer. Установите следующие стили для блока:

Размер шрифта: 12px

Межстрочный интервал: 1.25

Выравнивание по правому краю

Текст интервью

Само интервью располагается в блоке .interview-text. Этот блок имеет следующие стили:

Размер шрифта: 20px

Межстрочный интервал: 1.75

Выравнивание по ширине

Все необходимые селекторы уже есть в файле style.css. Ваша задача — дописать нужные стили.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment