• Для скачивания ресурсов Форума пользователь должен написать не менее 5 полезных сообщений и получить 5 симпатий.
    Если Вы не хотите выполнять условия, Вы должны купить переход в группу "Работяга" или любое наше дополнение и сможете скачивать ресурсы, перевод происходит по email, который указывается при оплате.
Оформление курса валют

Разработка Оформление курса валют

Нет прав для скачивания
Оформление курса валют.
Пишем HTML:
HTML:
<div class="convertor-card">
        <div class="base">
            <span class="name">US Dollar</span>
            <div class="value-section">
                <span class="value">271</span>
                <span class="symbol">$</span>
            </div>
            <span class="abbr">USD</span>
        </div>
        <div class="converted">
            <span class="name">Russian Ruble</span>
            <div class="value-section">
                <span class="value">15.58</span>
                <span class="symbol">P</span>
            </div>
            <span class="abbr">RUB</span>
        </div>
    </div>
Пишем стиль:
SCSS:
@import url('https://fonts.googleapis.com/css?family=Lato:300|Noto+Sans|Roboto+Mono:300');
@import url('https://use.fontawesome.com/releases/v5.2.0/css/all.css');

$background-color: #fee2e2;
$symbol-color: #fd9b9b;
$base-background: #fc5154;
$converted-background: #fff;
$border-radius: 2vmin;
$card-vertical-padding: 2vmin;
$padding-with-pseudo: calc(17% + #{$card-vertical-padding});
$base-after-dimension: 17vmin;
$base-converted-difference: 2vmin;

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $background-color;
}

.convertor-card {
  height: 80vmin;
  width: 50vmin;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: 1fr;
  border-radius: 2px;
}

@mixin pseudo-style($height-and-width, $background-color, $z-index) {
  content: '';
  height: $height-and-width;
  width: $height-and-width;
  border-radius: 100%;
  background-color: $background-color;
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
  position: absolute;
  transform: translateY(-50%) rotate(-45deg);
  z-index: $z-index;
}

.base,
.converted {
  grid-column: 1 / 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 4vmin;
  position: relative;
}

.base {
  flex-direction: column;
  grid-row: 1 / 2;
  padding-top: $card-vertical-padding;
  padding-bottom: $padding-with-pseudo;
  background: $base-background;
  color: $converted-background;
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
  &::before {
    @include pseudo-style($base-after-dimension, $converted-background, 2);
    top: 100%;
  }
  &::after {
    font-family: 'Font Awesome 5 Free';
    content: '\f061';
    font-size: 8vmin;
    font-weight: 900;
    position: absolute;
    top: 100%;
    transform: translateY(-50%) rotate(90deg);
    z-index: 3;
    color: $base-background;
  }
}

.converted {
  flex-direction: column-reverse;
  grid-row: 2 / 3;
  padding-top: $padding-with-pseudo;
  padding-bottom: $card-vertical-padding;
  background: $converted-background;
  color: $base-background;
  border-bottom-left-radius: $border-radius;
  border-bottom-right-radius: $border-radius;
  &::before {
    @include pseudo-style(
      calc(#{$base-after-dimension} + #{$base-converted-difference}),
      $base-background,
      1
    );
    bottom: calc(50% + #{$base-converted-difference} / 2);
    z-index: 1;
  }
}

.name {
  font-family: 'Roboto Mono', monospace;
  font-size: 3vmin;
  letter-spacing: 0.2em;
}

.value {
  font-family: 'Noto Sans', sans-serif;
  font-size: 11vmin;
  letter-spacing: 0.04em;
}

.symbol {
  font-family: 'Noto Sans', sans-serif;
  margin-left: -1.2vmin;
  opacity: 0.7;
}

.abbr {
  font-family: 'Lato', sans-serif;
  letter-spacing: 0.1em;
  opacity: 0.5;
}
Смотрим наш шедевр:
45w19.gif
Автор
baltun
Скачиваний
0
Просмотры
388
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

  • Country flag
    Country flag
    Показывает флаг страны в информационном блоке сообщения пользователя.
  • [XFA] Core
    [XFA] Core
    Фреймфорк для работы дополнений от Xen Factory.
  • XenForo
    XenForo
    Форум Xenforo.
  • [OzzModz] Post Comments
    [OzzModz] Post Comments
    Комментарии к сообщениям.
  • AMPXF - AMP cho Xenforo 2
    AMPXF - AMP cho Xenforo 2
    Ускоренная загрузка мобильных страниц (AMP) мгновенно.
Верх Низ