AlexZaw

Проверяйте в макете размер шрифта, а так-же word-spacing и letter-spacing

Поправил ваш стиль, у вас в медиа запросе была лишняя ; а вообще прогоните ваш сайт через валидатор - ужаснетесь

Перенесите медиа запросы в самый низ css

как то так: <div class="wrap"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quibusdam aspernatur iusto? Enim incidunt eius iste tenetur optio, perferendis, quaerat reiciendis quod explicabo velit amet reprehenderit ullam quisquam accusantium, sit corrupti. Distinctio neque, non quidem similique doloribus quod voluptatum cum, magni repellat ut corporis numquam est eaque quo tenetur reprehenderit? </div> <div class="images"> <img src="http:/placekitten.com/400/900" alt=""> <img src="http:/placekitten.com/600" alt="" class="triangle"> </div> </div> .wrap{ display: flex; } .text{ max-width: calc(100% - 400px); } img{ max-width: 100%; vertical-align: middle; } .images{ position: relative; } .triangle{ position: absolute; bottom: 0; right: 0; }

не очень кроссбраузерный вариант: <div class="wrap"> <form class="feedback_form"> <p>Нужен срочный перевод контракта или делового письма? Переговоры с иностранными партнерами перенесли на сегодняшний вечер, а под рукой нет переводчика? </p> <h4>Решите задачу сейчас:</h4> <input type="text" name="name" id="name" placeholder="Введите имя:"> <input type="text" name="phone" id="phone" placeholder="Введите телефон:"> <input type="submit" class="red_button" value="нужен срочный перевод"> </form> </div> .wrap{ filter: drop-shadow(0 0 5px rgba(1, 2, 2, 0.5)); } .feedback_form:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 10px; background: #cb0e17; clip-path: polygon(0 0,45% 0px,50% 10px, 55% 0px, 100% 0) } .feedback_form { position: relative; width: 300px; min-height: 500px; margin-left: 55px; background-color: #fff; border: 1px solid #cb0e17; clip-path: polygon(0 0, 45% 0, 50% 10px, 55% 0, 100% 0, 100% 100%, 0 100%); padding: 1.2em; padding-top: 2.8em; display: flex; flex-direction: column; align-items: center; } p { font-size: 0.75em; font-family: "Roboto", sans-serif; color: rgb(51, 51, 51); line-height: 2; text-align: left; } h4 { font-size: 22px; font-family: "Roboto"; color: rgb(203, 14, 22); line-height: 1.09; text-align: left; margin-top: 30px; margin-bottom: 35px; } input { width: 232px; height: 40px; } input[type="text"] { border: 1px solid rgb(1, 1, 1); border-radius: 2px; background-color: rgba(255, 255, 255, 0.231); opacity: 0.5; } input:first-of-type { margin-bottom: 10px; } input[type="submit"] { border: none; cursor: pointer; margin-top: 35px; } .red_button { border-radius: 2px; background-color: rgb(203, 14, 23); box-shadow: 0px 0px 5px 0px rgba(1, 1, 1, 0.75), inset 0px 0px 5px 0px rgba(255, 255, 255, 0.36); width: 230px; height: 41px; display: flex; justify-content: center; align-items: center; font-size: 15px; font-family: "Roboto", sans-serif; color: rgb(255, 255, 255); text-transform: uppercase; line-height: 2.399; } body{ font-size: 20px; }

<div class="first"></div> <div class="second"></div> html, body { height: 100%; } .first { height: 10%; background-color: #086fa1; } .second { height: 90%; background-color: #ff0000; }

Можно, если использовать относительное и абсолютное позиционирование. <div class="image"> <img src="http://placekitten.com/200"> <span>Lorem, ipsum dolor.</span> </div> .image{ position: relative; display: inline-block; } img{ vertical-align: top; } span{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

А чем не нравится позиционирование? <div class="parent"> <div class="wrap"> <div class="child child-1">Lorem ipsum dolor</div> </div> <div class="wrap"> <div class="child child-2">Lorem ipsum dolor sit amet, consectetur</div> </div> <div class="wrap"> <div class="child child-3">Lorem</div> </div> </div> <div class="center"> Центр родительского блока </div> /* Внешний вид */ body { background: #ccc; } .parent { border: 2px solid #000; position: relative; } .center { text-align: center; position: relative; padding-top: 20px; } .center::before { content: ""; position: absolute; width: 2px; height: 20px; top: 0; left: 50%; transform: translateX(-50%); background: #f00; } .child { height: 100px; flex-shrink: 0; white-space: nowrap; } .child-1 { background: #f00; } .child-2 { background: #0f0; position: relative; } .child-2::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: #f00; } .child-3 { background: #00f; } /* Позиционирование */ .parent { display: flex; justify-content: space-between; } .wrap { display: flex; width: 33.33%; } .wrap:nth-child(2) { justify-content: center; } .wrap:last-child { justify-content: flex-end; }

Почитайте: https://habr.com/ru/post/230877/ https://habr.com/ru/post/231845/ http://qaru.site/questions/15855/include-another-html-file-in-a-html-file https://www.w3schools.com/howto/howto_html_include.asp https://github.com/xmoonlight/includeHTML

Ммм, а простое нажатие Ctrl+S и выбор пункта "Веб страница, только HTML" чем не устраивают?

Тогда попробуйте грид. Ну либо задайте для заголовка минимальную высоту.

Плохо пробовали. :) Черновой вариант: <div class="wrap"> <div class="card"> <div class="card_header">Header</div> <div class="card_text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi tempore incidunt obcaecati impedit nihil consequatur numquam magni perferendis, quasi voluptatem fugit ex iusto adipisci perspiciatis quos et, accusantium deleniti non. </div> <div class="card_price"> <div class="card_price-now">9999</div> <div class="card_price-old">99</div> </div> </div> <div class="card"> <div class="card_header">Header</div> <div class="card_text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. </div> <div class="card_price"> <div class="card_price-now">9999</div> <div class="card_price-old">99</div> </div> </div> </div> .wrap { display: flex; } .card { padding: 20px; display: flex; flex-direction: column; flex-basis: 200px; border: 1px solid #000; justify-content: space-between; align-items: center; } .card_price { display: flex; flex-direction: column; align-items: center; }

<fieldset> <legend> Lorem ipsum dolor sit amet. </legend> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam harum facere provident nostrum eos fugit saepe quia quos natus maiores libero, nulla reprehenderit tempore. Sit quae culpa cupiditate voluptatum aspernatur? </fieldset> fieldset { border-radius: 5px; width: 400px; } К тег legend тоже можно применять разные css свойства если что.

Без вашего кода только пример: <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> </ul> * { margin: 0; padding: 0; } ul { list-style: none; background: #111; display: flex; justify-content: center; } li { padding: 50px 20px; color: #fff; font-size: 20px; position: relative; z-index: 1; } li:not(:first-child) { margin-left: 10px; } li:before { content: ""; width: 100%; height: 100%; background: gold; position: absolute; top: -100%; left: 0; transition: top 0.3s; z-index: -1; } li:hover:before { top: 0; }

Начнем с того что вы изначально смешали блок с модификатором :) Ну нет возможности выбрать родителя родителя, хоть убейся. Либо так, либо делать дополнительную обертку или переименовывать классы. Выбирайте. еще вариант: .sharing-new { &.position-left { } &.position-left &-title { color: red; } &.position-bottom { } &.position-bottom &-title { color: green; } }

Насколько я знаю less, самый короткий вариант будет такой: .sharing-new.position { &-left { .sharing-new-title { color: red; } } &-bottom { .sharing-new-title { color: green; } } }

Мое извращение: Нужные размеры можно либо подобрать, либо использовать JS для автоматизации. Но, имхо, лучше с SVG разобраться, так как в моем примере не получится залить полупрозрачным фоном See the Pen pmqBMv by Alexandr (@AlexZaw) on CodePen. <div class="wrap"> <ul> <li> <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem lorem lorem lorem</div><span></span> </li> <li> <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem</div> <span></span></li> </ul> </div> *, :before, :after{ margin: 0; padding: 0; box-sizing: border-box; } .wrap{ background: url(http://placekitten.com/1000); } ul{ margin: 50px; list-style: none; display: inline-block; } li{ margin-bottom: 30px; position: relative; } .el{ position: relative; padding: 10px; } .el:before,.el:after, li:before,li:after,span:before,span:after{ content: ''; position: absolute; height: 100%; width: calc(50% - 40px); top: 0; border: 2px solid #ccc; } .el:before{ border-radius: 50px 0 0 50px; border-right: none; left: 0; } .el:after{ right: 0; border-left: none; border-radius: 0 50px 50px 0; } li:before,li:after,span:before,span:after{ width: 50px; top: calc(-100% + 2px); left: 50%; transform: translateX(calc(-100% + 2px)); border: 2px solid #ccc; border-radius: 0 0 50% 0; border-top: none; border-right: none; border-left: none; } li:after{ transform: scaleX(-1); } span{ position: absolute; height: 100%; width: 100%; top: 0; left: 0; } span:before{ top: calc(100% - 2px); transform: translateX(calc(-100% + 2px)) scaleY(-1); } span:after{ top: calc(100% - 2px); transform: scale(-1,-1); }

Так в чем проблема попробовать? Хоть от хтмл начинайте и классы с id присваивайте для всех родителей - не поможет. Ибо инлайн стиль перебить можно только с !important (ну или пользовательскими настройками), ну а так как !important есть в инлайн стиле то, по условию задачи, только js

Ну и умеете же вы темы называть... :) Ну а если серьезно, то в данном cлучае только js

Ноликов в зарплате не маловато? :) При таких то требованиях.

var formComment = document.querySelector('.write-comment'); formComment.innerHTML = '<b>' + userName + ',' + '</b>' + '&nbsp;'; formComment.appendChild(userNameHtml); Можно так: <p id='aaa' style=" padding: 10px; background: white; width: 50%;" contenteditable="true" class="write-comment"></p> <button id="btn">Click me</button> var userName = "Vasya Pupkin"; btn.onclick = function () { var formComment = document.querySelector(".write-comment"); formComment.innerHTML = "<b>" + userName + "</b>" + ", "; formComment.focus(); var sel = window.getSelection(); var range = document.createRange(); range.setStart(formComment, formComment.childNodes.length); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); };

console.log('лик по табу');

На днях была точно такая же тема:

Попробуйте адаптировать ваш код для мобильных устройств с разным расширением. С учетом того что количество текста напротив "строк" с картинками может быть разным (количество строк тоже, кстати, может меняться). Желательно еще что бы, промежуточные от основных разрешения, тоже выглядели бы прилично и не рассыпались как попало. Если получиться сделать это с легкостью - все нормально. Если же возникнут трудности, то так делать не стоит :) Я конечно придираюсь, и задаю сложные задачи для начинающего, но, в будущем, все это вам придется учитывать.

Примерно так можно: <div class="wrap"> <ul> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> <li> <div class="empty"></div> <img src="http://placekitten.com/200"> <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia repudiandae earum vero fuga maxime deleniti tempora debitis nulla ullam asperiores, eaque dolorum ex facilis soluta, neque suscipit. Dolor, dolores maxime.</div> </li> </ul> </div> .wrap { border: 1px solid #000; max-width: 800px; margin: 0 auto; } ul { display: flex; flex-direction: column; list-style: none; padding: 0; } li { display: flex; align-items: center; } li * { width: 33.33%; } li:nth-child(odd) { direction: rtl; text-align: right; } img { border-radius: 50%; vertical-align: middle; }