Jump to content

Search the Community

Showing results for tags 'css'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Development
    • HTML Coding
    • JavaScript
    • PHP
    • CMS
    • Database
    • Web Server
    • Web-site Development
    • Internet Marketing, SEO
  • Library
    • Tricks and solutions
    • Books
  • Commercial services
    • Freelance
    • Job
    • Goods and Services
  • Our Forum
    • Flame
    • Contests
    • Feedback and Ideas

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Web site


Telegram


Signal


Viber


Skype


From


Interests

  1. Хотели в крестиках ноликах заменить кресты и нули на анимешных тяночек. В голову лезет что то по типу x = url(ссылка), но нормально сформулировать ничего не можем, первый курс колледжа. Заранее спасибо за помощь.
  2. Моих знаний недостаточно для решение этой проблемы, надеюсь на вашу помощью. Как можно было нагуглить, какие еще недочеты в моём коде ? index.html style.css
  3. Доброго всем дня! Подскажите, пожалуйста, начинающему верстальщику. Как сделать подобное в строку и что бы крайние изображение растягивались на всю ширину экрана, в зависимости от того, какое разрешение у пользователя. К слову, может есть способы не картинками, а блоками сделать подобное? Скриншот прилагаю.
  4. Здравствуйте дорогие специалисты програмирования. Взываю вас о помощи!? Прощу Вас уделите мне своё безценное время. Я который раз выполняю тестовое задание для трудоустройства, а мне постоянно отказывают. Я уже в замешательстве, что же я делаю не так. Я просил их, дать мне хоть какую-то критику, единственное что мне отвечают СЛАБО. Но что именно слабо не говорят! Прошу Вас рассмотреть мою из последних тестовую работу и укозать мне ВСЕ мои прогрехи, по полной строгости. Единственная надежда на Вашу благосклонность и доброту. Вот ссылка на гитхаб - https:/github.com/ShusevA/ARI-AJAX-Application Требоватие к этой работе https://docs.google.com/document/d/10gLPHDqGNMDSeSQbYfG8RVtXR3XQOrchSBmd50OzJ_s/edit С уважением к Вам, за ранее спасибо.
  5. Добрый день ! Есть проблема при адаптаций экрана 595x740 размер контейнера bootstrap col-md не меняется. Мне нужно чтобы при адаптаций экрана 595х740 показывало по 2 слайда.Как это сделать? main.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="main.css" rel="stylesheet"> <link rel="stylesheet" href="css/font-awesome.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="wrapper"> <header>Номер и почта</header> <main> <nav> <ul class="topmenu"> <li><a href="" class="active">Главная</a> </li> <li><a href="" class="">Вниз<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню второго уровня 0<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">меню второго уровня 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="" class="">Вниз тритий уровень<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="">Блог<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">Вправо 1<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 2<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> <li><a href="">Вправо 3<span class="fa fa-angle-down"></span></a> <ul class="submenu"> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня</a></li> <li><a href="">меню третьего уровня </a></li> </ul> </li> </ul> </li> <li><a href="">О нас</a></li> <li><a href="">Блог</a></li> <li><a href="">О нас</a></li> </ul> </nav> <div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button> <button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button> </div> <div class="carousel-inner"> <div class="carousel-item active" data-bs-interval="10000"> <img src="image/australia.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h1 style="font-size: 60px;">First slide label йцйцуйу уйуйуйуйуйу фыфыфуу</h1> <p>Some representative placeholder content for the first slide.</p> </div> </div> <div class="carousel-item" data-bs-interval="2000"> <img src="image/parks.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Some representative placeholder content for the second slide.</p> </div> </div> <div class="carousel-item"> <img src="image/skyfoll.jpg" height="565px" class="d-block w-100" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Some representative placeholder content for the third slide.</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </main> <content class="tab"> <div class="container-prim"> <div class="element-1">Пункт 1</div> <div class="element-2">Пункт 2</div> <div class="element-3">Пункт 3</div> <div class="element-4">Пункт 4</div> </div> <!-- <ul class="zebra"> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 3</li> </ul> --> </content> <content class="zero"> <div class="row slider"> <div class="col-md-2"> <div class="details"> <h2>Заголовок 1</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 2</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 3</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 4</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 5</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 6</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> <div class="col-md-12"> <div class="details"> <h2>Заголовок 7</h2> <p>Какая то информация для карусели первый</p> <a href="">Прочитать</a> </div> </div> </div> </content> <footer>Адреса и контактсы</footer> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js" integrity="sha512-HGOnQO9+SP1V92SrtZfjqxxtLmVzqZpjFFekvzZVWoiASSQgSr4cw9Kqd2+l8Llp4Gm0G8GIFJ4ddwZilcdb8A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="main.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script> <script> $('.slider').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 4, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 1, arrows: false } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, arrows: false } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); </script> </body> </html> main.css .wrapper { height: 100%; display: flex; flex-direction: column; } header { height: 30px; width:1200px; margin: 0 auto; padding: 1px; } footer { height: 300px; width:1200px; margin: 0 auto; padding:10px; } main { } body { margin: 0; } header { background-color: #daf0b3f6; } main { background-color:#ecf0f1; height: 600px; width: 1200px; margin: 0 auto; } content.tab { background-color:#66c3ee; height: 300px; width:1200px; margin: 0 auto; padding:10px; box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5); } content.zero { background-color:#b7e9b5; height: 350px; width:1200px; margin: 0 auto; padding:10px; box-shadow: 0 -5px 5px 0 rgba(50, 50, 50, 0.5); } footer { background-color:#000000; color:white; box-shadow: 0 -5px 5px 0 rgba(65, 62, 99, 0.596); } @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600&subset=latin,cyrillic); *{box-sizing: border-box;} body { margin: 0; font-family: 'Open Sans', sans-serif; } nav {background: #2fa4e7 ;} nav ul { margin: 0; padding: 0; list-style: none; } nav ul:after { content: ""; display: table; clear: both; } nav a { text-decoration: none; display: block; transition: .3s linear; } .topmenu > li { float: left; position: relative; border-left: 1px solid black; } .topmenu > li:first-child {border-left: 0;} .topmenu > li > a { padding: 7px 30px; font-size: 14px; text-transform: uppercase; color: #FEFDFD; letter-spacing: 2px; } .topmenu > li > a.active { color: rgb(0, 0, 0); } .submenu a:hover {color: #0037cf;} .topmenu .fa, .submenu .fa { margin-left: 5px; color: inherit; } .submenu { position: absolute; z-index: 5; min-width: 200px; background: white; border-top: 1px solid #CBCBCC; border-left: 1px solid #CBCBCC; border-right: 1px solid #CBCBCC; visibility: hidden; opacity: 0; transform-origin: 0% 0%; transform: rotateX(-90deg); transition: .3s linear; } .submenu li {position: relative;} .submenu li a { color: #282828; padding: 10px 20px; font-size: 13px; border-bottom: 1px solid #CBCBCC; } .submenu .submenu { position: absolute; left: 100%; top: -1px; transition: .3s linear; } nav li:hover > .submenu { transform: rotateX(0deg); visibility: visible; opacity: 1; } .container-prim { font-size: 0; padding: 10px 50px 15px; text-align: center; } .element-1, .element-2, .element-3, .element-4 { display: inline-block; width: 250px; height: 265px; font-size: 20px; font-weight: 500; text-align: center; padding-top: 10px; vertical-align: bottom; box-shadow: 5px -5px 5px 0 rgb(0, 0, 0); border-radius: 8px; } .element-1 { background-color: #fbfdfd; } .element-2 { color: rgb(0, 0, 0); background-color: #fbfdfd; margin-left: 20px; } .element-3 { color: rgb(0, 0, 0); background-color: #fbfdfd; margin-left: 20px; } .element-4 { color: #000000; background-color: #fbfdfd; margin-left: 20px; } .element-relative { position: relative; top: -20px; left: -20px; } /* .zebra { font: 14px Verdana, Geneva, sans-serif; text-align: center; } .zebra li { display : inline-block; width : 250px; height: 280px; margin-bottom: 10px; background: #ffffff; vertical-align: top; text-align: center; line-height: normal; box-shadow: 5px -5px 5px 0 rgb(0, 0, 0); /* эмуляция inline-block для IE6-7*/ /* //display : inline; //zoom : 1; } */ .carousel-caption { transform: translateY(-50%); bottom: initial; top: 50%; } .details { margin: 20px 20px; background-color: #fff; padding: 30px 20px; position: relative; z-index: 1; height: 260px; } .details h2 { font-size: 22px; text-transform: uppercase; transition: 0.6s all; } .details p { font-size: 14px; transition: 0.6s all; } .details a { text-decoration: none; text-transform: capitalize; color: #fff; background-color: #2c3e50; padding: 6px 12px; display: inline-block; font-size: 14px; border: 1px solid #2c3e50; transition: 0.6s all; } .details::before { content: ""; width: 5px; height: 100%; background-color: #ff5722; position: absolute; left: 0; top: 0; z-index: -1; transition: 0.6s all; } .details:hover::before { width: 100%; } .details:hover h2,.details:hover p { color: #fff; } .details:hover a { background-color: transparent; border: 1px solid #fff; }
  6. Всем привет народ! Очень надеюсь на вашу помощь! Дело в том что я создавал сайты по видео урокам некого Михаила Базарова. Вот собственно его видео уроки https://camouf.ru/video/new_store/phpstorm.html?PAGEN_2=2 Теперь конкретно о проблеме: Дело в том, что данный человек использует bootstrap и sass. Он компилирует все стили в сжатый css. В этом то и проблема. У меня не компилируется, а стили на сайте не работают. Что я сделал: установил Ruby, прописал в командной строке gem install sass, успешно установился. Перезагрузил компьютер и подключился к своему удаленному серверу через PhpStorm. Обмен между локальным и удаленным сервером идет успешно. Но на сайте не работают стили прописанные в sass Скрин https://imgur.com/a/vV6QZBV UPD: Оказалось что путь к файлам неверный, мог бы кто нибудь помочь настроить?
  7. Всем привет, коллеги. Я - начинающий в этом деле, поэтому сильно не разносите) Если кому не сложно - оцените пожалуйста мою работу, укажите ошибки. Жду Вашу критику. Вот свёрстанный макет - https://cleaning-company-001.000webhostapp.com/
  8. Доброго вечера! Подскажите, пожалуйста, в чем проблема неотображения скаченного шрифта? Путь к файлу, если что, проверила. Заранее спасибо! @font-face { font-family:"Lato-Italic"; src: url('./fonts/Lato-Italic.ttf'); } Его использование: .three-columns__item-radius p { text-align: justify; margin: 26px 20px 0 20px; font-family:"Lato-Italic"; }
  9. Подскажите, пожалуйста, как можно исправить не работающий клик, в данном случае, по меню-бургеру. Срабатывает вместо этого hover. Заранее спасибо! <nav class="burger-menu mobile-open"> <button class="burger-menu__btn-mobile"> <i class="fas fa-bars"></i> <span>Menu</span> </button> <ul class="burger-menu__list"> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "contacts" }) </li> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "e-shop" }) </li> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "faq" }) </li> <li class="burger-menu__item"> @@include('./partials/menu/_menu.html', { "item": "home" }) </li> </ul> </nav> var menuEl = document.querySelector('.burger-menu'); var btnEl = document.querySelector('.burger-menu__btn-mobile'); function toggleMenu() { menuEl.classList.toggle('open'); } btnEl.onclick = toggleMenu;
  10. Подскажите, пожалуйста, что можно прописать, чтобы при уменьшении разрешения экрана колонки справа смещались вниз? Весь код в песочнице https://jsfiddle.net/fzbkeLyt/ Пробовала: Но не сработало. @media (max-width: 1200px) { .container { max-width: 970px; } } @media (max-width: 992px) { .container { max-width: 750px; } } @media (max-width: 767px) { .container { max-width: none; } }
  11. Я столкнулся с проблемой, мне нужно сделать враппер но и нужно разместить див в не враппера, как это исправить?
  12. Ребят, подскажите, в чем может быть ошибка. На странице два слайдера от splide. Один с классом splide (работающий), другой c классом splid (не работает). Выглядит так, будто не работают стили. Отображается как не маркированный список текста и картинок. Стили добавила единожды: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/css/splide.min.css" integrity="sha256-EqzwzekQXKNbB5EE4nNBQT+2gWQIWRZQXAd89YdIq8M=" crossorigin="anonymous"> Который не работает: Заранее спасибо!! <div class="foo_columns"> <div class="splid"> <div class="splid__track"> <ul class="splid__list"> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo1.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo2.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Знакомства", "downPicturePath": "img/foo3.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Приколы", "downPicturePath": "img/foo4.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> <li class="splid__slid"> @@include('./partials/footer/_footer.html', { "caption": "Авто", "downPicturePath": "img/foo5.png", "text": "Отношения актеров в кино и реальной жизни" }) </li> </ul> </div> </div> <div class="foo__line"></div> <script> new Splid( '.splid', { type : 'loop', perPage: 1, speed: 2000, autoplay: true, interval: '3000', arrows: true, } ).mount(); </script> </div>
  13. Подскажите, пожалуйста, как можно увеличить символ мнемоники в css? Font-size не работает. Спасибо! <div class="sign_left"></div> .sign_left::before { content: "\003C"; display: inline-block; color: rgb(192, 34, 34); }
  14. Здравствуйте. Начинающий верстальщик. Ищу первые заказы. Готов верстать что угодно за любую плату (в том числе и бесплатно). Есть 5-7 учебных работ, но этим никого не впечатлить -- очень хочу практического опыта. Использую HTML5/CSS3, JS, JQuery, BEM. Так же разные инструменты, вроде Git, GitHub, SASS/SCSS, Gulp. Если не знаю чего-то необходимого для Вашего проекта\работы -- обязательно разберусь. Если вы разработчик и вам некому спихнуть рутинную работу - я с радостью возьму её на себя; Верстаю из Figma, Photoshop, Illustrator. Могу в адаптивность, отзывчивость, кроссбраузерность, несложную анимацию. телеграмм: туц ; почта: dmitriq.khromikhin@gmail.com Точно на связи с 9:00 до 22:00. Открыт для любых предложений.
  15. Требуется сделать строку ввода в которые вписывается опреленная ссылка(любая) например:"https://htmlforum.org/forum/123" Нужно, чтобы по нажатию кнопки в веденной ссылке менялась половина до опреденного домена типа org с того что было например на "https://123htmlsuper.ru/forum/123" . То есть не просто с org на ru, а полностью от https до слеша перед org Дальнейший вывод этой ссылки или кнопки для перехода на эту ссылку Нужно это для сайта в "блокноте" html css Help
  16. Всем привет, у меня проблема, не работает моб.меню, вроде все пересмотрел, но ничего так и не нашел. Смотрел на самом пк, через файл html все робит, но заходя на сайт почему то никак не реагирует мобильное меню Сайт : Brownail.ru
  17. Подскажите, пожалуйста, как разместить текст таким образом как на картинке (должен позиционироваться от контейнера). Span в p не должен быть. Как лучше всё преобразовать? Заранее спасибо! Код следующий: <div class="banner"> <div class="container_background-image"> <div class="banner_text container"> <span class="rabbits"> <p>Do you like rabbits?</p> </span> <span class="oranges"> <p>Do you like oranges?</p> </span> </div> </div> </div>
  18. Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает. <div class="banner"> <div class="container background-image"> <div class="banner_text"></div> </div> </div> CSS: .background-image { background-image: url('/img/new_oranges.jpg'); background-size: cover; height: 200px; }
  19. Бесплатный VPN - FineVPN.org  |  Telegram бот c бесплатным VPN - @FineVPNbot
    Без ограничений по скорости, трафику и времени. Совершенно бесплатный и безлимитный.

  20. Памагити. Не пойму, почему в Chrome и в FF не работает элементарная конструкция, а в IE она же работает. <p style="font-family: HVD Peace, sans-serif; font-size: 40pt; ">Test of font family</p> <p style="font-family: HVD Peace, serif; font-size: 20pt; ">Test of font family</p> (шрифт при этом у меня локально установлен, с url я пока не пробовал) Получаем при этом: - это предпросмотр в IE, а во всех остальных браузерах (Chrome, FF, Opera) выглядит вот так: То есть общее описание (serif или sans-serif) подхватывается, а конкретный шрифт - нет. Пробовал с разными шрифтами. Это у меня какая-то локальная проблема с браузерами или что вообще?
  21. <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> Fucking slavse</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap" rel="stylesheet"> </head> <body> <header id="header" class="header"> <div class="container"> <div class="nav"> <img src="img/logo.svg" alt="OJJO"> </div> </div> </header> <section id="section" class="section"> <dev slass="container"> </dev> </section> <footer id="footer" class="footer"> <div class="container"> </div> </footer> </body> </html> body { padding: 0; margin: 0; font-family: 'Noto Serif', serif; font-family: 'Gilroy Thin'; color: 0; font-size: 16px; } h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; text-transform: uppercase; } ul, li { display: block; } .container { width: 1170px; margin: 0 auto; } .header{ background: url('/img/fone.jpg') no-repeat center top; } Не работает цсс, в css .header не показывается картинка, путь указан верно
  22. Section - about получился в 0px высотой а все его вложения перенеслись в section catalog пожалуйста скажите посоветуйте как исправить. Первая моя робота, зарание спасибо:) <section class="about"> <div class="conteiner"> <div class="galery"> <img class="galeru-img" src="img/Frame 10.png" alt=""> </div> <div class="about-txt"> <H2>Насладись идеальным кофе у себя дома</H2> <p class="about-txt1" > STARBUCKS® HOUSE BLEND из отборных кофейных зёрен из Латинской Америки, обжаренных до темно-коричневого цвета. Сочетание насыщенного аромата и вкуса орехов и какао-бобов с едва заметными сладкими нотками. Этот кофе — начало Starbucks®, наш самый первый бленд 1971 года. </p> </div> </div> </section> <section class="catalog"> <div class="conteiner"> <div class="catalog-img"> <a href="#"> <img src="img/starbucks1.png" alt=""> </a> <a href=""> <img src="img/starbucks2.png" alt=""> </a> <a href=""> <img src="img/starbucks3.png" alt=""> </a> </div> </div> </section> .galery{ width: 633px; margin-right: auto; float: left; } .about{ margin-top: 120px; } .about-txt{ width: 448px; margin-left: auto; float: right; margin-top: 180px; } h2{ font-size: 24px; color: #00492B; } .about-txt1{ font-size: 18px; color: #00492B; margin-top: 23px; } .catalog{ margin-top: 120px; }
  23. Не могу поменять цвет h1 и убрать нижнее подчеркивание. Где ошибка?
  24. Всем привет! Меня зовут Павел. Я три года работаю Front-end разработчиком в IT-компании. За время работы посещал много семинаров и конференций, читал публикации западных коллег. На сегодняшний день, у меня есть желание поделится знаниями с начинающими верстальщиками, а может быть, обменяться опытом с профи по цеху. Сам я не претендую на звание супер-специалиста фронтенда, поэтому продолжаю дальше развиваться в данном направлении. Как показал мой опыт общения с начинающими и специалистами "фронта", очень быстрое развитие происходит тогда, когда ты что-либо объясняешь другому человеку. Поэтому я, с одной стороны, хочу помочь начинающим, так как в моей памяти ещё свежи воспоминания о муках самостоятельного освоения необходимых знаний, а с другой – продолжить собственное развитие через обучение и помощь другим (то есть, попробовать себя в качестве учителя по фронтенду). Теперь по существу Я достаточно загружен, однако в течении дня вполне могу выделить 1-2 часа на обучение и консультации для начинающих верстальщиков (может быть, даже совсем нулевых – не стесняйтесь). Кроме того, я могу ответить на отдельные вопросы, подсказать, что именно стоит почитать, куда развиваться и как в дальнейшем трудоустроиться верстальщиком. Главное, чтобы вы действительно хотели освоить профессию и понимали, что дело это не очень лёгкое и достаточно кропотливое, требующее усидчивости и работы над собой. Обращайтесь, всегда рад пообщаться Мои контакты: skype: live:frontendpavel email: frontendpavel@gmail.com
  25. Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет. Код HTML: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Иконы</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="open-button"> <button onclick="openForm()">Открыть форму</button> </div> <div class="form-popup" id="IconForm"> <form class="form-container"> <h1>Параметры иконы</h1> <label for="bordercolor"><b>Цвет границы</b></label> <select id='select_bc' size='1'> <option value='#000'>Чёрный</option> <option value='#00f'>Синий</option> <option value='#f00'>Красный</option> <option value='#0f0'>Зелёный</option> </select> <p></p> <label for="background"><b>Цвет фигуры</b></label> <select id='select_bg' size='1'> <option value='#fff'>Белый</option> <option value='#bbf'>Синий</option> <option value='#fbb'>Красный</option> <option value='#bfb'>Зелёный</option> </select> <p></p> <label for="fontcolor"><b>Цвет текста</b></label> <select id='select_fc' size='1'> <option value='#000'>Чёрный</option> <option value='#00f'>Синий</option> <option value='#f00'>Красный</option> <option value='#0f0'>Зелёный</option> </select> <p></p> <label for="text"><b>Содержание фигуры</b></label> <textarea id="text_in" cols="20" rows="3"></textarea> <button type="submit" class="btn" onclick="return acceptArgs()">Принять</button> <button type="submit" class="btn cancel" onclick="return closeForm()">Закрыть</button> </form> </div> <div id="Draw"></div> <script type="text/javascript" src="script.js"></script> </body> </html> CSS: {box-sizing: border-box;} /* Кнопка, используемая для открытия формы */ .open-button { background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8; position: fixed; width: 280px; } /* Всплывающая форма-скрыта по умолчанию */ .form-popup { display: none; position: fixed; border: 3px solid #f1f1f1; z-index: 9; } /* Добавить стили для контейнера формы */ .form-container { max-width: 300px; padding: 10px; background-color: white; } /* Поля ввода полной ширины */ .form-container input[type=text], .form-container input[type=password] { width: 100%; padding: 15px; margin: 5px 0 22px 0; border: none; background: #f1f1f1; } /* Когда входы получают фокус, сделайте что-нибудь */ .form-container input[type=text]:focus, .form-container input[type=password]:focus { background-color: #ddd; outline: none; } /* Стиль для кнопок */ .form-container .btn { background-color: green; color: white; padding: 16px 20px; border: none; cursor: pointer; width: 100%; margin-bottom:10px; opacity: 0.85; } /* Красный цвет фона для кнопки "Отмена" */ .form-container .cancel { background-color: red; } /* Добавить некоторые эффекты наведения на кнопки */ .form-container .btn:hover, .open-button:hover { opacity: 1; } JS: function openForm() { document.getElementById("IconForm").style.display = "block"; } function closeForm() { document.getElementById("IconForm").style.display = "none"; return false; } function drawIcon(bc, bg, fc, text) { var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" '; svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />'; svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>"; svg += text + "</text></svg>"; alert(svg); document.getElementById('Dragon').innerHTML += svg; return true; } function acceptArgs() { var bc = document.getElementById("select_bc"); bc = bc.options[bc.selectedIndex].value; var bg = document.getElementById("select_bg"); bg = bg.options[bg.selectedIndex].value; var fc = document.getElementById("select_fc"); fc = fc.options[fc.selectedIndex].value; var text = document.getElementById("text_in").value; closeForm(); drawIcon(bc, bg, fc, text); }
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy