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

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

👨‍💻 Another Pricing Table Карточки с ценами на товары для сайта Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как оформить главную страницу сайта-визитки? Ещё одно элегантное решение, которое можно использовать для сайта-визитки, сайта-портфолио (страницу «Обо мне» переименовать в «Портфолио» и добавить слайдер). Внутренний блок при клике на текст/иконку в верхнем левом углу вращается вдоль горизонтальной оси, показывая/скрывая обратную сторону блока. HTML:

<div class="container">
  <div class="flipper" id="target">
    <div class="front">
      <a href="#target" class="home button">обо мне</a>
      <div class="share-block">
        <a href=""><i class="fa fa-facebook"></i></a>
        <a href=""><i class="fa fa-instagram"></i></a>
        <a href=""><i class="fa fa-twitter"></i></a>
        <a href=""><i class="fa fa-youtube"></i></a>
        <a href=""><i class="fa fa-linkedin"></i></a>
      </div>
    <h1>ДИЗАЙН & КОД</h1>
      </div>
    <div class="back">
      <a href="#close" class="close button"><i class="fa fa-home"></i></a>
      <div class="inner">
        <h2>обо мне</h2>
        <p>Nemo enim ipsam voluptatem...</p>
        </div>
      </div>
    </div>
</div>

CSS:

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Playfair+Display:400,700';
*{box-sizing:border-box}
body {
  margin: 0;
  background: url(image.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  height: 100vh;
  padding: 20px;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
}
h1 { 
  color: white;
  font-size: 4em;
  font-family: 'Playfair Display', serif;
  margin: 0;
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  white-space: nowrap;
  letter-spacing: 5px;
}
h2 {
  font-size: 3em;
  font-family: 'Playfair Display', serif;
  line-height: 1;
}
.share-block {
  float: right;
  padding-right: 15px;
  line-height: 50px;
}
.share-block a {
  color: #999;
  display: inline-block;
  margin-right: 7px;
  transition: .4s linear;
}
.share-block a:hover {
  color: white;
}
.container {
  border: 10px solid rgba(255,255,255,0.2);
  width: 100%;
  height: 100%;
 -webkit-perspective: 1200;
  perspective: 1200;
  -moz-transform: perspective(1200px);
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d; 
  transform-style: preserve-3d;
  position: relative;
}
.button {
  text-decoration: none;
  width: 120px;
  height: 50px;
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  z-index: 3;
  line-height: 50px;
  padding-left: 30px;
  transition: .4s linear;
}
.button:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 20px solid #CE1D5A;
  border-right: 20px solid transparent;
}
.button:after {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 0;
  height: 0;
  border-top: 20px solid white;
  border-right: 20px solid transparent;
}
.home:hover, .close:hover {
  color: white;
}
.home, .close {
  color: #999;
  font-size: 20px;
}
.flipper {
  position: relative;
  width: 100%;
 height: 100%;
  transform-style: preserve-3d;
  transition: .7s linear;  
}
.front, .back {
  font-family: 'Cabin', sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  backface-visibility: hidden;
}
.front {
  z-index: 2;
  transform: rotateX(0deg);
}
.back {
  transform: rotateX(-180deg);
  color: white;
}
.flipper:target {
  transform: rotateX(180deg);
}
.inner {
  padding: 20px;
  line-height: 2;
  letter-spacing: 1px;
}
@media (max-width: 768px) {
  h1 {font-size: 3em; white-space:normal;}
  h2 {font-size: 2em}
  p {font-size: 14px;}
}

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

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

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

Frontend теперь в телеграм! Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках: Логово Верстальщика — научит верстать продающие сайты. Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков. Frontender's notes — советы и полезные приемы для каждого разработчика.

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

<div class="wrap">
  <div class="intro">
    <a href="#target" class="toggle"></a>
    <div class="content">
      <h1>Весна уже скоро!<span>Однако, придётся подождать</span></h1>
      <div id="timer"></div>
      </div>
  </div>
  <div id="target">
    <a href="#close" class="close"></a>
    <form action="" method="get">
      <h1>Подписаться,<span> чтобы не пропустить начало весны</span></h1>
      <input type="text" placeholder="Ваш E-mail" required><button type="submit"></button>
    </form>
  </div>
