ズラしデザイン04
デモ04
h3見出しテキスト
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
h3見出しテキスト
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
h3見出しテキスト
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
コード
rowのclass名「demo04_row」「reverse」
colのclass名「text_col」「img_col」
※編集画面が壊れるので注意が必要です。
.theme-fo-base .wrapper .contents {
section {
&.demo04_sec {
.inner {
max-width: 1100px;
padding: 20px;
margin: auto;
.row {
&.demo04_row {
display: flex;
align-items: flex-start;
position: relative;
margin-bottom: 72px;
@include breakpoint-pro_s {
display: block;
}
@include breakpoint-sp {
display: block;
}
.col {
padding: 0;
&.text_col {
display: block;
position: relative;
z-index: 1;
box-shadow: 0 3px 8px var(--fo-shadow-color);
background: #fff;
padding: 50px 60px;
@include breakpoint-pc {
margin: 60px 0 0 calc((100% - 700px) - 606px);
width: 606px !important;
}
@include breakpoint-pro_s {
margin: -30px auto 0;
padding: 30px;
width: 100% !important;
}
@include breakpoint-sp {
margin: -30px auto 0;
padding: 30px;
}
@include breakpoint-tb {
width: calc(100% - 40px) !important;
}
}
&.img_col {
display: block;
position: relative;
@include breakpoint-pc {
width: 700px !important;
}
@include breakpoint-pro_s {
position: relative;
max-width: none;
width: calc(100% + 40px) !important;
margin: 0 -20px;
}
@include breakpoint-sp {
position: relative;
max-width: none;
width: calc(100% + 40px) !important;
margin: 0 -20px;
}
@include breakpoint-tb {
width: 100% !important;
margin: 0;
}
.component.image {
margin: 0;
}
}
}
&.reverse {
@include breakpoint-pro_s {
display: flex;
flex-wrap: wrap-reverse;
}
@include breakpoint-sp {
display: flex;
}
.col {
&.text_col {
margin-left: 0;
@include breakpoint-pc {
margin: 60px calc((100% - 700px) - 606px) 0 0;
}
@include breakpoint-pro_s {
margin: -30px auto 0;
}
@include breakpoint-sp {
margin-left: auto;
}
}
&.img_col {
right: 0;
}
}
}
& + .demo04_row{
margin: 72px 0 0;
}
}
}
}
}
}
}
.theme-fo-base .wrapper .contents {
section {
&.demo04_sec {
.inner {
.row {
&.demo04_row {
.col {
&.text_col {
z-index: 0;
margin-left: 0;
}
}
&.reverse {
.col {
&.text_col {
margin-right: 0;
}
}
}
}
}
}
}
}
}
© Basic Inc. All Rights Reserved.