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

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

<div class="post-wrap">
   <img src="image.jpg">
  <div class="post-inner">
    <span class="dot first"></span>
      <h3>Букет роз</h3>
    <span class="dot last"></span>
  </div>
    <p>Подари мне букет из роз...</p>
 </div>

CSS:

*, *:before, *:after {
  box-sizing: border-box;
}
.post-wrap {
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  width: 420px;
  margin: 50px auto 0; 
  padding: 10px;
  text-align: center;
}
.post-inner {
  margin: -75px 20px 20px;
  padding: 15px;
  background: #122330;
  position: relative;
}
.post-inner:after {
  display: block;
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: -10px;
  top: -10px;
  border: 3px solid #122330;
}
.dot {
  height: 5px;
  width: 5px;
  background: #F15A40;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  vertical-align: super;
}
.first {
  margin-right: 24px;
}
.last {
  margin-left: 24px;
}
.dot:before, .dot:after {
  content: "";
  height: 5px;
  width: 5px;
  background: #F15A40;
  border-radius: 50%;
  position: absolute;
  top: 0;
}
.dot:before {
  left: 10px;
}
.dot:after {
  right: 10px;
}
.post-inner h3 {
  font-family: 'Playfair Display', serif;
  color: #EFECD9;
  display: inline-block;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 2px;
}
.post-wrap p {
  font-family: 'Lora', serif;
  padding-top: 20px;
  line-height: 24px;
}

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

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

👨‍💻 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 🖥 Готовые шаблоны, плагины, темы

РЕВОЛЮЦИОННЫЕ ТЕХНОЛОГИИ, МЕНЯЮЩИЕ РЕАЛЬНОСТЬ Хотите управлять искусственным интеллектом так, чтобы меньше работать и больше зарабатывать? Тогда присоединяйся к сообществу LEFT JOIN. Это канал для тех, кто мечтает развиваться в IT сфере, грамотно использовать SQL и нейросети и владеть самыми безупречными современными инструментами для успешной работы. 🔜 Здесь вы будете практиковать навыки на примере разбора реальных кейсов, первым узнаете о текущих событиях и трендовых направлениях в AI. 💙 LEFT JOIN - привет из будущего!

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

⚡️Фронтендеры гении разработки⚡️ Да я так считаю, хоть я начинающий фронт разработчик. Веду свой дневник разработки и всех призываю в канал для обмена опытом, так как хочу стать супер кодером Жду в комментариях к постам разборы, какой я криворукий и как бы ты сделал лучше. Бекендеры тоже приходите, может научитесь программировать

👨‍💻 CSS Scroll-driven Glow Cards Карты с эффектом подсветки Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

👨‍💻 CSS Scroll-driven Glow Cards Карты с эффектом подсветки Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

⚠️ Газета IT и технологий теперь доступна в Telegram! ИИ захватил наш мир, а те кто научится им пользоваться — будут управлять всеми! В канале уже опубликовали: > Нейросеть, с помощью которой можно взламывать пароли от WIFI > Бота, который позволит читать сообщения, которые вам только печатают в TG > Приложение, которое умеет писать УНИКАЛЬНЫЕ текста, которые можно продавать И это только малая часть того, что есть в этом канале: https://t.me/it_newspaper1

❔ Как сделать стильную кнопку "в корзину"? HTML:

<button class="btn">Отправить</button>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
}
body {
    font-family: 'Montserrat', sans-serif;
    color: #606060;
    font-size: 14px;
}
.container {
    max-width: 960px;
    margin: 50px auto;
    padding: 0 15px;
    background: white;
}
.post {
    padding: 2em 0 1em;
}
.post-image img {
    width: 100%;
    margin: 0 0 20px 0;
}
.post h1 {
    color: #222;
    font-weight: 500;
     margin-bottom: 30px;
}
.post-header {
    text-align: center;
}
.post-meta {
    margin-bottom: 30px;
    display: inline-block;
    position: relative;
    text-transform: uppercase;
    font-size: .8em;
}
.post-meta:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: #222;
}
time,
.author {
    padding-right: 26px;
    position: relative;
}
time:after,
.author:after {
    content: "/";
    color: #DDDDDF;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}
p {
    line-height: 1.5;
    margin-bottom: 1em;
    text-align: justify;
}
@media (min-width: 768px) {
    body {
        font-size: 16px;
    }
    .container {
        padding: 0 45px;
    }
    .post-image img {
        float: left;
        width: 300px;
        margin: 0 30px 20px -45px;
        border: 10px solid #DDDDDF;
        border-left-width: 0;
    }
}

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