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

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

👨‍💻Clocktober Day 12: LED Часы, показывающие актуальное время с led-эффектом Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Пройдите опрос про имидж ИТ-компании и получите сертификат OZON! FutureToday совместно с ИТ-холдингом Т1 проводят опрос среди сотрудников в ИТ про восприятие имиджа компании как работодателя. За прохождение анкеты — подарки всем участникам! 🎁 Ждем ваш ответ, если у вас опыт работы более 3х лет и вы: • ИТ-специалист; • Руководитель в ИТ. Подарки за участие в исследовании: • Сертификат OZON номиналом 1 000 рублей; • Скидку 5% на обучение в Я.Практикум; • Скидку 10% на курсы от SF Education. ❕Нам важно, чтобы в опросе приняли участие именно ИТ-специалисты, поэтому после заполнения анкеты мы попросим вас прикрепить ссылку на ваше резюме, чтобы это подтвердить. Заполнение анкеты займет примерно 10-12 минут. 🔗 Опрос можно пройти до 11 ноября: https://vk.cc/cEejQ1?erid=LjN8KZwr2 Если у вас появятся вопросы, напишите на @ft_research. Коллеги будут рады ответить! #реклама О рекламодателе

❔ Как сделать выпадающее многоуровневое меню? Выпадающее меню скрывается с помощью .submenu {visibility: hidden; opacity: 0;}, показывается li:hover > .submenu {visibility: visible; opacity: 1;}. HTML:

<nav>
  <ul class="topmenu">
    <li><a href="" class="active">Главная<span class="fa fa-angle-down"></span></a>
      <ul class="submenu">
        <li><a href="">меню второго уровня</a></li>
        <li><a href="">меню второго уровня<span class="fa fa-angle-down"></span></a>
          <ul class="submenu">
            <li><a href="">меню третьего уровня</a></li>
            <li><a href="">меню третьего уровня</a></li>
            <li><a href="">меню третьего уровня</a></li>
          </ul>
        </li>
        <li><a href="">меню второго уровня</a></li>
      </ul>
    </li>
    <li><a href="">Компания</a></li>
    <li><a href="">Блог</a></li>
    <li><a href="">Контакты</a></li>
  </ul>
</nav>

CSS:

