Создаем адаптивный сайт-визитку | HTML & CSS туториал
В этом видео создадим небольшой сайт-визитку. Применим CSS Grid и Flexbox позиционирование, а также рассмотрим, как создается анимация.
Ссылки
________
Скачать стартовый шаблон - bit.ly/3bfECTw
Fancy Border Radius - 9elements.github.io/fancy-bor...
Градиенты - webgradients.com/
Свойство backdrop-filter - developer.mozilla.org/ru/docs...
Шрифтовые иконки - boxicons.com/
Редактор кода -code.visualstudio.com/
Подписаться ► bit.ly/3hGFYYR
Пікірлер: 41
Есть много нюансов и ошибок в видео, но если буду вопросы - пишите в комментариях. Отвечу обязательно)
@digmen_gg5308
Жыл бұрын
требую урок по подключению бок иконок
Автору ролика респект!
Объяснил и показал понятно и быстро, а главное вышло круто 🔥
Спасибо большое, благодаря таким видео можно не хило так развиваться)
Классная идея с анимированным окошком
Круто вы первый с кем у меня получилось сверстать без багов))
хоть у меня не так хорошо получилось , но новый опыт я определенно получил😁👍
Давай ещё, чё пропал
Годно, спасибо автору
топ видео!!! быстро и понятно🔥🔥🔥🔥
Круто!
Чётко
как подключать иконки и шрифты? до меня не доходит
Будут ещё уроки?
Привет! Подскажи пожалуйста что это за цветовая схема? И как настроить чтобы текст в редакторе так же сам переносился?
@arseqpage9131
2 жыл бұрын
Привет! Тема one monokai вроде как. Перенос строк можешь включить, если в поиске настроек вобьешь "Editor: Word Wrap" и выставишь значение "On"
@olegcastom
2 жыл бұрын
@@arseqpage9131 спасибо большое!
Иконки соц.сетей у меня получились вертикально по левому краю. Вроде всё как на видео делал...
стартовый шаблон ссылка не работает :((
Что делать,если фото не в анимации,а поверх неё,а анимация только уголками видна ?
@arseqpage9131
Жыл бұрын
Какой браузер используете? Может упустили некоторые стили еще
Какая тема в VSC?
@arseqpage9131
3 жыл бұрын
One Monokai вроде бы
не знаю почему но у меня выстроилось в одну колону, хотя код как в видео
опыта у меня мало , я попробовал у меня получилось , идея мне очень понравилась но я захотел изменить блок с изображением поставив его первым а потом текст , но я столкнулся с проблемой при изменение размера экрана он просто уменьшается и не переносит блок container на другую строчку , можете помочь , думаю с малым опытом не понятно как решить эту проблему😅
@arseqpage9131
Жыл бұрын
Можешь загрузить код на гитхаб и скинуть ссылку, посмотрим
@vla7d525
Жыл бұрын
@@arseqpage9131 смотрите я работаю с вашим кодом но не могу понять какой элемент отвечает за то что при других размерах браузера переставляет блок div ( ссылки на соц сети и картинки ) я могу скинуть код но там почти тоже самое будет что и вашем коде . Можете объяснить какой элемент отвечает за перекидку div картинки вниз😅
@vla7d525
Жыл бұрын
спасибо я разобрался просто добавил в css класс hero -> display: grid; grid-template-columns: repeat(auto-fit, minmax( 290px,1fr)); grid-gap: 20px;
@vla7d525
Жыл бұрын
и теперь блок картинки у меня первый а потом уже текст идёт с ссылками
Следовала один в один, но получилось нечто совсем не похожее((
у меня градиент фон только не работает
about-fit не активен((( и колонки не становятся рядом
На сервере анимация схлопывается, фото даже не видно (
@Anti-zasor
Жыл бұрын
Всё разобрался, путь на фото не правильно написал) спасибо
А как "h1.name" превращался в "name" и как менялось окно сайта в браузере(адаптивность)?
@arseqpage9131
3 жыл бұрын
1:30 с помощью плагина Emmet можно быстро делать разметку, пишете h1.name или h1{name}, затем жмете Tab или Enter. Адаптив можно проверить, перейдя в консоль разработчика и слева от Elements есть значок мобильного устройства
@thespartanec9874
3 жыл бұрын
@@arseqpage9131 Спасибо, а как у вас код с страничкой синхронизировался на лету, тоже какой-то плагин?
@arseqpage9131
3 жыл бұрын
@@thespartanec9874 да, Live Server. Устанавливаете и в файле index.html жмете правую кнопку мыши, затем Open with Live Server
@thespartanec9874
3 жыл бұрын
@@arseqpage9131 Спасибо!
@arseqpage9131
3 жыл бұрын
@@thespartanec9874 удачи в разработке!