👩‍💻 Создание адаптивного круга с текстом по центру

Создайте круглый элемент с текстом по центру. Круг должен адаптироваться под размер экрана: на больших экранах его размер — 200px, на планшетах — 150px, а на мобильных устройствах — 100px.

Ожидаемое поведение:

• Круглый элемент с текстом по центру.
• Размер круга меняется в зависимости от ширины экрана.

Решение задачи🔽

<div class="circle">Текст</div>

.circle {
display: flex;
align-items: center;
justify-content: center;
background-color: #4CAF50;
color: white;
border-radius: 50%;
text-align: center;
font-size: 1.2em;
}

/* Размер для больших экранов */
@media (min-width: 1024px) {
.circle {
width: 200px;
height: 200px;
}
}

/* Размер для планшетов */
@media (min-width: 768px) and (max-width: 1023px) {
.circle {
width: 150px;
height: 150px;
}
}

/* Размер для мобильных устройств */
@media (max-width: 767px) {
.circle {
width: 100px;
height: 100px;
}
}

👩‍💻 Шорткаты VS Code, с которыми ввод кода напоминает игру на пианино

Застряли в замкнутом круге "клавитура-мышка", из-за которого устаете и теряете время при написании кода? Представляем вашему вниманию полезные шорткаты VS Code, которые избавят от этих проблем.

Читать...

👩‍💻 Сравнение способов отрисовки спрайтов в canvas

Статья описывает исследование различных методов отрисовки изображений в HTML5 Canvas для браузерных игр с мультиплеером. Автор делится находками по оптимизации производительности, основанными на проекте для курсовой.

Читать...

👩‍💻 CSS Веерное раскрытие с grid и @property

Анимация веерное раскрытие подразумевает последовательное раскрытие элементов из стопки с эффектом подпрыгивания. Используя CSS grid, мы избавляемся от лишней работы по позиционированию.

Читать...

👩‍💻 Всё ли ты знаешь о работе с асинхронностью?

Думаете, что знаете вообще все об асинхронности в JavaScript? Уверены, что так оно и есть. Но проверить свои знания никогда не помешает — для этого как раз собрали эту небольшую викторину.

Читать...