@import url(image.jpgfamily=Open+Sans:400,600&subset=latin,cyrillic);
*{box-sizing: border-box;}
body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}
nav {background: #413F3C;}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul:after {
  content: "";
  display: table;
  clear: both;
}
nav a {
  text-decoration: none;
  display: block;
  transition: .3s linear;
}
.topmenu > li {
  float: left;
  position: relative;
  border-left: 1px solid black;
}
.topmenu > li:first-child {border-left: 0;}
.topmenu > li > a {  
  padding: 20px 30px;
  font-size: 12px;
  text-transform: uppercase;
  color: #FEFDFD;
  letter-spacing: 2px;
}
.topmenu > li > a.active, 
.submenu a:hover {color: #ddbe86;}
.topmenu .fa, 
.submenu .fa {
  margin-left: 5px;
  color: inherit;
}
.submenu {
  position: absolute;
  z-index: 5;
  min-width: 200px;
  background: white;
  border-top: 1px solid #CBCBCC;
  border-left: 1px solid #CBCBCC;
  border-right: 1px solid #CBCBCC;
  visibility: hidden;
  opacity: 0; 
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
  transition: .3s linear;  
}
.submenu li {position: relative;}
.submenu li a {
  color: #282828;
  padding: 10px 20px;
  font-size: 13px;
  border-bottom: 1px solid #CBCBCC;
}
.submenu .submenu {
  position: absolute;
  left: 100%;
  top: -1px;
  transition: .3s linear;
}
nav li:hover > .submenu {
  transform: rotateX(0deg);
  visibility: visible;
  opacity: 1;
}

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

🚀 Вебинар: Погружение в децентрализованные технологии🚀 Узнайте, как использовать Solidity для создания продвинутых dApp. Этот вебинар важен для понимания текущего состояния и потенциала Web3, что критично для разработчиков в освоении Solidity и создании продвинутых dApp. ⏰ Дата и время: 11.11.2024 в 20:00 (мск) На уроке будет: - Обсуждение базовых технологий, включая блокчейн и смарт-контракты - Представление и анализ нескольких децентрализованных приложений - Рассмотрение успешных кейсов использования Solidity - Обсуждение безопасности - Прогнозы и перспективы развития децентрализованных технологий В результате участники получат актуальные знания о применении Solidity в разработке современных dApp. Не упустите возможность узнать больше о dApp и их потенциале! 👉 Зарегистрируйтесь для участия: https://otus.pw/KjYd/?erid=LjN8Kbtvu  Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

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

👨‍💻Infinite Scroll animation Бесконечное пролистывание карточек Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как красиво оформить цитату на сайте? HTML:

<blockquote>
  <p><span>Success is often...</span></p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

CSS:

blockquote {
margin: 0;
background: white;
border: 15px solid #FDE640;
border-radius: 8px;
text-align: center;
color: #58554B;
padding: 30px 50px;
font-family: 'Lato', sans-serif;
}
blockquote p {
margin-top: 0;
font-size: 22px;
line-height: 1.25;
}
blockquote span {
background: #FDE640;
box-shadow: -20px 0 #FDE640, 20px 0 #FDE640;
position: relative;
}
blockquote span:before {
content: "\201C";
font-family: serif;
position: absolute;
font-size: 60px;
left: -50px;
top: 10px;
line-height: 0;
}
blockquote span:after {
content: "\201D";
font-family: serif;
position: absolute;
font-size: 60px;
right: -50px;
bottom: -10px;
line-height: 0;
}
blockquote cite {
font-style: normal;
text-transform: uppercase;
font-size: 14px;
}

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

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

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

❔ Как сделать качественную карточку товара? HTML:

<div class="item">
  <div class="product">
    <div class="thumb-img">
      <img src="image.jpg">
      <div class="actions">
        <a href="" class="share-button"><i class="fa fa-search"></i></a>
        <span class="share-wrap">
          <a href="" class="share-button"><i class="fa fa-cloud"></i></a>
          <span class="share-item">
            <a class="share-button" href=""><i class="fa fa-facebook"></i></a>
            <a class="share-button" href=""><i class="fa fa-twitter"></i></a>
            <a class="share-button" href=""><i class="fa fa-google-plus"></i></a>
            <a class="share-button" href=""><i class="fa fa-pinterest-p"></i></a>
          </span>
        </span>
        <a href="" class="share-button"><i class="fa fa-heart-o"></i></a>
        <a href="" class="add-to-cart">В корзину</a>
      </div>
    </div>
    <div class="product-about">
      <h3 class="product-title">
        <a href="">Маленькое черное платье</a>
      </h3>
      <span class="price"><i class="fa fa-rub"></i>1999</span>
    </div>
  </div>
</div>

CSS:

* {
   box-sizing: border-box;
}
.item {
   width: 300px;
   border: 1px solid rgba(0, 0, 0, .08);
   padding: 15px 0;
   margin: 0 auto;
   background: white;
}
.item a {
   text-decoration: none;
   outline: 0;
}
.product {
   padding: 0 15px;
   position: relative;
}
.thumb-img {
   position: relative;
   overflow: hidden;
}
.thumb-img img {
   width: 100%;
   display: block;
}
.thumb-img:after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background: rgba(0, 0, 0, .5);
   opacity: 0;
   transition: .3s ease-in-out;
}
.product:hover .thumb-img:after {
   opacity: 1;
}
.actions {
   position: absolute;
   z-index: 2;
   top: 100%;
   left: 0;
   right: 0;
   padding: 0 15px;
   text-align: center;
   opacity: 0;
   transition: .3s ease-in-out;
}
.product:hover .actions {
   top: 50%;
   opacity: 1;
}
.actions a {
   margin: 7px 6px;
   color: white;
   height: 30px;
   line-height: 26px;
   display: inline-block;
   border-radius: 30px;
   font-size: 12px;
   text-transform: uppercase;
   text-align: center;
   border: 2px solid white;
   background: transparent;
   transition: .3s ease-in-out;
}
.share-button {
   width: 30px;
}
.add-to-cart:hover {
   background: #A2927F;
}
.actions a:hover {
   border-color: #A2927F;
   background: #A2927F;
}
.share-wrap {
   display: inline-block;
   height: 30px;
   position: relative;
   margin: 7px 6px;
}
.share-item {
   width: 200px;
   margin-left: -100px;
   position: absolute;
   z-index: 3;
   bottom: 38px;
   left: 50%;
   opacity: 0;
   visibility: hidden;
   text-align: center;
   transition: .3s ease-in-out;
}
.share-wrap:hover .share-item {
   opacity: 1;
   visibility: visible;
}
.add-to-cart {
   padding: 0 20px;
}
.product-about {
   padding: 20px 0 0;
   text-align: center;
}
.product-title {
   font-family: 'Open Sans', sans-serif;
   line-height: 1.1;
   font-size: 16px;
   margin: 5px 0 15px;
   font-weight: normal;
}
.product-title a {
   color: #373737;
}
.price {
   font-family: 'Open Sans', sans-serif;
   font-size: 1.25em;
   font-weight: bold;
   color: #F2453E;
}

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

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

