Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
2 / 2 / 1
Регистрация: 28.03.2020
Сообщений: 39
1

Идея для создание блока

29.07.2020, 19:55. Показов 1023. Ответов 8

Здравствуйте, может кто поделится идей как бы он создавала этот блок.
Идея для создание блока

Я думал создать путем рамки с радиусом для заднего фоно НО там окружность меньше чем задний фон и в дополнение там дожна быть нумерация.
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
29.07.2020, 19:55
Ответы с готовыми решениями:

Создание блока для комментариев на странице
Привет надо сверстать что-то типа такого как на изображении. Комментарий один с одной стороны,...

Установить размер для блока :before такой же, как у блока которому прописывается псевдоэлемент
Суть в том, что мне нужно сделать так, чтобы блок ::before проходил через середину блока .number и...

Создание своей собственной прокрутки для блока
Всем привет. Вот периодически натыкаюсь на сайтах на различные колонки новостей у которых имеется...

Идея(создание онлайн базы игроков)
Не встречал такого,(исключение) только по определенной игре. Написание с нуля. Сайт на котором...

8
37 / 25 / 12
Регистрация: 23.03.2020
Сообщений: 138
30.07.2020, 09:22 2
Здравствуйте! Скажите, пожалуйста, какие исходники у Вас есть? В идеале нужно здание в формате png и окружность с номерами и надписями в формате png или svg. Мы поместим на страницу окружность и зададим здание фоном
0
2 / 2 / 1
Регистрация: 28.03.2020
Сообщений: 39
30.07.2020, 16:42  [ТС] 3
Здравствуйте, сам макет находится в figma https://www.figma.com/file/Idz... e-id=0%3A1
0
237 / 160 / 67
Регистрация: 18.06.2016
Сообщений: 509
01.08.2020, 17:00 4
Я так понимаю в мобильной версии его нету этого блока значит просто удалить на брекпоинте его а этот для декстопа втавить картинкой. Потом удалить его и в планшетной версии, может и не заметят а если заметят, то можно будет так же картинкой поставить. Халтура короче
0
93 / 80 / 49
Регистрация: 04.04.2014
Сообщений: 260
01.08.2020, 17:21 5
Я бы сделала здание и круг фоном, а текст и нумерацию всё-таки текстом. Выровнять позиционированием или margin'ами, скорее всего ещё и высоту для текста задать с overflow: hidden.
В адаптиве скрыть фон, блоки с текстом и нумерацией выровнять по левому краю или совсем скрыть, как выше предлагали.
0
237 / 160 / 67
Регистрация: 18.06.2016
Сообщений: 509
01.08.2020, 18:33 6
Цитата Сообщение от Crystal-3 Посмотреть сообщение
Выровнять позиционированием или margin'ами
каким образом? Десятками брек поинтов? Можно что-то придумать я не спорю умное, но ...
0
2 / 2 / 1
Регистрация: 28.03.2020
Сообщений: 39
01.08.2020, 21:02  [ТС] 7
Спасибо за идеи. Что то получалось что то нет НО я решил сойтись на том что бы выкинуть их из потока тем самым налажить друг на друга и задать отступы.
0
Эксперт PHP
2983 / 2503 / 1180
Регистрация: 14.05.2014
Сообщений: 7,071
Записей в блоге: 1
01.08.2020, 21:06 8
Цитата Сообщение от Crystal-3 Посмотреть сообщение
В адаптиве скрыть фон
Если вы заглянете в макет, ссылку на который ТС дал парой сообщений выше, то увидите, что там есть мобильная версия, в которой этот блок отсутствует в принципе. Поэтому display: none для всего блока в медиа-запросе может избавить от головной боли и лишних телодвижений
1
93 / 80 / 49
Регистрация: 04.04.2014
Сообщений: 260
01.08.2020, 23:43 9
Лучший ответ Сообщение было отмечено vladimirribakov как решение

Решение

Kerry_Jr, отлично, тогда просто display:none. ТС в первом посте спрашивал идею, ему и ответила.

Цитата Сообщение от Alex Web Посмотреть сообщение
каким образом? Десятками брек поинтов? Можно что-то придумать я не спорю умное, но ...
зачем десятки брекпоинтов??? вообще-то я такой вариант предлагала https://jsfiddle.net/tnvkdy4o/
и где-то на 991 можно скрывать этот блок.

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
       <div class="steps">
           <div class="steps__list">
               <div class="steps__item steps__item-1">Наш специалист приедет для замеров в день контакта или назначит удобную для вас дату</div>
               <div class="steps__item steps__item-2">Бесплатный замер</div>
               <div class="steps__item steps__item-3">Бесплатная консультация</div>
               <div class="steps__item steps__item-4">Получите смету расходов и сроки вашего будущего ремонта</div>
           </div>
       </div>
       <div class="form-callback">Оставьте заявку на бесплатный выезд замерщика</div>
   </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
.container {
  width: 100%;
  max-width: 1235px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: flex-end;
  overflow: hidden;
}
.steps {
  width: 830px;
  flex-shrink: 0;
  background: url(http://htmltest555.ru/bg.png) no-repeat 0 0;
  height: 636px;
  font-size: 18px;
}
.steps__list {
  counter-reset: count;
  position: relative;
}
.steps__item {
  max-width: 420px;
  display: flex;
  align-items: center;
  position: absolute;
}
.steps__item-1 {
  top: 122px;
  left: 354px;
}
.steps__item-2 {
  top: 226px;
  left: 431px;
}
.steps__item-3 {
  top: 388px;
  left: 455px;
}
.steps__item-4 {
  top: 554px;
  left: 383px;
}
.steps__item:before {
  counter-increment: count;
  content: counter(count, decimal-leading-zero);
  width: 41px;
  height: 41px;
  background-color: #E3B873;
  border-radius: 50%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 21px;
}
.form-callback {
  width: 40%;
  background-color: #131313;
  flex-shrink: 0;
}
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
01.08.2020, 23:43

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Блока питания для конкретной сборки системного блока
Доброго времени суток. Подскажите, пожалуйста, можно ли использовать (правильней сказать -...

ООП C++ Нужна идея для игры, которая для экзамена
Здравствуйте. Есть такое задание: Написать игру. В игре управлять каким-либо объектом, например,...

Идея для турсвайта
Народ, тут человек хочет сдеть вот такой сайт https://yadi.sk/i/5ucMLr4J3Ppumy вопрос как и на...

Идея для проекта
Доброго времени суток, формунчане) Собираюсь поступать в МГТУ на ИУ7(Программное обеспечение ЭВМ и...

Идея для проекта
Добрый день. Появилась идея веб проекта. Погуглил, но такого сервиса не нашёл. Хотел бы спросить,...

Идея для квеста
Здравствуйте, у меня к вам такой вопрос: я хочу написать игру-квест, только не могу определиться с...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.