Обтекание элементов, float, практикуем CSS3 | Курс HTML & CSS | Занятие №16

[@АлексейФедченко-в6ч]

Оххх ) Прям приятно стало когда в начале урока к тебе обращаются "Будущий коллега"))

[@Эдди-д1ц]

Стал программистом?

[@АндрійГерманович-б1д]

@@Эдди-д1ц Та за год вряд-ли программистом, но работу, практиковаться можно найти

[@СлаваКравченко-в5р]

Огромное спасибо за ваши уроки!!! Долго искал курсы бесплатные через торент, записи с телегармов. А оказалось всё просто, вбиваешь в ютуб html и всё))) Я вообще не понимаю, как вы это бесплатно выкладываете. Ваши уроки понятнее, веселее, нагляднее, чем любые другие платные курсы за 10-30 т.р. Низкий вам поклон за то, что вы проделали 2 года назад

[@foxplay5260]

Стал програмистом?

[@OksanaSaienko]

Спасибо Вам преогромнейшее за такое понятное и доступное объяснение!!! 🙏👍🔥

[@ruslanvybornov1237]

Большое спасибо за ваши супер понятные уроки) С каждым видео все больше и больше знаний , а всё благодаря Вам! Низкий поклон такому учителю!
А вот и дз)
HTML

Document








__________________________________________________________________
CSS
*{

}
.hoop{
width: 100%;
border: 1px solid black;
min-height: 150px;
border-radius: 20px 20px 0px 0px;
background: linear-gradient(45deg, #fdbb2d, #22c1c3, #fdbb2d);

}
.box65{
width: 65%;
border: 1px solid black;
min-height: 350px;
box-sizing: border-box;
float: left;
background: linear-gradient(45deg, #fdbb2d, #22c1c3, #fdbb2d);
}
.box35{
width: 35%;
border: 1px solid black;
min-height: 350px;
box-sizing: border-box;
float: right;
background: linear-gradient(45deg, #fdbb2d, #22c1c3, #fdbb2d);
}
.box1{
width: 33.33%;
border: 1px solid black;
min-height: 500px;
box-sizing: border-box;
float: left;
background: linear-gradient(35deg, #fc4684, #3f5efb, #fc4684);
}
.box2{
width: 33.33%;
border: 1px solid black;
min-height: 500px;
box-sizing: border-box;
float: left;
background: linear-gradient(35deg, #fc4684, #3f5efb, #fc4684);
}
.box3{
width: 33.33%;
border: 1px solid black;
min-height: 500px;
box-sizing: border-box;
float: right;
background: linear-gradient(35deg, #fc4684, #3f5efb, #fc4684);
}
.boxend{
width: 100%;
border: 1px solid black;
min-height: 400px;
border-radius: 0px 0px 20px 20px;
float: left;
background: linear-gradient(35deg, #cd3ffb, #cd3ffb, #fc4684);
}

[@ПИОНЕРТВ-о8х]

Однозначно, вы, Андрей, один из лучших ведущих уроков, уже подходят к концу уроки ваши, я буду ждать новых, пока наверное к концу недели перейду на изучение Java

[@Пепелац-з4г]

ну как делишки ты уже крутой джуниор или мидл?

[@Vftuyght]

@@Пепелац-з4г за 6 лет он и сеньером мог стать

[@uzbmath]

хочу поблагодарить вас за такой шикарный контент) пересмотрел/прошел несколько , как и платных, так и бесплатных курсов и по своему опыту могу сказать, что проделанная Вами работа лучше многих платных курсов! Спасибо Вам за возможность научиться чему-то новому!

[@sv946]

Согласен

[@Skilling27]

Один из лучших учитилей по верстке ,что я встречал)
Спасибо за такие понятные уроки Андрей.

[@marinaorda6175]

Андрей, спасибо огромное за такие полезные уроки!

[@AlexanderG17761]

Благодарю Вас Андрей за хорошие видеоуроки

[@Пумпурум-и6л]

Огромное спасибо Андрей) Очень нравятся твои уроки) на данный момент пройдена уже большая половина твоего курса) и это первый курс который я хочу продолжать открывать и не закинул в долгий ящик) еще раз спасибо)

[@Юлия-м8э5ь]

Очень доступно объясняешь. Смотрю некоторые материалы по СSS, имея кое-какие знания в данной области, и 4 видео по JS , будучи полным 0-м . Несмотря на то, что программирование я не изучала, а только html и CSS (скромные знания), абсолютно все поняла. До твоего курса по JS смотрела видео твоих коллег - все запутанно и непонятно. Так что, я рада, что случайно нашла твой канал, восполняя знания по float, и открыла удивительный курс по JS.

[@boommka7186]

Уроки хорошие. Лайк за "Видтх" ) так же англ правописания запоминаю )))

[@NoName-lt5fu]

Смотрю зимой, а в видео птички на фоне чирикают, кайф.

[@rufatbilalov3268]

Благодарю за поучительное видео.

[@karenhambardzumyan3065]

Большое спасибо за такое простое и подробное объяснение

[@Марква-щ4ы]

Единственное, о чём было не упомянуто, что свойство box-sizing: border-box; включает в размер всё, кроме margin'ов (все padding, border и content). Мне изначально показалось, что htmlbook допустил ошибку в описании. А в целом очень здорово и доходчиво. Я уже не один курс просмотрел, потому перематываю половину уроков, но новые мелкие, немаловажные детали узнаю именно от вас. Спасибо.

[@ВладиславБирюков-ш5э]

было, о о нем говорил, напомнил , ещё о нем говорили в прошлом уроке. тебе че , все на блюдце преподносить, учишся верстать, так учись, и додумывай сам, я по кд, при начале урока, вписываю *{b.s-b.b}

[@greedygaming6961]

Спасиб за инфу! Ломал голову почему не переносится.

[@НиколайМиронов-о9ю]

Было бы здорово,если продолжишь уроки уже на создании полноценного к примеру одностраничника с чистого листа.

[@andrievskii]

Однозначно будут такие видео уроки.

[@liberty_concord4157]

@@andrievskii у меня проблема когда перехожу на мобильный вид и меняю ширину экрана блоки плывут и каждого разная длинна выходит как этого избежать? ( ширину блокам задавал в px)Спасибо

[@vasylmytsak9113]

@@liberty_concord4157 Чтоби етого избежать нужно делать адптивную верстку

[@ArayaElizabeth]

Будущий калека =) Прям на душе спокойно стало

[@AnnaVentsel-o5z]

Спасибо огромное! Чудесно объясняете. Все по сути, без воды и голос приятный, что тоже немаловажно )

[@МаринаА-л8щ]

Спасибо, лучшее, что я нашла)

[@ИльяМазанов-р1в]

Начало меня так умилило)

[@Совет2015]

Ьыл случай на домашнем задании блок sidebar налез на блок content тот что справа , после значения float:left и никакие команды не помагают отлепить блоки ни float;none , clear;both, и box-exizing не помог тоже. Так вот, файле html просто незабудьте закрыть правильно , иначе будете создавать блоки в блоке и пытатся их отлепить)

[@ВладиславПавличенко-ф4я]

Мир Css так прекрасен
1 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
2 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал .
3 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
4 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
4 Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
Мир Css так прекрасен
CSS
body{
background: yellow;
}
.test1{
width: 100%;
min-height: 100px;
text-align: center;
}
.test2{
width: 65%;
min-height: 200px;
background: green;
float: left;
box-sizing: border-box;
}
.test3{
width: 35%;
min-height: 200px;
background: grey;
float: left;
box-sizing: border-box;
margin-bottom: 55px;
}
.test4{
width: 33.3%;
min-height: 100px;
background: #234;
float: left;
box-sizing: border-box;
}
.test5{
width: 33.3%;
min-height: 100px;
background: #656;
float: left;
box-sizing: border-box;
}
.test6{
width: 33.3%;
min-height: 100px;
background: #543;
float: left;
box-sizing: border-box;
margin-bottom: 55px;
}
.test7{
width: 100%;
min-height: 10px;
background: red;
float: left;
text-align: center;
}

[@Matissed]

можно было намного меньше сделать кода в CSS

[@canon8807]

@@Matissed ну и написал бы как..

[@fewseconds565]

наверное, имелось в виду чуть по-другому скомпоновать атрибуты, не дублировать их, а перечислить тэги и разово прописать к ним общие атрибуты в данном случае это float и box-sizing. Автору спасибо, отлично объясняет базу.

[@Matissed]

@@fewseconds565 да

[@Valentina-b1x7f]

Спасибо огромное!!! Очень интересно и доходчиво!!!

[@ВикторТуманов-р9з]

полезно, спасибо!
ниже где три блока я немного затупил. и сделал через флекс, в урок это не входило но результат получился как по заданию!

[@carbongud]

Если хотите что бы 65% и 35% не съезжали при уменьшении страницы (на смарте скажем открыли), указывайте у каждого блока {margin: auto;}

[@anastasia_kumeda8]

Спасибо тебе большое , добрейшей души человек

[@carbongud]

@@anastasia_kumeda8 рад был помочь)

[@михаилБондаренко-о9л]

Не получается поставить отступы между блоками.Когда уменьшаю размер,блоки начинают распологаться хаотично.

[@inga153]

Вот это уже интересно! Домашка уже не так просто делается) Спасибо за уроки

[@inga153]

А как сделать, чтобы высота блока была фикс? Адаптивности немного нехватает моим блокам. Когда сжимаю страницу, то блоки уже из-за текста немного разнятся в высоте. Напр вторая строка блок 2 и 3, где 65% +35% соотв. Не помню как это можно поправить..

[@inga153]

А еще не получается добавить межблочное расстояние. Пробую через margin, но так понимаю, надо еще вычитать от % блока, чтобы все вошло в границу окна. В общем получается применить только margin-bottom: 1px; тогда ничего не едет. А если напр. margin-right: 1px; то уже все блоки по горизонт едут.... далекооо ))

[@AliLeonMonte]

самые понятные курсы!!!

[@llssk6379]

Топовые уроки!

[@whitecloud7h]

Как же я психовал на етом уроке, но все же что то получилось

[@LookatThisMovie-]

Thank you !

[@dendenov5802]

За окном птицы поют, так прикольно!

[@ИванСелихов-в5и]

вопрос: зачем задавать min -heigch для блока, если мы задаем для него параметры widch и heigch ?

[@sabatonbaton6105]

Андрей,спасибо за урок, но у меня проблемка,сделал всё как нужно но не могу сделать отступы справа и слева ибо box-sizing как я понял не учитывает внешние отступы margin или отступы межу блоками слева и справа не нужны?

[@ВладиславГлуховский]

Получилось подправить?

[@drevko21]

тоже такой же вопрос

[@PP-hz4bl]

Всё доступно объяснено

[@Лёха-и7п8ы]

Большое спасибо!

[@tartarus2921]

Спасибо за занятия

[@funtik9615]

Спасибо за этот урок!

[@lcemanyt9040]

Андрей спасибо большое за урок, прошу просмотреть мой пример заранее благодарю


Наследование в CSS




body{
padding: 20px;
}
div{
border: 2px solid #f45;
min-height: 150px;
background: #f155;
color: #fff;
box-sizing: border-box;
float: left;
font-size: 50px;
}
.logo{
width: 100%;
font-style: italic;
text-align: center;
font-size: 90px;
}
.col65{
width: 65%;
text-align: center;
}
.col35{
width: 35%;
text-align: center;
}
.col33{
width: 33.33%;
text-align: justify;
text-align: center;
}
.footer{
width: 100%;
text-align: center;
font-size: 100px;
}

Делаем через div
Что-то так
А у вас как
Как дела?
Будьте здоровы
И вам спасибо
Хороший урок!!!

[@алексейбалашов-н1ш]

держите мое)
body{
padding: 10px;
background: black;
}
div{
float: left;
margin: auto;
border: 1px solid black;
}
.test1{
width: 100%;
min-height: 4em;
background: rgba(240,240,10,0.5);
}
.test2{
width: 65%;
min-height: 250px;
box-sizing: border-box;
background: rgba(10,200,100,0.3);
}
.test3{
width: 35%;
min-height: 250px;
background: rgba(100,50,100,0.3);
box-sizing: border-box;
box-shadow: inset 4px 4px 10px; ;
}
.test4{
width: 33.3%;
min-height: 200px;
box-sizing: border-box; /* не забывайте ставить box-sizing: border-box;*/
background: #f65;
}
.test5{
width: 100%
min-height: 150px;
box-shadow: inset 4px 4px 5px;
background: rgb(100,45,65);
}

[@tartarus2921]

Все очень понятно

[@stas9066]

Застрял, я с этим заданием. Меняю значит размеры с десятыми. Как и Андрей задал: 33,3%. А оно ничего не меняется, на всю ширину страницы, злой, второй день сижу ищу причину)))
А оказывается нужно писать целое число, без десятых. Когда дошло до меня, было смешно)

[@gettis1544]

еще забавнее, когда проблема не в этом. :D

[@adamwasp2505]

@@gettis1544 нет, есть кое-что самое забавное-
можно писать через точку, то есть 33.3%

[@artem_ka3863]

Спасибо, все понравилось.

[@ИванСелихов-в5и]

вопрос: почему , если несколько обьединить одним и задать {fload : left} то вся верстка что в artikle схлопывается в лево. А если fload задавать отдельно в каждом div то все нормально?

[@andrievskii]

Нужно видеть верстку, так сложно ответить почему))

[@ИванСелихов-в5и]

@@andrievskii еще не совсем понятно как работает box-sizing; border box, потому что при попытке сделать отступы по 5px вокруг каждого блока, верстка слетает и блоки пляшут по экрану как хотят, хотя , как я понял, эта функция должна учитывать учитывать эти отступы. Но с этим вопросом, наверное лучше курить матчасть.

[@ИванСелихов-в5и]

@@andrievskii div 1
div2
div3
div4
div5
div6
div7 такая же запись допустима? Я же могу через тег artikle задавать одинаковые свойства сразу для всех контейнеров?

[@siarheistalbunou7689]

Андрей, спасибо.
Скажите будет ли видео с подробной настройкой пользовательского интерфейса того же Notepad с рассмотрением вопроса установки различных плагинов, упрощающих и ускоряющих работу с кодом. Спасибо.

[@andrievskii]

Думаю, после знакомства с редактором Sublime Notepad уже не так привлекателен.

[@qwin5197]

@@andrievskii а после знакомства с VS так вообще отпадает необходимость в других редакторах

[@АндрейМихайлов-ж5ъ]

Здравствуйте! Решил скорректировать немного заданное Вами дз - добавить заголовки 1ого и 2ого уровня, но не меняя заданной структуры расположения блоков. 1ый после header'а , 2ой после блоков 65% и 35% ширины. По итогу , используя упомянутые в уроке свойства блоки расположились не на одной высоте - ступенчатому виду. Блок 35% ширины ниже блока 65% ширины, таким же образом поехали блоки 33.3% ширины - каждый ниже другого слева направо. Заметил одну особенность , если убрать заголовок(заголовки), то всё выстраивается как в видеоуроке. Как быть в такой ситуации?

[@MaximKachalov-d2y]

body{
background-color: black;
}
div{
color: white;
float: left;
}
.header{
width: 100%;
min-height: 100px;
background-color: blue;
text-align: center;
}
.main{
width: 65%;
min-height: 200px;
background: green;
}
.sidebar{
width: 35%;
min-height: 200px;
background: grey;
}
.a1{
width: 33.3%;
min-height: 100px;
background: #234;
}
.footer{
width: 100%;
min-height: 10px;
background: red;
text-align: center;
}

[@bessmertnyiwarfacepro4394]

я сделал через параграф , а так можно ?

[@brelkanga5667]

france, merci beaucoups just amazing❤💕💕

[@АлександрК-щ2н3т]

Видос помог. Спасибо

[@mikhailgrinchenko5541]

Спасибо!

[@_OSV]

Вийшло. Трохи погрався з % щоб отримати зовнішній відступ, але при зміні маштабу блоки їдуть.

[@stas9066]

Андрюха, привет попугаю передавай )))))

[@НиколайМиронов-о9ю]

Класс.Еще уроки будут?

[@andrievskii]

Будут ))

[@1969isai]

Здравствуйте. У меня sublime2 не видит box-sizing , что делать?

[@evgeniasmirnova6939]

18:14 пыталась отмыть монитор от черной точки,пока не поняла ,что это точка в paint))

[@coul1935]

отступы не получилось между блоками сделать, ну так расставил их по местам с бордером





.main{
height: 100px;
width: 100%;
border: 3px solid red;
box-sizing: border-box;
}
.container1{
width: 65%;
height: 300px;
border: 3px solid red;
box-sizing: border-box;
float: left;
}
.container2{
width: 35%;
height: 300px;
border: 3px solid red;
box-sizing: border-box;
float: left;
}
.container3{
width: 33.3%;
height: 300px;
border: 3px solid red;
box-sizing: border-box;
float: left;
}
.container4{
width: 33.3%;
height: 300px;
border: 3px solid red;
box-sizing: border-box;
float: left;
}
.container5{
width: 33.3%;
height: 300px;
border: 3px solid red;
box-sizing: border-box;
float: left;
}
.footer{
width: 100%;
height: 300px;
border: 3px solid red;
box-sizing: border-box;
float: left;
}

[@whitecloud7h]

ДЗ
Добро пожаловать
Зона контента
Генератор случайного текста онлайн
В основе данного скрипта для производства текста рыбы лежит универсальный код составления речей.
Генератор псевдочитабельного текста (рыботекста) полезен дизайнерам и верстальщикам при наполнении макетов и тестовых сайтов. Данный приём позволяет без лишнего труда создать эффект заполненности сайта текстовым контентом.
Навигация сайта
Туда
Сюда
Обратно
Куда-то

Блок №1
Блок №2

Блок №3
Футер
----------------------------------------------------------------
body {
background-color:#CDDEBC;
}
div {
border: 2px solid white;
float: left;
box-sizing: border-box;
}
.head {
min-height: 100px;
width: 100%;
background-color: #FFFF77;
text-align: center;
}
.content {
min-height: 200px;
width: 70%;
background-color: #E0FF82;
}
.sidebarR {
width: 30%;
min-height: 200px;
background-color: #FFE5A9;
}
.block {
min-height: 200px;
width: 33.3%;
background-color:#A5FBFF;
}
.footer {
min-height:90px;
width: 100%;
background-color: #D3C3AC;
}
h2 {
margin: 0;
text-align:center;
}
.nawT {
margin: 0 ;
text-align: center;
}
ol li {
list-style-type: none;
padding: 3px;
}
ol {
width: 450px;
height: 150px;
border: 1px solid red;
margin: 5px auto;
background-color: yellow;
}
h3 {
text-align: center;
margin-top: 0;
}
div.footer p {
font-size: 30px;
text-align: center;
margin-top: 0;
}

[@Professor_Ro]

у тебя в html 2 раза открывающий тег body вне кода, закрывающего нету

[@Cycle329]

а у меня параграфи поменялись просто местами что делать

[@EdwardNorthwind]

Кому нужно для разбора, вот мой набросок.
float
div {
background-color: rgb(0, 200, 70);
border: 2px solid black;
padding: 10px 20px;
height: 200px;
}
.float {
height: auto;
float: left;
box-sizing: border-box;
padding: 5px;
background-color: silver;
border: 3px solid gray;
}
.clear{
height: 0;
padding: 0;
border: none;
clear: both;
width: 100%;
}
.main{ width: 65%; }
.nav { width: 35%; }
.section { width: 33.33%; }
HEADER
Main section
Navigation block
Commercila block
Commercila block
Commercila block
footer

[@NN-ii2mb]

Что же вы все такие гении, делаете все идеально?.... плакать хочется

[@ВладиславБирюков-ш5э]

@@NN-ii2mb лол, а что сложного в создание блоков, боже

[@МаксимБудник-м1р]

Тяжело float и div даётся, уже не первого учителя смотрю и вот вроде сделал ДЗ, но уверен что что-то не так. Может кто покритикует:


Наследование в CSS



Домашнее задание по Float

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




Спасибо за внимание!!!

CSS:
.title {
text-align: center;
min-height: 70px;
background-color: black;
color: white;
margin: auto;
}
p {
padding: 5px;
float: left;
min-height: 200px;
}
div p.first {
box-sizing: border-box;
max-width: 65%;
}
div p.second {
box-sizing: border-box;
max-width: 35%;
}
div img {
max-height: 300px;
width: 500px;
margin-top: -10px;
box-sizing: border-box;
max-width: 33.3%;
float: left;
margin-bottom: 30px;
}
div footer {
width: 100%;
text-align: center;
float: left;
}
В любом случае спасибо автору канала за такие прекрасные видео-уроки, только по ним и учусь в основном!!!

[@ЕвгенийШершов]

Автор не объясняя что такое уверенно задает домашнее задание с его использованием

[@andrievskii]

Если бы я объяснял все, что вам придется использовать в верстке, курс был бы на полгода и не 20 уроков, а 150. Вторая задача каждого, кто учится программированию, гуглить все, что тебе не знакомо. Первая задача, иметь желание учиться!!!

[@ЕвгенийШершов]

:)))@@andrievskii Все равно не получается. Вот мой пример, может кто-нибудь подскажет ошибку
Домашнее задание
div{
background-color: rgb(214, 86, 53);
border: 1px solid black;
padding: 12px 20px;
height: 100px;
box-sizing: border-box;
float: left;
}
.header{width: 100%;}
.Footer{width: 100%;}
.main{width: 65%;}
.sitebar{width: 35%;}
.b{width: 33.33%;}
Header
Main
Sitebar
Block 1
Block 2
Block 3
Footer

[@andrievskii]

@@ЕвгенийШершов забросьте файл в песочницу и напишите, что конкретно не получается, и лучше вопрос задавать в телеграм чате, там быстрее ответят (ссылка в описании под роликами)

[@ЕвгенийШершов]

Спасибо

[@maximrezan2593]

@@ЕвгенийШершов style в а нужно в

[@anonimanonim537]

А почему box-sizing: border-box; не работает на русском тексте?

[@InvincibleXXX]

Скажите пожалуйста, если я min-height хочу указать не в пикселях, а в процентах, то такой способ почему-то не работает. С чем это связано? Мне хотелось бы заполнить дивовом пустую часть экрана, но так как разрешение на всех мониторах разное, то в писелях как то неправильно так указывать. Как быть в такой ситуации? Спасибо.

[@InvincibleXXX]

@@maddison611 спасибо большое, очень помогли!

[@maximtaldykin241]

мб кто нибудь поможет?
когда height прописываю в % ничего не меняется а когда в px то все ок и граница меняет свою высоту.
Вот пример мой
.block1{
border: 1px solid yellow;
padding: 20px;
width: 60%;
margin: 10px 10px 10px 0px;
height: 200px;

[@andrievskii]

А зачем тебе высота в процентах?

[@maximtaldykin241]

@@andrievskii Была каша в голове)
Все сделал но спасибо за ответ.
Очень годный контент.

[@samgold3840]

Вы нечего не сказали про видимую часть страницы без скролла.Или это будет в других уроках ?

[@user-p9b]

Спасибо вам большое сколько нужно ещё потратить время для того чтобы верстать на фрилансе

[@andrievskii]

Достаточно все понять и сверстать для портфолио парочку толковых макетов!

[@user-p9b]

Спасибо за ответ

[@lat1k948]

Здравствуйте, хотел спросить у вас, я выполнил домашнее задание, и у меня возникла такая проблема. В последнем диве у меня не работает " margin-top". А если я для тех трёх блоков поставлю " margin-bottom", тогда работает. Почему так!

[@andrievskii]

Добавляйтесь в наш телеграм чат, там поможем!

[@lat1k948]

Обязательно

[@Raevka2000]

Example16

Самы главный заголовок!
Пытаюсь сделать САМ!
1.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisciomnis iste natus error sit voluptatem velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Стараюсь не подсматривать
2.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Пока не получается
3.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Вроде получаеся
4.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Надеюсь не аляписто
5.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Но я же учусь
7.Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Полезная информация:
Google
Yandex
SportBox
Mail

CSS
body{
background: #ffff99;
margin-top: 0px;
}
h3{
text-align: center;
background: #fffff9;
margin: 0 22%;
border-radius: 10px;
}
h1{
text-align: center;
font-size: 2.8em;
font-family: Arial, Elvetica, sans-serif;
text-decoration: underline;
background: grey;
margin: 0 25%;
border: 1px solid #fffff9;
border-radius: 0 0 15px 15px;
}
h2{
text-align: center;
background: #fffff9;
margin: 0 22%;
border-radius: 10px;
}
div{
box-sizing: border-box;
border: 1px solid #fff;
float: left;
width: 50%;
padding: 15px;
}
h2.first{
margin: 0 35%;
}
#fl{
width: 49.75%;
box-sizing: border-box;
clear: both;
background:grey;
}
#head{
min-height: 100px;
margin: 0.5% 0;
box-sizing: border-box;
width: 100%;
background: grey;
}
#last{
margin-top: 5px;
background:grey;
box-sizing: border-box;
width: 33%;
margin-left: 0.5%;
min-height: 164px;
}
#sl{
margin-top: 5px;
background:grey;
box-sizing: border-box;
width: 33%;
margin-right: 0.5%;
}
#sc{
margin-top: 5px;
background:grey;
box-sizing: border-box;
width: 33%;
}
#sr{
display: inline-block;
min-height: 100px;
background:grey;
box-sizing: border-box;
clear: both;
width: 100%;
margin-top: 5px;
margin-bottom: 5px;
}
#fr{
width: 49.75%;
background:grey;
margin-left: 0.5%;
}
#block{
width: 33%;
margin-left: 0.5%;
margin-top: 5px;
background:grey;
box-sizing: border-box;
min-height: 164px;
}
a{
text-decoration: none;
color: #000;
}
a:hover{
/*color: #fff;
background: #000;*/
}
li{
font-size: 1.5em;
display: inline-block;
background: #ffff99;
border-radius: 5px;
margin-right: 5px;
padding: 0 5px;
}
ol{
text-align: center;
margin: 10px 0%;
}

[@deretxx]

Ссылка на телеграм чат не работает(
Удалён или может новый адрес есть?

[@andrTaylor]

Андрей, здравствуйте, вы не могли бы пожалуйста посмотреть на мою вёрстку? Кроме вас не к кому обратиться просто. (html ниже, а css в ответе на мой коммент) (картинка - куб в формате png 200 на 200. Верстал с помощью browser-sync и плагина emmet для sublime text 3- в целом управился минут за 10. Браузер мой - мозила. Писал без ресетера, кстати стоит ли использовать ресетер сейчас в 2019?) Или уже существуют более удобные методы сброса?
Вот мой html:
Домашка
Заголовок для сайта

Это слева должно быть-хы!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugiat earum deleniti repellat corporis aspernatur delectus perspiciatis
vel necessitatibus sunt veritatis magnam in repudiandae facere ab nam, voluptas, consectetur inventore, sint fugit nemo hic? Repudiandae deserunt
iusto veniam, nesciunt non.

Ну а это справаLorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugiat earum deleniti repellat corporis aspernatur delectus perspiciatis
vel necessitatibus sunt veritatis magnam in repudiandae facere ab nam, voluptas, consectetur inventore, sint fugit nemo hic? Repudiandae deserunt
iusto veniam, nesciunt non.





Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio fugiat earum deleniti repellat corporis aspernatur delectus perspiciatis
vel necessitatibus sunt veritatis magnam in repudiandae facere ab nam, voluptas, consectetur inventore, sint fugit nemo hic? Repudiandae deserunt
iusto veniam, nesciunt non.

[@andrTaylor]

А тут css:
body{
background: #89d0ec;
margin: 0 auto;
padding: 0 20px 20px 20px;
width: 1140px;
}
header{
border: 1px solid red;
text-align: center;
text-shadow: -10px 10px 1px #999;
font-style: italic;
border-radius: 0 0 10px 10px;
min-height: 100px;
}
article{
border: 1px solid red;
min-height: 500px;
width: 65%;
float: left;
box-sizing: border-box;
border-radius: 10px 10px 10px 10px;
}
aside{
border: 1px solid red;
min-height: 500px;
width: 35%;
float: left;
box-sizing: border-box;
border-radius: 10px 10px 10px 10px;
}
section{
text-align: center;
border-radius: 10px 10px 10px 10px;
}
section.sec_1{
width: 33.3%;
border: 1px solid red;
float: left;
box-sizing: border-box;
}
section.sec_2{
width: 33.3%;
border: 1px solid red;
float: left;
box-sizing: border-box;
}
section.sec_3{
width: 33.3%;
border: 1px solid red;
float: left;
box-sizing: border-box;
}
footer{
width: 100%;
border: 1px solid red;
float: left;
box-sizing: border-box;
border-radius: 10px 10px 10px 10px;
}

[@ukrainemf168]

Вот скрин: i.imgur.com/VB0MUrZ.png
Спасибо за уроки :)

[@ТарасКусий-щ3й]

float використовується до тексту чи до картинок теж?

[@andrievskii]

float можно применить к любому элементу, в том числе и изображению. Но float немного устаревшая методика, лучше больше углубляться в flex верстку

[@ALEX_-ed5ul]

Ребят, Андрей, дайте идею для сайта (для практики)

[@MeditationExplorers]

Лучший из всех . Есть моменты где материал устарел для 2022 -го года, для разметки элементов используйте "flex "либо через "Grid" вместе "flout" - та он устарел уже .

[@rafgood2452]

Не подскажите где смотреть обновления Цсс штмл?

[@Chibbo158]

Добрый день! Спасибо огромное за ваши уроки, очень понятно и познавательно. Возник один вопрос по дз, надеюсь, сможете подсказать. Ссылка на код jsfiddle.net/rdzke41x/
Если в стилях из div убрать width:100%, то все уползает непонятно куда. Не понимаю, почему так, если в классах ниже (div.test1 итд) прописана уже ширина для каждого блока

[@golden-archive]

У тебя ошибка кое-где, двоеточие впихнул вот так:(div.test1 {
min-height: 100px;
(width: 100%: ;
) background: #98FB98;

[@hejukk]

box-sizing не работает, съезжает текст

[@ilyassabirov1487]

блин Андрей у меня не получается div мне плохо дается

[@andrievskii]

Пересмотрите еще раз, попробуйте вдуматься в то, что повторяете по уроку

[@ilyassabirov1487]

@@andrievskii все получилось спасибо для начало мне казалось трудным

[@Vampir21]

Кто может помогите. Почему если создать блоки как в домашнем задании, каждому из у этих блоков задать стиль float: left; и попытаться все эти блоки запихнуть внутрь одного div'а и этому div'у попробовать прописать border то бордер будет рисоваться так как-будто внутри div'а ничего нет.
Ниже попробую скинуть содержимое html/css
HTML:





test

это голова 100% ширины
это тело №1 65% ширины
это тело №2 35% ширины
это колени 33.333333% ширины
это колени 33.333333% ширины
это колени 33.333333% ширины
это футер 100% ширины

CSS:
/*font-family: 'Sriracha', cursive; для заголовков*/
/*font-family: 'Oswald', sans-serif; для обычного текса*/
body{
margin: auto;
font-size: 16px;
}
.section{
max-width: 1000px;
min-width: 500px;
word-wrap: break-word;
margin: auto;
color: white;
text-align: left;
border: 2px solid black;
font-family: 'Oswald', sans-serif;
box-sizing: border-box;
}
div.golova{
text-align: center;
width: 100%;
background: blue;
border:1px solid red;
box-sizing: border-box;
float: left;
}
div.telo_1{
width: 65%;
text-align: center;
background: blue;
border:1px solid red;
float: left;
box-sizing: border-box;
}
div.telo_2{
text-align: center;
width: 35%;
background: blue;
float: left;
border:1px solid red;
box-sizing: border-box;
}
div.koleni{
text-align: center;
width: 33.33333333%;
background: blue;
float: left;
border:1px solid red;
box-sizing: border-box;
}
div.footer{
text-align: center;
width: 100%;
float: left;
background: blue;
border:1px solid red;
box-sizing: border-box;
}
h1{
font-family: 'Sriracha', cursive;
}
prntscr.com/r3losn - скриншот сего чуда XD. Черная тонкая полосочка в самом верху скриншота это background div'а с классом .section

[@Vampir21]

Додумался сам, в последнем блоке вместо float: left; прописываем clear: left; Тем самым последний блок становится по центру, и его внешний див не обтекает, соответственно background натягивается на весь главный div

[@ДедушкаМороз-и1э]

что-то все пишут с div class .наверное чтото пропустил я.но чето я этого не вижу,хотя пересматриваю уже несколько раз. в итоге создал как на видео через каждого абзаца,задавая где ему находиться.проблема получается,когда задаешь параметры 65% и 35 % ширины-высоты разные у них образуются,так как набор символов остался тот же,а размер пространства уменьшился.приходится использовать overfloat and max-height как проходили.сжимаем второй абзац и просматриваем через скрол.однако изза того что мы задаем border .границы получаются нечеткие,приходится подтирать-я не знаю,может так и надо.но в итоге ,там где сделали 35 процентов ширину скролить,граница сбоку не обводится,как результат ,там где мы задавали ширину 33 процента снизу граница border не доходит до конца изза того что над ней наш скрол. что делать...
p {
width:33%;
box-sizing:border-box;
font-size:22px;
border:2px solid black;
float:left;
margin:0px;
border-right:none;
padding:3px;
text-indent:10px;

}
p.qw {
width:66%;
border-bottom:none;
border-right:none;
}
p.as {
width:34%;
overflow:auto;
max-height:310.5px;
border-bottom:none;
}
p:first-letter {
color:red;
}
footer {
border:2px solid black;

}

[@saharra8084]

А в какой программе пишете код?

[@andrievskii]

sublime, visual studio

[@ii-yj5qj]

Document

title


Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.


Lorem ipsum, dolor sit amet consectetur adipisicing, elit. Rerum ea voluptatibus neque adipisci soluta amet odit illo laboriosam maxime aperiam. Atque pariatur dolorem cupiditate ipsum modi doloribus, minima maxime laborum.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.


Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum commodi ducimus similique autem libero animi, beatae repellat ipsa earum reiciendis, at, consectetur necessitatibus, minima est aliquid laudantium? Numquam, aspernatur, odit?Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.


Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque nemo labore repudiandae tenetur! Repudiandae, numquam, mollitia. Perspiciatis minima eveniet quisquam dolores ullam sapiente quidem cum, deserunt similique vitae libero eos.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.



Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque nemo labore repudiandae tenetur! Repudiandae, numquam, mollitia. Perspiciatis minima eveniet quisquam dolores ullam sapiente quidem cum, deserunt similique vitae libero eos.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.



Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque nemo labore repudiandae tenetur! Repudiandae, numquam, mollitia. Perspiciatis minima eveniet quisquam dolores ullam sapiente quidem cum, deserunt similique vitae libero eos.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.



Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex quas maxime, odit distinctio voluptatem dolorum. Placeat laboriosam vero optio illo nisi exercitationem quam officia delectus nostrum. Similique deserunt tempora nisi.

CSS
div{
float:left;
min-height: 150px;
margin-top: 10px;
}
div.qw{
width: 100%;
box-sizing: border-box;
border: 1px solid black;
padding: 10px;

}
div.we{
width: 65%;
box-sizing: border-box;
border: 1px solid black;
padding: 10px;
}
div.er{
width: 35%;
box-sizing: border-box;
border: 1px solid black;
padding: 10px;
}
div.as{
width: 33.3%;
box-sizing: border-box;
border: 1px solid black;
padding: 10px;
}
div.sd{
width: 33.3%;
box-sizing: border-box;
border: 1px solid black;
padding: 10px;
}
div.zx{
width: 33.3%;
box-sizing: border-box;
border: 1px solid black;
padding: 10px;
}
div.xc{
width: 100%;
box-sizing: border-box;
border: 1px solid black;
padding: 10px;

[@yanguz4202]

тут если использовать margin то проценты надо меньше ставить

[@yanguz4202]

потому что border-box их не учитывает

[@СергейЛеонов-ж3э]

@@yanguz4202 наверно логика такая, что бордер бокс впихивает все что внутри, а не снаружи. нужно будет удалять margin

[@niksonnik8099]

+ так же делал, проценты чуть уменьшат надо, если margin добавлять

[@УголокДоброгоСерёжи]

Нормально ли сделал?
Дз:
idex.html
HomeWork
Tipa-Menu
Tipa-content
Tipa-News
Tipa-Reklama
Tipa-Reklama
Tipa-Reklama
Obratna9-Sv9zi
style.css
article{
font-family: 'DM Serif Display', serif,'Bahianita', cursive;
color: @;
}
div.menu{
border: 1px solid @;
width: 100%;
float: left;
min-height: 59px;
box-sizing: border-box;
padding: 10px;
}
div.content{
border: 1px solid @;
width: 65%;
float: left;
min-height: 320px;
box-sizing: border-box;
padding: 10px;
}
div.news{
border: 1px solid @;
width: 35%;
float: left;
box-sizing: border-box;
min-height: 320px;
padding: 10px;
}
div.rek{
border: 1px solid @;
width: 33.3%;
float: left;
box-sizing: border-box;
min-height: 150px;
padding: 10px;
}
div.obr{
border: 1px solid @;
width: 100%;
float: left;
box-sizing: border-box;
min-height: 5em;
padding: 10px;
}
h1,h2,h4,h6{
text-align: center;
}

[@УголокДоброгоСерёжи]

Извиняюсь за пробелы в моём комментарии, хз как так вышло=)

[@dinor7891]

не понятно как сюда выгрузить картинку...

[@Raevka2000]

я тоже не понял. скопировал HTML и CSS, и вставил в комментарий))) может так посмотрит...

[@47cult30]

jsfiddle

[@LookatThisMovie-]

Thank you !

[@LookatThisMovie-]

Thank you !

[@LookatThisMovie-]

Thank you !

[@LookatThisMovie-]

Thank you !

[@LookatThisMovie-]

Thank you !

[@LookatThisMovie-]

Thank you !

[@LookatThisMovie-]

Thank you !

[@LookatThisMovie-]

Thank you !

[@desade7505]

Usain Italic

[@aceventura5195]

Thank you !

[@andrievskii]

Пожалуйста

[@aceventura5195]

Thank you !

[@aceventura5195]

Thank you !

[@aceventura5195]

Thank you !

[@aceventura5195]

Thank you !