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

👨‍💻 Infinite Horizontal list scroll Бесконечный список с возможностью прокрутки. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔Как сделать стильный заголовок на сайте? HTML:

<div class="four"><h1>Brand desight</h1></div>

CSS:

.four {
  background: #F4F7EE;
  padding: 50px 20px;
  text-align: center;
} 
.four h1 {
  font-family: 'Merriweather', serif;
  position: relative;
  color: #C44737;
  font-size: 50px;
  font-weight: normal;
  padding: 8px 20px 7px 20px;
  border-top: 4px solid;
  border-left: 4px solid;
  display: inline-block;
  margin: 0;
  line-height: 1;
}
.four h1:before {
  content: ""; 
  position: absolute;
  width: 28px;
  height: 28px;
  top: -28px;
  left: -28px;
  border: 4px solid #C44737;
  box-sizing: border-box;
}
@media (max-width: 450px) {
  .four h1 {font-size: 36px;}
  .four h1:before {
    width: 20px;
    height: 20px;
    top: -20px;
    left: -20px;
  }
}

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

Готовы раскрыть свой потенциал в веб-разработке? Регистрируйся и приходи на бесплатный интенсив «ЛЕНДИНГ ЗАКАЗ ПИЦЦЫ ГО-ГО» от онлайн-школы METHED. На интенсиве: — Напишем на HTML и CSS красивый лендинг с современным дизайном; — Реализуем адаптив под все устройства от смартфона до мониторов ПК; — C нуля пошагово создадим лендинг, начиная с вёрстки на основе дизайн-макета в Figma/Pixso с Ajax технологией обновления страницы; — Напишем фильтр и форму для заказа пиццы. Участвовать в интенсиве бесплатно 👉 https://tglink.io/e28bf5c2a7e5 

👨‍💻 Изучаешь Frontend-разработку? Давай продолжим вместе. idk Frontend — дневник начинающего разработчика, который познаёт новую профессию с нуля. Канал будет полезен: - начинающим фронтендерам; - практикующимся менторам; - всем, кто любит наблюдать за чужими косяками и их исправлениями. Присоединяйся ко мне, будем обучаться вместе 🤝

👩‍💻 ACSIMUM Сайт магазина медицинского оборудования. Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

Вместе уютно собираемся по вечерам каждый у себя дома и учимся верстать сайты с нуля. В комплекте приятная музыка, тёмная тема и добрейшее сообщество неопытных верстальщиков, которые вообще-то огого и всем ещё покажут. Всё это будет на бесплатном марафоне по HTML и СSS «ночной кружок по вёрстке», который пройдёт с 20 по 25 марта. За 6 дней вы: — Изучите основы веб-технологий и попробуете себя в роли фронтенд-разработчика; — Напишете в тренажёрах свои строчки кода и увидите как изменяется страница сайта в реальном времени; — Поймёте нравится ли вам веб-разработка Вступить в кружок.

👨‍💻 Product Filtering UI Система фильтра товаров на сайте. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🔥 ТОП-5 постов в канале по вашим репостам — Как размыть фон у изображения? — Как сделать красивое горизонтальное меню для сайта? — Как сделать колонки одинаковой высоты? — Как сделать таблицу цен на сайте? — Как красиво оформить кнопку с анимацией для сайта?

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

<blockquote>
  <p>I don't know...</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

CSS:

