Test

Объявление

НАЗВАНИЕ ЭПИЗОДА
гостевая FAQ персонажи и внешности хочу к вам примерочная вопросы к АМС фичи форума

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Test » Тестовый форум » шаблоны duncan

шаблоны duncan

Страница: 1

Сообщений 1 страница 2 из 2

1

  • Автор: BugHunter
  • Администратор
  • Сообщений: 3
  • Уважение: +0

[html]<div id="heroes_list">
    <div class="heroes_text_left">
С другой стороны укрепление и развитие структуры влечет за собой процесс внедрения и модернизации существенных финансовых и административных условий. С другой стороны реализация намеченных плановых заданий способствует подготовки и реализации дальнейших направлений развития.
Повседневная практика показывает, что начало повседневной работы по формированию позиции позволяет оценить значение новых предложений. Идейные соображения высшего порядка, а также постоянное информационно-пропагандистское обеспечение нашей деятельности требуют от нас анализа существенных финансовых и административных условий. Задача организации, в особенности же постоянное информационно-пропагандистское
    <div>

    <div class="heroes_main">

    <span class="heroes_abc">a — b — c — d </span>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname very looooooooong</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

            <div class="heroes_pers">
            <span class="heroes_pers_title"> name surname</span>  <year>1960</year> <fcl> G’67</fcl>
            <h5>half-blood; order of the phoenix; hogwarts</h5>  
            </div>

   </div>
</div>

<style>

#heroes_list  {
   width: 880px;
   height: 600px;
   background: url(https://forumstatic.ru/files/001c/ad/71/99358.png);
   border-radius: 10px;
   margin: auto;
}

.heroes_text_left {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 7px 16px;
    width: 225px;
    height: 290px;
    margin: 180px 45px;
    font-size: 11.6px;
    letter-spacing: 0px;
    text-align: left;
    font-family: Pragmatica;
    font-weight: 400;
    font-style: Book;
    font-size: 10px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    text-transform: lowercase;

}

.heroes_main {
    position: absolute;
    display: flex;
    justify-content: left;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 515px;
    max-height: 340px;
    top: -20px;
    left: 280px;
    overflow-y: auto;
}

.heroes_pers {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    width: 220px;
    height: 30px;
    margin: 5px;
    padding: 10px;
    border: 1px solid #AFAFAF;
    border-radius: 10px;
    background: #CECECE80;
    box-shadow: 0 6px 6px rgba(0, 0, 0, 0.09);

}

.heroes_abc {
    display: block;
    width:100%;
    padding:10px 10px;
    font-family: Playfair Display;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 121%;
    letter-spacing: -5%;
}

.heroes_pers_title {
    display: flex;
    flex-direction: row;
    align-items: center;
   position: relative;
   padding-bottom: 3px;
   font-family: 'Playfair Display';
   font-style: normal;
   font-weight: 700;
   font-size: 13px;
   letter-spacing: 0.2px;
   color: #333333;

}

.heroes_pers h5 {
   font-family: Pragmatica;
   font-weight: 400;
   font-style: Book;
   font-size: 10px;
   leading-trim: NONE;
   line-height: 140%;
   letter-spacing: 0%;
   text-transform: lowercase;

}

.heroes_pers year {
   position: absolute;
   margin-top: -50px;
   margin-left: 110px;
   width: 42px;
   height: 14px;
   font-family: Pragmatica;
   font-weight: 400;
   font-style: Book;
   font-size: 10px;
   leading-trim: NONE;
   line-height: 140%;
   letter-spacing: 0%;
   text-transform: lowercase;
   background: #9E5740;
   padding: 1px;
   border: 1px solid #a3908a;
   border-radius: 10px;
   text-align:center;
   color: #e4e4e4;
}

