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

👨‍💻 Toggled radial buttons Иконки социальных сетей с анимацией появления для сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

👨‍💻 Toggled radial buttons Иконки социальных сетей с анимацией появления для сайта. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Я ПРОТИВ ПЛАТНЫХ КУРСОВ Поэтому был создан канал Reactify | Frontend Разработка! Обучайся бесплатно и узнавай новое: - Где брать опыт и как искать работу? - Как освоить сложную теорию? - Какие ресурсы использовать для обучения? 🚀 Reactify — сложные темы простым языком. Теория, советы, истории с работы. YouTube канал и платформа с бесплатными курсами.

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

<div class="d8"><h3>Заголовок 8</h3></div>

CSS:

.d8 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d8 h3:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #EE6247;
  z-index: 2;
}
.d8 h3:after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  margin-left: -25%;
  width: 50%;
  height: 2px;
  background: #ECF4F2;
}

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

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

👨‍💻 Text scroll and hover effect Текст с анимациями при пролистывании и наведении. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

WEBIK - Путеводитель в мире web'a! Каждый уважающий себя фронтендер подписан на нас, ведь у нас найдутся: ✓ интересные рецепты кода ✓ смешные мемы ✓ позновательные викторины ✓ ссылки на полезные ресурсы ✓ разбор вопросов с собеседований Подписывайся на @gki_webik_ru и стань профессиональным веб разработчиком!

Как использовать псевдокласс :target? Простой пример использования псевдокласса :target — скрытие и показ содержимого при клике пользователя. Элемент скрывается с помощью :not(:target) {display: none;} (то есть пока не подпадает под :target) и показывается при помощи :target {display:block;}. HTML:

<div class="spec">
  <span>font-style<a href="#prop-about">+</a></span>
  <div id="prop-about">
    <p><b>Стиль начертания шрифта</b><span>normal|italic|oblique|initial|<wbr>inherit</span></p>
    <a href="#close">Скрыть описание</a>
  </div>
</div>

CSS:

#prop-about:not(:target) {
  display: none;
}
#prop-about:target {
  display: block;
}

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

Как быстро собрать такую форму оплаты? Легко! Фронтенд Гайд - это канал для верстальщиков, в котором публикуют: ✓ Готовый код ✓ Макеты для верстки ✓ Тесты на знание кода Ускорь работу над своим проектом!

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

Никакие платные курсы больше не нужны — по этим 4 каналам можно освоить Frontend-разработку с нуля 👇 📌Senior Frontend — JS, HTML и CSS 📌Frontend Interview — как проходить собеседования 📌Web Craft — только Web-разработка 📌Frontender Libs — библиотеки для фронтендеров

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

<div class="image-box">
  <div class="border"></div>
    <img src="image.jpg">
  <div class="image-content">
    <h3 class="image-header">Ночная роза</h3>
    <p>Ночная роза — удивительное растение...</p>
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}
.image-box {
  position: relative;
  width: 600px; 
  margin: 50px auto 0;
}
.image-box .border {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  border: 2px solid white;
  z-index: 1;
}
.image-box img {
  display: block;
  position: relative;
  width: 600px;
  height: 442px;
}
.image-box .image-content {
  position: absolute;
  bottom: 0;
  top: 0;
  right: 0;
  left: 60%;
  padding: 20px;
  z-index: 2;
  background: linear-gradient(to bottom,rgba(18,26,63,0.3),rgba(18,26,63,0.9));
}
.image-box .image-header {
  font-size: 30px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255,255,255,0.4);
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: normal;
}
.image-box p {
  color: rgba(255,255,255,0.9);
  font-size: 14px;
  margin-top: 20px;
  line-height: 24px;
}

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

Мы нашли новый активный канал для нашей аудитории Frontend Portal — канал каждого уважающего себя frontend-разработчика, там вы найдете: — Теорию, проиллюстрированную яркими примерами и кодом — Разбор вопросов с собеседований — Задачи и викторины с объяснением 👉 Подпишитесь на @FrontendPortal и станьте частью дружного frontend-комьюнити!

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

На смену профессии решись, место обучения найди, три зарплаты за него заплати, потрать один год (а то и два), совмещай старую работу с учебой, попробуй не выгореть, над резюме поработай, проекты поделай, отправь 1000 и 1 отклик и услышь «рассматриваем только мидлов» — бесит, правда? 14 декабря в 13.00 в прямом эфире поговорим о том, как на самом деле работают IT-компании и обсудим, что нужно знать и уметь, чтобы быть джуном, которого компании хотят к себе в команду. Будут и аргументы, и советы, и, конечно, честные истории. Расскажем много интересного, участие бесплатное. Подробнее. Реклама. ООО "ИНТЕРАКТИВНЫЕ ОБУЧАЮЩИЕ ТЕХНОЛОГИИ". ИНН 7807382880.

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

<div class="image-box">
  <div class="border"></div>
    <img src="https://html5book.ru/wp-content/uploads/2015/10/flowers-by-barbara-florchik-2.jpg">
  <div class="image-content">
    <h3 class="image-header">Ночная роза</h3>
    <p>Ночная роза — удивительное растение...</p>
  </div>
</div>

CSS:

.btn {
   position: relative;
   height: 40px;
   line-height: 40px;
   padding: 0 30px 0 40px;
   margin: 0 20px;
   background: linear-gradient(-135deg, #00E5FE, #4463FE);
   box-shadow: 0 15px 65px #4753FF;
   border-width: 0;
   border-radius: 50px;
   font-family: 'Montserrat Alternates', sans-serif;
   font-size: 14px;
   color: white;
   outline: none;
   cursor: pointer;
}
.btn:before {
   content: "\f067";
   position: absolute;
   left: 5px;
   top: 5px;
   font-family: FontAwesome;
   color: white;
   width: 30px;
   height: 30px;
   line-height: 30px;
   text-align: center;
   border-radius: 50%;
   background: transparent;
   transition: .3s ease-in-out;
}
.btn:hover:before {
   background: white;
   color: #24D8F7;
}

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

🔥 Ваш цифровой компас в мире IT! 🧭 RECURA – это образовательные материалы, курсы, книги, полезные лайфхаки, актуальные новости из мира технологий, разработки и информационной безопасности. Подпишись - @recura_tech