КодВеб — HTML, CSS, JavaScript | Вёрстка | Фронтенд
✨ Здесь публикуются самые лучшие сниппеты с codepen.io, стильные макеты Figma, опросы, туториалы, статьи и прочее. Канал на бирже: https://telega.in/channels/codewebx/card Реклама: @xss1de Менеджеры: @reimbayev_s (без оплаты)
Ko'proq ko'rsatish3 149
Obunachilar
+524 soatlar
+57 kunlar
+6130 kunlar
- Kanalning o'sishi
- Post qamrovi
- ER - jalb qilish nisbati
Ma'lumot yuklanmoqda...
Obunachilar o'sish tezligi
Ma'lumot yuklanmoqda...
00:09
Video unavailableShow in Telegram
❔ Как сделать стильную кнопку "в корзину"?
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
🖥 Готовые шаблоны, плагины, темыIMG_6656.MP41.93 MB
👍 3
00:36
Video unavailableShow in Telegram
На css и js можно делать крутые отзывчивые интерфейсы
Если знать, как 💥
Приручить вёрстку поможет Нестыдный код. Создавай классные эффекты в своих работах, даже если с фантазией все плохо
Несколько сотен готовых решений для вдохновения и использования
Личный помощник фронтендеру прямо в мессенджере!
Нихуя себе дятел долбит.mp43.89 MB
👍 2
Приручить вёрстку 🔥
Photo unavailableShow in Telegram
👩💻 Rentflats
Сайт компании по аренде недвижимости.
🟠 Сложность: Легкий
🟠 Адаптивность: Есть
Исходники | @codewebx | #figma
🖥 Готовые шаблоны, плагины, темы
👍 2
Photo unavailableShow in Telegram
Frontend теперь в телеграм!
Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках:
Логово Верстальщика — научит верстать продающие сайты.
Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков.
Frontender's notes — советы и полезные приемы для каждого разработчика.
👍 3
00:15
Video unavailableShow in Telegram
👨💻 Dots & Ring Loader
Окно загрузки со сменой фона
Исходники | @codewebx | #codepen
🖥 Готовые шаблоны, плагины, темы
IMG_6482.MP42.72 MB
❤ 2🔥 2
Photo unavailableShow in Telegram
🔍 Ищешь подходящий курс или книгу?
Все платные курсы, книги и другие материалы уже давно сливаются в TelegramВыбирай направление и обучайся бесплатно: — Frontend-разработчик — Backend-разработчик — Python-разработчик — Kotlin-разработчик — Swift-разработчик — Golang-разработчик — Java-разработчик — C#-разработчик — C/C++-разработчик — PHP-разработчик — 1С-программист — QA-тестировщик — DevOps-инженер 🔒 Ежедневно куча материалов сливается в канал Easy Dev
👍 2❤ 2
Photo unavailableShow in Telegram
❔ Как оформить запись текст + фото в блоге?
HTML:
<div class="container">
<div class="post">
<div class="post-image">
<img src="image.jpg">
</div>
<div class="post-content">
<div class="post-header">
<h1>Как бы то ни было, консультация с широким активом оказалась чрезвычайно полезной</h1>
<div class="post-meta">
<time datetime="2019-04-01">Апрель, 1</time>
<span class="author">Ирина Клубничная</span>
<span class="category">Философия</span>
</div>
</div>
<p>текст
</p>
</div>
</div>
</div>
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
🖥 Готовые шаблоны, плагины, темы👍 5
Какое свойство CSS используется для управления пространством между элементами flex-контейнера?Anonymous voting
- margin
- gap
- padding
- spacing
Photo unavailableShow in Telegram
Хочешь щёлкать задачи по фронтенду как орешки?
Канал Frontend Tests & Tasks научит!
Это не очередной канал с задачами. Здесь придется думать.
Убедись сам 👉 @Frontend_Task
👍 2
Photo unavailableShow in Telegram
👩💻 BOARDRIDERS
Сайт магазина спортивного инвентаря.
🟠 Сложность: Легкий
🟠 Адаптивность: Есть
Исходники | @codewebx | #figma
🖥 Готовые шаблоны, плагины, темы
👍 2