6 карточек для цитат
6 стилей оформления для цитат и выдержек.
Emma DemoHTMLCSS
❝
Deeds are to be worshipped, not statues. And maybe even deeds do not need to be worshipped. Because everyone does what he can. One is for a revolution, the other is for a penny whistle. Maybe I only have enough strength for one penny whistle, so what am I now, a piece of shit?…
<!-- 01. Emma -->
<section class="t-bq-section" id="emma">
<div class="t-bq-wrapper t-bq-wrapper-boxed">
<div class="t-bq-quote t-bq-quote-emma">
<div class="t-bq-quote-emma-qmark"><span>❝</span></div>
<div class="t-bq-quote-emma-userpic"></div>
<div class="t-bq-quote-emma-base">
<blockquote class="t-bq-quote-emma-text" cite="Strugatsky brothers">
Deeds are to be worshipped, not statues. And maybe even deeds do not need to be worshipped. Because everyone does what he can. One is for a revolution, the other is for a penny whistle. Maybe I only have enough strength for one penny whistle, so what am I now, a piece of shit?...
</blockquote>
</div>
</div>
</div>
</section>
/* ========== 01. Emma ========== */
.t-bq-quote-emma {
position: relative;
display: flex;
flex-direction: row;
min-height: 250px;
background: #ffffff;
padding: 0!important;
align-items: stretch;
border-radius: 20px;
box-shadow: 2px 2px 25px #cecece;
}
.t-bq-quote-emma .t-bq-quote-emma-qmark {
position: absolute;
top: -30px;
left: calc(50% - 30px);
background: #ffffff;
width: 60px;
height: 60px;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
font-family: Impact, Garamond, Georgia, serif;
font-size: 42pt;
color: #666666;
line-height: 60px;
user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
border-top: 2px solid #eeeeee;
}
.t-bq-quote-emma .t-bq-quote-emma-qmark span {
padding-top: 0.25em;
}
.t-bq-quote-emma .t-bq-quote-emma-userpic {
flex-basis: 150px;
width: 150px;
min-width: 150px;
max-height: auto;
background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/strug.jpg") center center no-repeat;
background-size: cover;
border-radius: 20px 0 0 20px;
}
.t-bq-quote-emma .t-bq-quote-emma-base {
flex-basis: calc(100% - 150px);
padding: 60px 30px 45px 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.t-bq-quote-emma .t-bq-quote-emma-base .t-bq-quote-emma-text {
font-size: 16px;
line-height: 30px;
}
.t-bq-quote-emma .t-bq-quote-emma-base .t-bq-quote-emma-text:after {
content: "\2014\00A0" attr(cite);
display: block;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: bold;
margin-top: 10px;
}
@media screen and (max-width: 768px) {
.t-bq-quote-emma {
flex-direction: column;
}
.t-bq-quote-emma .t-bq-quote-emma-base {
padding-top: 0;
}
.t-bq-quote-emma .t-bq-quote-emma-userpic {
border-radius: 20px;
height: 150px;
margin: 40px auto 20px auto;
}
.t-bq-quote-emma .t-bq-quote-emma-base .t-bq-quote-emma-text {
font-size: 18px;
}
}
Sophia DemoHTMLCSS
And the child meekly looks at you and thinks: you, of course, are an adult, hefty, you can flog me, however, as you have been a fool since childhood, you remain it now, and you will die fool, but this is not enough for you, you want to turn me into a fool as well…
<!-- 02. Sophia -->
<section class="t-bq-section" id="sophia">
<div class="t-bq-wrapper t-bq-wrapper-boxed">
<div class="t-bq-quote t-bq-quote-sophia">
<div class="t-bq-quote-sophia-base">
<blockquote class="t-bq-quote-sophia-text" cite="Братья Стругацкие">
And the child meekly looks at you and thinks: you, of course, are an adult, hefty, you can flog me, however, as you have been a fool since childhood, you remain it now, and you will die fool, but this is not enough for you, you want to turn me into a fool as well...
</blockquote>
</div>
<div class="t-bq-quote-sophia-author"><cite>Strugatsky brothers</cite></div>
<div class="t-bq-quote-sophia-userpic"></div>
</div>
</div>
</section>
/* ========== 02. Sophia ========== */
.t-bq-quote-sophia .t-bq-quote-sophia-base {
background: white;
padding: 20px 40px 40px 40px;
border-radius: 10px;
margin-bottom: 40px;
position: relative;
}
.t-bq-quote-sophia .t-bq-quote-sophia-base:after {
content: "";
position: absolute;
background: #ffffff;
transform: rotate(45deg);
width: 30px;
height: 30px;
margin: 0 auto;
bottom: -15px;
left: calc(50% - 15px);
z-index: 0;
}
.t-bq-quote-sophia .t-bq-quote-sophia-author {
text-align: center;
margin-bottom: 10px;
}
.t-bq-quote-sophia .t-bq-quote-sophia-text {
font-size: 16px;
line-height: 30px;
}
.t-bq-quote-sophia .t-bq-quote-sophia-author cite {
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 18px;
font-weight: bold;
}
.t-bq-quote-sophia .t-bq-quote-sophia-userpic {
width: 100px;
height: 100px;
background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/strug.jpg") center center no-repeat;
background-size: cover;
margin: 0 auto;
border-radius: 50%;
}
Jenny DemoHTMLCSS
The fact is that the most interesting and elegant scientific results quite often have the property of seeming abstruse and drearily incomprehensible to the uninitiated. People who are far from science in our time expect a miracle and only a miracle from it and are practically unable to distinguish a real scientific miracle from a trick or some kind of intellectual somersault.
<!-- 03. Jenny -->
<section class="t-bq-section" id="jenny">
<div class="t-bq-wrapper t-bq-wrapper-boxed">
<div class="t-bq-quote t-bq-quote-jenny">
<div class="t-bq-quote-jenny-base">
<blockquote class="t-bq-quote-jenny-text" cite="Strugatsky brothers">
The fact is that the most interesting and elegant scientific results quite often have the property of seeming abstruse and drearily incomprehensible to the uninitiated. People who are far from science in our time expect a miracle and only a miracle from it and are practically unable to distinguish a real scientific miracle from a trick or some kind of intellectual somersault.
</blockquote>
</div>
<div class="t-bq-quote-jenny-meta">
<div class="t-bq-quote-jenny-meta-info">
<div class="t-bq-quote-jenny-author"><cite>Strugatsky brothers</cite></div>
<div class="t-bq-quote-jenny-source"><span>Monday Begins on Saturday</span></div>
</div>
<div class="t-bq-quote-jenny-userpic"></div>
</div>
</div>
</div>
</section>
/* ========== 03. Jenny ========== */
.t-bq-quote-jenny .t-bq-quote-jenny-base {
background: white;
padding: 20px 40px 40px 40px;
border-radius: 10px;
margin-bottom: 40px;
position: relative;
}
.t-bq-quote-jenny .t-bq-quote-jenny-base:after {
content: "";
position: absolute;
background: #ffffff;
transform: rotate(45deg);
width: 30px;
height: 30px;
margin: 0 auto;
bottom: -15px;
left: calc(100% - 100px - 15px);
z-index: 0;
}
.t-bq-quote-jenny .t-bq-quote-jenny-base .t-bq-quote-jenny-text {
text-indent: 5em;
line-height: 30px;
font-size: 16px;
}
.t-bq-quote-jenny .t-bq-quote-jenny-base .t-bq-quote-jenny-text:before {
content: "\201C";
position: absolute;
left: -55px;
top: 55px;
font-family: Georgia, serif;
font-size: 160pt;
color: #cecece;
}
.t-bq-quote-jenny .t-bq-quote-jenny-meta {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
}
.t-bq-quote-jenny .t-bq-quote-jenny-meta .t-bq-quote-jenny-meta-info {
flex-basis: calc(100% - 50px);
}
.t-bq-quote-jenny .t-bq-quote-jenny-meta .t-bq-quote-jenny-author,
.t-bq-quote-jenny .t-bq-quote-jenny-meta .t-bq-quote-jenny-source {
text-align: right;
flex-basis: 100%;
padding-right: 15px;
line-height: 1.38em;
}
.t-bq-quote-jenny .t-bq-quote-jenny-meta .t-bq-quote-jenny-author cite {
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 10pt;
font-weight: bold;
}
.t-bq-quote-jenny .t-bq-quote-jenny-meta .t-bq-quote-jenny-source span {
font-size: 11pt;
}
.t-bq-quote-jenny .t-bq-quote-jenny-meta .t-bq-quote-jenny-userpic {
flex-basis: 50px;
flex-grow: 0;
width: 50px;
height: 50px;
background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/strug.jpg") center center no-repeat;
background-size: cover;
border-radius: 50%;
margin-left: auto;
}
Paul DemoHTMLCSS
❝
Psychologically, almost all of them were slaves — slaves of faith, slaves of their own kind, slaves of passions, slaves of greed. And if, by the will of fate, one of them was born or became a master, he did not know what to do with his freedom. He again hurried to become a slave — a slave of wealth, unnatural excesses, a slave of dissolute friends, a slave of his slaves.
<!-- 04. Paul -->
<section class="t-bq-section" id="paul">
<div class="t-bq-wrapper t-bq-wrapper-boxed">
<div class="t-bq-quote t-bq-quote-paul">
<div class="t-bq-quote-paul-userpic"></div>
<div class="t-bq-quote-paul-qmark">
❝
</div>
<div class="t-bq-quote-paul-pattern">
</div>
<div class="t-bq-quote-paul-base">
<blockquote class="t-bq-quote-paul-text" cite="Strugatsky Brothers">
Psychologically, almost all of them were slaves - slaves of faith, slaves of their own kind, slaves of passions, slaves of greed. And if, by the will of fate, one of them was born or became a master, he did not know what to do with his freedom. He again hurried to become a slave - a slave of wealth, unnatural excesses, a slave of dissolute friends, a slave of his slaves.
</blockquote>
<div class="t-bq-quote-paul-meta">
<div class="t-bq-quote-paul-meta-info">
<div class="t-bq-quote-paul-author"><cite>Strugatsky Brothers</cite></div>
<div class="t-bq-quote-paul-source"><span>Hard to Be a God</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
/* ========== 04. Paul ========== */
.t-bq-quote-paul {
position: relative;
display: flex;
flex-direction: row;
min-height: 250px;
box-shadow: 2px 2px 25px #cecece;
border-radius: 10px;
}
.t-bq-quote-paul .t-bq-quote-paul-pattern {
flex-basis: 80px;
background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/hexabump.png") repeat;
border-radius: 10px 0 0 10px;
}
.t-bq-quote-paul .t-bq-quote-paul-base {
flex-basis: calc(100% - 80px);
background: #ffffff;
padding: 40px 30px 50px 80px;
font-size: 11pt;
line-height: 1.62em;
border-radius: 0 10px 10px 0;
}
.t-bq-quote-paul .t-bq-quote-paul-qmark {
position: absolute;
top: 50px;
left: 105px;
font-family: Garamond, Georgia, "Times New Roman", serif;
font-size: 42pt;
color: #999999;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.t-bq-quote-paul .t-bq-quote-paul-userpic {
position: absolute;
top: 80px;
left: 45px;
width: 70px;
height: 70px;
background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/strug.jpg") center center no-repeat;
background-size: cover;
border-radius: 50%;
}
.t-bq-quote-paul .t-bq-quote-paul-meta {
margin-top: 30px;
padding-top: 10px;
border-top: 2px dotted #777777;
}
.t-bq-quote-paul .t-bq-quote-paul-meta .t-bq-quote-paul-author,
.t-bq-quote-paul .t-bq-quote-paul-meta .t-bq-quote-paul-source {
color: #777777;
}
.t-bq-quote-paul .t-bq-quote-paul-meta .t-bq-quote-paul-author {
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 10pt;
font-weight: bold;
}
.t-bq-quote-paul .t-bq-quote-paul-meta .t-bq-quote-paul-author cite {
font-style: normal;
}
.t-bq-quote-paul .t-bq-quote-paul-meta .t-bq-quote-paul-source {
font-size: 9pt;
}
@media screen and (max-width: 768px) {
.t-bq-quote-paul .t-bq-quote-paul-pattern {
flex-basis: 20px;
}
.t-bq-quote-paul .t-bq-quote-paul-base {
flex-basis: calc(100% - 20px);
padding: 100px 30px 50px 30px;
}
.t-bq-quote-paul .t-bq-quote-paul-userpic {
width: 50px;
height: 50px;
left: 40px;
top: 20px;
}
.t-bq-quote-paul .t-bq-quote-paul-qmark {
left: 100px;
top: 45px;
}
}
Jasper DemoHTMLCSS
❝
He was neat by nature and could not stand any disorder. Maybe that’s why, when he got drunk and lost his human form, he always made such a disgusting mess.
<!-- 05. Jasper -->
<section class="t-bq-section" id="jasper">
<div class="t-bq-wrapper t-bq-wrapper-boxed">
<div class="t-bq-quote t-bq-quote-jasper">
<div class="t-bq-quote-jasper-pattern">
<div class="t-bq-quote-jasper-qmark">
❝
</div>
</div>
<div class="t-bq-quote-jasper-userpic"></div>
<div class="t-bq-quote-jasper-base">
<blockquote class="t-bq-quote-jasper-text" cite="Strugatsky Brothers">
He was neat by nature and could not stand any disorder. Maybe that's why, when he got drunk and lost his human form, he always made such a disgusting mess.
</blockquote>
<div class="t-bq-quote-jasper-meta">
<div class="t-bq-quote-jasper-meta-info">
<div class="t-bq-quote-jasper-author"><cite>Strugatsky Brothers</cite></div>
<div class="t-bq-quote-jasper-source"><span>The Powerless of This World </span></div>
</div>
</div>
</div>
</div>
</div>
</section>
/* ========== 05. Jasper ========== */
.t-bq-quote-jasper {
position: relative;
box-shadow: 2px 2px 25px #cecece;
border-radius: 10px;
}
.t-bq-quote-jasper .t-bq-quote-jasper-pattern {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
height: 80px;
align-items: center;
justify-content: flex-start;
background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/hexabump.png") repeat;
border-radius: 10px 10px 0 0;
}
.t-bq-quote-jasper .t-bq-quote-jasper-pattern .t-bq-quote-jasper-qmark {
flex-basis: 100px;
font-family: Garamond, Georgia, "Times New Roman", serif;
font-size: 60pt;
color: #999999;
text-align: center;
height: 80px;
line-height: 90pt;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.t-bq-quote-jasper .t-bq-quote-jasper-userpic {
position: absolute;
top: 45px;
left: calc(50% - 35px);
width: 70px;
height: 70px;
background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/strug.jpg") center center no-repeat;
background-size: cover;
border-radius: 50%;
}
.t-bq-quote-jasper .t-bq-quote-jasper-base {
background: #ffffff;
padding: 60px;
font-size: 11pt;
line-height: 1.62em;
border-radius: 0 0 10px 10px;
}
.t-bq-quote-jasper .t-bq-quote-jasper-meta {
margin-top: 30px;
padding-top: 10px;
border-top: 2px dotted #777777;
text-align: center;
}
.t-bq-quote-jasper .t-bq-quote-jasper-meta .t-bq-quote-jasper-author,
.t-bq-quote-jasper .t-bq-quote-jasper-meta .t-bq-quote-jasper-source {
color: #777777;
}
.t-bq-quote-jasper .t-bq-quote-jasper-meta .t-bq-quote-jasper-author {
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 10pt;
font-weight: bold;
}
.t-bq-quote-jasper .t-bq-quote-jasper-meta .t-bq-quote-jasper-author cite {
font-style: normal;
}
.t-bq-quote-jasper .t-bq-quote-jasper-meta .t-bq-quote-jasper-source {
font-size: 9pt;
}
@media screen and (max-width: 768px) {
.t-bq-quote-jasper .t-bq-quote-jasper-base {
padding-left: 30px;
}
}
DemoHTMLCSS
❞
Children must not be beaten. Even without you, they will be beaten for the rest of their lives, and if you want to hit him, it’s better to hit your own face, it will be more useful.
<!-- 06. Horace -->
<section class="t-bq-section" id="horace">
<div class="t-bq-wrapper t-bq-wrapper-boxed">
<div class="t-bq-quote t-bq-quote-horace">
<div class="t-bq-quote-horace-qmark">
❞
</div>
<div class="t-bq-quote-horace-base">
<blockquote class="t-bq-quote-horace-text" cite="Strugatsky Brothers">
Children must not be beaten. Even without you, they will be beaten for the rest of their lives, and if you want to hit him, it’s better to hit your own face, it will be more useful.
</blockquote>
<div class="t-bq-quote-horace-meta">
<div class="t-bq-quote-horace-userpic"></div>
<div class="t-bq-quote-horace-meta-info">
<div class="t-bq-quote-horace-author"><cite>Strugatsky Brothers</cite></div>
<div class="t-bq-quote-horace-source"><span>Ugly Swans</span></div>
</div>
</div>
</div>
</div>
</div>
</section>
/* ========== 06. Horace ========== */
.t-bq-quote-horace {
position: relative;
min-height: 250px;
border-radius: 10px;
box-shadow: 2px 2px 25px #cecece;
}
.t-bq-quote-horace .t-bq-quote-horace-base {
background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/hexabump.png") repeat;
color: #ffffff;
font-weight: bold;
padding: 60px;
border-radius: 10px;
}
.t-bq-quote-horace .t-bq-quote-horace-meta {
display: flex;
flex-direction: row;
margin-top: 30px;
padding-top: 20px;
border-top: 2px dotted #ffffff;
}
.t-bq-quote-horace .t-bq-quote-horace-meta .t-bq-quote-horace-author {
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.03em;
font-size: 10pt;
font-weight: bold;
}
.t-bq-quote-horace .t-bq-quote-horace-meta .t-bq-quote-horace-author cite {
font-style: normal;
}
.t-bq-quote-horace .t-bq-quote-horace-meta .t-bq-quote-horace-source {
font-size: 10pt;
line-height: 15pt;
}
.t-bq-quote-horace .t-bq-quote-horace-qmark {
position: absolute;
top: 140px;
right: 5px;
font-size: 280pt;
color: #ffffff;
opacity: 0.17;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
.t-bq-quote-horace .t-bq-quote-horace-userpic {
width: 70px;
height: 70px;
background: url("https://raw.githubusercontent.com/taviskaron/t-div-blockquotes/main/img/strug.jpg") center center no-repeat;
background-size: cover;
border-radius: 50%;
margin-right: 20px;
}
@media screen and (max-width: 768px) {
.t-bq-quote-horace .t-bq-quote-horace-base {
padding-left: 40px;
padding-right: 40px;
}
.t-bq-quote-horace .t-bq-quote-horace-meta {
flex-direction: column;
text-align: center;
}
.t-bq-quote-horace .t-bq-quote-horace-meta .t-bq-quote-horace-userpic {
margin: 0 auto;
margin-bottom: 10px;
}
}
