КодВеб — HTML, CSS, JavaScript | Вёрстка | Фронтенд

👨‍💻 New Fortnite Buttons Кнопки в стиле меню фортнайта. Подойдут для разных типов и направленностей сайтов. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как использовать плагин 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;
}

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

@media (max-width: 860px) {
  .item {
    height: auto !important;
    float: none;
    width: 100%;
  } 
  .main {
    margin-bottom: 30px;
  }
}

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

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

👨‍💻 Smooth Liquid Background Effect Плавно изменяющийся задний фон Исходники | @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 🖥 Готовые шаблоны, плагины, темы

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Ты сверстаешь веб-сайт на HTML + CSS; 2. Оживишь страницу с помощью JavaScript; 3. Используешь фронтенд-фреймворк Angular; 4. Подключишь Backend и загрузишь сайт на хостинг; 5. Получишь советы по доработке своего проекта; 6. Добавишь в портфолио 1 качественный проект; 7. Получишь в подарок чек-лист «45 мест для поиска работы». А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 10-летним стажем – Романа Чернова. 👉 Проскочить на интенсив бесплатно Начинаем уже завтра. Реклама. ИП Чернова О. А., ИНН:771399721044

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

👨‍💻 Animated Login Form Анимированная форма для регистрации на сайте Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

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

<div class="sale-wrap">
<div class="sale-inner">
<div class="sale-info">
<div class="sale-info-top">15%</div>
<div class="sale-info-bottom">H&M</div>
</div>
<div class="sale-text">
<p>Июнь, 1 - 15, 2017</p>
<h3>Летняя распродажа</h3>
<p>Скидки по дисконтной карте</p>
</div>
</div>
</div>

CSS:

.sale-wrap {
  width: 400px;
  height: 300px;
  padding: 20px;
  margin: 50px auto 0;
  background: #ffffff;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.07);
  box-sizing: content-box;
}
.sale-inner {
  position: relative;
  height: 100%;
  background: repeating-linear-gradient(-45deg, #bc2423, #bc2423 7px, #910707 8px, #910707 13px);
}
.sale-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  background: #910707;
  text-align: center;
  color: rgba(255,255,255,.8);
  transform: translateY(-50%);
}
.sale-text p {
  margin: 0;
  padding: 5px;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,.8);
  font-family: 'Comfortaa', cursive;
  text-transform: uppercase;
  background: #bc2423;
  box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 -2px 5px rgba(0,0,0,.2);
}
.sale-text h3 {
  margin: 0;
  padding: 15px 0 20px;
  font-family: 'Playfair Display', serif;
  line-height: 1;
  font-style: italic;
  font-size: 30px;
  font-weight: normal;
}
.sale-info {
  position: relative;
  width: 70px;
  height: 100%;
  margin: 0 auto;
  background: #910707;
  font-family: 'Oswald', sans-serif;
  font-size: 30px;
  text-align: center;
  color: rgba(255,255,255,.8);
  border-left: 20px solid #bc2423;
  border-right: 20px solid #bc2423;
  box-shadow: 2px 0 5px rgba(0,0,0,.2), -2px 0 5px rgba(0,0,0,.2);
  box-sizing: content-box;
}
.sale-info-top {
  padding: 26px 0;
}
.sale-info-bottom {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
}

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