.heroes_pers fcl {
    position: absolute;
    margin-top: -50px;
    margin-left: 170px;
    width: 42px;
    height: 14px;
    font-family: Pragmatica;
    font-weight: 400;
    font-style: Book;
    font-size: 10px;
    leading-trim: NONE;
    line-height: 140%;
    letter-spacing: 0%;
    text-transform: lowercase;
    background: #9E5740;
    padding: 1px;
    border: 1px solid #a3908a;
    border-radius: 10px;
    text-align: center;
    color: #e4e4e4;

}

</style>

[/html][hideprofile]

0

2

  • Автор: BugHunter
  • Администратор
  • Сообщений: 3
  • Уважение: +0

[html]

<div id="face_list">
    <div class="face_title">
    <h5> список занятых внешностей</h5>
представленные внешности ниже не подлежат дублированию, за исключением по разрешению игрока. <br>
выкупленные по заявкам и для игроков, а также придержанные отмечены в гостевой.</div>

<!------- abcd -------->
<div class="face_container">
<span class="face_container_title">abcd </span>
  <div class="list">

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

  </div>
</div>

<!------- efghi -------->
<div class="face_container">
<span class="face_container_title">efghi </span>
  <div class="list">

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

  </div>
</div>

<!------- jklmn-------->

<div class="face_container">
<span class="face_container_title">jklmn</span>
  <div class="list">

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

  </div>
</div>

<!------- opqr -------->

<div class="face_container">
<span class="face_container_title">opqr</span>
  <div class="list">

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

  </div>
</div>

<!------- stuv  -------->

<div class="face_container">
<span class="face_container_title">stuv</span>
  <div class="list">

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

  </div>
</div>

<!------- wxyz -------->

<div class="face_container">
<span class="face_container_title">wxyz</span>
  <div class="list">

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

    <div class="item">
      <div class="left">name surname</div>
      <div class="right"><a href="">name surname</a></div>
    </div>

  </div>
</div>

</div>

<style>

#face_list  {
   display:flex;
   align-items: flex-start;
   justify-content: space-evenly;
   flex-wrap: wrap;
   width: 880px;
   background: url(https://forumstatic.ru/files/001c/ad/71/89463.png);
   border-radius: 10px;
   margin: auto;
   border: 1px solid #bcbcbce6;
}

.face_title {
   display:flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: flex-start;
   width: 880px;
   max-height: 120px;
   background:#b5b5b585;
   margin: 20px 40px;
  padding:20px 50px;
  border-radius:10px;
}

.face_title h5 {
  display:flex;
  justify-content: space-around;
  width:100%;
  font-family: 'Playfair Display';
  font-weight: 700;
  font-style: Bold;
  font-size: 17px;
  leading-trim: NONE;
  line-height: 121%;
  letter-spacing: 0.5px;
  text-align: center;
  padding: 2px 10px;

}

.face_container {
  width: 360px;
  height: 330px;
  margin: 20px 10px;
  padding: 20px;
  background: #d8d8d8a6;
  border-radius: 8px;
  border: 1px solid #AFAFAF;
  overflow-y: auto;
}

.face_container_title {
    position: absolute;
    display: flex;
    width: 100%;
    font-family: Restrike;
    font-weight: 400;
    font-style: Demo;
    font-size: 64px;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
    margin-top: -75px;
    color: #AFAFAF;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  display:flex;
  justify-content: space-around;
  width:100%;
}

.item {
  display: flex;
  align-items: center;
  background: #ecebea;
  border-radius: 9px;
  overflow: hidden;
  height: 38px;
}

.left {
  background: #9c553c;
  color: #fff;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  border-radius: 9px;
  min-width: 160px;
}

.right {
  flex: 1;
  padding: 0 16px;
  color: #444;
  display: flex;
  align-items: center;
}

.right a {
  color: #353434;
}

.right a:hover {
  color: #9c553c!important;
}

</style>

[/html][hideprofile]

0

Страница: 1

Вы здесь » Test » Тестовый форум » шаблоны duncan

Рейтинг форумов | Создать форум бесплатно