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

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

<blockquote>
  <p>I don't know...</p>
  <footer>— <cite>Coco Chanel</cite></footer>
</blockquote>

CSS:

blockquote {
margin: 0;
background: #FFF4ED;
padding: 40px;
color: #3F484D;
position: relative;
font-family: 'Lato', sans-serif;
text-align: center;
}
blockquote:before, blockquote:after {
font-size: 45px;
color: #3CA1D9;
position: absolute;
height: 2px;
left: 40px;
right: 40px;
line-height: .5;
background: linear-gradient(to right, #3CA1D9 45%, transparent 45%, transparent), linear-gradient(to right, transparent, transparent 55%, #3CA1D9 55%);
font-family: serif;
}
blockquote:before {
content: "\201C";
top: 30px;
}
blockquote:after {
content: "\201D";
bottom: 30px;
}
blockquote p {
font-size: 20px;
}
blockquote footer {
margin-bottom: 1em;
}
blockquote cite {
font-style: normal;
}

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

🔉 Устали от информационного шума в десятках телеграм-каналов, но не хотите пропустить важные новости из мира технологий? Мы нашли для вас идеальный источник актуальных и проверенных новостей — канал OpenNews! 🌐 Мы ежедневно следим за самыми свежими и актуальными событиями в сфере технологий, интернета и IT. У нас вы найдете всё, что нужно, чтобы оставаться на гребне технологической волны: новости о последних трендах, инновациях и многом другом. Что вас ждет внутри: 🔹 Самые важные новости и события из мира IT и технологий 🔹 Тренды и инновации, которые меняют будущее 🔹 Анализ ключевых трендов в мире технологий 🚀 Если вы хотите быть в курсе последних технологических трендов и получать только проверенную информацию, переходите на канал OpenNews и оставайтесь на связи с миром инноваций и технологий! erid: LjN8KFjRM

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

👋 Привет, любители ИИ и всего нового! ✨ Я создал "Нейронный калейдоскоп" - это мой уголок экспериментов с ИИ. Здесь я днями и ночами колдую над кодом, чтобы оживить самые крутые нейросети. Что у меня творится: 🎨 Позволяю ИИ рисовать, петь, чувствовать 🤖 Создаю ботов, которые реально видят и слышат 🚀 Постоянно улучшаю своих цифровых гостей - от Гермионы до Wednesday 📰 Разбираю актуальные новости ИИ и даю точную выжимку информации ❤️ Этот канал - личный восторг от нейросетей и желание поделиться им с вами! 🔥 Вся актуалочка из мира ИИ - у меня в канале! 🤗 Бесконечно рад каждому подписчику. Давайте вместе исследовать границы возможного! Если вам интересно, как далеко может зайти ИИ, и вы готовы разделить мой энтузиазм - добро пожаловать! 🚀 Реклама. Волков Д.Н. ИНН 616611204594. erid: LjN8K6zyY

👨‍💻Pure CSS Card Pagination Карточки с возможностью скроллинга Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

👨‍💻Pure CSS Card Pagination Карточки с возможностью скроллинга Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

Оставьте сомнения и сделайте уверенный шаг к карьере веб-разработчика на мини-курсе Skillbox. Научитесь зарабатывать на фрилансе! Вы с нуля создадите 3 проекта — сайт, приложение и сервис — и изучите основы самых востребованных технологий. Регистрация: https://epic.st/5piecd?erid=2Vtzqvr5UYL На мини-курсе вы научитесь: — Создавать веб-страницы, используя язык разметки HTML и технологию CSS — Реализовывать серверную часть (backend) веб-приложений на языке PHP — Работать с базой данных MySQL при помощи языка запросов SQL — Создавать приложения на языке программирования JavaScript — Автоматически получать информацию с других сайтов — Размещать сайты в интернете 📍Спикер — Даниил Пилипенко, основатель и директор центра подбора IT-специалистов SymbioWay. 19 лет работает в сфере Java- и веб-разработки, руководит командами разработки в разных проектах. Каждый участник получит подборку полезных материалов, а также подарки от Skillbox. Реклама. ЧОУ ДПО «Образовательные технологии «Скилбокс (Коробка навыков)», ИНН: 9704088880

❔ Как сделать красивые рамки для текста и фото на сайте HTML:

<div class="block-container">
  <div class="text-wrap">
    <h1>Вечерний альбом</h1>
    <h2>М. Цветаева</h2>
  </div>
</div>

CSS:

.block-container {
  width: 350px;
  height: 400px;
  background: #fdfefe;
  margin: 0 auto;
  position: relative;
  border-top: 1px solid rgba(255,255,255,0);
  box-shadow: 2px 2px 5px rgba(0,0,0,.1);
 }
.block-container:before {
  content: "";
  position: absolute;
  left: 50px;
  z-index: 3;
  width: 0; 
  height: 0;
  border-top: 400px solid white;
  border-left: 50px solid rgba(255,255,255,0);
}
.block-container:after {
  content: "";
  width: 100px;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: radial-gradient(circle, #00B3ED 4px, rgba(255,255,255,0) 4px, rgba(255,255,255,0) 9px, #D2F0FB 9px, #D2F0FB 10px, rgba(255,255,255,0) 10px) 0 0, 
    radial-gradient(circle, #EC6047 4px, rgba(255,255,255,0) 4px, rgba(255,255,255,0) 9px, #FDFEFD 9px, #FDFEFD 10px, rgba(255,255,255,0) 10px) 18px 18px, 
    radial-gradient(circle, #D2F0FB 2px, rgba(255,255,255,0) 2px) 18px 0, 
    radial-gradient(circle, #EC6047 2px, rgba(255,255,255,0) 2px) 0 18px;
  background-size: 36px 36px;
  font-size: 6px;
  background-color: #2F2F63;
  background-repeat: repeat;
}
.text-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  padding-right: 40px;
  box-sizing: border-box;
  text-align: right;
}
.text-wrap h1, 
.text-wrap h2 {
  font-family: 'Open Sans', sans-serif;
  color: #2F2F63;
}
.text-wrap h1 {
  margin-top: 150px;
  font-size: 24px;
}
.text-wrap h2 {
  text-transform: uppercase;
  position: relative;
  font-size: 16px;
  margin-top: 30px;
  font-weight: 300;
}
.text-wrap h2:before {
  content: "";
  position: absolute;
  top: -6px;
  right: 0;
  width: 40px;
  height: 1px;
  background: #2F2F63;
}

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

👩‍💻 ТЕРРИТОРИЯ ТЕПЛА Сайт компании по утеплению объектов 🟠 Сложность: Сложный 🟠 Адаптивность: Есть Исходники | @codewebx | #figma 🖥 Готовые шаблоны, плагины, темы

.

👨‍💻Modern Fitness app UI Оформление для сайта / приложения для фитнеса Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

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

<div class="card">
  <h3 class="card-title">Весна</h3>
    <div>
      <img src="image.jpg">
    </div>
    <p>Придет весна и вновь заглянет...</p>
</div>

CSS:

.card {
  padding: 20px;
  border: 1px solid #eaeaea;
  max-width: 300px;
  width: 100%;
  margin: 50px auto 0;
  background: white;
}
.card-title {
  font-family: 'Playfair Display', "Georgia","Times New Roman",serif;
  font-size: 20px;
  line-height: 1;
  padding-bottom: 15px;
  margin: 10px 0 20px;
  color: black;
  text-align: center;
  border-bottom: 3px double #eaeaea;
}
.card img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
}
.card p {
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  line-height: 22px;
  margin-bottom: 0;
}

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

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

Много практики - мало воды! На бесплатном интенсиве по frontend-разработке вы с нуля под руководством опытного наставника создадите свой проект и сможете пополнить портфолио. В рамках интенсива мы: — Сверстаем сайт на Html — Напишем стили к сайту на Css — Реализуем некоторые функции на JavaScript И многое другое, о чем подробно рассказываем на сайте. Этот проект предоставит вам возможность погрузиться в разнообразные технологии веб-разработки и усовершенствовать навыки работы с HTML, CSS, а также научит вас создавать посадочные страницы с нуля. Занимайте место прямо сейчас: https://tglink.io/b8322d930fdc

👨‍💻Shape up calendar Календарь в виде карточек и переключателя Исходники | @codewebx | #codepen 🖥 Готовые шаблоны, плагины, темы

🚀 Представляем PhotoJam Bot: бесплатный ИИ-помощник для редактирования фото! 📸✨ 🖼 Мгновенное удаление фона 🌟 Создание реалистичных теней с помощью ИИ 🎨 Генерация креативных фонов для товаров\людей по вашему описанию Преимущества PhotoJam: ✅ Простой интерфейс: работайте прямо в Telegram ✅ Быстрая обработка: результат за секунды ✅ Высокое качество без усилий ✅ Доступность: начните бесплатно! Видео как работает бот: посмотреть по ссылке Готовы превратить обычные фото в шедевры?  👉 Попробуйте сейчас: @PhotoJamBot erid: LjN8KHqZS

❔ Как сделать обтекание картинки текстом? С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера. Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin. Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;}. Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;}, или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац. HTML:

<h1>List of towns in England</h1>
<h2>Amersham</h2>
<p><img class="left" src="image.jpg">Amersham is ...</p>

<h2>Buxton</h2>
<p><img class="right" src="image.jpg">Buxton is ...</p>

<h2>Chesterfield</h2>
<p class="columns">Chesterfield is ...</p>
<img class="img-center" src="image.jpg">
<p class="columns">It has ...</p>

<h2>Dartmouth</h2>
<p><img class="center" src="image.jpg">Dartmouth is ...</p>

CSS:

* {
   box-sizing: border-box;
}
.product-item {
   width: 300px;
   margin: 0 auto;
   padding: 10px 10px 5px 10px;
   border: 1px solid #eee;
   background: white;
   font-family: "Open Sans";
   overflow: hidden;
   transition: .4s linear;
}
.product-img {
   transition: 1s ease-in-out;
}
.product-img:hover {
   transform: scale(1.1);
}
.product-img img {
   display: block;
   width: 100%;
}
.product-list {
   margin-top: 15px;
}
.product-list h3 {
   font-weight: 700;
   color: #39404B;
   margin: 0;
   text-transform: uppercase;
   font-size: 14px;
   line-height: 2;
}
.price {
   color: #E34D38;
   display: block;
   margin-bottom: 12px;
}
.stars {
   height: 14px;
   line-height: 14px;
   margin: 7px 0;
}
.stars:before {
   content: "\f005\f005\f005\f005\f006";
   color: #EFB71C;
   font-size: 14px;
   font-family: FontAwesome;
}
.actions {
   border-top: 1px solid #eee;
   padding-top: 4px;
   font-size: 13px;
   height: 30px;
   line-height: 30px;
}
.actions:after {
   content: "";
   display: table;
   clear: both;
}
.add-to-cart, .add-to-links {
   float: left;
}
.cart-button {
   text-decoration: none;
   color: #8C877C;
   padding-right: 20px;
   border-right: 1px solid #ddd;
   transition: .4s linear;
}
.cart-button:before {
   content: "\f07a";
   font-family: FontAwesome;
   margin-right: 10px;
}
.add-to-cart:hover .cart-button, .wishlist:hover, .compare:hover {
   color: #E34D38;
}
.wishlist, .compare {
   color: #8C877C;
   padding-left: 20px;
   transition: .4s linear;
}
.wishlist:after, .compare:after {
   display: inline-block;
   font-family: FontAwesome;
   font-size: 13px;
}
.wishlist:after {
   content: "\f004";
}
.compare:after {
   content: "\f079";
}

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

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