blockquote {
margin: 0;
background: #FFF4ED;
padding: 40px;
color: #3F484D;
position: relative;
font-family: 'Lato', sans-serif;
text-align: center;
}
blockquote:before, blockquote:after {
font-size: 45px;
color: #3CA1D9;
position: absolute;
height: 2px;
left: 40px;
right: 40px;
line-height: .5;
background: linear-gradient(to right, #3CA1D9 45%, transparent 45%, transparent), linear-gradient(to right, transparent, transparent 55%, #3CA1D9 55%);
font-family: serif;
}
blockquote:before {
content: "\201C";
top: 30px;
}
blockquote:after {
content: "\201D";
bottom: 30px;
}
blockquote p {
font-size: 20px;
}
blockquote footer {
margin-bottom: 1em;
}
blockquote cite {
font-style: normal;
}

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

Макеты для вёрстки сайтов — это канал, где собраны уникальные примеры реальных макетов в Figma, которые заказчики присылают на вёрстку. Учитесь, практикуйтесь, пополняйте свое портфолио настоящими работами вместе с @build_html

👨‍💻 CAR MUSC Сайт тюнинг-ателье автомобилей. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Как успевать сочетать занятие своим любимым хобби с профессиональной карьерой? Как найти время на развитие своих навыков в разных сферах и не перегореть? Возможно ли одинаково много времени уделять любительскому спорту и работе? На связи футбольный синьор — программист с серьезными планами на любительский футбол. В моем авторском блоге я пытаюсь ответить на заданные выше вопросы, делюсь опытом и контентом из двух, на первый взгляд, противоположных сфер. Материал про IT от человека с большим опытом, тимлида и ведущего бэкенд-разработчика. Посты про футбольную жизнь в любительских лигах и спортивный рост. Информация про ворк-лайф баланс и интересные мнения о разных сферах. Подписывайтесь на канал Футбольного Синьора, первый в своем роде блог о совмещении футбола и программирования. Вооружайтесь уникальным опытом, полезными фишками и давайте прокачиваться вместе! erid: LjN8KEoNw

👨‍💻 Progress indicator Иконка загрузки. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🚀 JavaScript-разработчики, этот пост для вас! 🚀 🌟 Ищете место, где можно узнать самые свежие новости, найти полезные советы и уникальные материалы по JavaScript? 🌟 📣 Присоединяйтесь к нашему Telegram-каналу! ✅ Как создать креативный GitHub. ✅ Подборка полезных плагинов для VS Code. ✅ 8 советов, которые сделают JavaScript-код чище. 💡 Присоединяйтесь прямо сейчас. Не упустите шанс стать настоящим гуру программирования!

❔ Как сделать колонки одинаковой высоты?

С помощью внутренних и внешних отступов.

Для каждой колонки устанавливаем нижнее поле padding с большим значением. В этом случае фон колонки будет распространяться на всю высоту поля. Далее задаём отрицательное нижнее поле с таким же значением. С его помощью мы уменьшаем высоту колонки до её фактических размеров, не затрагивая фоновую заливку. Свойство overflow: hidden;, заданное для блока-контейнера, обрезает высоту каждой колонки, ориентируясь на самую высокую.

body {
  margin: 0;
  background: #FAF2D6;
  color: #302E2D;
}
header {
  padding: 30px 60px;
  background: #80C8A0;
}
.container {
  padding: 30px;
  overflow: hidden;
}
.main-content {
  float: left;
  width: calc(100% - 330px);
  background: #C9CCC8;
}
aside {
  float: right;
  width: 300px;
  background: #EC5A45;
}
.main-content, aside {
  padding-bottom: 99999px;
  margin-bottom: -99999px;
}
.main-content div, aside  div {
  padding: 30px 30px 0 30px;
}
footer {
  margin-top: 30px;
  padding: 30px 60px;
  background: #80C8A0;
}

В медиазапросе уберём нижние поля и отступы, отменим обрезку содержимого и установим ширину колонок, равную ширине блока-контейнера.

@media (max-width: 860px) {
  .container {
    overflow: visible;
    }
  .main-content {
    float: none;
    width: 100%;
    margin-bottom: 30px;
    padding-bottom: 0;
    }
  aside {
    float: none;
    width: 100%;
    margin-bottom: 0;
    padding-bottom: 0;
    }
  .main-content div, aside  div {
    padding: 30px;
}
  footer {
    margin-top: 0;
  }
}

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

Как получить реальный опыт во фронтенд-разработке за 7 дней? А именно: - Сверстать веб-сайт на HTML + CSS; - Реализовать функционал на JavaScript; - Пощупать фронтенд-фреймворк Angular; - Подключить Backend и загрузить сайт на хостинг. В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать. Такой опыт можно получить на бесплатном практикуме от Айтилогии с поддержкой от опытных разработчиков на каждом этапе. 👉 Приходи на бесплатное обучение и зови с собой друзей Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.