</div>

CSS:

@import 'https://fonts.googleapis.com/css?family=Open+Sans:400,700|Playfair+Display:400,700';
*{box-sizing:border-box;transition:.3s linear}
body {
  margin: 0;
  height: 100vh;
  font-size: 16px;
  font-family: 'Open Sans', sans-serif;
  border: 20px solid rgba(255, 255, 255, 0);
  background: url(http://media.html5book.ru/photo-6.jpg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
}
.wrap {
  position: relative;
  height: 100%;
  -webkit-perspective: 1000;
  perspective: 1000;
  transition: all 0.5s cubic-bezier(.215, .61, .355, 1);
  background: rgba(255, 255, 255, .5);
}
.content, form {
  width: 100%;
  transform: translate(-50%, -50%);
  position: absolute; 
  top: 50%; 
  left: 50%;
  text-align: center;
 }
.toggle, .close {
  text-decoration: none;
  display: block;
  float: right;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #3F3461;
  position: relative;
  text-align: center;
  margin: 20px;
}
.close {
  background: #4D452A;
}
.toggle:before, .close:before {
  content: "\f003";
  font-family: FontAwesome;
  color: white;
  line-height: 50px;
  font-size: 24px;
}
h1 { 
  color: #3F3461;  
  font-size: 4em;
  font-family: 'Playfair Display', serif;
  margin-top: 0;
}
h1 span {
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  display: block;
  color: #596F8B;
  letter-spacing: 3px;
}
#target {
  opacity: 0;
  transform: scale(0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  background: #D4C657;
  position: absolute;
}
#target h1, #target span {
  color: white;
}
.close:before {
  content: "\f00d";
}
#target:target {
  opacity: 1;
  transform: scale(1);
}
#timer span {
  color: #3F3461;  
  font-size: 4em;
  font-weight: bold;
}
form {
  padding: 20px;
}
form input {
  height: auto;
  display: block;
  outline:none;
  width: 100%;
  line-height: 50px;
  font-size: 30px;
  padding-left: 15px;
  border: none;
  background-color: rgba(255, 255, 255, .5);
}
button {
  position: absolute;
  bottom: 21px;
  right: 15px;
  width: 80px;
  font-size: 40px;
  background: transparent;
  cursor: pointer;
  border: none;
}
button:before {
  content: "\f003";
  font-family: FontAwesome;
  color: white;
  font-size: 30px;
  line-height: 50px;
}
@media (max-width: 768px) {
  h1 {font-size: 3em;}
  h1 span {font-size: 14px;}
  #timer span {font-size: 3em;}
  form input {font-size: 20px;}
}

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

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

👨‍💻 Interactive image gallery Интерактивный набор карточек. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как сделать адаптивный блок? HTML:

<div class="demo-wrapper">
<a target="_blank" href="" class="link">
<div class="link-inner">
<img class="mobile" src="image.jpg">
<img src="image.jpg" >
<div class="post-meta">
<h2>Полноэкранный фон</h2>
<p>Полноэкранное фоновое изображение и простой дизайн</p>
</div>
</div>
</a>
</div>

CSS:

* {
   box-sizing: border-box;
   margin: 0;
}
.demo-wrapper {
   display: table;
   max-width: 420px;
   margin: 0 auto;
}
.link {
   text-decoration: none;
   display: block;
   position: relative;
   padding: 20px;
   text-align: center;
   color: #102030;
}
.link-inner {
   perspective: 820px;
}
.link img {
   display: block;
   width: 300px;
   transform: rotateX(0deg) rotateY(30deg);
   border-left: 5px solid #ccc;
   border-radius: 8px;
   transition: .5s ease-in-out;
}
.link img.mobile {
   position: absolute;
   z-index: 5;
   right: 20px;
   top: 45px;
   width: 90px;
   transform: rotateX(0deg) rotateY(-30deg);
   border-right: 4px solid #ccc;
   border-left: 0 solid #ccc;
   border-radius: 8px;
}
.link:hover img {
   transform: translateY(-20px);
   border-left: 0 solid #ddd;
   border-right: 0 solid #ccc;
}
.post-meta {
   margin-top: 20px;
}
.post-meta h2 {
   margin-bottom: 15px;
}

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

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

Дарим билет в мир большого IT 🎫 От тебя нужен только опыт работы разработчиком JS+React от года и желание попасть в команду Холдинга Т1 — одного из лидеров российского ИТ-рынка, в портфеле которого 800+ высокотехнологичных проектов и 70+ продуктов и услуг. Регистрируйся на онлайн-интенсив в Открытые школы Т1 и прокачай навыки бесплатно всего за 1 месяц. Лучшие получат оффер от Т1 🔝 и уникальный карьерный фаст-трек до мидла в бигтехе. Всего за полгода мы выпустили 500+ специалистов. Участники присоединились к командам финтех-разработки и разработки ИТ-продуктов. Также участников ждут в юнитах облачных сервисов, развития ИИ-решений, интеграции и консалтинга. ⌛️ Быстрое обучение: 1 месяц. 💻Гибкий формат: все этапы онлайн, занятия по вечерам. 🌏 Работа в Т1 возможна с тер-рии РФ и Беларуси. Ты с нами? Тогда подавай заявку до 24 июля! Старт интенсива — 29 июля. Реклама. ООО "Т1". ИНН 7720484492.

👨‍💻 Text split 3D rotation single Текст с анимацией переворота Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

⚡️ Бесплатное обучение HTML/CSS, JavaScript, Vue.js с нуля с поддержкой от наставника На канале Интенсивный JavaScript действующий тимлид уровня мидл+ помогает изучить JS на практических задачах, которые интересно кодить С 10 по 14 июля он проводит бесплатное обучение, где на практике поможет разобраться в HTML/CSS, JavaScript и — Vue.js Что вы сделаете на обучении — Сверстаете макет под присмотром тимлида — Затем добавите JavaScript (и это не пара скриптов для модального окна) — И перепишете проект на Vue.js 🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться джуну. Помимо работы с кодом на обучении он расскажет, где новичку взять опыт работы, что ни в коем случае нельзя говорить на собеседовании, почему 90% новичков никогда не получат даже отклика на своё резюме В общем — даст пошаговый подробный план «Что учить фронтенд и как найти работу джуну в 2024 году» . По этому плану его ученики устраиваются на работу Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля Подписывайтесь, осталось 30 мест Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду 👉Участвовать бесплатно Первый урок из обучения уже доступен

❔ Как работает Функция hsla()? Функция hsla(), параметры которой означают тон (Hue), насыщенность (Saturation), яркость (Lightness) и альфа-канал (Alpha), также позволяет задать полупрозрачный цвет. Оттенки цвета задаются в процентах, используя соответствующее значение из цветового круга. Сам круг разбит на сектора, на границах которых находятся основные цвета: 0/360° — красный цвет 60° — желтый цвет 120° — зеленый цвет 180° — голубой цвет 240° — синий цвет 270° — фиолетовый цвет 300° — пурпурный цвет Чтобы получить черный цвет, нужно присвоить показателям тона, насыщенности и яркости нулевое значение — hsla(0, 0%, 0%, 1). Белый цвет получается при 100%-ном значении яркости hsla(0, 0%, 100%, 1), а серый цвет — при нулевом значении насыщенности hsla(0, 0%, 50%, 1). @codewebx | #tutorial 🖥 Готовые шаблоны, плагины, темы

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

👨‍💻 field-sizing: content Окно для написания сообщений / статей с кнопками и возможностью редактирования и масштабирования. Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

БЕСПЛАТНЫЙ БОТ ДЛЯ ПОДГОТОВКИ К СОБЕСУ 15000 вопросов из СБЕР, ТИНЬКОФФ, ЯНДЕКС, МТС и GOOGLE 🌐 PYTHON, JAVA, JS, C#, GO, KOTLIN 📗ФРЕЙМВОРКИ 📕ЯЗЫКИ 📘АЛГОРИТМЫ МЫ НЕ ЗАБЫЛИ ПРО СОФТ СКИЛЫ, ОНИ ТУТ