« Адаптивная визитка об авторе или создателе на чистом CSS »

Описание материала:

Не плохой пример визитки об авторе, разработанного с использованием HTML, CSS. Изображения и ссылки в социальных сетях импортируются в код с их url-адресами, тогда как медиа-запросы используются для повышения скорости отклика сформироваться. Карточка about предоставляется набор стилей background-image в виде линейного градиента ((справа, #a24b00 , #f3be81), заполнение 20px, border-bottom 35px solid #fff, max-width 700px, отображение в виде блока, border-radius 0px. Название обозначения имеет цвет шрифта gold, размер шрифта 12px, font-weight 500 и стиль преобразования текста в верхнем регистре. Для изображения профиля задается стиль фонового изображения в виде линейного градиента (справа #a24b00 , #af6423). Значкам социальных сетей назначается цвет фона #a24b00.

Установка:

Подключаем font-awesome:

Код
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'>


HTML код:
Код
<div class="about-card">
<div class="col">
<div class='avatar'>
  <img src='http://ufive.ru/avatar/yavi.jpg' alt='Avatar'/>
  </div>
  </div>
  <div class="col">
  <h2>YaVi</h2>
  <strong>Создатель сайта на uCoz</strong>
  <div class='inline-social'>
  <a href="https://vk.com/u.five"><i class='fab fa-vk'></i></a>
  <a href="#"><i class='fab fa-twitter'></i></a>
  <a href="#"><i class='fab fa-facebook'></i></a>
  <a href="#"><i class='fab fa-whatsapp'></i></a>
  </div>
  </div>
  <div class="col">
<div class='inline-social-long'>
  <span><i class='fas fa-compass'></i> <a href="#">Санкт-Петербург ( Индекс )</a></span>
  <span><i class='fas fa-envelope'></i> <a href="#">administration@ufive.ru</a></span>
  <span><i class='fab fa-internet-explorer'></i> <a href="http://ufive.ru">http://www.ufive.ru</a></span>
  <span><i class='fas fa-phone'></i> <a href="#">+7 (123) 456-78-90</a></span>
  </div>
  </div>
</div>


CSS код:
Код
.about-card{
  background-image: linear-gradient(to right, #a24b00 , #f3be81);
  padding:20px;
  border-bottom:35px solid #fff;
  max-width:700px;
  display:block;
  margin:auto;
  color:#fff;
  }
.col {
  float: left;
  padding: 10px;
  height: 90px;
  line-height:10px;
  }
.col:nth-child(1){width: 24.53%;}
.col:nth-child(2){width: 26.33%;}
.col:nth-child(3){width: 40%;}
.col:not(:last-child){border-right:2px solid white;}

.about-card:after {
  content: "";
  display: table;
  clear: both;
}
.col h2,.col strong{
  margin-top:10px;
  font-weight:400;
  }
.col strong{
  color:gold;
  font-weight:500;
  text-transform:uppercase;
  line-height:1em;
  font-size:12px
  }
.avatar{
  height:140px;
  width:140px;
  margin-top:-15px;
  background-image: linear-gradient(to right, #a24b00 , #af6423);
  padding:5px;
  text-align:center;
  }
.avatar img{
  width:100%;
  background:#fff;
  }
.inline-social{
  margin-top:27px;
  }
.inline-social a{
  text-decoration:none;
  color:#a24b00;
  background:#fff;
  padding: 0px 5px;
  border-radius:50px;
  margin-right:5%;
  }
.inline-social a:hover{
  text-decoration:none;
  color:#393939;
  background:#fff;
  padding: 0px 5px;
  border-radius:50px;
  margin-right:5%;
  }
.inline-social-long{
  line-height:1.5em;
  }
.inline-social-long a{color:#fff;text-decoration:none;font-size:13px}
.inline-social-long span{
  color:#fff;
  text-decoration:none;
  font-size:20px;
  display:block;
  }
.inline-social-long span i{
  margin:0px 10px;
  }

@media screen and (max-width: 600px) {
.about-card{height:auto;text-align:center}
.col:nth-child(1),.col:nth-child(2),.col:nth-child(3){width: 100%;border:none}
.avatar{margin:auto}
.col h2,.col strong{
  display:inline-block;
  margin-top:50px
  }
.inline-social{margin:0px 0px;}
}


Демонстрация

Демонстративная страница или сайт материала

Установка материала

Мы поможем установить данный материал к Вам на сайт


Добавил: YaVi | Категория: Формы | Просмотров: 99


Поделиться в соц. сетях:

К данному материалу нет комментариев, но Вы можете стать первым, оставив свой комментарий!

Комментариев: 0
avatar