<div class="contact-03"><a class="contact-03__item" href="#">
<div class="contact-03__item-img"><img src="http://placehold.jp/350x350.png?text=ICON" alt="" /></div>お問い合わせ03
</a><a class="contact-03__item" href="#">
<div class="contact-03__item-img"><img src="http://placehold.jp/350x350.png?text=ICON" alt="" /></div>お問い合わせ03
</a></div>
.contact-03
each item in items
a.contact-03__item(href=item.link)
.contact-03__item-img
img(src=item.img, alt='')
| #{ item.text }
{
"items": [
{
"link": "#",
"img": "http://placehold.jp/350x350.png?text=ICON",
"text": "お問い合わせ03"
},
{
"link": "#",
"img": "http://placehold.jp/350x350.png?text=ICON",
"text": "お問い合わせ03"
}
]
}
$BLOCK_NAME: '.contact-03';
// 変数
$color_primary: #1ba1e6;
$color_secondary: #82c7e6;
$color_white: #fff;
#{ $BLOCK_NAME } {
display: flex;
&__item {
display: block;
width: 50%;
padding: 30px 0;
font-size: 20px;
color: $color_white;
text-align: center;
transition: opacity 0.6s;
&:nth-child(1) {
background: $color_primary;
}
&:nth-child(2) {
background: $color_secondary;
}
&:hover {
color: $color_white;
opacity: 0.6;
}
}
&__item-img {
width: 32px;
margin: 0 auto 5px;
}
}