Skip to content

Instantly share code, notes, and snippets.

@smmurf
Created May 7, 2012 22:18
Show Gist options
  • Save smmurf/2630917 to your computer and use it in GitHub Desktop.
Save smmurf/2630917 to your computer and use it in GitHub Desktop.
Страница карточек
/**
* Страница карточек
*/
body {
margin: 0;
text-align: justify;
}
.card {
display: inline-block;
overflow: auto;
margin: 5px;
padding: 5px;
width: 190px;
border: 1px solid #ccc;
background: #fffeef;
box-shadow: 1px 1px 5px #ccc;
counter-increment: itemNo;
vertical-align: top;
text-align: left;
}
.photo {
float: left;
display: inline-block;
margin: 0 3px 15px 0;
width: 64px;
height: 64px;
border: 1px solid #ccc;
text-align: center;
}
.photo img,
.photo i {
vertical-align: middle;
}
.photo img {
max-width: 64px;
max-height: 64px;
}
.photo i {
display: inline-block;
height: 100%;
}
.card h2 {
overflow: hidden;
margin: 0 0 15px 0;
text-overflow: ellipsis;
word-spacing: .4ex;
letter-spacing: .2ex;
font-variant: small-caps;
font-size: large;
}
.card p {
clear: left;
font: 14px Arial, sans-serif;
}
.card:before {
float: right;
width: 16px;
border-radius: 3px;
background: #777;
color: #fff;
content: counter(itemNo);
text-align: center;
font: 12px Arial, sans-serif;
line-height: 16px;
}
.placeholder {
display: inline-block;
margin: 0 5px;
width: 202px;
height: 0;
}
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328b_cbbc7166_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Иванова Надежда Соломоновна">Иванова Надежда Соломоновна</h2>
<p>Жанр, основываясь на парадоксальном совмещении исключающих друг друга принципов характерности и поэтичности, вызывает глубокий образ, так как в данном случае роль наблюдателя опосредована ролью рассказчика.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328c_3fd835ed_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Константинопольский-Мовсесян Василий Заурович">Константинопольский-Мовсесян Василий Заурович</h2>
<p>Тоника текстологически редуцирует диссонансный пастиш, потому что в стихах и в прозе автор рассказывает нам об одном и том же.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6209/50952485.2/0_b328d_5d26f2a_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Ли Си Цын">Ли Си Цын</h2>
<p>Наш современник стал особенно чутко относиться к слову, однако подтекст полидисперсен.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328c_3fd835ed_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Аввакуумов Варлаам Харлампович">Аввакуумов Варлаам Харлампович</h2>
<p>Силлабика жизненно иллюстрирует символ, потому что сюжет и фабула различаются.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328b_cbbc7166_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Зальц Ираида Арчибальдовна">Зальц Ираида Арчибальдовна</h2>
<p>Если архаический миф не знал противопоставления реальности тексту, слово синфазно.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328c_3fd835ed_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Наум Федор Патрикеевич">Наум Федор Патрикеевич</h2>
<p>Стихотворение иллюстрирует глубокий метр, так как в данном случае роль наблюдателя опосредована ролью рассказчика.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6209/50952485.2/0_b328d_5d26f2a_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Апполинарий Кондратьевич">Апполинарий Кондратьевич</h2>
<p>Познание текста интегрирует символ, именно об этом говорил Б.В.Томашевский в своей работе 1925 года.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328b_cbbc7166_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Марина Викторовна">Марина Викторовна</h2>
<p>Вопрос о популярности произведений того или иного автора относится к сфере культурологии, однако познание текста недоступно интегрирует цикл, хотя в существование или актуальность этого он не верит, а моделирует собственную реальность.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328c_3fd835ed_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Павленко Павел Павлович">Павленко Павел Павлович</h2>
<p>Синхрония представляет собой метр, таким образом, очевидно, что в нашем языке царит дух карнавала, пародийного отстранения.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6209/50952485.2/0_b328d_5d26f2a_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Петров Никифор">Петров Никифор</h2>
<p>Ложная цитата многопланово осознаёт мелодический механизм сочленений, но языковая игра не приводит к активно-диалогическому пониманию.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328b_cbbc7166_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Какая-то Валентина Михайловна">Какая-то Валентина Михайловна</h2>
<p>Транстекстуальность притягивает композиционный анализ, туда же попадает и еще недавно вызывавший безусловную симпатию гетевский Вертер.</p>
</div>
<div class="card">
<span class="photo">
<img src="http://img-fotki.yandex.ru/get/6300/50952485.2/0_b328c_3fd835ed_XS.jpg" alt="photo"><i></i>
</span>
<h2 title="Делчев Яков Спиридонович">Делчев Яков Спиридонович</h2>
<p>Возможно, что сходство Гугона и Микулы объясняется родством бродячих мотивов, однако мифопоэтический хронотоп изменяем.</p>
</div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
<div class="placeholder"></div>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment