Крутой видос!!!!!!!!!!!!!!!!!!!! ПОЧЕМУ ТАК МАЛО ЛАЙКОВ ЛЮДИ ДОБРЫЕ !!!!!!!!!! Человек тратит своё время на обучение для нас!!!!!!!!!!!!!!!! СПАСИБО!!!!
Я конешно всё понимаю, Андрей работал 3 часа 38 минут и не мог остановится на каждой ошибке, но слайдер не адекватный получился. Дело в том, что есть первый елемент и четверть второго элемента, а когда нажимаешь на стрелку "вправо", то делается не второй элемент и чверть третего, а 3/4 второго и 3/4 третего. В силу того, что бы помочь подписчикам Андрея вот, что нужно сделать: 1. В main.js в объэкте для первой карусели: $('.works-carousel').owlCarousel({ loop:true, margin:30, nav:true, autoWidth:true, dots:false, navText: ['', ''], responsive:{ 0:{ items:2 }, 600:{ items:2 }, 1000:{ items:2 } } }); добавить свойство autoWidth:true, и удалить свойство startPosition 2. В main.css: .works-carousel .item { width: 850px; } для первого элемента добавляем style="width:850px" И всё становится ок!
Андрей, привет! Я из андроид разработки! вот как это сделать можно было! 1:37:41 число 1 это целая фотография, а если установить 1.3 то будет одна целая фотография, и 30 процентов второй фотографии)) 1000:{ items:1.3 }
Полностью тебя поддерживаю! Специально остановил видео до такого момента, когда у Андрея начались проблемы с каруселью. Поставил 1.3. Всё прекрасно заработало. Главное, проверять свои догадки)
круто! только я в начале и мне кажется в хедере бэкграунд картинку надо привязывать не к правому краю а к левому в любом случае если убрать из hero right то станет по лучше .hero { background: url("/img/img1.jpg") no-repeat right top; width: 700px; height: 840px; position: absolute;
Андрей, как ты терпишь постоянно в ручную сохранять саблайм, обновлять страницу и прокручивать до низа? Меня это бесило, сейчас пользуюсь VS code, поставил плагин Live server, который запускает сайт локально и при сохранении файла кода сразу обновляет страницу, и в самом VS Code есть настройка, делающая автосохранение всех открытых файлов при потере фокуса окна, но почему у тебя страницу вверх кидает не знаю, браузеры по дефолту при обновлении сохраняют исходное место просмотра, у меня такой проблемы не было. То есть получается тебе остается делать только два действия: "изменил код" -> "переключился в браузер", всё, у тебя уже сохранены изменения и обновлена страница, оставшись в том месте, где стояла, сразу видно все изменения. Советую чекнуть такие возможности в саблайме, либо поставить VS code, там кстати можно тему саблаймовскую поставить, чтоб привычно было
А я просто в Dev tools создаю work space и все. Стили сохраняются в шторм при изменении в браузере и НАОБОРОТ, что не маловажно! Без перезагрузки страницы и без сторонних плагинов, разрешений и тд.
2:36:18 а если сделать так, чтобы для разных вкладок показывалось разное кол-во картинок, то все они (понятное дело) стоят на тех же местах, как если бы было видно все картинки, а как сделать, чтобы они были друг за другом, без пробелов?
Привет! А я вот использую transform translate -50%, -50% для элемента, которому задаю left 50% и top 50%, к примеру, когда нужно его поставить точно по центру) тогда исчезает необходимость высчитывать минумовые маржины и ещё бонус в том, что если меняешь размеры элемента на адаптиве, то не нужно менять минусовые маржины! Спасибо за инфу! Всегда что-то полезное узнаю, когда смотрю чужой рабочий процесс))
Проблему появления следующего слайда можно решить так ---> в JS дописать: stagePadding: 150 (или любое понравившееся значение padding) , в СSS : .owl-stage{ padding-left: 0 !important; }
Много интересных моментов показал - спасибо Насчет теней елементов, при работе с фигмой - тени адекватно отображаются во вкладке code в формате rgba Одна из не многих полезных функций этой вкладки)) Еще раз спасибо
Здравствуйте! Подскажите, пожалуйста, почему когда я прописываю в css для h1, h2, h3, h4, h5, h6 стили, то они не отображаются на сайте? И так же с кнопкой .btn (делаю так же как на видео а в css реагирует только, если указываю то есть общее значение для кнопок не получается сделать. Использую VSCODE. Мб нужен плагин какой-то?
Неплохо... Я давно не использую отрицательный margin для центрирования, так как нужно знать размер. Куда проще сделать translate и -50% по обоим осям. Также, есть правило, жесткое: если не нужна анимация в больших объемах (GSAP использую), то скрипты и стили должны влезть в 16К. Поэтому, только свои слайдеры и никаких bootstrap, jQ, owl и т.д. Вообще, в продакшн-е чужие скрипты - зло! Никик не уйду с классики, а нужно попробовать уже Figma...
Я вот не совсем понимаю, вот мы когда задаём размер картинок процентами или разными там vh, то по сути мы немного меняем пропорции картинки. В нашем случае это не особо видно, потому что картинки какие-то абстрактные. А если были бы какие-то обычные фото, то нам бы пришлось просто на глаз подбирать размеры, чтобы пропорции сохранились как можно ближе к оригиналу или же мы бы не смогли задавать размеры таким способом?
В Owl Carousel взял stagePadding, который с двух сторон, и сделал .owl-stage{left: -100px;} в одну сторону (столько же, сколько stagePadding в скрипте), так легче и работает как надо
Если для блока hero поствить position: absolute; и width: 100%; (высоту по вкусу) то он сразу прижмется к карю экрана правому, а левый край к левому краю столбца. И верх к верху столбца, ячейки другими словаи. Тоесть он срзау становится как надо и прокручиватеся как надо, то есть он зафиксирован внутри ячейки, только првый край прижат к карю экрана, а не ячейки. Атак он тянется, адаптивный, все отлично. Одно плохо - Почему происходит - не знаю. ГЛавное не задавтаь ему райт и топ, а то все слетает. Бутстрап 5. Почему так происходит?
2:25:50 а мне не нравится, что картинка (маленький квадратик "пуск") остается на том же месте, а не прыгает вместе с элементом при наведении, выглядит криво
Пока только учусь верстать, но захватывает этот процесс. Пробовала повторять все, что в уроке, но почему-то как-то криво выходило, может что-то неправильно подключила, не знаю. Но делала все четко по экрану(
Я не понял, почему ссылка с классом video и с position absolute позиционируется относительно col-md-6 если у него сброшен position relative, в таком случае, по идее, video должно позиционироваться относительно body как и hero, есть у кого домыслы по этому поводу??? Вариант, что если у родителя абсолют то дочерний с абсолют будет примыкать к родителю, то есть абсолют позиционируется относительно абсолютного родителя имеет место быть?
Добрый день, Андрей! Сижу повторяю мастер-класс на ноутбуке (разрешение 1920х1080 масштаб 125%) все плывет, судя по тем размерам которые figma дает плюс пиксели в css, пытаюсь все размеры делать в em или rem или %. Переношу html страницу на монитор 1920х1080 все хорошо. масштаб 100%. Что bootstrap что flex css что gred css затыкаются именно на масштабе(может я чего то не понимаю, (всего 2 месяца с 0 верстаю). Приходится использовать медиа запросы (верстал свой первый сайт победил только медиа запросами) Страница сверстанная через Flex маштабировалась, с ней минимальные были проблемы по уменьшению контента в блоках, а вот блочная верстка не хочет. Существует ли стандартное решение данной проблемы(может какие то есть технологии)? Чтобы контейнер масштабировался пропорционально с внутреннем контентом...или нужно еще чего то изучать? Потому что масштабирую другие сайты, масштабируется весть контейнер пропорционально....на какие бы разрешения не переносил и масштабы экрана(не берем в рассмотрение планшеты и мобилки).
Как скачать макет? Уже много раз ввел свой адрес, имя, но на почту ничего не приходит. Пробовал отправить макет на gmail и mail - ничего не приходит. Но когда попытался сбросить пароль, то сообщение тут же пришло. В чем дело? Каждый раз испытываю сложности со скачиванием макетов
Почему вы не используете инструменты Pug, Sass, gulp/npm run? Они же по идее должны ускорять разработку, да и в целом сейчас имхо без них ни в одну контору не устроиться.
отличный туториал, много чего почерпнул и уже использую на практике, спасибо! Единственная просьба, поставьте тайм коды. Я уже не первый раз возвращаюсь к этому видео, что бы подсмотреть чё да как, и мне приходится постоянно искать, неудобно.
Я не знаю, почему у меня который мастеркласс подряд не работает ml-auto. Добавление класса не выравнивает кнопку по правой стороне. Проблема решилась, когда я добавила в вышестоящий div класс d-flex. Не очень понимаю как, но оно работает.
Подскажите пожалуйста в 2х словах, почему Вы используете col-md? Почему не col-lg? Вопрос от новичка) спасибо большое за мастер класс, очень много полезной информации ))
копировал структуру сайта, переписываю код построчно, дошел до кнопки get started, проверяю в браузере что получилось, ничего не получилось, все в левом верхнем углу, кнопки нет, цвета нет, проверил код, всё один в один, б**ть почему у меня не работает!? ведь у него все получается...
не очень понравилось решение с первой секцией, где используется static Можно взять fluid контейнер и положить в него 2 колонки по 6, во 2 прибить контент справа === HTML ===
А в начале видео Андрей прогуливается через парк Победы в Одессе) Что же вы молчите что вы одессит?)) теперь точно стоит пройти ваш курс)) а я то думаю откуда такое качество знаний, так теперь все стало ясно)
За аватар бэкграудом конечно бэкенд разработчик тебе спасибо скажет большое. А из одной ul сделать 2 колонки можно с помощью свойства column. По мимо хайповых фрлексов и гридов есть ещё много свойств интересных в css. Спеку то хоть время от времени почитывать нужно все таки, коль уж профессионалами себя называете и людей учите.
на 1:32:хх, там где пытаешься сделать, чтоб в карусели отображалась одна целая картинка и часть второй, можно просто в ДжС файле в объекте респонсив задавать дробные значения значениям айтемс. это вместо костылей:) Вернее будет сказать, что это вопрос от нуба, а не утверждение))но вроде работает
Ну, наверное, на элементоре сайт будет на 1,5 секунды дольше открываться, а ещё особо туп... эээ... умный заказчик может прогнать его через Гугл ПейджСпид, после чего тебе придётся с позором бежать из страны :)
смотрел ради того, чтобы понять как верстать элементы, которые занимают не полные столбцы(4.5, 5.5(выходят в пространство между столбцами)),а ты подобные моменты исправил в фигме на ровные столбцы...lol
Да ты терминатор. Я только начал осваивать бутстрап, и для меня это реально сложно. Особенно темка с наложенными на друг друга картинками - вынос мозга
Андрей, ты очень крутой чувак! Ты так многому меня научил и вселил веру, с тебя я беру пример! Этот макет был и правда необычный в плане позиционирования я считаю. С радостью посмотрела эти четыре часа за процессом верстки :D Можно сделать следующий мастер класс с версткой под мобайл? Мне было бы очень интересно, тем более что сейчас у меня такой проект в работе, а в адаптивности в плане медиа запросов я все еще теряюсь ( Еще раз спасибо тебе за твои труды! Сохраняй позитив и шли подальше этих "шарящих" (я тоже из Украины, знаю это слово :D) чуваков из комментов ниже :)
Очень посредственная верстка. Там где стоит сделать другую структуру HTML, добавляется хардкодный CSS код для выравнивания по baseline (facepalm). Использование ТБ4 - тоже крайне сомнительное. Использовать из фреймворка только сетку - говорит о многом. Утилиты - не используются. Переменные - не настроены. Для одного лэндинга может и не критично, но при верстке более сложных проектов - будет беда.
у него времени было очень мало, от этого и не было настроенных переменных...и кстати использовать только сетку, ничего плохого в этом нет, куча хороших специалистов так делает, в чем проблема этого? и кстати, последнее твое предложение говорить само за себя, на видео ведь лендинг, а не сложный проект
Боже, сколько ошибок.... Ребята никогда так не верстайте как обучают на этом видео! Верстка почти вся поломанная. Бутстрап используется только для сетки... В тег header завернута вся первая секция, рили?! Скорость не равно качество. Зачем гамнять то так?
Крутой видос!!!!!!!!!!!!!!!!!!!! ПОЧЕМУ ТАК МАЛО ЛАЙКОВ ЛЮДИ ДОБРЫЕ !!!!!!!!!! Человек тратит своё время на обучение для нас!!!!!!!!!!!!!!!!
СПАСИБО!!!!
Я конешно всё понимаю, Андрей работал 3 часа 38 минут и не мог остановится на каждой ошибке, но слайдер не адекватный получился. Дело в том, что есть первый елемент и четверть второго элемента, а когда нажимаешь на стрелку "вправо", то делается не второй элемент и чверть третего, а 3/4 второго и 3/4 третего. В силу того, что бы помочь подписчикам Андрея вот, что нужно сделать:
1. В main.js в объэкте для первой карусели:
$('.works-carousel').owlCarousel({
loop:true,
margin:30,
nav:true,
autoWidth:true,
dots:false,
navText: ['', ''],
responsive:{
0:{
items:2
},
600:{
items:2
},
1000:{
items:2
}
}
});
добавить свойство autoWidth:true, и удалить свойство startPosition
2. В main.css:
.works-carousel .item {
width: 850px;
}
для первого элемента добавляем style="width:850px"
И всё становится ок!
класс, спасибо, помогло!
Вот спасибо тебе, получилось! мой первый коммент на ютубе))
Для слайдеров я использую таков алгоритм:
HTML:
- внешний блок
- внутренний блок
- элемент внутреннего блока, может быть любой
...
CSS:
.slider {
position: relative;
overflow: hidden;
прочее стили типа ширины, высоты, границ и так далее
}
.line {
position: absolute;
left: 0;
прочее стили
}
.line item {
float: left;
}
.left-btn {
прочее стили
}
.right-btn {
прочее стили
}
JS
let position = 0;
const slider = (k) => {
position = k*(position + pixel_number); //pixel_number - количество пикселей
document.querySelector(".line").style.left = position + 'px';
}
document.querySelector(".left-btn").addEventListener("onclick", slider(1));
document.querySelector(".right-btn").addEventListener("onclick", slider(-1)); //-1 и 1 - это направления вправо и влево
Андрей, привет! Я из андроид разработки!
вот как это сделать можно было! 1:37:41
число 1 это целая фотография, а если установить 1.3 то будет одна целая фотография, и 30 процентов второй фотографии))
1000:{
items:1.3
}
Полностью тебя поддерживаю! Специально остановил видео до такого момента, когда у Андрея начались проблемы с каруселью. Поставил 1.3. Всё прекрасно заработало. Главное, проверять свои догадки)
Наблюдать за процессами "ТУПИЖА" ))) спасибо огромное за проделываемую вашу работу, очень интересно, весело, и познавательно!
Андрей, вы - Киборг верстки!
Позитивный настрой в течении всех 4 часов - вишенка на торте!
Большое спасибо за Труд!
круто! только я в начале и мне кажется в хедере бэкграунд картинку надо привязывать не к правому краю а к левому в любом случае если убрать из hero right то станет по лучше .hero {
background: url("/img/img1.jpg") no-repeat right top;
width: 700px;
height: 840px;
position: absolute;
}
Обожаю такие видео, здорово поднимают самооценку)
Благодарю за труд! Сверстал сайт вместе с тобой, получил немало опыта, сейча нахожусь на этапе создания портфолио.
Привет, на работу устроился?
@@adamboy9789 сейчас получаю опыт на проекте, но бесплатно. Работу ищу.
@@alexpro5670как успехи?
Андрей, как ты терпишь постоянно в ручную сохранять саблайм, обновлять страницу и прокручивать до низа? Меня это бесило, сейчас пользуюсь VS code, поставил плагин Live server, который запускает сайт локально и при сохранении файла кода сразу обновляет страницу, и в самом VS Code есть настройка, делающая автосохранение всех открытых файлов при потере фокуса окна, но почему у тебя страницу вверх кидает не знаю, браузеры по дефолту при обновлении сохраняют исходное место просмотра, у меня такой проблемы не было. То есть получается тебе остается делать только два действия: "изменил код" -> "переключился в браузер", всё, у тебя уже сохранены изменения и обновлена страница, оставшись в том месте, где стояла, сразу видно все изменения. Советую чекнуть такие возможности в саблайме, либо поставить VS code, там кстати можно тему саблаймовскую поставить, чтоб привычно было
l Deum l есть хороший аналог browsersync, упрощает жизнь конкретно. Попробуйте, правда с настройкой придётся подумать.
А я просто в Dev tools создаю work space и все. Стили сохраняются в шторм при изменении в браузере и НАОБОРОТ, что не маловажно! Без перезагрузки страницы и без сторонних плагинов, разрешений и тд.
2:36:18 а если сделать так, чтобы для разных вкладок показывалось разное кол-во картинок, то все они (понятное дело) стоят на тех же местах, как если бы было видно все картинки, а как сделать, чтобы они были друг за другом, без пробелов?
Невероятно круто!!!
1:48:15 а как сделать, чтобы вторая картинка в этом слайдере была немного полупрозрачной, собственно как в дизайнерском макете?
2:36:18 у меня проблема в том, что если нажать по уже активной вкладке, то он возвращает меня в начало страницы, как это исправить?
Крутяк, лайк, подписка
благодарю!
Побольше таких видео бро и цены тебе не будет)), видео интересной верстки с макетом, даже на англоязычном контенте, не так много.
Привет! А я вот использую transform translate -50%, -50% для элемента, которому задаю left 50% и top 50%, к примеру, когда нужно его поставить точно по центру) тогда исчезает необходимость высчитывать минумовые маржины и ещё бонус в том, что если меняешь размеры элемента на адаптиве, то не нужно менять минусовые маржины!
Спасибо за инфу! Всегда что-то полезное узнаю, когда смотрю чужой рабочий процесс))
Проблему появления следующего слайда можно решить так ---> в JS дописать: stagePadding: 150 (или любое понравившееся значение padding) , в СSS : .owl-stage{
padding-left: 0 !important;
}
лучше просто вписать в Items:1.4
@@oleksandrdonikhin7124 Ок, спасибо за информацию, не знал.
За что отвечает offset-md-2 col-md-3 на иконка Search
Андрей - ты крут! Классный урок!!
Много интересных моментов показал - спасибо
Насчет теней елементов, при работе с фигмой - тени адекватно отображаются во вкладке code в формате rgba
Одна из не многих полезных функций этой вкладки))
Еще раз спасибо
Как ты сделал бутстрап перед началом всего ролика ?
Здравствуйте! Подскажите, пожалуйста, почему когда я прописываю в css для h1, h2, h3, h4, h5, h6 стили, то они не отображаются на сайте? И так же с кнопкой .btn (делаю так же как на видео а в css реагирует только, если указываю то есть общее значение для кнопок не получается сделать. Использую VSCODE. Мб нужен плагин какой-то?
Спасибо огромное! Очень приятно смотреть - объясняешь очень классно!
3:05:50 - width можно было задать "unset" вместо "auto" 😉
Смотрю ваши уроки как фильм
благодарю. весьма полезный контент
Не получается поставить в строку логотип и кнопки 2 верхние
Очень интересно вас слушать, спасибо
Неплохо... Я давно не использую отрицательный margin для центрирования, так как нужно знать размер. Куда проще сделать translate и -50% по обоим осям. Также, есть правило, жесткое: если не нужна анимация в больших объемах (GSAP использую), то скрипты и стили должны влезть в 16К. Поэтому, только свои слайдеры и никаких bootstrap, jQ, owl и т.д. Вообще, в продакшн-е чужие скрипты - зло! Никик не уйду с классики, а нужно попробовать уже Figma...
Как ты сверстал бутстрап перед этим?
Не могу понять, как открыть макет.
Thank you! God bless you!
Я вот не совсем понимаю, вот мы когда задаём размер картинок процентами или разными там vh, то по сути мы немного меняем пропорции картинки. В нашем случае это не особо видно, потому что картинки какие-то абстрактные. А если были бы какие-то обычные фото, то нам бы пришлось просто на глаз подбирать размеры, чтобы пропорции сохранились как можно ближе к оригиналу или же мы бы не смогли задавать размеры таким способом?
В Owl Carousel взял stagePadding, который с двух сторон, и сделал .owl-stage{left: -100px;} в одну сторону (столько же, сколько stagePadding в скрипте), так легче и работает как надо
Если для блока hero поствить position: absolute; и width: 100%; (высоту по вкусу) то он сразу прижмется к карю экрана правому, а левый край к левому краю столбца. И верх к верху столбца, ячейки другими словаи. Тоесть он срзау становится как надо и прокручиватеся как надо, то есть он зафиксирован внутри ячейки, только првый край прижат к карю экрана, а не ячейки. Атак он тянется, адаптивный, все отлично. Одно плохо - Почему происходит - не знаю. ГЛавное не задавтаь ему райт и топ, а то все слетает. Бутстрап 5. Почему так происходит?
2:25:50 а мне не нравится, что картинка (маленький квадратик "пуск") остается на том же месте, а не прыгает вместе с элементом при наведении, выглядит криво
Пока только учусь верстать, но захватывает этот процесс. Пробовала повторять все, что в уроке, но почему-то как-то криво выходило, может что-то неправильно подключила, не знаю. Но делала все четко по экрану(
спасибо очень понравилось сверстал по видосу) после курсов самый раз
Respect my friend
Я не понял, почему ссылка с классом video и с position absolute позиционируется относительно col-md-6 если у него сброшен position relative, в таком случае, по идее, video должно позиционироваться относительно body как и hero, есть у кого домыслы по этому поводу??? Вариант, что если у родителя абсолют то дочерний с абсолют будет примыкать к родителю, то есть абсолют позиционируется относительно абсолютного родителя имеет место быть?
Подскажите, плз, а почему изначально подставляли для медиум md классы? То есть мы верстали с ориентиром на такой экран?
Добрый день, Андрей!
Сижу повторяю мастер-класс на ноутбуке (разрешение 1920х1080 масштаб 125%) все плывет, судя по тем размерам которые figma дает плюс пиксели в css, пытаюсь все размеры делать в em или rem или %. Переношу html страницу на монитор 1920х1080 все хорошо. масштаб 100%. Что bootstrap что flex css что gred css затыкаются именно на масштабе(может я чего то не понимаю, (всего 2 месяца с 0 верстаю). Приходится использовать медиа запросы (верстал свой первый сайт победил только медиа запросами) Страница сверстанная через Flex маштабировалась, с ней минимальные были проблемы по уменьшению контента в блоках, а вот блочная верстка не хочет. Существует ли стандартное решение данной проблемы(может какие то есть технологии)? Чтобы контейнер масштабировался пропорционально с внутреннем контентом...или нужно еще чего то изучать? Потому что масштабирую другие сайты, масштабируется весть контейнер пропорционально....на какие бы разрешения не переносил и масштабы экрана(не берем в рассмотрение планшеты и мобилки).
2:24:48 Почему ты не сделал через opacity?
Как скачать макет? Уже много раз ввел свой адрес, имя, но на почту ничего не приходит. Пробовал отправить макет на gmail и mail - ничего не приходит. Но когда попытался сбросить пароль, то сообщение тут же пришло. В чем дело? Каждый раз испытываю сложности со скачиванием макетов
с нетерпением жду верстку
Ловите: wayup.in/lm/load/gravity
WAYUP & Андрей Гаврилов подскажите пожалуйста, вот вы сделали дизайн сайта, как теперь? Его можно выгрузить на хостинг и всё?) как это работает?
Почему вы не используете инструменты Pug, Sass, gulp/npm run? Они же по идее должны ускорять разработку, да и в целом сейчас имхо без них ни в одну контору не устроиться.
Вот именно! Я тоже удивляюсь, как ты можешь верстать и одновременно говорить?!
Ты лучший!!! Все понятно и интересно ты очень сильно меня замативировал спасибо!!
отличный туториал, много чего почерпнул и уже использую на практике, спасибо! Единственная просьба, поставьте тайм коды. Я уже не первый раз возвращаюсь к этому видео, что бы подсмотреть чё да как, и мне приходится постоянно искать, неудобно.
Я не знаю, почему у меня который мастеркласс подряд не работает ml-auto. Добавление класса не выравнивает кнопку по правой стороне. Проблема решилась, когда я добавила в вышестоящий div класс d-flex. Не очень понимаю как, но оно работает.
По методологии БЭМ классы .offer-cont и .offer-cont__title не верны. Перечитайте документацию.
30:32 зачем кнопке при наведении белый, если он и так установлен?
Подскажите пожалуйста в 2х словах, почему Вы используете col-md? Почему не col-lg? Вопрос от новичка) спасибо большое за мастер класс, очень много полезной информации ))
копировал структуру сайта, переписываю код построчно, дошел до кнопки get started, проверяю в браузере что получилось, ничего не получилось, все в левом верхнем углу, кнопки нет, цвета нет, проверил код, всё один в один, б**ть почему у меня не работает!? ведь у него все получается...
Хаха, неплохо, лайк за шаблон из Craftwork где я работал:) Спалился на 2:38 Denis Shepovalov) Также, там внизу оставил Полю)
От души за твои труды . Классно объясняешь
Лайк, Очень полезно!!
Вы открыли для меня понятие адаптивности при верстке, круто)
Интересно, конечно...
не очень понравилось решение с первой секцией, где используется static
Можно взять fluid контейнер и положить в него 2 колонки по 6, во 2 прибить контент справа
=== HTML ===
=== SCSS ===
.be-right{
float: right;
}
.no-padding{
padding: 0;
}
.hero-image{
display: flex;
margin-top: 60px;
height: 80vh;
background: url('../img/img1.jpg') no-repeat right top;
background-size: 80% 100%;
&__video{
display: flex;
align-self: flex-end;
align-items: center;
justify-content: center;
margin-bottom: 15%;
height: 35vh;
width: 50vh;
background: url('../img/video.jpg') no-repeat center center;
background-size: 100% 100%;
&::after{
content: '';
display: block;
width: 65px;
height: 65px;
background: url('../img/play.svg');
}
}
}
суппер ^^
почему некоторые классы стиля с точками а некоторые без них? в этом есть разница или как хочешь можно писать?
Только классы с точками, без точек это теги.
А в начале видео Андрей прогуливается через парк Победы в Одессе) Что же вы молчите что вы одессит?)) теперь точно стоит пройти ваш курс)) а я то думаю откуда такое качество знаний, так теперь все стало ясно)
Класс, спасибо за уроки
За аватар бэкграудом конечно бэкенд разработчик тебе спасибо скажет большое. А из одной ul сделать 2 колонки можно с помощью свойства column. По мимо хайповых фрлексов и гридов есть ещё много свойств интересных в css. Спеку то хоть время от времени почитывать нужно все таки, коль уж профессионалами себя называете и людей учите.
какой профи, типикал инфоцыган
@@electfreak Приятно познакомиться, Артём
Спасибо, не знал про column, новое )
Артём Гапеевцев я про автора ролика, юморист
@@electfreak а ну сори))
Из секции Code я отлично забираю градиенты и тени))
на 1:32:хх, там где пытаешься сделать, чтоб в карусели отображалась одна целая картинка и часть второй, можно просто в ДжС файле в объекте респонсив задавать дробные значения значениям айтемс. это вместо костылей:) Вернее будет сказать, что это вопрос от нуба, а не утверждение))но вроде работает
Вы не знаете для чего делают button - кнопку и а - кнопку??!
кнопки більше використовуються в формах, а--лінки більш для навігації і переходи на інші сторінки
Тут все таки Bootstrap 4 прописывать вместо флекса d-flex align-items-center justify-content-center классы.
А что за плагин для переноса классов в CSS?
eCSStractor
Спасибо Вам )) поняла что нужно изучить position только это не чу чуть не поняла )))
А где можно взять сам макет?
Загрузить в FIGMA файл Gravity.fig вот так - help.figma.com/article/81-import#fileimporter
Добавили файлы в описание к видео: wayup.in/lm/load/gravity
@@wayupua Благодарствую
Не проще fluid контейнеры использовать? Вместо всех этих позишнов
Так а container fluid имеет max width 1600, к примеру) а если разрешение будет больше? Картинка не прижмется к краю.
почему просто не сделать это за час в элементоре?
Ну, наверное, на элементоре сайт будет на 1,5 секунды дольше открываться, а ещё особо туп... эээ... умный заказчик может прогнать его через Гугл ПейджСпид, после чего тебе придётся с позором бежать из страны :)
Laravel Vue.js ?
???
Добрый день! Кто-нибудь подскажет что за музыка на фоне? P.S (мастер-класс как всегда, на высшем уровне !)
афигенный опыт
Большое спасибо за реально полезную практику
смотрел ради того, чтобы понять как верстать элементы, которые занимают не полные столбцы(4.5, 5.5(выходят в пространство между столбцами)),а ты подобные моменты исправил в фигме на ровные столбцы...lol
А сколько обучающий курс будет стоит ?
Ronald BD 549$ со скидкой -20%
@@somnus25 ссылки на видео?
Так сложно!Но очень понятно
Ребят, кто знает где найти этот макет, киньте ссылку, пожалуйста с:
Держи: wayup.in/lm/load/gravity
@@wayupua огромное спасибо)
и отдельное спасибо за ваши труды :зз 🙏💕
Не нахожу этот макет сложным)
сложность, в первую очередь, для начинающих) Во-вторых, главная сложность - в количестве времени, которое у меня было)
Да ты терминатор. Я только начал осваивать бутстрап, и для меня это реально сложно. Особенно темка с наложенными на друг друга картинками - вынос мозга
@@alexson8106 Мне кажется это легко,position absolute и top right,не знаю верно или нет. Но во что приходит в голову 😂
@@dadzhi я за это время уже на гридах научился верстать и флексы знаю наизусть, ору))
@@alexson8106 крут
English subtitles ?
Я не фрилансер (пока-что) но разве за этот лэндинг платят НАЧИНАЮЩЕМУ! 150$? Звучит утопично.
Андрей, ты очень крутой чувак! Ты так многому меня научил и вселил веру, с тебя я беру пример! Этот макет был и правда необычный в плане позиционирования я считаю. С радостью посмотрела эти четыре часа за процессом верстки :D Можно сделать следующий мастер класс с версткой под мобайл? Мне было бы очень интересно, тем более что сейчас у меня такой проект в работе, а в адаптивности в плане медиа запросов я все еще теряюсь ( Еще раз спасибо тебе за твои труды! Сохраняй позитив и шли подальше этих "шарящих" (я тоже из Украины, знаю это слово :D) чуваков из комментов ниже :)
Очень посредственная верстка. Там где стоит сделать другую структуру HTML, добавляется хардкодный CSS код для выравнивания по baseline (facepalm). Использование ТБ4 - тоже крайне сомнительное. Использовать из фреймворка только сетку - говорит о многом. Утилиты - не используются. Переменные - не настроены. Для одного лэндинга может и не критично, но при верстке более сложных проектов - будет беда.
у него времени было очень мало, от этого и не было настроенных переменных...и кстати использовать только сетку, ничего плохого в этом нет, куча хороших специалистов так делает, в чем проблема этого? и кстати, последнее твое предложение говорить само за себя, на видео ведь лендинг, а не сложный проект
познавательно
С слайдером гониво,ахах,пусть будет так...
Я конечно не эксперт(Может чего-то не понимаю), но где здесь Bootstrap? Максимум сетка! Все равно за старания +
А в чем жесть?
у стримера полностью разрушена семантика, не надо так делать все через дивы
Что тут слоново в этом макете)) недавно верстал интернет магазин вот там реально сложно
Смотря какой у тебя опыт. Я вот например только начал два месяца назад и тогда для меня даже одностраничник было сложно сверстать...
сложность, в первую очередь, для начинающих) Во-вторых, главная сложность - в количестве времени, которое у меня было)
@@wayupua Ctrl+C, Ctrl+V
@@liubomyr-peteliuk верстальщики ленивые...)
@@lekca216 вполне соглашусь))
Хух, сверстал
Боже, сколько ошибок.... Ребята никогда так не верстайте как обучают на этом видео!
Верстка почти вся поломанная. Бутстрап используется только для сетки...
В тег header завернута вся первая секция, рили?!
Скорость не равно качество. Зачем гамнять то так?
Шел уже 2020 год, а люди всё так же пользуются jQuery. А кто-то даже популяризирует эти устаревшие технологии. :)
шел 2021 год, а знание jQuery является одним из обязательных условий, в вакансиях на фронтенд-разработчика
На скорости 1.25 прослушал
Видимо я этот дурак хD поэтому и смотрю как правильно делать через фигма на бутстрапе