Search the Community
Showing results for tags 'css'.
-
Добрый день. Написал сайт и встречается такая проблема на устройствах от apple (конкретно Iphone 5). В форму заявки в поля input не вводятся никакие символы. Посоветуйте пожалуйста. Спасибо.
-
Порекомендуйте пожалуйста статьи или видеоуроки по bootstrap.
-
Коммерческий опыт: c++, directshow, бд - firebird Ищу удаленку, верстка, frontend. js/jquery/html/css php технический английский mail: pluginmakerz@gmail.com skype: job@pluginmakerz.tk
-
Всем привет. Недавно я самостоятельно сверстал макет и хотелось бы услышать мнение опытных верстальщиков. Приму и учту любой совет и критику. Ссылка на скачивание файлов: https://drive.google.com/drive/folders/0B4tKSvnDdweseFpjbERpUnVJcHM?usp=sharing <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> </head> <body> <header> <div class="container"> <div class="heading clearfix"> <div class="icon_menu"> <i class="fa fa-align-left " aria-hidden="true"></i> </div> <ul class="menu"> <li> <a href="#">Main</a> </li> <li> <a href="#">Demos</a> </li> <li> <a href="#">Portfolio</a> </li> <li> <a href="#">Blog</a> </li> <li> <a href="#">Shortcodes</a> </li> </ul> <div class="search"> <i class="fa fa-search" aria-hidden="true"></i> </div> </div> </div> <hr class="line"> </header> <section> <div class="container"> <div class="content clearfix"> <div class="social_network"> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-instagram" aria-hidden="true"></i> <i class="fa fa-pinterest-p" aria-hidden="true"></i> <i class="fa fa-google-plus" aria-hidden="true"></i> <i class="fa fa-tumblr" aria-hidden="true"></i> <i class="fa fa-rss" aria-hidden="true"></i> </div> <div class="tagline"> <hr class="line_titles"> <h5>your tagline will go right here</h5> <hr class="line_titles"> </div> <div class="logo"></div> <div class="photo"></div> <div class="text_content"> <h2>This is a headline just right here</h2> <p> 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 <br> <br> <br> <span class="left_quotation">“</span> <span class="quote"> 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 mollit anim id est laborum. </span> <span class="right_quotation">”</span> <br> <br> <br> 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 </p> </div> </div> </div> </section> <section> <hr class="line"> <div class="container"> <div class="mail clearfix"> <div class="logo_mail"></div> <div class="to_top"> <i class="fa fa-chevron-up fa-2x" aria-hidden="true"></i> <p>TO TOP</p> </div> <div class="subscription"> <label for="#">Subscribe now to receive our daily updates.. <br> <input type="email" placeholder="Enter your e-mail here..." > <input type="submit" value="SUBSCRIBE"> </label> </div> </div> </div> </section> <section> <div class="container"> <div class="instagram"> <a href="#">MY INSTAGRAM</a> </div> </div> </section> <footer> <div class="container"> <p class="copy">@2015 - Copyright All Right Reserved. Designed and Developed by Whoever.</p> </div> </footer> </body> </html> @import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,400i|Montserrat:400,700|Permanent+Marker|Playfair+Display:400,400i'); *, *::after, *::before { margin:0; padding:0; } .clearfix:after { content:''; display: table; width: 100%; clear: both; } div{ box-sizing: border-box; } section:last-of-type{ background-color: #808080; } section:first-of-type{ background: url(img/bg.png); } .container{ width: 1170px; margin: 0 auto; } .heading{ position: relative; overflow:hidden; height:70px; } .icon_menu{ margin-top: 25px; color: #c4c4c4; float: left; border-right: 1px dotted #c4c4c4; padding-right: 30px; margin-left: 20px; } .icon_menu i{ margin-top: 1px; } .icon_menu:hover{ color: #22bb66; } .menu{ list-style:none; position: relative; top: 38%; left:40%; float:left; } .menu li{ position:relative; left:-39%; float:left; border-right: 1px dotted #c4c4c4; padding:0 30px; } .menu a{ color: #4d4d4d; display:block; text-decoration:none; text-transform:uppercase; font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px; } li:last-child{ border: none; } .menu a:hover{ color: #22bb66; } .menu a:active{ position: relative; top: 3px; } .search{ float: right; margin-top: 25px; color: #c4c4c4; border-left: 1px dotted #c4c4c4; padding-left: 30px; margin-right: 20px; } .search:hover{ color: #22bb66; } .line{ border: none; background-color:#eaeaea; color: #eaeaea; height: 2px; } .content{ text-align: center; } .social_network{ padding-top: 67px; color: #c7c7c7; } .social_network i{ padding-right: 11px; } .social_network i:hover{ color: #000000; } .tagline h5{ font-size: 12px; font-weight: 400; font-family: 'Permanent Marker' , sans-serif; } .line_titles{ border: none; height: 2px; width: 102px; background-color:#22bb66; color: #22bb66; position: relative; margin-top: 20px; } .line_titles:first-child{ left: 380px; top: 10px; } .line_titles:last-child{ float: right; right: 380px; bottom: 28px; } .logo{ background: url(img/logo.png); width: 333px; height: 112px; position: relative; left: 414px; margin-top: 20px; } .photo{ margin-top: 100px; height: 566px; background: #595959; } .text_content{ background: #ffffff; margin-top: 67px; margin-bottom: 57px; padding: 62px 30px; border: 2px #eaeaea solid; } .text_content h2{ font-family: 'Montserrat', sans-serif; font-size: 30px; color: #262626; } .text_content p{ margin-top: 44px; font-family: 'Droid Serif', serif; font-size: 14px; line-height: 24px; color: #4a4a4a; } .quote { font-size: 18px; font-style: italic; padding: 0 144px; display: block; } .left_quotation{ font-size: 92px; color: #dcdcdc; font-style: italic; padding-right: 82px; float: left; } .right_quotation{ font-size: 92px; color: #dcdcdc; font-style: italic; float: right; position: relative; top: 22px; } .mail{ padding: 54px 0; } .logo_mail{ background: url(img/logo.png); width: 333px; height: 112px; float: left; margin-right: 35px; } .subscription { font-family: 'Montserrat', sans-serif; color: #666666; font-size: 15px; float: right; border-right: 1px dotted #c4c4c4; border-left: 1px dotted #c4c4c4; padding: 5px 80px; margin-right: 67px; margin-top: 5px; } input[type="email"]{ border: 1px solid #eaeaea; background-color: #f8f8f8; width: 347px; height: 42px; font-family: 'Montserrat', sans-serif; font-size: 20px; padding: 17px; margin-top: 15px; box-sizing: border-box; outline: none; } input[type="submit"]{ background-color: #22bb66; width: 103px; height: 42px; border: none; border-radius: 0 5px 5px 0; color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 12px; text-align: center; box-sizing: border-box; position: relative; bottom: 3px; right: 3px; outline: none; } input[type="email"]:focus{ border: 1px solid #22bb66; } input[type="submit"]:hover{ color: #22bb66; background-color: #ffffff; border: 1px solid #22bb66; } ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; padding-top: 5px; } ::-moz-placeholder { /* Firefox 19+ */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; } :-ms-input-placeholder { /* IE 10+ */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; } :-moz-placeholder { /* Firefox 18- */ color: #bdbdbd; font-family: 'Montserrat', sans-serif; font-size: 12px; } .to_top{ border-radius: 50%; background-color: #f1f1f1; width: 109px; height: 109px; float: right; text-align: center; font-family: 'Montserrat', sans-serif; color: #262626; font-size: 13px; font-weight: 700; padding: 30px 0; } .instagram{ text-align: center; height: 341px; padding: 170px 0; } .instagram a{ background-color: #22bb66; width: 167px; padding: 20px 25px; border-radius: 5px; font-family: 'Montserrat', sans-serif; color: #ffffff; font-size: 14px; font-weight: 700; text-decoration: none; } .instagram a:hover{ color: #22bb66; background-color: #ffffff; border: 2px solid #22bb66; } .instagram a:active{ position: relative; top: 3px; } .copy{ font-family: 'Playfair Display'; color: #262626; font-size: 14px; font-style: italic; text-align: center; padding: 22px 0; }
-
Всем привет! Пытался сверстать данный макет. Я прописал для центрирования div.contanier { width: 1150px; margin: 0 auto } И вместе с этим моя картинка сузилась до 1150px(красной обводки) , как установить ширину картинки на полный экран?
-
Моя проблема такова я хочу сверсать свой первый сайт, я сделал меню, но оно странно отображается, необходимо чтобы все пункты отображались одной строкой <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Новости обо всем</title> <link href="css/style2.css" rel="stylesheet" type="text/css"> </head> <body> <header> <div id"logo"> Имя </div> <div id="menuHead"> О нас </div> <div id"regAuth"> Войти Зарегистрироваться </div> </header> </body> </html> @charset "UTF-8"; * { margin: 0; padding: 0; outline: none; } html { height: 100%; } body { width: 100%; height: 100%; background-color: #fff; color: #333; font-family: "Segoe UI", Arial, sans-serif; font-size: 1em; line-height: 135%; } a, a:hover { color: #d90fff; text-decoration: none; -webkit-transition: all.6s ease; -moz-transition: all.6s ease; -o-transition: all.6s ease; transition: all.6s ease; } a:hover { color: #00ffff; } .clear { clear: both; } /* styles for header*/ header { width: 98%; float: left; padding: 1%; background-color: #fafafa; border-bottom: 2px solid silver; } header #logo { width: 40%; float: left; } header #menuHead { width: 30%; float: left; } header #auth { width: 30%; float: left; }
-
Подскажите кто сталкивался с анимированием эффекта нажатия через animation? Через transition понятно как, но вот тут http://landing-animation.powercode.pro/ верхние правые кнопки уж очень приятно выглядят, пробовал повторить через инспектор, но безуспешно. Или где-то ошибаюсь или есть какая-то особенность. Спасибо.
-
Подскажите как правильно такое нарисовать? Может быть canvas? Пробовал на нем, но линия какая-то размытая получается и не знаю как в произвольных точках этой кривой рисовать круги Возможно за это отвечает какой-нибудь jquery плагин? Вот скриншот http://www.fotolink.su/v.php?id=03b5a0c45dd734ab866094f13307e8a5
-
Привет! Подскажите пожалуйста, есть мобильное меню работающее по клику, хочу использовать свойство transition чтобы изменить скорость отображения меню но не получается Демо 1 Демо онлайн там используется jquery для отображения меню $(".mob-menu").click(function(){ $(this).toggleClass("open"); // transform mobile menu icon to X $(".nav-left,.wrapper,.header").toggleClass("openleft"); }); я пробую добавить css эффект transition но не работает, в чем может быть проблема? .nav-left.openleft,.wrapper.openleft,.openleft{ -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition:all 2s; }
-
На связи Z Wolves Development! Наш постоянный заказчик из Франции любит багеты, береты и классных фронт-эндов! Формат работы: только ремоут, только хардкор Занятость: полная (40-часовая рабочая неделя) Зарплатная вилка: почасовой рейт 8-9$ Описание : ищем человека с 1,5+лет HTML/CSS, опыт с ReactJS, AngularJS (либо другими современными фреймворками) Также знания jQuery, Sass/Less; Grunt/Gulp; Node.js, опыт с VCS (SVN/Git и т.п.) графические редакторы Английский — не ниже Intermediate, с разговорным Контакты для связи: Telegram @abelausavaZ skype:live:a.belousova_2
-
Здравствуйте! Помогите с решением. Подскажите, можно ли сверстать стрелку на псевдоэлементе? https://prnt.sc/gb74sc https://prnt.sc/gb7kos
-
Надеюсь, смогу объяснить, чтобы меня поняли: Наткнулся на один сайт (http://sheltertheanimation.com/), на нём есть тег <section>, что используется на сайте. И вот при прокрутке страницы фон этой секции не подвижен, а сами элементы, типо: <h1>, <p> подвижны. У меня просьба и вопрос: Дайте мне ссылку на статью по подобной ситуации, ибо очень заинтересовала, и объясните мне предназначение тега <section>, ведь я мог вместо него использовать тот же самый <div>.
-
То о чем я говорю представлено на скриншоте. Через padding-top по пикселям делал, как-то неудобно получается. Есть ли еще варианты?
-
Данный вариант —> var i = parseInt($("#sli").css('margin-left')); Индентичен варианту —> var i = parseInt(document.getElementById('sli').style.marginLeft). Но, по какой-то причине, второй вариант не работает. То есть, я не могу стиль вложить в переменную в JavaScript, а в JQuery такое возможно. И при изменении стиля типо left в javascript, мне нужно указывать что-то вроде 100 + 'px', а такой момент отсутствует в JQuery, сойдут обычные числа. Был бы благодарен, если бы на мои вопросы были ответы, потому что мне не понятна такая работа кода.
-
В этом коде: https://jsfiddle.net/Lgjy2c8w/ у меня блок запоминает положение другого, и на 100 пикселей уходит дальше, хотя глобальная функция задана tor = 0, и изменяться они уже в своих функциях. Как исправить неправильное смещение?
-
Всем привет! Я, некоторым образом, нуб в верстке. Сделал пару сайтов, чисто на html и css, пользуясь руководствами, как направляющими. Сайты работают вполне приемлемо, однако, я столкнулся с одним неудобством: каждый раз, для загрузки изображения, мне требуется залезать в панель управления Джумла и, либо создавать там новую категорию и макеты, либо менять изображения и текст в тех, что уже существуют. Это не очень удобно, тем более, что я, каждый раз, успеваю забыть, какой порядок действий мне нужно совершить. В связи с этим, возник вопрос: можно ли как-то сделать так, чтобы загрузка изображений происходила, как, к примеру, вКонтакте, когда можно создать альбом - и закинуть в него фотографии, быстро и без лишних телодвижений? Заранее спасибо за ваши комментарии.
-
Приветствую всех. Пожалуйста, дайте критику на эту верстку. Я новичок, и это моя первая попытка что-то сверстать. Большое спасибо. maquette1.rar
-
Добрый вечер. Вот только закончил верстать свой второй адаптивный дизайн. Первый делал на бустрапе. Здесь же я решил использовать flexbox причем сразу же с сеткой. Вот что получилось: https://alex2033.github.io/ Оцените пожалуйста и покритикуйте, если есть что) P.s. Вот действительно практика - лучший инструмент обучения. Когда только начинал этот макет верстать, о флексах ничего не знал и не понимал как они работают. А щас чувствую себя этаким специалистом:DD
-
у меня есть список: <nav> <ul class="navigation"> <li><a id="link" href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li class="cb"><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> </ul> </nav> и есть стили которые меняют список: nav .navigation li a{ background: url(../img/home.png); color:#4CB0D4; text-decoration: none; text-align:center; display: block; background: #ffffff; height: 30px; width: 170px; padding-top: 70px; font-size: 20px; font-family: "BebasRegular"; border-radius: 4px; } Проблема в том, что у меня не вставляется изображение в блок, правило background есть а изображение нету. Когда делаю id элементу <a>, и делаю ему правило #id {background:url...} тогда у меня изображение ложится на левый верхний угол, и белый фон блока превращается в синий как фон. Я подазреваю что проблема в том, что я неправильно задал правила для навигации, вот код: !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>@import url(css/style.css)</style> </head> <body> <div id="wrap"> <header> <div class="header_top"> </div> </header> <nav> <ul class="navigation"> <li><a id="link" href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li class="cb"><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> <li><a href="">текст</a></li> </ul> </nav> </div> </body> </html> и css head,body{ margin:auto 0; } body{ background: url(../img/white-severance.png); } #wrap{ height: 600px; margin: auto 0; } header{ min-height: 300px; max-height: 300px; background: #FFFFFF; } nav{ min-height: 350px; max-height: 350px; background: #4CB0D4; overflow: hidden; } nav .navigation{ margin-left: 15px; } ul{ list-style: none; } nav .navigation li{ display: block; float: left; padding: 30px; } nav .navigation li a{ background: url(../img/home.png); color:#4CB0D4; text-decoration: none; text-align:center; display: block; background: #ffffff; height: 30px; width: 170px; padding-top: 70px; font-size: 20px; font-family: "BebasRegular"; border-radius: 4px; } .navigation .cb{ clear: both; } ul .sell a{ background: url(../img/home.png) no-repeat; } #link{ } @font-face { font-family: 'BebasRegular'; src: url('../fonts/BebasRegular/BebasNeueRegular.eot'); src: url('../fonts/BebasRegular/BebasNeueRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/ BebasRegular/BebasNeueRegular.woff') format('woff'), url('../fonts/BebasRegular/BebasNeueRegular.ttf') format('truetype'); font-style: normal; font-weight: normal; }
-
Написал код точно как в учебнике, но он не работает. В чем причина? Скриншоты прилагаются.
-
В бустрапе контейнер создает свою стандартную ширину 1140 вроде, я ставлю свою 1024 и у меня слетает nav меню для мобильного разрешения HTML <header> <div class="container"> <div class="row hidden-xs"> <div class=" col-lg-3 header-logo"> <p>Burgers<span>.co</span></p> </div> <div class="col-lg-7 col-lg-offset-2 header-menu"> <ul class="nav nav-pills "> <li class="active"><a href="#">Home</a></li> <li><a href="#">Our Burgers</a></li> <li><a href="#">What Else?</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> <nav class="navbar navbar-default hidden-md hidden-sm hidden-lg"> <div class="container-fluid"> <div class="navbar-header"> <div class="col-xs-2 header-logo"> <p>Burgers<span>.co</span></p> </div> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Our Burgers</a></li> <li><a href="#">What Else?</a></li> <li><a href="#">Photos</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </nav> </header> CSS html, body { font-family: 'Rubik', sans-serif; font-family: 'Martel', serif; } .header-logo p { display: block; font-family: 'Martel', serif; font-size: 26px; color: #0e1d2b; text-transform: uppercase; padding: 30px 50px; font-weight: bold; } .header-logo p span{ color: #ffa326; } .header-menu ul { list-style-type: none; } .header-menu a{ display: block; text-decoration: none; color: #3e4a55; } .nav-pills > li > a:hover{ color: #3e4a55; opacity: .8; background: #fff; } .nav-pills > li > a:focus{ color: #3e4a55; background: #fff; } .nav-pills > li.active > a { background: #fff; color: #3e4a55; border-bottom: 4px solid #ffa326; border-radius:0; } .nav-pills > li.active > a:hover { background: #fff; color: #3e4a55; opacity: .8; } .nav-pills > li.active > a:active { background: #fff; color: #3e4a55; } .nav-pills > li.active > a:focus { background: #fff; color: #3e4a55; } .header-menu { margin-top:25px; } .navbar-header .header-logo p{ padding: 0; margin-top: 7px; } .nav > li > a { text-transform: uppercase; }
-
Добрый день, нужно сделать слайдер в шапке сайта. Причем меняется только выделенная красной зоной область, то есть не вся шапка. Как сделать так, чтобы у слайдера не было фона? Должен быть прозрачным как на скриншоте.
-
Html <header> <div class="container services"> <div class="row"> <div class="col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 108.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 127.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service "> <a href="#"> <img src="img/Shape 106.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> <div class="col-md-offset-1 col-xs-offset-1 col-md-2 col-xs-2 service"> <a href="#"> <img src="img/Shape 97.png" class="main" alt=""> <p>Услуги<br/>поликлиники</p> </a> </div> </div> </div> </header> CSS .service { text-align: center; margin-right: 32px; position: relative; padding:0; } .service:last-child{ margin-right: 0; } .service-item { } .service img { max-width: 100%; display: block; margin: 0 auto; } .service a { display: block; } .service a p { display: block; text-decoration: none; font-size: 16px; font-weight: bold; color: #2a2a2a; }
-
Здравствуйте,все никак не могу понять как правильнее реализовать данную форму? Как видите рамки ссылки(по совместительству кнопка) несколько больше рамок поля, притом, что размеры их рамок, высота поля и ссылки одинаковы. Вообще такое ощущение,будто это одно поле, но каким-то образом разделенное, но не понимаю как. Я же "лепил"их с помощью отрицательного марджина ссылки.
-
Друзья, возникла задача построения ряда блоков. Блоки располагаются один под другим. В каждом есть изображение, которое должно обрезаться снизу. Однако сам div нестандартный. Смотрим картинку Какие у меня были варианты решения: Использовать overflow: hidden; Но идея потерпела крах, потому что он обрезает не по линии, а по горизонтали. Использовать clip; Тоже крах, потому что теряется адаптивность и каждый раз рассчитывать clip даже с помощью js тяжело Разные варианты совмещения. Например, взять из макета дугу и картинку, сохранить как PNG и установить в основном слое как background-position: bottom; Пока это самая лучшая идея, но она не универсальна. Необходимо сделать так, чтобы работало с любой картинкой, не только с выбранной из макета. То есть было бы странно сначала закидывать любую картинку в макет, там вырезать ее вместе с дугой и вставлять как background Как строить такие блоки с обрезкой картинок на нижней границе?
