Как сделать css-стиль и html для Anki-карточки (лицевая и обортная сторона)?

Question

[akokin]

Здравствуйте.
Создаю карточки для изучения английской фонетики в программе Anki и хотелось бы улучшить внешний вид карточек (лицевой и оборотной стороны).
Вот набросал дизайн от руки (https://goo.gl/eAKJeS), но не знаю, как это перевести в html и css.
Буду благодарен на помощь.

Answer 1

[ink]

flip efffect называется .... это ?
https://davidwalsh.name/demo/css-flip.php

Comments

[akokin]

Спасибо большое, но это не то. В программе Anki лицевая и оборотная сторона одной карточки это просто название. По сути это одна страница с разным оформлением блоков на ней.
Меня интересует, как сделать такие блоки (на линию-разделитель можно не обращать внимание).

Answer 2

[akokin]

Нашел в интернете пример расположения блоков горизонтально, приспособил к своей задаче и вот что получилось:

Вот код html:

{{Describe of sound}}<br><br>
<div id="wrapper">
    <div class="section">{{Letter(s) - 1}}<br>
{{Symbol - 1}}</div>
    <div class="section">{{Word - 1}}<br>
{{Word_transcription - 1}}</div>
    <div class="section">{{Audio letter(s) - 1}}   {{Audio word - 1}}</div>
</div>
<br>
<div id="wrapper">
    <div class="section">{{Letter(s) - 2}}<br>
{{Symbol - 2}}</div>
    <div class="section">{{Word - 2}}<br>
{{Word_transcription - 2}}</div>
    <div class="section">{{Audio letter(s) - 2}}   {{Audio word - 2}}</div>
</div>
<br>
<div id="wrapper">
    <div class="section">{{Letter(s) - 3}}<br>
{{Symbol - 3}}</div>
    <div class="section">{{Word - 3}}<br>
{{Word_transcription - 3}}</div>
    <div class="section">{{Audio letter(s) - 3}}   {{Audio word - 3}}</div>
</div>

Вот код css^

#wrapper {
    width:320px;
    height:60px;
   /* background:#EFEFEF;*/
}
.section {
    border:solid 1px #999;
    float:left;
    height:58px;
    margin-left:10px;
    width:98px;
}
#wrapper div:first-child {
margin-left:0px;
}

Нужно бы выровнять блоки по горизонтали, как не знаю...