👨‍💻Drag and Drop w/ SortableJS Перенос иконок Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Введение в смарт-контракты и пример создания своего токена Бесплатный вебинар для погружения в смарт-контракты и написание на языке Solidity **Время и дата проведения:** 31.10.2024 в 20:00 **Особенности вебинара:** - Общая информация про блокчейн, смарт-контракты - Введение в смарт-контракты - Практическая часть - написание своего токена **Спикер:** Александр Куперман, Senior Solidity Engineer (Швейцария). Программирует более 20 лет, специалист по Solidity, блокчейн стеку. Работал в Blue Brain Project, Cleverdist, Huawei, Valory. Образование: НГТУ (Россия), UOU (Корея), RPI (США). Этот вебинар — часть курса Solidity Developer. В рамках курса вы получите знания и сможете применять их на практике под руководством опытных преподавателей. 👉 Для участия в вебинаре зарегистрируйтесь на сайте: https://otus.pw/Ukpm/?erid=LjN8Jt1kA  Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

❔ Как оформить увеличивающееся в ширину поле поиска для сайта? HTML:

<form>
  <input type="text" placeholder="Искать здесь...">
  <button type="submit"></button>
</form>

CSS:

* {box-sizing: border-box;}
form {
  width: auto;
  float: right;
  margin-right: 30px;
}
input {
  width: 250px;
  height: 42px;
  padding-left: 15px;
  border-radius: 42px;
  border: 2px solid #324b4e;
  background: #F9F0DA;
  outline: none;
  position: relative;
  transition: .3s linear;
}
input:focus {
  width: 300px;
}
button {
  width: 42px;
  height: 42px;
  background: none;
  border: none;
  position: absolute;
  top: -2px;
  right: 0;
}
button:before{
  content: "\f002";
  font-family: FontAwesome;
  color: #324b4e;
}

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

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

👨‍💻 Фрилансер? Нам нужна твоя помощь

Мы с командой планируем создать курс для программистов, который поможет выйти на стабильный доход 100.000+ руб./мес. на фрилансе.

Чтобы курс получился максимально полезным и информативным, ответь всего на 10 вопросов. Каждый кто заполнит форму, получит доступ к курсу бесплатно, когда он выйдет!

👨‍💻Open Props - Bento Grid. Container Queries Контейнеры в виде небольших кусочков статей для сайта Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы