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

❔ Как сделать горизонтальное выравнивание элементов? Горизонтальное выравнивание по центру блока/страницы Если для блока задана ширина: CSS:

div {
  width: 300px;
  margin: 0 auto; /*центрируем элемент по горизонтали в пределах родительского блока*/
}

Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block; Если блок вложен в другой блок и для него не задана/задана ширина: HTML:

<div class="wrapper">
<div class="box"></div>
</div>

CSS:

.wrapper {text-align: center;}

Если для блока задана ширина и его нужно зафиксировать по центру родительского блока: HTML:

<div class="wrapper">
<div class="box"></div>
</div>

CSS:

.wrapper {position: relative; /*задаем для родительского блока относительное позиционирование, чтобы потом абсолютно позиционировать блок внутри него*/}
.box {
width: 400px;
position: absolute; 
left: 50%;
margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/
}

Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки: HTML:

<div class="wrapper">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS:

.wrapper {text-align: center; /*располагаем содержимое блока по центру*/}
.box {
display: inline-block; /*располагаем блоки в ряд по горизонтали*/
margin-right: -0.25em; /*убираем правый отступ между блоками*/
}

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

erid: LjN8K6Swa 🚀 Встречайте новый телеграмм-бот "КОПИРЫЧ"! 🎉 Этот маленький помощник создан специально для тех, кто любит экономить время и стремится к идеальному результату. Наш бот поможет вам легко и быстро скопировать любые блоки с сата на конструкторе и вставить их на свою страницу! 💻 Никаких сложных программ и платных сервисов – просто вставьте ссылку на сайт, и "КОПИРЫЧ" сделает всю работу за вас! 🤖 Зарегистрировавшись, вы получите доступ к 1000 копирований совершенно бесплатно! 🆓 Не упустите возможность сделать свои проекты уникальными и стильными! 🌟 Заходите в нашего бота и будьте в курсе всех новинок и акций! 📢 "КОПИРЫЧ" уже готов к работе 👇 Ссылка

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

👨‍💻 Purchase Flow Страница покупки и оплаты Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

❔ Как оформить таблицу-зебру? HTML:

<table class="zebra">
<tr>
  <th></th>
  <th>Q1</th>
  <th>Q2</th>
  <th>Q3</th>
  <th>Q4</th>
  </tr>
 <tr>
  <td class="round-top">Microsoft</td>
  <td>20.3</td>
  <td>30.5</td>
  <td>23.5</td>
  <td>40.3</td>
 </tr>
<tr>
  <td>Google</td>
  <td>50.2</td>
  <td>40.63</td>
  <td>45.23</td>
  <td>39.3</td>
</tr>
<tr>
  <td>Apple</td>
  <td>25.4</td>
  <td>30.2</td>
  <td>33.3</td>
  <td>36.7</td>
</tr>
<tr>
  <td class="round-bottom">IBM</td>
  <td>20.4</td>
  <td>15.6</td>
  <td>22.3</td>
  <td>29.3</td>
</tr>
</table>

CSS:

