Задать вопрос

jjsso

Комментарии

  • Как задать прозрачность изображению?

    @jjsso Автор вопроса
    Ankhena, извините, я самоучка) я по книге изучал html и css , честно сказать по свойствам бэкграунда я не особо разбираюсь, буду значит углубленно изучать, что да как) Спасибо за помощь!)
    Написано

  • Как задать прозрачность изображению?

    @jjsso Автор вопроса
    Ankhena, ладно, спасибо за подсказки, буду копаться в коде, может найду решения
    Написано

  • Как задать прозрачность изображению?

    @jjsso Автор вопроса
    Aleksey Solovyev, исправил, спасибо!
    Написано

  • Как задать прозрачность изображению?

    @jjsso Автор вопроса
    Ankhena, получилось поменять цвета, но есть другая проблема касаемо расположения, я не понимаю куда расположить svg чтоб оно было как на макете, в хедер расположишь она сверху шапки бывает, в секции там выравнивать нужно с помощью марджинов или флексов, что тоже не дает правильного расположения
    6874dc0e63f61945178391.png
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>JOBPLY</title>
</head>
<body>
<header class="header">
<div class="container">
  <div class="header__inner">
  <h1 class="header__name">J<span>o</span>bply</h1>
  <nav class="nav">
    <ul class="header__list">
     <li><a href="#" class="header__link">Home</a></li>
     <li><a href="#" class="header__link">Categories</a></li>
     <li><a href="#" class="header__link">Service</a></li>
     <li><a href="#" class="header__link">Jobs</a></li>
    </ul>
  </nav>
  <a href="#" class="header_btn">Post a Vacancy</a>
  </div>
</div>

</header>
<main>
  <section class="find">
    <svg width="650" height="919" viewBox="0 0 650 919" fill="none" xmlns="http://www.w3.org/2000/svg">
<g style="mix-blend-mode:luminosity" opacity="1">
<path d="M325 594L325 656.5C325 711.728 280.228 756.5 225 756.5L162.5 756.5L162.5 694C162.5 638.772 207.272 594 262.5 594L325 594Z" fill="#FCFCFC"></path>
<path d="M325 919L325 856.5C325 801.272 280.228 756.5 225 756.5L162.5 756.5L162.5 819C162.5 874.228 207.272 919 262.5 919L325 919Z" fill="#F8F8F8"></path>
<path d="M162.5 756.5L162.5 819C162.5 874.228 117.728 919 62.5 919L-7.1031e-06 919L-4.37114e-06 856.5C-1.95703e-06 801.272 44.7715 756.5 100 756.5L162.5 756.5Z" fill="#FAFAFA"></path>
<path d="M162.5 756.5L162.5 694C162.5 638.772 117.728 594 62.5 594L7.1031e-06 594L4.37114e-06 656.5C1.95703e-06 711.728 44.7715 756.5 100 756.5L162.5 756.5Z" fill="#F8F8F8"></path>
<path d="M650 594L650 656.5C650 711.728 605.228 756.5 550 756.5L487.5 756.5L487.5 694C487.5 638.772 532.272 594 587.5 594L650 594Z" fill="#FCFCFC"></path>
<path d="M650 919L650 856.5C650 801.272 605.228 756.5 550 756.5L487.5 756.5L487.5 819C487.5 874.228 532.272 919 587.5 919L650 919Z" fill="#F8F8F8"></path>
<path d="M487.5 756.5L487.5 819C487.5 874.228 442.728 919 387.5 919L325 919L325 856.5C325 801.272 369.772 756.5 425 756.5L487.5 756.5Z" fill="#FAFAFA"></path>
<path d="M487.5 756.5L487.5 694C487.5 638.772 442.728 594 387.5 594L325 594L325 656.5C325 711.728 369.772 756.5 425 756.5L487.5 756.5Z" fill="#F8F8F8"></path>
</g>
<g style="mix-blend-mode:luminosity" opacity="1">
<path d="M325 271L325 333.5C325 388.728 280.228 433.5 225 433.5L162.5 433.5L162.5 371C162.5 315.772 207.272 271 262.5 271L325 271Z" fill="#FCFCFC"></path>
<path d="M325 596L325 533.5C325 478.272 280.228 433.5 225 433.5L162.5 433.5L162.5 496C162.5 551.228 207.272 596 262.5 596L325 596Z" fill="#F8F8F8"></path>
<path d="M487.5 433.5L487.5 371C487.5 315.772 442.728 271 387.5 271L325 271L325 333.5C325 388.728 369.772 433.5 425 433.5L487.5 433.5Z" fill="#F8F8F8"></path><path d="M162.5 433.5L162.5 496C162.5 551.228 117.728 596 62.5 596L-7.1031e-06 596L-4.37114e-06 533.5C-1.95703e-06 478.272 44.7715 433.5 100 433.5L162.5 433.5Z" fill="#FAFAFA"></path>
<path d="M162.5 433.5L162.5 371C162.5 315.772 117.728 271 62.5 271L7.1031e-06 271L4.37114e-06 333.5C1.95703e-06 388.728 44.7715 433.5 100 433.5L162.5 433.5Z" fill="#F8F8F8"></path>
<path d="M650 271L650 333.5C650 388.728 605.228 433.5 550 433.5L487.5 433.5L487.5 371C487.5 315.772 532.272 271 587.5 271L650 271Z" fill="#FCFCFC"></path>
<path d="M650 596L650 533.5C650 478.272 605.228 433.5 550 433.5L487.5 433.5L487.5 496C487.5 551.228 532.272 596 587.5 596L650 596Z" fill="#F8F8F8"></path>
<path d="M487.5 433.5L487.5 496C487.5 551.228 442.728 596 387.5 596L325 596L325 533.5C325 478.272 369.772 433.5 425 433.5L487.5 433.5Z" fill="#FAFAFA"></path>

</g>
<g style="mix-blend-mode:luminosity" opacity="1">
<path d="M325 -52L325 10.5C325 65.7285 280.228 110.5 225 110.5L162.5 110.5L162.5 48C162.5 -7.22848 207.272 -52 262.5 -52L325 -52Z" fill="#FCFCFC"></path>
<path d="M325 273L325 210.5C325 155.272 280.228 110.5 225 110.5L162.5 110.5L162.5 173C162.5 228.228 207.272 273 262.5 273L325 273Z" fill="#F8F8F8"></path>
<path d="M162.5 110.5L162.5 173C162.5 228.228 117.728 273 62.5 273L-7.1031e-06 273L-4.37114e-06 210.5C-1.95703e-06 155.272 44.7715 110.5 100 110.5L162.5 110.5Z" fill="#FAFAFA"></path>
<path d="M162.5 110.5L162.5 48C162.5 -7.22848 117.728 -52 62.5 -52L7.1031e-06 -52L4.37114e-06 10.5C1.95703e-06 65.7285 44.7715 110.5 100 110.5L162.5 110.5Z" fill="#F8F8F8"></path>
<path d="M650 -52L650 10.5C650 65.7285 605.228 110.5 550 110.5L487.5 110.5L487.5 48C487.5 -7.22848 532.272 -52 587.5 -52L650 -52Z" fill="#FCFCFC"></path>
<path d="M650 273L650 210.5C650 155.272 605.228 110.5 550 110.5L487.5 110.5L487.5 173C487.5 228.228 532.272 273 587.5 273L650 273Z" fill="#F8F8F8"></path>
<path d="M487.5 110.5L487.5 173C487.5 228.228 442.728 273 387.5 273L325 273L325 210.5C325 155.272 369.772 110.5 425 110.5L487.5 110.5Z" fill="#FAFAFA"></path>
<path d="M487.5 110.5L487.5 48C487.5 -7.22848 442.728 -52 387.5 -52L325 -52L325 10.5C325 65.7285 369.772 110.5 425 110.5L487.5 110.5Z" fill="#F8F8F8"></path>
</g>
</svg>

   <div class="container">
    </div>
    <div class="find__card">
    
    <div class="find__block">

    </div>



    </div>
   




  </section>
</main>
</body>
</html>

    @import url("fonts/axiforma/stylesheet.css");
@import url("fonts/Perpetua/stylesheet.css");

body {
    font-family: 'Axiforma';
    margin: 0;

    
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

.container {
 width: 1190px;
 margin: 0 auto;
}

.header {
margin-top: 40px;
}

.header img {


mix-blend-mode: luminosity;
opacity: 0.05;
transform: rotate(90deg);

opacity: 0.05;


}


.header__inner {
 display: flex;
 justify-content: space-between;
 align-items: center;
}



.header__name {


font-family: 'Perpetua';
font-weight: 700;
font-size: 50px;
line-height: 57px;
letter-spacing: 0.02em;
text-transform: uppercase;
z-index: 1;

color: #232443;


}

.header__name span {
    color:#EE4F3C;
}


.header__list {
display: flex;
gap: 50px;
}

.header__link {



font-weight: 300;
font-size: 18px;
line-height: 28px;
text-align: center;
letter-spacing: 0.02em;

color: #000;

  
}


.header_btn {
 padding: 19px 30px;
 background-color: #EE4F3C;
 border-radius: 10px;
 font-weight: 600;
 font-size: 20px;
 line-height: 33px;
 text-align: center;
 letter-spacing: 0.02em;

color: #FFFFFF;


}

.find img {
 margin-top: -170px;



}


.find svg {
margin-top: -10px;
}


.find__card  {

width: 814px;
height: 814px;


border-radius: 50%;

    float: right;


}

.find__block {
 /* Ellipse 109 */


width: 540px;
height: 540px;


border: 70px solid #F5F5F5;

}
    Написано

  • Как задать прозрачность изображению?

    @jjsso Автор вопроса
    Ankhena, вот , смотрите, я тыкнул на лепесток, там показывает другой цвет, хотя на макете видно что другой цвет выставлен. Как думаете, может ли быть дело в дизайнере, который вставил в слои не те цвета?
    6874ca921cb84931373269.png
    Написано

  • Как задать прозрачность изображению?

    @jjsso Автор вопроса
    Ankhena, проблема в том , что я не могу подобрать один цвет, первый нашел, а второй не могу, он прозрачнее чем другие
    6874ba795773b388025735.png
    Написано

  • Как задать прозрачность изображению?

    @jjsso Автор вопроса
    а можно ли к определенному лепестку добавить прозрачности? или на один общий элемент только? просто в одном лепестке там цвет прозрачней чем другие и не знаю, что делать
    Написано

  • Как задать прозрачность изображению?

    @jjsso Автор вопроса
    Ankhena, я экспортировал как есть , но проблема в том , что он мне экспортирует вообще в другом виде
    если задать как фон , так вообще все по другому отображается
    возможно, скорее всего неправильно экспортирую может
    или может быть дело в макете самом?
    68728e7a1260d063715268.png
    68728de7c3053378566444.png
    Написано

  • Как лучше задать размер элемента, + как сделать треугольник в виде плеера?

    @jjsso Автор вопроса
    ProjectSoft, обязательно в следующий раз при верстке, учту, спасибо))
    Написано

  • Как лучше задать размер элемента, + как сделать треугольник в виде плеера?

    @jjsso Автор вопроса
    Ankhena, за решение про плеер, спасибо, помогло))
    с шириной и высотой уже почти сам разобрался, постараюсь сам покопаться и понять
    Написано

  • Как соединить кнопку и форму вместе?

    @jjsso Автор вопроса
    Ankhena, спасибо, обязательно учту!
    Написано

  • Как соединить кнопку и форму вместе?

    @jjsso Автор вопроса
    ужас , как я не догадался... Спасибо за помощь!
    Написано

  • Как выровнить в колонку фотки как на макете?

    @jjsso Автор вопроса
    спасибо, брат! помогло, благодарю за помощь))
    Написано