The markup (using Jumpstart shortcode for bootstrap elements and putting over bg image in the builder) substitute
0 1 2 | <div class="whatever"> for [html class="whatever"] and </div> for [/html] |
.
the html:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | [raw] [column size="5/12" wpautop="false"] [html class="inner left"]This is an example page. It's different from a blog post because it wil[/html] [/column] [column size="1/6" wpautop="true"] <!--Column 2...--> [/column] [column size="5/12" wpautop="false"] [html class="inner right"]This is an example page. It's different from a blog post because it wil[/html] [/column] [column size="5/12" wpautop="false"] [html class="inner left"]This is an example page. It's different from a blog post because it wil[/html] [/column] [column size="1/6" wpautop="true"] <!--Column 2...--> [/column] [column size="5/12" wpautop="false"] [html class="inner right"]This is an example page. It's different from a blog post because it wil[/html] [/column] [/raw] |
the css (add bg images for each spoke):
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | #custom-main > .image-pinwheel { background-color: #ffffff; background-position: 50% 15%; } .image-pinwheel .inner { border-top: solid 1px #999999; padding: 15px; padding-left: 60px; position:relative; background-position: left 15px; background-repeat: no-repeat; } .image-pinwheel .inner.left { background-image: url('./images/bottom-left-pinwheel.png'); } .image-pinwheel .row:first-child .inner.left { background-image: url('./images/top-left-pinwheel.png'); } .image-pinwheel .inner.right { background-image: url('./images/bottom-right-pinwheel.png'); } .image-pinwheel .row:first-child .inner.right { background-image: url('./images/top-right-pinwheel.png'); } @media(min-width:768px){ .image-pinwheel .inner { width: 80%; min-height: 200px; } .image-pinwheel .inner.left { margin-left: 20px; margin-top: 20px; float: left; } .image-pinwheel .row:first-child .inner.left { margin-left: 0; } .image-pinwheel .inner.right { float: right; } .image-pinwheel .row:first-child .inner.right { margin-right: 20px; } .image-pinwheel .inner:after { content: ''; position: absolute; width: 30px; height: 1px; border-top: solid 1px #999999; } .image-pinwheel .row .left.inner:after { top: -11px; right: -25px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .image-pinwheel .row:first-child .left.inner:after { top: 11px; right: -25px; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .image-pinwheel .row .right.inner:after { top: -11px; left: -25px; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); } .image-pinwheel .row:first-child .right.inner:after { top: 11px; left: -25px; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } } |
Second Option
html:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="new-pinwheel"> [raw] [column size="1/2" wpautop="false"] [html class="inner left"]This is an example page. It's different from a blog post because it wil[/html] [/column] [column size="1/2" wpautop="false"] [html class="inner right"]This is an example page. It's different from a blog post because it wil[/html] [/column] [html class="spacer"][/html] [column size="1/2" wpautop="false"] [html class="inner left"]This is an example page. It's different from a blog post because it wil[/html] [/column] [column size="1/2" wpautop="false"] [html class="inner right"]This is an example page. It's different from a blog post because it wil[/html] [/column] [/raw] </div> |
css:
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 | .new-pinwheel { background-color: #ffffff; background-position: 50% 47%; background-image: url('http://narcissistabusesupport.com/wp-content/uploads/2016/06/frontpage-heart-300x262.png'); background-repeat: no-repeat; } .new-pinwheel .inner { color: #ffffff; padding: 15px; padding-left: 60px; position:relative; background-position: left 15px; background-repeat: no-repeat; } /* bottom left */ .new-pinwheel .inner.left { background-image: url('./images/bottom-left-pinwheel.png'); background-color: #ffcd00 } /* top left */ .new-pinwheel .row:first-child .inner.left { background-image: url('./images/top-left-pinwheel.png'); background-color: #4271a1; } /* bottom right */ .new-pinwheel .inner.right { background-image: url('./images/bottom-right-pinwheel.png'); background-color: #ff3399; } /* top right */ .new-pinwheel .row:first-child .inner.right { background-image: url('./images/top-right-pinwheel.png'); background-color: #97cf00; } @media(min-width:768px){ .new-pinwheel .inner { width: 65%; min-height: 200px; } .new-pinwheel .row { margin-left: 0; margin-right: 0; } .new-pinwheel .row > div { padding: 0 } .new-pinwheel .spacer { min-height: 100px; } /* bottom */ .new-pinwheel .inner { float: left; } /* top */ .new-pinwheel .row:first-child .inner { float: right; } /* right */ .new-pinwheel .row .inner.right { margin-top: 100px; } .new-pinwheel .inner:after { content: ''; position: absolute; border-style: solid; width: 0; height: 0; } /* bottom left */ .new-pinwheel .row .left.inner:after { top: 0; right: -20px; border-width: 40px 20px 0 0; border-color: #ffcd00 transparent transparent transparent; } /* top left */ .new-pinwheel .row:first-child .left.inner:after { bottom: -20px; top: auto; right: 0; border-width: 0 40px 20px 0; border-color: transparent #4271a1 transparent transparent; } /* bottom right */ .new-pinwheel .row .right.inner:after { top: -20px; left: 0; border-width: 20px 0 0 40px; border-color: transparent transparent transparent #ff3399; } /* top right */ .new-pinwheel .row:first-child .right.inner:after { top: auto; bottom: 0; left: -20px; border-width: 0 0 40px 20px; border-color: transparent transparent #97cf00 transparent; } } |