[indent] Правила заполнения:
1. Добавлять одну организацию можно один раз. Редактировать - бесконечно.
2. Вместо двух картинок 225*160 можно использовать одну 225*350 - она будет находиться вертикально справа от списка на первой странице.
3. Можно редактировать пункты во вкладках (не сами названия вкладок!), кроме первой. То есть, если у вас в принципе нет конкурентов в дополнительных данных, то можете заменить эту графу на любую другую. Это делается легко в коде.
[html]
<div id="tabdoc">
<h1 id="tabtitle">Pupkina kontora</h1>
<div class="flex-b">
<div class="tabcontainer">
<ul class="tabs">
<li class="tab-link current" data-tab="app1">Описание</li>
<li class="tab-link" data-tab="app2">Участники</li>
<li class="tab-link" data-tab="app3">История</li>
<li class="tab-link" data-tab="app4">Доволнительные данные</li>
</ul>
</div>
<div class="tab-content app current" id="app1">
<h2>Основная информация</h2>
<div class="overview-i flex-c">
<img src="https://upforme.ru/uploads/001b/ff/42/4/779450.png"><br>
<img src="https://upforme.ru/uploads/001b/ff/42/4/779450.png">
<div class="overview-d">
<dl>
<dt>Название на русском</dt>
<dd>Пупкина контора</dd>
<dt>Специализация</dt>
<dd>Изготовление пупок и реализация пупкинпланов для пупкинкомфорта</dd>
<dt>Адрес главного офиса</dt>
<dd>Мухолустье, ул. Пупкинская, д.2</dd>
<dt>Законность</dt>
<dd>Самая законная контора из всех пупкинских контор</dd>
<dt>Теневая деятельность</dt>
<dd>Теневые пупки для теневых пупконосителей</dd>
</dl>
</div>
</div>
</div>
<div class="tab-content app" id="app2">
<h3>Владельцы</h3>
<dl>
<dt>Пупкинов Пупкин Пупкинский</dt>
<dd>Самый главный из всех пупиков в пупкинской конторе.</dd>
<dt>Младший Пупкин</dt>
<dd>Заместитель самого главного пупика.</dd>
<dt>Помощник Пупкина</dt>
<dd>Заместитель заместителя самого главного пупика.</dd>
</dl>
<h3>Работники</h3>
<dl>
<dt>Работник первый</dt>
<dd>Руководит первым цехом пупкоизготовления.</dd>
<dt>Работник второй</dt>
<dd>Руководит вторым цехом пупкоизготовления.</dd>
</dl>
<h3>Прочие</h3>
<dl>
<dt>Метёлочный пупик</dt>
<dd>Убирает за остальными пупиками.</dd>
<dt>Пупик-вандал</dt>
<dd>Охраняет и убивает неугодных главному пупику пупиков.</dd>
</dl>
</div>
<div class="tab-content app" id="app3">
<h2>Об организации</h2>
<p>Пупки начали свой путь до нашей эры и долго воевали за свою власть.</p>
<p>До сих пор идет набор пупиков.</p>
</div>
<div class="tab-content app" id="app4">
<h2>Заметки, факты</h2>
<dl>
<dt>Связи с остальными конторами</dt>
<dd>
<p>Много и всяких разных.</p>
</dd>
<dt>Конкуренты</dt>
<dd>
<p>Все пупики мира.</p>
</dd>
</dl>
</div>
</div>
</div>
<style>/*******************************
Example Styles
========================
you probably won't keep these.
*******************************/
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
text-transform: uppercase;
}
h2, h3 {
margin-bottom: 1em;
}
a.mgroup-6 {
color: #d461d4;
}
a.mgroup-7 {
color: #d29f42;
}
a.mgroup-8 {
color: #44bd44;
}
a.mgroup-9 {
color: #5555fd;
}
.flex-b {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.flex-c {
display: flex;
justify-content: space-around;
align-items: left;
}
/*******************************
Tabbed Documents
*******************************/
/* =============
SHARED STYLES
============= */
div#tabdoc {
margin: 0;
margin-bottom: 25px;
margin-left: 5px;
margin-right: 5px;
width: 75%;
font: 14px/1.5em "Roboto Condensed";
}
.tabcontainer {
border-right: 1px solid;
flex: 0 0 80px;
}
ul.tabs {
margin: 0px;
padding: 30px 10px 10px;
list-style: none;
position: sticky;
top: 85px;
box-sizing: border-box;
text-align: left;
letter-spacing: 0.05em;
text-transform: uppercase;
}
ul.tabs strong {
font-weight: 400;
}
ul.tabs li {
display: block;
position: relative;
cursor: pointer;
margin: 0 10px 5px 0;
}
ul.tabs li:hover, li.tab-link.current {
margin-bottom: 4px;
border-bottom: 1px solid;
}
.tab-content {
display: none;
visibility: hidden;
opacity: 0;
padding: 4% 0 0 4%;
min-height: 160px;
letter-spacing: 0.05em;
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
.tab-content.current {
display: block;
flex-grow: 2;
width: 100%;
box-sizing: border-box;
visibility: visible;
opacity: 1;
animation: fade 1s;
}
.tab-content p {
text-align: justify;
margin: 5px 20px;
}
.tab-content b {
opacity: .7;
font-weight: 400;
text-transform: uppercase;
font-size: .9em;
}
.tab-content ul {
width: 49%;
vertical-align: top;
box-sizing: border-box;
list-style-type: none;
display: inline-block;
padding: 0 4%;
margin-top: 0;
text-align: center;
font-size: .9em;
}
#tabtitle {
border-bottom: 1px solid;
font-size: 18px;
}
#tabdoc dl {
margin: 0 10px 20px;
padding: 0;
}
#tabdoc dt {
border-bottom: 1px solid;
text-transform: uppercase;
letter-spacing: .1em;
margin-top: 1em;
}
#tabdoc dd {
padding: .5em;
margin: 0 0 0 3em;
border-left: 1px solid;
text-align: justify;
}
#tabdoc h2 {
text-align: right;
border: 1px solid;
padding: .5em 1em;
}
#tabdoc h3 {
text-align: center;
margin: 1.5em 0;
}
/* ===================
APP SPECIFIC STYLES
=================== */
.overview-i {
flex-wrap: wrap;
}
.overview-i img {
padding: 5px;
border: 1px solid;
}
.overview-d {
flex: 2;
padding: 0 0 0 20px;
}
#app1 dt {
margin-top: 10px;
}
#app3 p {
font-size: 15px;
margin: 1.25em .5em;
}
#tabdoc .app dd p {
margin: 15px 0;
font-size: inherit;
letter-spacing: inherit;
line-height: inherit;
}
.playerdeets {
margin-top: -1.85em;
border: 1px solid;
border-top: 0;
padding-top: 1em;
}
/* ===================
LORE SPECIFIC STYLES
=================== */
.img-row img {
border: 1px solid #919191;
padding: 5px;
height: auto;
background-color: #acacac;
width: 30%;
max-width: 150px;
}
/* set the border color for everything */
#tabdoc * {
border-color: #b5b5b5 !important;</style>
<head><link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet">
<script>
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
</script></head>[/html]
[html]
<div id="tabdoc">
<h1 id="tabtitle">Pupkina kontora</h1>
<div class="flex-b">
<div class="tabcontainer">
<ul class="tabs">
<li class="tab-link current" data-tab="app1">Описание</li>
<li class="tab-link" data-tab="app2">Участники</li>
<li class="tab-link" data-tab="app3">История</li>
<li class="tab-link" data-tab="app4">Доволнительные данные</li>
</ul>
</div>
<div class="tab-content app current" id="app1">
<h2>Основная информация</h2>
<div class="overview-i flex-c">
<img src="https://upforme.ru/uploads/001b/ff/42/4/779450.png"><br>
<img src="https://upforme.ru/uploads/001b/ff/42/4/779450.png">
<div class="overview-d">
<dl>
<dt>Название на русском</dt>
<dd>Пупкина контора</dd>
<dt>Специализация</dt>
<dd>Изготовление пупок и реализация пупкинпланов для пупкинкомфорта</dd>
<dt>Адрес главного офиса</dt>
<dd>Мухолустье, ул. Пупкинская, д.2</dd>
<dt>Законность</dt>
<dd>Самая законная контора из всех пупкинских контор</dd>
<dt>Теневая деятельность</dt>
<dd>Теневые пупки для теневых пупконосителей</dd>
</dl>
</div>
</div>
</div>
<div class="tab-content app" id="app2">
<h3>Владельцы</h3>
<dl>
<dt>Пупкинов Пупкин Пупкинский</dt>
<dd>Самый главный из всех пупиков в пупкинской конторе.</dd>
<dt>Младший Пупкин</dt>
<dd>Заместитель самого главного пупика.</dd>
<dt>Помощник Пупкина</dt>
<dd>Заместитель заместителя самого главного пупика.</dd>
</dl>
<h3>Работники</h3>
<dl>
<dt>Работник первый</dt>
<dd>Руководит первым цехом пупкоизготовления.</dd>
<dt>Работник второй</dt>
<dd>Руководит вторым цехом пупкоизготовления.</dd>
</dl>
<h3>Прочие</h3>
<dl>
<dt>Метёлочный пупик</dt>
<dd>Убирает за остальными пупиками.</dd>
<dt>Пупик-вандал</dt>
<dd>Охраняет и убивает неугодных главному пупику пупиков.</dd>
</dl>
</div>
<div class="tab-content app" id="app3">
<h2>Об организации</h2>
<p>Пупки начали свой путь до нашей эры и долго воевали за свою власть.</p>
<p>До сих пор идет набор пупиков.</p>
</div>
<div class="tab-content app" id="app4">
<h2>Заметки, факты</h2>
<dl>
<dt>Связи с остальными конторами</dt>
<dd>
<p>Много и всяких разных.</p>
</dd>
<dt>Конкуренты</dt>
<dd>
<p>Все пупики мира.</p>
</dd>
</dl>
</div>
</div>
</div>
<style>/*******************************
Example Styles
========================
you probably won't keep these.
*******************************/
h1, h2, h3, h4 {
margin: 0;
font-weight: normal;
text-transform: uppercase;
}
h2, h3 {
margin-bottom: 1em;
}
a.mgroup-6 {
color: #d461d4;
}
a.mgroup-7 {
color: #d29f42;
}
a.mgroup-8 {
color: #44bd44;
}
a.mgroup-9 {
color: #5555fd;
}
.flex-b {
display: flex;
justify-content: space-between;
align-items: stretch;
}
.flex-c {
display: flex;
justify-content: space-around;
align-items: left;
}
/*******************************
Tabbed Documents
*******************************/
/* =============
SHARED STYLES
============= */
div#tabdoc {
margin: 0;
margin-bottom: 25px;
margin-left: 5px;
margin-right: 5px;
width: 75%;
font: 14px/1.5em "Roboto Condensed";
}
.tabcontainer {
border-right: 1px solid;
flex: 0 0 80px;
}
ul.tabs {
margin: 0px;
padding: 30px 10px 10px;
list-style: none;
position: sticky;
top: 85px;
box-sizing: border-box;
text-align: left;
letter-spacing: 0.05em;
text-transform: uppercase;
}
ul.tabs strong {
font-weight: 400;
}
ul.tabs li {
display: block;
position: relative;
cursor: pointer;
margin: 0 10px 5px 0;
}
ul.tabs li:hover, li.tab-link.current {
margin-bottom: 4px;
border-bottom: 1px solid;
}
.tab-content {
display: none;
visibility: hidden;
opacity: 0;
padding: 4% 0 0 4%;
min-height: 160px;
letter-spacing: 0.05em;
-webkit-transition: opacity 600ms, visibility 600ms;
transition: opacity 600ms, visibility 600ms;
}
.tab-content.current {
display: block;
flex-grow: 2;
width: 100%;
box-sizing: border-box;
visibility: visible;
opacity: 1;
animation: fade 1s;
}
.tab-content p {
text-align: justify;
margin: 5px 20px;
}
.tab-content b {
opacity: .7;
font-weight: 400;
text-transform: uppercase;
font-size: .9em;
}
.tab-content ul {
width: 49%;
vertical-align: top;
box-sizing: border-box;
list-style-type: none;
display: inline-block;
padding: 0 4%;
margin-top: 0;
text-align: center;
font-size: .9em;
}
#tabtitle {
border-bottom: 1px solid;
font-size: 18px;
}
#tabdoc dl {
margin: 0 10px 20px;
padding: 0;
}
#tabdoc dt {
border-bottom: 1px solid;
text-transform: uppercase;
letter-spacing: .1em;
margin-top: 1em;
}
#tabdoc dd {
padding: .5em;
margin: 0 0 0 3em;
border-left: 1px solid;
text-align: justify;
}
#tabdoc h2 {
text-align: right;
border: 1px solid;
padding: .5em 1em;
}
#tabdoc h3 {
text-align: center;
margin: 1.5em 0;
}
/* ===================
APP SPECIFIC STYLES
=================== */
.overview-i {
flex-wrap: wrap;
}
.overview-i img {
padding: 5px;
border: 1px solid;
}
.overview-d {
flex: 2;
padding: 0 0 0 20px;
}
#app1 dt {
margin-top: 10px;
}
#app3 p {
font-size: 15px;
margin: 1.25em .5em;
}
#tabdoc .app dd p {
margin: 15px 0;
font-size: inherit;
letter-spacing: inherit;
line-height: inherit;
}
.playerdeets {
margin-top: -1.85em;
border: 1px solid;
border-top: 0;
padding-top: 1em;
}
/* ===================
LORE SPECIFIC STYLES
=================== */
.img-row img {
border: 1px solid #919191;
padding: 5px;
height: auto;
background-color: #acacac;
width: 30%;
max-width: 150px;
}
/* set the border color for everything */
#tabdoc * {
border-color: #b5b5b5 !important;</style>
<head><link href="https://fonts.googleapis.com/css?family=Roboto+Condensed&display=swap" rel="stylesheet"><script>
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
</script></head>[/html]- Подпись автора
past: Let me be your superhero call out my name The song of ice and powder beside you
present:
masked: Everybody wants to be my enemy
