Create a markup for Bingo cards generator

ПЕРВОЕ НЕБОЛЬШОЕ ЗАДАНИЕ

[x] Создать на страничке основной контейнер и правильно (согласно макету) спозиционировать его, задать основные размеры;
[x] Написать сразу @media блок в CSS для прописания адаптива;
[x] Описать в CSS стиль для основного контейнера для маленьких экранов;
[x] Написать в HTML основные "коробки" / контейнеры, можно использовать обычные блочные
для них;
[x] Описать в CSS необходимые правила для соответствующего макету отображения коробочек на всех экранах;
[x] Вставить тэг
в первый контейнер;
[x] Написать внутренний HTML код для элементов формы, используя , , 2 <select>, 2 <button>;</li> <li>[ ] Описать в CSS правила для формы чтобы она выглядела соответствующим образом;</li> <li>[ ] Освежить в памяти / прочитав в любом справочнике по HTML правильное описание тэгов форм, проверить себя не забыты ли какие-нибудь важные атрибуты в этих тэгах;</li> </ul> <p>Можешь это всё проделывать у меня на виду, сперва или вообще</p> <ul> <li>[ ] Созвониться со мной и обсудить эту часть работы;</li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/abobykin"><img src="https://avatars.githubusercontent.com/u/1357919?v=4" />abobykin</a> commented <strong> 3 weeks ago</strong> </div> <div class="markdown-body"> <p>@Reasonab1e Костя привет! </p> <p>Вижу вот здесь коммит - <a href="https://github.com/abobykin/bingo/commits/main/">https://github.com/abobykin/bingo/commits/main/</a></p> <p>НО, давай в следующий раз коммент писать к комиту вот так "Create a markup for Bingo cards generator #1 - {{Какой-то текст что сделано}}" Вот эта часть "#1" привяжет его к этому активному тикету (Issue). </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/abobykin"><img src="https://avatars.githubusercontent.com/u/1357919?v=4" />abobykin</a> commented <strong> 3 weeks ago</strong> </div> <div class="markdown-body"> <p>@Reasonab1e Правки:</p> <ul> <li>[x] Подправить состояние полей :focus сделать толщиной 1px примерно тем же цветом, но потемнее</li> </ul> <img width="488" alt="Screenshot 2024-06-10 at 17 23 58" src="https://github.com/abobykin/bingo/assets/1357919/6ec3d790-3761-4860-b256-5a8200f13c99"> <ul> <li>[x] Текущее состояние кнопки "Start" это inactive (или disabled как больше нравится), добавить соответствующий класс и стиль (в том числе для курсора, должно быть нельзя нажать на кнопку), у кнопки так же должно быть и нормальное состояние (см. Фигму), без класса inactive (или disabled) <a href="https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_disabled">https://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_disabled</a></li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/abobykin"><img src="https://avatars.githubusercontent.com/u/1357919?v=4" />abobykin</a> commented <strong> 3 weeks ago</strong> </div> <div class="markdown-body"> <p>@Reasonab1e Следующие шаги сделать/проверить:</p> <ul> <li> <p>[x] Доверстать колонку с Бинго как для 5<em>5, так и для 3</em>3, переключаться будет навеской на контейнер содержащий маленькие эти карточки дополнительного класса, и уточняющими вёрстку дополнительными CSS правилами когда этот доп. класс повешен;</p> </li> <li> <p>[x] Удостовериться что выглядит хорошо в мобиле, для обоих наскладок, по 5 и по 3 в строку/столбец;</p> </li> <li> <p>[x] Сверстать широкоформатное "Бинго", так же засчёт доп. класса и нужных CSS правил;</p> </li> <li> <p>[x] Подверстать внутри маленькой карточки состояние когда показан не значок а блок с текстом дела для выполнения;</p> </li> <li> <p>[x] Созвониться - завершить / продвинуть это дальше если что-то застрянет и/или в любом случае закоммитить / показать прогресс.</p> </li> </ul> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/abobykin"><img src="https://avatars.githubusercontent.com/u/1357919?v=4" />abobykin</a> commented <strong> 1 week ago</strong> </div> <div class="markdown-body"> <ul> <li>[ ] Нужно сделать чтобы работало и выглядело как на этом скриншоте отмечание сделанных дел</li> </ul> <img width="1183" alt="Screenshot 2024-06-23 at 14 29 49" src="https://github.com/abobykin/bingo/assets/1357919/109b8e4f-35e1-401c-afe8-91e7f3259b5e"> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/abobykin"><img src="https://avatars.githubusercontent.com/u/1357919?v=4" />abobykin</a> commented <strong> 1 week ago</strong> </div> <div class="markdown-body"> <ul> <li>[x] Check all the UI markup and make sure it's looking exactly as it should be for mobile version</li> </ul> <img width="482" alt="Screenshot 2024-06-24 at 19 38 52" src="https://github.com/abobykin/bingo/assets/1357919/1c921c01-fda7-4675-9174-c75c4b198f4f"> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/abobykin"><img src="https://avatars.githubusercontent.com/u/1357919?v=4" />abobykin</a> commented <strong> 1 week ago</strong> </div> <div class="markdown-body"> <p>@Reasonab1e Could you please assign this Issue (#1) to me after you will finish what is requested above.</p> <p>We definitely will proceed in the next issues for what is left in this project.</p> <p>Thank you!</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

abobykin / bingo

Create a markup for Bingo cards generator #1