Search the Community

Доброго времени суток. Оцените верстку https://alex2033.github.io/Blueasy/index.html В этот раз решил поверстать без гридов, после продолжительной верстки сетками, их отсутствие принесло парочку неудобств

Доброго времени суток. Прошу оценить верстку. ВАЖНО: если у вас не отображаются изображения в шапке страницы - отключите адблок Почему-то он блочит изображения именно в шапке, пока решаю эту проблему https://alex2033.github.io/

Всем привет, хотел бы узнать возможно ли так сделать. Например: Я соединяю 2 сайта, у них бывают одинаковое названия классов, как ограничить для того или иного блока подключения к CSS и JS чтобы они не пересекались ? Пробовал взять тег body в середине сайта туда засунуть Js и CSS, думал что основа всей страницы туда не подключиться так как там есть тег body, но это оказалась не так. Можно ли как нибудь сделать как мне надо ? Чтобы не пересекалось

Как сделать чтобы событие на 'div' выполнилось, после своего появления от нажатия на 'p' ? https://jsfiddle.net/s4eoawef/17/

Я новичок и не могу ни как разобраться , мне надо сделать что бы текст был по бокам картинки , но ни как не выходит , может как то исправить код , или что-то добавить в него . Кто знает как помогите. 1 и 2 картинка то что у меня. 3 то что должно получиться.

Прошу оценить верстку сайта https://alex2033.github.io/

Добрый вечер, возникла проблема с отображением контента при использовании wow.js + animate Если листать страницу мышкой, контент не отображается, только спустя какое-то время, однако, если скроллить, например, стрелочками или же нажимать мышкой на ту секцию, которая не отображается, она сразу же появляется. Сам сайт: https://alex2033.github.io/ Как решить данную проблему? UPD: оказывается данный баг в хроме и опере, в мозиле подобной проблемы нет

Здравствуйте. Начала писать простейшую страницу для тренировки, но вот получилась проблема с CSS: не работают свойства margin-auto для всего, не работает задание ширины для блока с изображением (в main, class="index-image"). Text-align работает. Смотрела в последних версиях Мозиллы и Хрома. Просмотрела код - не вижу ничего неверного, все теги закрыты. Ширина тоже задана всем родительским элементам нужных блоков. Особенность в том, что всё (что пока успела) в процентах и em, кроме min-height/width локально, но раньше на таких страницах всё нормально работало. Может быть вы подскажете, в чём проблема. UPD: Ужас какой... после чашки кофе всё удалось решить. Всё было просто.

привет. недавно занялась вёрсткой, проблема в самом начале. в шапке логотип должен быть слева по центру, а текст справа по центру. не срабатывает text-align. может совсем по-другому надо подойти к этому. прошу помощи! ещё будет страница с той же шапкой но другим текстом ("поддержка"). хотелось бы использовать те же стили https://jsfiddle.net/hktt4Lue/

Добрый день! Оцените, пож-ста, верстку. По адаптивности, качеству кода. https://milana999.github.io/startup/index.html

Как подключить библиотеку Bourbone русское руководство есть ?

Сайт https://knyaz85.github.io/ Сайт тестовый, для критики.. Идея - аналог страницы в соцсети в основном для размещения медиа-контента и документов Прошу оценить всё в целом - дизайн, верстку, код, юзабилити, общее впечатление и др. Примечания. Сайт делался под гугл хром, в мозилле другой медиаплеер и почему то по другому выглядит тень от белого фона - получается не очень красиво.. В эксплоурере вообще черт знает что получилось, прошу также хотя бы в общих чертах просвятить как адаптировать сайт к интернет эксплоурер.. Медиа загружается через гугл очень долго, через мозиллу почему то быстрее.. Если кто знает почему, так же прошу просвятить)

Всем привет, форумчане! Есть задача сделать вот такую штуку как на картинке, она должна быть 100% шириной по отношению к контенту, но ограниченной высотой, к примеру 60 пикселей. У меня уже есть решение которое я сделал https://jsfiddle.net/x5Lavn55/, но может имеется более элегантное и лучше чем мое? Пробовал с svg, но не могу растянуть на 100% не изменив высоту...