table {
border-spacing: 0;
empty-cells: hide;
}
td {
padding: 10px 20px;
text-align: center;
border-bottom: 1px solid #F4EEE8;
transition: all 0.5s linear;
}
td:first-child {
text-align: left;
color: #3D3511;
font-weight: bold;
}
th {
padding: 10px 20px;
color: #3D3511;
border-bottom: 1px solid #F4EEE8;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
td:nth-child(even) {
background: #F6D27E;
}
td:nth-child(odd) {
background: #D1C7BF;
}
th:nth-child(even)  {
background: #F6D27E;
}
th:nth-child(odd)  {
background: #D1C7BF;
}
.round-top {
border-top-left-radius: 5px;
}
.round-bottom {
border-bottom-left-radius: 5px;
}
tr:hover td{
background: #D1C7BF;
font-weight: bold;
}

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

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

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

Все о программировании Хочешь узнать тонкости разработки программных продуктов, понять, о чем думает программист и, при желании, освоить востребованную специальность? Изучай бесплатные авторские статьи, обзоры и задачи с dr.Brain. Осваивай HTML, CSS, JavaScript, PHP и другие языки программирования. Подписывайся прямо сейчас и не пропускай выход новых интересных материалов.

❔ Как сделать узор-елочку для фона? CSS:

div {
background:
linear-gradient(to left bottom, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 0 0, 
linear-gradient(to right top, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 2em 0, 
linear-gradient(to left bottom, transparent 0.4em, #623D56 0.4em, #623D56 1em, transparent 0.4em) 0 1.02em, 
linear-gradient(to right top, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 2em 1.02em,
linear-gradient(to right bottom, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 0 0, 
linear-gradient(to left top, transparent 0.4em, #EE3F40 0.4em, #EE3F40 1.02em, transparent 1.02em) 2em 0, 
linear-gradient(to right bottom, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 0 1.02em, 
linear-gradient(to left top, transparent 0.4em, #623D56 0.4em, #623D56 1.02em, transparent 0.4em) 2em 1.02em;
background-size: 4em 4em;
background-color: #F1E9D2;
background-repeat: repeat;
}

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

🔥 Самые нужные каналы для Frontend разработчика, чтобы расти в доходе 💸 • Frontend | Вопросы собесов • Frontend | LeetCode • Frontend | Тесты • Frontend | Удалёнка Подпишись, чтобы не потерять ☝️

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

Разбираем как решать задачи на LeetCode ✅ Примеры решений ✅ Пояснения Выбери своё направление: 1. Python 2. JavaScript 3. Java 4. C# 5. Golang 6. C/C++ 7. PHP 8. Kotlin 9. Swift

👨‍💻 Neumorphic buttons Минималистичные кнопки с анимацией при нажатии Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

⚡️ Статейная теперь в Telegram! Здесь публикуют лучшие статьи для программистов со всех направлений — заходи, читай, изучай: Статьи для Frontend разработки Статьи для Python разработки Статьи для Java разработки Статьи для C/C++ разработки Статьи для C# разработки Статьи для PHP разработки Статьи для Go разработки Статьи для Android разработки Статьи для iOS разработки Статьи для безопасников Статьи для разработчиков игр Статьи для тестировщиков Статьи для DevOps-инженеров 🔗 Ссылки скоро сгорят, успей подать заявку

❔ Как оформить таблицу цен? HTML:

<div class="wrap">
  <div class="box">
    <div class="top">
      <p class="title">«Всё за 200»</p>
      <p class="price">
        <sup>P</sup>
        200
        <span>/МЕС.</span>
      </p>
      <a class="button" href="#">Перейти на тариф</a>
    </div>
    <div class="bottom">
      <ul>
        <li>Услуга «Будь в курсе +»</li>
        <li>Услуга «Есть контакт»</li>
        <li>500 Мб в месяц</li>
      </ul>
    </div>
  </div>
   <div class="box" style="margin-right:0;">
    <div class="top">
      <p class="title">«Всё за 400»</p>
      <p class="price">
        <sup>P</sup>
        400
        <span>/МЕС.</span>
      </p>
      <a class="button" href="#">Перейти на тариф</a>
    </div>
    <div class="bottom">
      <ul>
        <li>Услуга «Будь в курсе +»</li>
        <li>Услуга «Есть контакт»</li>
        <li>1 Гб в месяц</li>
      </ul>
    </div>
  </div>
</div>

CSS:

* {box-sizing: border-box;}
body {
  margin: 0 0 0 20px;
  background: url(image.jpg);
}
.wrap {
  width: 640px;
  margin: 50px auto 0;
  overflow: hidden;
  font-family: 'Open Sans', sans-serif;
} 
.box {
  width: 300px;
  float: left;
  margin-right: 20px;
}
.top {
  background: #36454A;
  padding: 20px;
  text-align: center;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
p {
  margin: 0px 0px 10px;
}
.title {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 24px;
  text-align: center;
  font-weight: bold;
}
.price {
  font-size: 70px;
  font-weight: bold;
  color: #ffffff;
  position: relative;
  text-align: center;
}
sup {
  font-size: 24px;
  position: relative;
  top: -15px;
  color: #6eaca7;
}
span {
    font-size: 16px;
    color: #6eaca7;
    text-transform: uppercase;
}
.button {
  text-decoration: none;
  color: #6eaca7;
  font-size: 18px;
  border: 1px solid #6eaca7;
  display: inline-block;
  padding: 6px 12px;
  line-height: 1.5;
  text-align: center;
  border-radius: 4px;
  transition: 0.4s linear;
}
.button:hover {
  color: white;
  border-color: white;
}
.bottom {
  padding: 20px 20px 40px;
  background: #ffffff;
  border: 1px solid #e3e3e3;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
li {
  border-bottom: 1px solid #e3e3e3;
  color: #6eaca7;
  font-size: 16px;
  line-height: 40px;
}

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

💸 Вакансии для IT'шников Выбери своё направление ⤵ 1. Frontend 2. Python 3. Java 4. Тестировщик QA 5. Data Science 6. DevOps 7. C# 8. С/C++ 9. Golang 10. PHP 11. Kotlin 12. Swift

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

🚀 Изучай HTML и CSS с нуля! 🚀 Присоединяйтесь к нашему Telegram-каналу [https://t.me/made_in_html_css] Здесь вы найдете: Уроки с нуля – от основ к сложным темам. Практические задания – применяйте знания на практике. Советы от опытных разработчиков – получайте помощь и рекомендации. Участие в проектах – накапливайте практический опыт. Обсуждения – делитесь успехами и задавайте вопросы. Присоединяйтесь и начните обучение уже сегодня! 🌟