КодВеб | Дизайн База

❔Как красиво оформить меню с блюдами на сайте? HTML:

<ul class="menu">
  <li>Салаты</li>
  <li><span>"Греческий"</span><em>320</em></li>
  <li><span>"Цезарь"</span><em>430</em></li>
  <li><span>"Теплый салат с куриной печенью"</span><em>300</em></li>
  <li><span>"Оливье"</span><em>350</em></li>
  <li><span>"Морской"</span><em>450</em></li>
</ul>

CSS:

.menu {
list-style: none;
padding: 0;
border: 1px solid rgba(0,0,0, .2);
}
.menu li {
overflow: hidden;
padding: 6px 10px;
font-size: 20px;
}
.menu li:first-child {
font-weight: bold;
padding: 15px 0 10px 15px;
margin-bottom: 10px;
border-bottom: 1px solid rgba(0,0,0, .2);
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
color: #679bb7;
font-size: 24px;
box-shadow: 0 10px 20px -5px rgba(0,0,0, .2);
}
.menu li:first-child:before {
content: "\2749";
margin-right: 10px;
}
.menu span {
float: left;
width: 75%;
color: #7C7D7F;
}
.menu em {
float: right;
color: #9c836e;
font-weight: bold;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

Устал от бесконечного поиска информации по JavaScript? JavaScipt Notes - это актуальные и интересные материалы, обучающие видеоуроки, шпаргалки, GitHub репозитории и многое другое. 🚀 Стань частью сообщества профессионалов и начинающих разработчиков прямо сейчас! Становись лучше с @jsn0tes.

👩‍💻 BLOG Сайт-блог под Wordpress. 🟠 Сложность: Средний 🟠 Адаптивность: Нет Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

👨‍💻 Music Player with slider Музыкальный плеер со слайдером и выбором песен. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔Как скрыть элемент?

Изменить видимость элемента можно тремя способами:

1️⃣С помощью display: none; Элемент полностью исчезает с веб-страницы, не оставляя и следа. 2️⃣Задав для элемента visibility: hidden;. Данный способ убирает элемент из вида, при этом не затрагивая поток html-документа, оставляя пустое пространство в том месте, где данный элемент должен был находиться. 3️⃣С помощью свойства opacity. Значение opacity: 0; делает прозрачным весь элемент целиком, включая его содержимое, а не только фон элемента. Данный способ действует аналогично с visibility: hidden, отличие состоит лишь в том, что свойство opacity введено в спецификацию CSS3. Для абсолютно позиционированных элементов visibility: hidden и display: none ведут себя одинаково. Чтобы показать невидимый элемент, можно использовать псевдокласс :hover, например:

.submenu {
display: none;
}
.submenu:hover {
display: block;
}

CSS-свойство, отвечающее только за видимость элементов — это свойство visibility. Оно принимает следующие значения: visibility: visible; — элемент видимый по умолчанию; visibility: hidden; — элемент становится невидимым, находясь при этом на своем месте. В то же время элементы-потомки невидимого элемента можно сделать видимыми, например:

p {
visibility: hidden;
}
p strong {
visibility: visible;
}

visibility: collapse; — данное свойство применяется для табличных элементов, делая ячейки таблицы невидимыми. Если это свойство используется для остальных элементов, то оно работает аналогично с visibility: hidden;; visibility: inherit; — наследует это свойство от родительского элемента. @codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

Присоединяйтесь к нашему бесплатному курсу и начните увлекательное путешествие в мир Java! Изучайте основы, создавайте программы, разбирайтесь с методами и анализируйте ошибки в коде. Практика, упражнения и проверочные тесты помогут вам освоить навыки программирования. 🎓 Чему вы научитесь: — Создавать программы с использованием основных конструкций языка.  — Разделять код на методы для повторного использования.  — Анализировать ошибки в коде с использованием отладочной печати. 💼 Включено в курс: 29 уроков (видео и/или текст), 35 упражнений в тренажере, 95 проверочных тестов + дополнительные материалы. Вы с нами?😉

👩‍💻 MOLENHAUER Сайт о строительстве. 🟠 Сложность: Сложный 🟠 Адаптивность: Есть Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

Факт №1: 90% фрилансеров не зарабатывают на фриланс биржах достаточно денег, что бы закрыть свои базовые потребности, не говоря уже о путешествиях и остальном. Факт №2: Подавляющее количество новичков, прошедших обучение на веб дизайнера, верстальщика, программиста в первый год не заработают нормальных денег, просто потому что для стабильного дохода в какой-либо области необходимо быть опытным специалистом. Но решение есть. Основные нюансы можно узнать запустив бот Внеконкурентного Подхода На нём рассказывается, как зарабатывать на веб разработке ПОЛНОГО ЦИКЛА. — Без фриланс бирж — Без наработки собственного портфолио — Без необходимости быть опытным специалистом — Без работодателей — Без круглосуточного прожигания глаз возле монитора Запустите бота и будьте внедрите в свою жизнь стабильный заработок на разработке сайтов, а фриланс оставьте тем, у кого есть на это время и нервы. Бот: @vp_podhod_bot

👨‍💻 50/50 with scroll container Две колонки в одной, одна из которых с возможностью прокрутки. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔Как сделать таблицу с раздельными строками? Таблицы с промежутками между строк помогают сконцентрироваться на связанной информации, расположенной в этой же строке таблицы, но в соседних ячейках. Для того, чтобы отделить текст от картинки, помещаем его в другую ячейку, объединив при этом две ячейки в заголовке таблицы (<th colspan="2">Модель</th>), а правую границу между ячейками убираем. HTML:

<table>
<tr>
  <th colspan="2">Модель</th>
  <th>Цена</th>
  <th>Количество</th>
  <th>Итого</th>
</tr>
<tr>
  <td><img src="image.jpg"></td>
  <td>Платье с цветочным принтом</td>
  <td>2500</td>
  <td>1</td>
  <td>2500</td>
</tr>
<tr>
  <td><img src="image.jpg"></td>
  <td>Платье с боковыми вставками</td>
  <td>3000</td>
  <td>1</td>
  <td>3000</td>
</tr>
</table>

CSS:

table {
border-spacing: 0 10px;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
}
th {
padding: 10px 20px;
background: #56433D;
color: #F9C941;
border-right: 2px solid; 
font-size: 0.9em;
}
th:first-child {
text-align: left;
}
th:last-child {
border-right: none;
}
td {
vertical-align: middle;
padding: 10px;
font-size: 14px;
text-align: center;
border-top: 2px solid #56433D;
border-bottom: 2px solid #56433D;
border-right: 2px solid #56433D;
}
td:first-child {
border-left: 2px solid #56433D;
border-right: none;
}
td:nth-child(2){
text-align: left;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

Хочешь освоить или улучшить свои навыки во фронтенде? В канале Frontend Developer есть всё необходимое — бесплатные курсы по фронтенду(HTML, CSS, JS , React и др.), готовый код, полезные ресурсы и статьи. А также чат, где мы помогаем друг другу и делимся опытом Обучайтесь бесплатно вместе с @byFrontDeveloper

👩‍💻 GOOD4ME Сайт лекарственной продукции. 🟠 Сложность: Средний 🟠 Адаптивность: Нет Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

Кто из айтишников зарабатывает миллион в месяц? Вы удивитесь, но дата-сайентист GigaChat. Он управляет массивами данных и выбирает, чем «кормить» нейросеть. И это все его обязанности. Если хотите так же выйти на шестизначную зарплату, быстрее открывайте эти каналы: — Data Science | Machinelearning; — About Python. Узнаете, как легко добиться оффера в Data Science. Получите готовые модели данных и гайды, как их тестировать. Нейросети — мусор без дата-сайентистов. Используйте тренд на благо своей карьеры: — Data Science | Machinelearning; — About Python.

👨‍💻 Leaping Like Виджет с четырьмя реакциями с анимацией. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

▫️ Как пройти собеседование на английском  ▫️ Подборка выражений для описания коллег  ▫️ Weird English Idioms Еще больше английского для работы и жизни на канале «Гапонова и ее английский». Лена Гапонова — автор курсов Gaponova school, преподаватель с 16-летним стажем и опытом в международных IT-компаниях — объясняет сложное в английской грамматике, знакомит с интересными выражениями, учит правильному произношению и помогает подружиться с английским языком.  Помимо английского, Лена рассказывает про методику, эффективное обучение, собеседование на английском и жизнь в других странах. 📌Еще больше про английский на @gaponova erid: LjN8K47Po

❔Как сделать и оформить многоуровневый нумерованный список? Списки используются для структурирования информации. Нумерованные списки полезны в тех случаях, когда нужно определить порядок изложения. Многоуровневые списки удобны, когда в одном пункте есть несколько подпунктов. Многоуровневые списки отличаются от обычных списков наличием отступов. HTML:

<ol class="list">
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a>
    <ol class="sublist">
      <li><a href="">Элемент вложенного списка первого уровня</a>
        <ol class="sublist2">
          <li><a href="">Элемент вложенного списка второго уровня</a></li>
          <li><a href="">Элемент вложенного списка второго уровня</a></li>
          <li><a href="">Элемент вложенного списка второго уровня</a></li>
        </ol>
      </li>
      <li><a href="">Элемент вложенного списка первого уровня</a></li>
      <li><a href="">Элемент вложенного списка первого уровня</a></li>
    </ol>
  </li>
  <li><a href="">Элемент списка</a></li>
  <li><a href="">Элемент списка</a></li>   
</ol>

CSS:

ol {
   counter-reset: li;
   list-style: none;
   margin: 0;
   font-family: 'Didact Gothic', sans-serif;
   /*подключаем через Google Web Fonts*/
}
li:before {
   counter-increment: li;
   content: counters(li, ".") ". ";
   padding: 5px 0;
   display: inline-block;
   margin-right: 5px;
   border-radius: 3px;
   color: white;
   text-align: center;
   width: 50px;
   transition: .4s linear;
}
.list a {
   display: inline-block;
   padding: 5px;
   text-decoration: none;
   color: #716B65;
   margin: 5px 0;
}
.list>li:before {
   background: #2D5957;
}
.list>li:hover:before {
   background: #112221;
}
.sublist>li:before {
   background: #3AA898;
}
.sublist>li:hover:before {
   background: #215f56;
}
.sublist2>li:before {
   background: #8DC6B3;
}
.sublist2>li:hover:before {
   background: #55aa8e;
}

@codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

Дайте старт вашей карьере с нашим бесплатным курсом по JavaScript! 🎓 Курс включает 39 уроков, 46 упражнений и 129 тестов для закрепления знаний. Вы освоите создание программ с использованием основных конструкций языка, сможете составлять программы из нескольких модулей и научитесь анализировать ошибки в коде с помощью отладочной печати. 💡 Научитесь не только теории, но и применять знания на практике. Поддержка в «Обсуждениях» поможет вам разобраться с темами, которые вызывают трудности. Обучение с самого нуля, с акцентом на практику. Подходит для начинающих программистов! Добро пожаловать в мир JavaScript😉

👩‍💻 AFISHA Сайт-афиша театра. 🟠 Сложность: Легкий 🟠 Адаптивность: Нет Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы