@traskovp

Как сделать такое модальное окно?

Нужно сделать такое popup окно, никогда раньше таким не занимался, подскажите как такое можно сделать. И как сделать полоску внизу которая будет показывать из какой категории фотографии. Фото -
5ed62fec6caaf723146397.png
  • Вопрос задан
  • 93 просмотра
Решения вопроса 1
@fedor_filipev
Начинающий верстальщик и программист на Python
Если вы про вёрстку сайта
html
<section class="window">
  <div class="stat">
    <div class="name">Вика Антия</div>
    <ul class="stats">
      <li class="param">
       <div class="type">Рост</div>
       <div class="value">174</div>
      </li>
      <li class="param">
       <div class="type">Грудь</div>
       <div class="value">80</div>
      </li>
       <!-- параметры в таких же ливах (li)-->
    </ul>
  </div>
  <div class="container">
    <div class="section galery">
      <img src="адрес_фото">
      <img src="адрес_фото">
      <img src="адрес_фото">
      <!-- картинки -->
    </div>
    <div class="section news">
      <!-- Публикации в дивах -->
    </div>
    <div class="section coop">
      <!-- Сотрудничество -->
    </div>
    <div class="category">
      <div class="tab active">Портфолио</div>
      <div class="tab ">Публикации</div>
      <div class="tab ">Сотрудничество</div>
    </div>
  </section>

css
.window {
  position: fixed;
  top: 0;
  bottom: 10px;
  left: 0;
  right: 0;
  border: none;
  border-radius: 5%;
  box-shadow: 0 0 0 50px #E5E5E5;
  overflow: hidden;

  display: grid;
  grid-template-columns: 30% 70%;
}

.stat {
  border-top: 1px solid color: #252525;
  grid-column: 1 / 1;
  background-color: rgb(210,208,198);
  height: 100%;
}

.name {
  float: left;
  transform: rotate(-90deg) translateX(-500%);
  font: 20px 'Arial Black';
  color: #252525;
  /* Оформление и цвет текста заголовка с именем*/
}

.stats {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stats .param .type {
  color: gray;
}

.stats .param .value {
  color: #252525;
}

.container {
  grid-column: 2 / 2;
  background-color: #262626;
  height: 100%;
  padding-top: 10%;
  padding-bottom: 10%;
}

.section {
  width: 100%;
  height: 60%;
  display: none;
  margin-bottom: 10%;
}

.section.active {
  display: block;
}

.galery {
  display: flex;
  flex-direction: row;
  overflow-x: scroll;
}

.galery::-webkit-scrollbar {
  width: 0;
}

.galery img {
  height: 100%;
  margin: 20px;
}

.category {

}

.category .tab {
  position: relative;
  color: #454545;
  font: 25px 'Arial Black';
  display: inline-block;
  margin-left: 5%;
  margin-right: 5%;
}

.category .tab.active {
  color: rgb(131,130,126);
}

.category .tab.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  background: rgb(131,130,126);
  height: 5px;
  border-radius: 5%;
}

.category .tab:not(.active):hover {
  color: rgb(131,130,126);
  text-shadow: 0 0 5px #454545;
}

Вопрос ваш неточный, пишите в комментарии этому ответу
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы