Как сверстать такой блок в CSS?

Question

[Дмитрий Крымцев]

Подскажите, как с помощью CSS сверстать такой блок. Спасибо ;)

Answer 1

[dm]

А в чем именно сложность? Вроде обычный разукрашенный текст

HTML

<div class="left">Акция ></div>

<div class="right">
	<div class="right-top">Подключись за <span>3 копейки</span></div>
	<div class="right-bottom">Минимальный бла-бла-бла</div>
</div>

CSS

.right,
.left {
	display: inline-block;
	vertical-align: top;
	color: red;
}
.right-top {
	font-size: n px;
}
.right-top span {
	color: blue;
}
.right-bottom {
	font-size: n/2 px;
	color: black;
}

Comments

[dm]

n и n/2 это я для примера написал, что нижний шрифт в 2 раза меньше

[Therapyx]

dm: да сразу же понял) тупанул хД Я уж подумал n это как неизвестное и в цсс идет деление итд хД

[Therapyx]

dm: только пронулся, надо идти за кофем... :)

[Дмитрий Крымцев]

спасибо, дальше пойду со шрифтами играться krimtsev.lds.net.ua/3

[dm]

Дмитрий Крымцев: Рад, что помог. Красота невероятная. )

[Антон]

Therapyx: ну, деление в css вполне может быть: font-size: calc(1rem / 2)

[Therapyx]

Антон: такое уже видел) Я подумал о переменных в цсс... )

[Антон]

Therapyx: есть less/scss

[dm]

Да переменные со временем и в самом css появятся, как появилась анимация и прочие штукм

Answer 2

[Forsaider]

<div class="banner">
   <div class="banner_left">
      <span class="banner_act">Акция</span>
      <span class="banner_arrow">&gt;</span>
   </div>
   <div class="banner_all">
      <span class="banner_title">Подключись за <span>3 копейки</span></span>
      <span class="banner_descr">минимальный аванс и т.д.</span>
   </div>
   <div class="clearfix"></div>
</div>

.clearfix{clear:both}
.banner_left{float:left;}
.banner_act{font-size:20px;color:red;text-transform:uppercase;display:inline-block;}
.banner_arrow{font-size:20px;color:red;display:inline-block;}
.banner_title{font-size:20px;font-weight:bold;color:red;display:inline-block;}
.banner_title span{color:red;}
.banner_descr{color:#333;font-size:13px;}

Что-то вроде этого. Дальше уже под себя подгоняйте.