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

Хочешь освоить Python, но не знаешь где брать материалы? 🐍 Ghostly Python — уютное место для изучения Python на практике. Там вы найдёте уроки, скрипты, шпаргалки, и многое другое, что поможет вам стать уверенным разработчиком. Неважно, новичок вы или опытный программист, — у нас всегда найдётся что-то полезное! 🔥 Заходи прямо сейчас, чтобы не потерять — Ghostly Python!

❔ Как сделать качественную карточку товара? 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 🖥 Готовые шаблоны, плагины, темы

👨‍💻SaaS Widget Виджет-карточка пользователя Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

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

<table class="nesting">
  <tr>
    <th>ячейка заголовка таблицы</th>
    <th>ячейка заголовка таблицы</th>
  </tr>
  <tr>
    <td>ячейка таблицы</td>
    <td>
      <table>
        <tr>
          <th>ячейка заголовка вложенной таблицы</th>
        </tr>
        <tr>
          <td>ячейка вложенной таблицы</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

@codewebx | #tutorial 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👩‍💻 SWINGVY Сайт по найму персонала 🟠 Сложность: Сложный 🟠 Адаптивность: Нет Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👨‍💻New CSS Logo Лого CSS и не только Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

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

<div class="d16"><h3>Заголовок 16</h3></div>

CSS:

.d16 h3 {
  text-align: center;
  padding-bottom: 10px;
}
.d16 h3:before {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  margin-left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #CBDCEA;
  box-shadow: 20px 0 0 0 #CBDCEA, -20px 0 0 0 #CBDCEA;
}
.d16 h3:after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  margin-left: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FC3768;
  z-index: -1;
}

@codewebx | #tutorial 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👩‍💻 TRIUMPH Сайт кузнеца или кузнечной лавки ручной работы 🟠 Сложность: Легкий 🟠 Адаптивность: Нет Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👨‍💻Loading progress Анимация загрузки по этапам Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

❔ Как сделать колонки одинаковой высоты с помощью плагина matchHeight? Самый простой способ, который будет работать во всех современных браузерах и IE8+. Скачать плагин можно со страницы разработчика. Эта библиотека позволяет устанавливать одинаковую высоту как в одном ряду, так и во всех рядах одновременно. Для всех колонок задаём одинаковый класс (в данном примере item), который будет использоваться при активации плагина: JavaScript:

jQuery(document).ready(function($) {
  $('.item').matchHeight();
});

HTML:

<header>Шапка страницы</header>
  <div class="container">
    <div class="item main">
      <h1>Основной контент</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
    </div>
    <aside class="item">
      <h2>Боковая колонка</h2>
      <p>Nullam ac imperdiet mi. In efficitur iaculis erat id mattis...</p>
    </aside>
  </div>
<footer>Подвал страницы</footer>

CSS:

*{box-sizing:border-box}
body {
  margin: 0;
  background: #FAF2D6;
  color: #302E2D;
}
header {
  padding: 30px 60px;
  background: #80C8A0;
}
.container {
  padding: 30px;
}
.container:after {
  content:"";
  display: table;
  clear: both;
}
.item {
  background: #EC5A45;
  padding: 30px;
}
.main {
  float: left;
  width: calc(100% - 330px);
}
aside {
  width: 300px;
  float: right;
}
footer {
  padding: 30px 60px;
  background: #80C8A0;
}

С помощью медиазапроса отменим обтекание колонок и укажем определение высоты колонок в зависимости от высоты их содержимого.

@media (max-width: 860px) {
  .item {
    height: auto 

!important

;
    float: none;
    width: 100%;
  } 
  .main {
    margin-bottom: 30px;
  }
}

@codewebx | #tutorial 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👩‍💻 F.Palace Сайт ресторана 🟠 Сложность: Легкий 🟠 Адаптивность: Нет Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👩‍💻 WORKOUT Сайт спортивной тематики 🟠 Сложность: Легкий 🟠 Адаптивность: Нет Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

