0

Я новичок в верстке, поэтому делаю все по статьям и урокам в интернете. Нужно сделать такие иконки. Сами картинки у меня в svg.

введите сюда описание изображения

Я не могу скруглить их родительский блок, хотя вроде бы делаю все по уроку. Возможно проблема в стилях колонки. В общем, вот мой код:

     <div class = "about">
     <div class ="column column-gray">
    <div class = "img__circle">
    <img src="images/contacts/01.svg" alt="">
    </div>
    <span class ="column__title column__title-small">Phone Number</span>
    <span class="column__content">+1111111</span>
    </div> 

    <div class="column column-gray">
    <div class = "img__circle">
    <img src="images/contacts/03.svg" alt="">
    </div>
    <span class ="column__title column__title-small">Address</span>
    <span class="column__content column__content-small">adress</span>
   </div>


    <div class="column column-gray">
    <div class = "img__circle">
    <img src="images/contacts/02.svg" alt="">
    </div>
    <span class ="column__title column__title-small">E-mail</span>
    <span class="column__content column__content-small">mail</span>
 </div>
 </div> 

Стили для скругления картинок.

.img__cirсle {
background-color : #15263e;
border-radius: 50%;
display: flex;
flex: 0 0 60px;
overflow: hidden;
z-index: 3;
}

.img_circle img {
display: block;
max-width: 100%;
}

Стили блока с колонками

about {
display: flex;
flax-direction : row;
justify-content: space-between;

}
.column{
display: flex;
flex-direction: column;
background-color: #ffffff;
flex : 0 1 33.333%;
justify-content: сenter;
max-height: 100vh;
min-width: 33.333%;
}

.column-gray{
background-color: #dcdcde: 
}

Вот что у меня получилось

введите сюда описание изображения

Как сделать круг из div с классом .img_circle? Что я не так делаю? Ведь синий блок хотя бы должен быть виден, а его нет.

2
  • или mask или clip-path 24 июн 2020 в 13:27
  • инженерная часть тегов лучше изменить это раз. два класс тэга не совпадает с классом цсс. 24 июн 2020 в 14:41

1 ответ 1

1

Примерно так. Дальше сами.

.img__circle {
    background-color: #15263e;
    border-radius: 50%;
    /* display: flex; */
    /* flex: 0 0 60px; */
    overflow: hidden;
    z-index: 3;
    height: 50px;
    width: 50px;
}

.img__circle img {
  display: block;
  max-width: 100%;
}

.about {
  display: flex;
  flax-direction: row;
  justify-content: space-between;
}
.di>span {
    display: block;
}
.column {
  /*display: flex;
  flex-direction: column;
  background-color: #ffffff;
  flex: 0 1 33.333%;
  justify-content: сenter;
  max-height: 100vh;
  min-width: 33.333%;*/
      display: flex;
    flex-direction: row;
}

.column-gray {
  background-color: #dcdcde:
}
<div class="about">
  <div class="column column-gray">
    <div class="img__circle">
      <img src="images/contacts/01.svg" alt="">
    </div>
    <div class="di"><span class="column__title column__title-small">Phone Number</span>
    <span class="column__content">+1111111</span></div>
  </div>

  <div class="column column-gray">
    <div class="img__circle">
      <img src="images/contacts/03.svg" alt="">
    </div>
    <div class="di"><span class="column__title column__title-small">Address</span>
    <span class="column__content column__content-small">adress</span></div>
  </div>


  <div class="column column-gray">
    <div class="img__circle">
      <img src="images/contacts/02.svg" alt="">
    </div>
    <div class="di"><span class="column__title column__title-small">E-mail</span>
    <span class="column__content column__content-small">mail</span></div>
  </div>
</div>

2
  • То есть проблема была в display : flex и flex для img__circle? 24 июн 2020 в 15:09
  • не только. код можно упростить. 24 июн 2020 в 15:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.