Всем привет! Подскажите пожалуйста новичку, что за иконки на этом сайте. Пытаюсь скопировать её через исходный код, но выдает вот такой фрагмент кода: .fa-search:before { content: "\f002"; } Скриншот картинки, прикрепил. Буду рад, если Вы мне поможете. Спасибо!

<div class="center-menu"> <div class="center-bar-one"> <h1> Новости </h1> <p>Сегодня 21 января было совершено нападение на одного из наших брокеров, прямо у дверей московской фондовой биржи. Нападающий выскочивший из за угла был одет в черный костюм с красным галстуком и в маске напала на олега олежина после чего скрылся и его след простыл. Олежин был немедленно госпитолизирован, мвд по московской области ведет расследование.</p> </div> </div> Вот хтмл код этого элемента .center-bar-one { float: left; width: 150px; height: 200px; font-size: 11px; color: blue; } Когда я прописываю размер шрифта и в коде присутствует тег <p>, то размер шрифта не меняется. Если прописать например цвет, то никаких проблем нет. Когда убираю тег <p> то шрифт меняется. В чем дело? помогите

Всем привет, уважаемые форумчане! Я недавно верстал сайт и обратил внимание, что он долго загружается. Понятное дело, картинки не оптимизированы, css-файл огромный и не почищен. Но у меня в голове просто встал вопрос: в каких случаях нужно делать эффект прелоадера для сайта? А главное, когда это нужно делать? Может вы мне подскажете..

Добрый день! Создал меню, текст в google chrome отображается не вылезая за границы, а в firefox как на картинке. В чем проблема и как это исправить?

Привет, у меня есть свёрстанный блок, но элементы(круги) не стоят друг под другом, как это исправить? <section id="about"> <div class="container"> <div class="title"> <h2> About Us </h2> <p> Lorem ipsum dolor sit amet, consectetur. </p> </div> <div class="timeline-holder"> <div class="box"> <div class="left"> <h3>July 2018 <span>Our humble beginnings</span></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p> </div> <img src="img/about1.jpg" alt="" /> </div> <div class="box"> <div class="right"> <h3>January 2018 <span>Our humble beginnings</span></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div> <img src="img/about2.jpg" alt="" /> </div> <div class="box"> <div class="left"> <h3>December 2018 <span>Our humble beginnings</span></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div> <img src="img/about3.jpg" alt="" /> </div> <div class="box"> <div class="right"> <h3>February 2019 <span>Our humble beginnings</span></h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero amet explicabo quis expedita fuga magnam consequatur perferendis aliquam ipsum odio magni illum aperiam, quod eaque, debitis consectetur, dolorem provident quidem.</p></div> <img src="img/about4.jpg" alt="" /> </div> </div> </section> .about{ margin-top: 86px; } .timeline-holder { position: relative; } .box { display: flex; align-items: center; margin: 60px 0; } .box .left { flex: 1; padding: 0 20px; } .box .right { direction: rtl; flex: 1; padding: 0 20px; } .box:nth-child(even) { margin-right: calc(50% - 75px); } .box:nth-child(odd) { flex-direction: row-reverse; margin-left: calc(50% - 75px);

Решил анимировать иконки, нашел пример в интернете, скопировал в Safari Версия 11.0.2 (13604.4.7.1.3), в мобильных Safari и Chrome все отображается отлично но почему-то иконки неправильно отображаются в Chrome Mac (Версия 63.0.3239.132 (Официальная сборка), (64 бит), Chrmoe Windows и Edge - на переднем плане анимированный градиент, а на заднем иконка пример кода пример того как должна выглядеть анимированная иконка во вложении Screen Capture 2018-01-10 06.49.14.mov

Здравствуйте! Оцените пожалуйста верстку. Если есть ошибки, напишите как правильнo будет. Ссылка на сайт wor.swema.ru

Добрый день! Имею вот такой код: https://jsfiddle.net/f3scmbr0/ Загвоздка вся в том, что мне нужно закруглить углы у блока wrapp так, чтобы блок с изображением оставался в таком положении, в каком он сейчас находится. Подскажите где промахнулся при построении дерева. Пока я вижу вариант закруглять определенные углы у .hello__container и .hello__btn. Но это крайне тупо, как мне кажется... А по другому чет не вижу как это реализовать при таком построении блоков. Нуждаюсь в совете как правильно выстроить вложенность. Потому что, повторюсь, явно напартачил с этим делом, но не вижу решения... И, по ходу написания, нашел еще один вопрос, на который хотел бы найти ответ: сам блок с изображением выпал из потока и по-этому, когда я уменьшаю размеры окна, его не учитывают - ава залазит под само окно... пытался выйти из ситуации с помощью :after c margin-top: -(половина высоты блока изображения), но не дало результата. Надеюсь что внятно изложил суть проблемы...

Помогите, пожалуйста, разобраться как активировать кнопки чтобы при нажатии на них сменялась информация (текст/картинка). Один отзыв заменял другой. Прикрепляю свой код. Большое спасибо) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="reviews.css"> </head> <body> <style type="text/css"> .uc-reviws { position: relative; display: block; } .uc-reviews-slider{ overflow: hidden; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } .uc-reviews-slider-wrapper{ max-width: 100%; overflow: hidden; position: relative; display: block; } .uc-reviews-slider-wrapper > .uc-reviews-list:after { clear: both; } .uc-reviews-slider-wrapper .uc-reviews-list{ -webkit-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); -webkit-transition: all 1s; -webkit-transition-property: -webkit-transform,height; -moz-transition-property: -moz-transform,height; transition-property: transform,height; -webkit-transition-duration: inherit !important; transition-duration: inherit !important; -webkit-transition-timing-function: inherit !important; transition-timing-function: inherit !important; } .uc-reviews-list:before { content: " "; display: table; } .uc-reviews-slider-wrapper > *.active { z-index: 10; } .uc-reviews-slider-wrapper > *.active { opacity: 1; } .uc-reviews-block{ cursor: -webkit-grab; float: left; display: list-item; text-align: -webkit-match-parent; margin: 0px 0 0 0; position: relative; } .uc-reviews-img{ width: 100%; height: 100%; position: relative; z-index: 55; } .uc-reviews-wrapper{ position: absolute; z-index: 77; top: 0; margin: -0.7% 0 0 50%; padding-top: 40px; min-height: 100%; max-width: 1600px; box-sizing: border-box; display: block; } .uc-reviews-text { width: 485px; left: 50%; padding: 30px 0 0 45px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; } .uc-reviews-text-outer-type-a:before{ content: ''; position: absolute; left: 11px; background: #3c3c3c; width: 28px; height: 2px; margin: 9px 0 15px 0; } .uc-reviews-text-outer-type-a p { font-size: 17px; font-family: Lato_regular; line-height: 22px; color: #000; margin: 0 0 20px 0; position: relative;} .uc-reviews-text-outer-type-b p { font-size: 16px; font-family: Lato_italic; color: #747474; margin: 20px 0 0 0; } .uc-reviews-slider:after { clear: both; content: " "; display: table; } .uc-reviews-buttom { display: block; } .uc-reviews-buttom_left { width: 32px; display: block; top: 50%; height: 32px; background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png); cursor: pointer; position: absolute; z-index: 9999; opacity: 0.8; margin-top: -16px; background-position: 0 0; left: 30px; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; } .uc-reviews-buttom_right{ width: 32px; display: block; top: 50%; height: 32px; background-image: url(http://ihub.world/wp-content/themes/ihub/img/controls.png); cursor: pointer; position: absolute; z-index: 9999; margin-top: -16px; opacity: 0.8; -webkit-transition: opacity 0.35s linear 0s; transition: opacity 0.35s linear 0s; background-position: -32px 0; right: 30px; } .uc-reviews-number { position: relative; bottom: 67px; left: 0; right: 0; margin: 0 auto; padding: 0; text-align: center; } .uc-reviews-slider .uc-reviews-number a { background-color: #222222; border-radius: 30px; display: inline-block; height: 8px; overflow: hidden; text-indent: -999em; width: 8px; position: relative; z-index: 99; -webkit-transition: all 0.5s linear 0s; transition: all 0.5s linear 0s; cursor: pointer; } .uc-reviews-slider .uc-reviews-number > li:hover a, .uc-reviews-slider .uc-reviews-number > li.active a { background-color: #428bca; } .uc-reviews-slider .uc-reviews-number { margin: 10px 0 0; padding: 0; text-align: center; } .uc-reviews-slider .uc-reviews-number-position { cursor: pointer; display: inline-block; padding: 0 5px; } </style> <div class="uc-reviews"> <div class="uc-reviews-slider "><div class="uc-reviews-slider-wrapper" style="transition-duration: 1000ms; transition-timing-function: ease;"> <ul class="uc-reviews-list" style="width: 9443px; transform: translate3d(-2698px, 0px, 0px); height: 424px; padding-bottom: 0%;"> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage2.static.itmages.ru/i/18/0104/h_1515086726_8963396_bc057ad031.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“Management of the centre frequently engages media to showcase the success of their residents.</p> <p>iHUB also provides an opportunity for all their startups to participate in interesting events. For example, we have presented our startup in Oslo thanks to iHUB.”</p> </div> <p class="review-bg-text-outer-type-b"> Nikita Dobrynin &amp; Katia Dobrynina, Founders @ AstraFit </p> </div> </div> </li> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage4.static.itmages.ru/i/18/0104/h_1515086781_3914429_0b10231d6a.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p> </div> <p class="uc-reviews-text-outer-type-b"> Stakh Vozniak, CEO @ TONA </p> </div> </div> </li> <li class="uc-reviews-block" style="width: 1349px; margin-right: 0px;"> <img src="http://storage8.static.itmages.ru/i/18/0104/h_1515086875_1757560_ad7a2b467a.jpg" alt=""> <div class="uc-reviews-wrapper"> <div class="uc-reviews-text"> <div class="uc-reviews-text-outer-type-a"> <p>“iHUB has all the necessary infrastructure, and most importantly – a community of smart and creative people, as well as a great number of events attended by many investors and leading industry experts.”</p> </div> <p class="uc-reviews-text-outer-type-b"> Stakh Vozniak, CEO @ TONA </p> </div> </div> </li></ul> <div class="uc-reviews-buttom"> <a class="uc-reviews-buttom_left"></a> <a class="uc-reviews-buttom_right"></a></div></div> <ul class="uc-reviews-number" style="margin-top: 5px; transform: translate3d(0px, 0px, 0px);"> <li class="uc-reviews-number-position"><a href="#">1</a> </li> <li class="uc-reviews-number-position"><a href="#">2</a> </li> <li class="uc-reviews-number-position"><a href="#">3</a></li></ul></div> </div> </body> </html>

Почему элемент <li> внутри элемента <p> тоже входит в выборку селектора ul > li ? он же не непосредственно дочерний https://jsfiddle.net/5unz8ta4/

Итак ... Проблема заключается в неопытности в вёрстке . Есть меню , обычное . При нажатии на главное меню кидает на главную , при нажатии на "Фото" кидает на фото . "Фото" состоит из тех же элементов что и "Характеристики" кроме текста , и пары других незначительных вещей . Как сделать переход на "Фото" или "Характеристики" , "Отзывы".Нужно ли создавать по 20 страниц , или можно сделать так чтобы просто менялась часть сайта ? в любом случае если что-то понадобится то пишите , я скину код или скриншот .

Как задать через html или css или ещё как-то – изображение, которое автоматически подтягивается при вставке ссылки в поле ввода сообщения (например в VK или Facebook)? Прикрепил 2 примера.