Всем привет! 👋 С 2008 года я занимаюсь продвижением сайтов в Яндекс и Google.  Наверное, у многих тут есть свои сайты, развитием которых вы занимаетесь? https://t.me/seoalliance - мой канал с актуальными методами и примерами продвижения сайтов. Найдете интересное. https://seseo.ru/ - сайт https://t.me/allianceseo?erid=LjN8Jyc1W - написать мне лично Готов помочь с развитием и продвижением ваших сайтов на любом этапе.  В общем, всё, что связано с рекламой и развитием сайтов - ко мне 🤝 Проконсультирую и направлю - бесплатно!  Все мы немного IT'шники 😀 Что могу предложить: ⚙ Seo - поисковое продвижение. ⚙ Проведение аудитов сайтов. ⚙ Составление стратегии развития. ⚙ Контекстная реклама. ⚙ Создание оптимизированных сайтов. ⚙ Seo прототипирование на этапе создания сайта. ⚙ Услуги настройки и ведения контекстной рекламы. #реклама О рекламодателе

👨‍💻Impatiently Waiting Окно ожидания Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

❔ Как новогоднюю открытку на сайте? HTML:

<div class="tag-inner">
<h3>Merry<br>Christmas</h3>
<p><img src="image.jpg"></p>
<div class="tag-line"></div>
</div>

CSS:

* {
   box-sizing: border-box;
}
.tag-inner {
   position: relative;
   width: 240px;
   margin: 100px auto 0;
   padding: 30px 0 0;
   background: #C0D9C4;
}
.tag-inner:before {
   content: "";
   position: absolute;
   z-index: -1;
   top: -120px;
   width: 240px;
   height: 240px;
   background: #C0D9C4;
   transform: scale(0.76, 0.4) rotate(45deg);
   border-bottom-left-radius: 30px;
   border-top-left-radius: 10px;
   border-top-right-radius: 30px;
}
.tag-inner:after {
   content: "";
   position: absolute;
   z-index: 10;
   top: -40px;
   left: calc(50% - 10px);
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: #ffffff;
   box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .3), 0 0 0 7px rgba(0, 0, 0, .08);
}
.tag-inner h3 {
   margin: 0;
   font-family: 'Great Vibes', cursive;
   font-size: 36px;
   text-align: center;
   letter-spacing: 3px;
   color: #BA4732;
   text-shadow: 3px -2px 0 white;
}
.tag-inner p {
   position: relative;
   margin: 0;
   padding: 20px;
   text-align: center;
}
.tag-inner p:after {
   content: "";
   position: absolute;
   width: 100%;
   height: 10px;
   left: 0;
   bottom: -10px;
   background: radial-gradient(#C0D9C4 0%, #C0D9C4 70%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%) 0 -10px;
   background-size: 20px 20px;
   background-repeat: repeat-x;
}
.tag-line {
   height: 60px;
   background: repeating-linear-gradient(90deg, #F4EDD6, #F4EDD6 19px, #f4dc9c 19px, #f4dc9c 20px);
}

@codewebx | #tutorial 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

Всем привет! 👋 С 2008 года я занимаюсь продвижением сайтов в Яндекс и Google.  Наверное, у многих тут есть свои сайты, развитием которых вы занимаетесь? https://t.me/seoalliance - мой канал с актуальными методами и примерами продвижения сайтов. Найдете интересное. https://seseo.ru/ - сайт https://t.me/allianceseo?erid=LjN8Jyc1W - написать мне лично Готов помочь с развитием и продвижением ваших сайтов на любом этапе.  В общем, всё, что связано с рекламой и развитием сайтов - ко мне 🤝 Проконсультирую и направлю - бесплатно!  Все мы немного IT'шники 😀 Что могу предложить: ⚙ Seo - поисковое продвижение. ⚙ Проведение аудитов сайтов. ⚙ Составление стратегии развития. ⚙ Контекстная реклама. ⚙ Создание оптимизированных сайтов. ⚙ Seo прототипирование на этапе создания сайта. ⚙ Услуги настройки и ведения контекстной рекламы. #реклама О рекламодателе

👩‍💻 OSSYLABS Сайт компании по созданию умного дома 🟠 Сложность: Средний 🟠 Адаптивность: Нет Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?

👨‍💻Sticky Navigation (Active state follow through scroll) Меню навигации Исходники | @codewebx | #codepen 💸 Как программисту выйти на доход больше 100.000р/мес. на фрилансе?