0
У меня есть этот нефритовый код, который я бы перевел в HTML. Я думаю, что у меня есть большая часть, но я не могу понять часть парящего.Jade to HTML/CSS
И Джейд, что я пытаюсь преобразовать в HTML: http://codepen.io/jzhang172/pen/Nqevge
Моя попытка: http://codepen.io/jzhang172/pen/zGydZv
*{
\t transition: all 250ms ease-in-out;
}
.container{
\t position: absolute;
\t transform: translateY(-50%) translateX(-50%);
\t top: 50%;
\t left: 50%;
}
.block
{
\t height: 100px;
\t line-height: 100px;
\t text-align: center;
\t font-family: 'Playfair Display', serif;
}
\t .block .citation
{
\t \t font-size: 25px;
\t \t line-height: 35px;
}
\t .block .author
{
\t \t font-family: 'Roboto', sans-serif;
\t \t color: #838eca;
\t \t text-transform: uppercase;
\t \t font-size: 10px;
\t \t letter-spacing: 2px;
\t \t line-height: 35px;
\t \t transform: translateY(-50px);
\t \t opacity: 0;
}
.third
{
\t position: relative;
}
.third .citation{
\t \t transform: translateX(0);
}
\t .third .author
{
\t \t bottom: 10px;
\t \t position: absolute;
\t \t right: 0;
\t \t opacity: 0;
}
\t .third .author:hover .citation
{
\t \t \t transform: translateX(-70px);
}
\t .third .author:hover .author{
\t \t \t right: -50px;
\t \t \t opacity: 1;
\t \t \t color: #ea8273;
}<div class="container">
<div class ="block third">
<p class="citation">"Guess what. A quote."</p>
\t \t <p class="author"> - and the author -
</p>
</div>
</div>
Вы спрашиваете, какая разница между HTML/CSS, которую вы написали вручную, и HTML/CSS, которые вы получаете, если вы ** нажимаете кнопку View Compiled ** на приведенной вами ссылке codepen? (a) Вам необходимо указать код * в самом вопросе * и (b) Использовать инструмент diff. – Quentin