The cite element represents the title of a work... (Элемент cite представляет название работы...)
A person's name is not the title of a work... (Имя человек это не название работы...)
<article>
<footer>
<p>Nick</p>
<p><time datetime="2014-09-19">19 сентября 2014 год</time></p>
</footer>
<p>Так может быть оформлен комментарий в блоге.</p>
</article>
<a href="путь_до_вашего_файла.pdf">
<a href="другой_путь_до_вашего_файла.pdf">
<a href="путь_до_вашего_файла.pdf" download>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
<section class="section"></section>
.section:nth-child(2n + 1) {
float: left;
clear: left;
}
.section:nth-child(2n) {
float: right;
clear: right;
}
.container {
column-width: 250px; /* Ширина колонки */
column-gap: 10px; /* Расстояние между колонками */
}
.item {
break-inside: avoid; /* Запрещает разрыв блока */
}
.body { display: grid; grid-template-columns: 3fr 1fr; }
.content { grid-column: 1 / 2; }
.sidebar { grid-column: 2 / 3; }
.body { display: flex; }
.content { flex-grow: 3; }
.sidebar { flex-grow: 1; }
/* Придется убрать отступ между инлайн элементами */
.content { display: inline-block; width: 70%; }
.sidebar { display: inline-block; width: 30%; }
.body { display: table; width: 100%; }
.content { display: table-cell; width: 70%; }
.sidebar { display: table-cell; width: 30%; }
<a href="#" class="btn">
<span class="top">menu</span>
</a>
.top {
position: relative;
display: inline-block;
top: -.45em;
}
.btn {
background-image: linear-gradient(90deg, red 0, red 50%, blue 50%, blue 100%);
background-size: 200%;
background-position-x: 100%;
transition: background .2s ease-out;
}
.btn:hover {
background-position-x: 0;
}
.container {
display: table;
height: 100%;
width: 100%;
}
.content {
display: table-row;
height: 100%;
}
.content {
height: calc(100vh - 50px - 50px);
}
.container {
display: table;
height: 100%;
width: 100%;
}
.content {
display: table-row;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex-grow: 1;
}