Post by grandfather on Mar 6, 2020 2:17:27 GMT
[newclass=.iwbtr-contain]--iwbtr-accent:#A41414; --iwbtr-img:url("https://i.imgur.com/FdHcXjd.png");[/newclass]
[nospaces][googlefont=Roboto:400,700|Old+Standard+TT:400,400i,700]
[newclass=.iwbtr-contain] width: 500px; background: #efefef; display: flex; flex-flow: row wrap; [/newclass]
[newclass=.iwbtr-head] width: 100%; height: 250px; position: relative; background: var(--iwbtr-img); background-color: var(--iwbtr-accent); background-blend-mode: luminosity; background-size: cover; border-bottom: 7px solid #222; overflow: hidden; [/newclass]
[newclass=.iwbtr-head::before] content: ""; position: absolute; left: -1px; top: -1px; clip-path: polygon(100% 0, 0 0, 0 100%); width: 50%; height: 100%; background-color: #000; opacity: 0.2; [/newclass]
[newclass=.iwbtr-head::after] content: ""; position: absolute; bottom: -1px; right: -1px; height: 125px; width: 125px; background: #fff; clip-path: polygon(100% 0, 0% 100%, 100% 100%); opacity: 0.15; z-index: 0; [/newclass]
[newclass=.iwbtr-head div] position: absolute; z-index: 1; [/newclass]
[newclass=.iwbtr-ly-1] height: 0px; color: #fff; text-transform: uppercase; font: 700 10px roboto; bottom: 90px; right: 25px; [/newclass]
[newclass=.iwbtr-ly-2] height: 50px; font: 700 60px/100% Old Standard TT; color: #000; text-transform: uppercase; bottom: 25px; right: 25px; position: relative; [/newclass]
[newclass=.iwbtr-ly-2::after] content: ""; position: absolute; width: 10px; height: 15px; background: var(--iwbtr-accent); bottom: 0px; right: 0px; width: 100%; z-index: -1; [/newclass]
[newclass=.iwbtr-body] width: 500px; position: relative; background: #f8f8f8; overflow: hidden; [/newclass]
[newclass=.iwbtr-text] padding: 60px; font: 400 14px/18px Old Standard TT; color: #444; text-align: justify; position: relative; z-index: 1; [/newclass]
[newclass=.iwbtr-text b] font: 700 14px/18px roboto; position: relative; color: var(--iwbtr-accent); [/newclass]
[newclass=.iwbtr-quote] width: 65px; height: 69px; margin-right: 10px; display: inline-block; float: left; background: var(--iwbtr-accent); clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); shape-outside: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); display: flex; align-items: center; justify-content: center; [/newclass]
[newclass=.iwbtr-quote:before] content: "\eca8"; font-family: "honeybee"; color: #111; font-size: 24px; [/newclass]
[newclass=.iwbtr-body::after] content: ""; width: 50%; height: 120%; position: absolute; right: -100px; top: -50px; background: url(https://image.ibb.co/eA8wR8/40.png); transform: scaleX(-1); opacity: 0.2; filter: grayscale(100%) contrast(75%); z-index: 0; [/newclass]
[newclass=.iwbtr-body::before] content: ""; position: absolute; top: 0px; right: 0px; z-index: 1; height: 100%; width: 150px; background: rgb(248, 248, 248); background: linear-gradient( 90deg, rgba(248, 248, 248, 1) 0%, rgba(255, 255, 255, 0) 100% ); [/newclass] [newclass=.iwbtr-footer] width: calc(100% - 100px); background-color: #111; position: relative; border-bottom: 7px solid var(--iwbtr-accent); display: flex; flex-flow: row nowrap; align-items: center; padding: 40px 50px; [/newclass]
[newclass=.iwbtr-footer::before] content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background:var(--iwbtr-img); background-position: bottom; filter: grayscale(100%) contrast(75%); opacity: 0.175; [/newclass]
[newclass=.iwbtr-footer div] height: 20px; display: flex; flex-flow: row wrap; align-items: center; position: relative; color: #000; font: 700 18px/100% Roboto; text-transform: uppercase; z-index: 1; background: var(--iwbtr-accent); padding: 6px 10px 5px 10px; [/newclass]
[newclass=.iwbtr-footer div a] font: 700 18px/100% Roboto !important; text-transform: uppercase !important; background: #A41414 !important; color: #000 !important; [/newclass]
[newclass=.iwbtr-credit] width: 50px; margin: 0px 0px 0px 450px; [/newclass]
[newclass=.iwbtr-credit a] font: 700 8px/100% roboto !important; [/newclass]
[newclass=.iwbtr-contain-honeybee]speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale } @font-face {font-family: "honeybee";src:url("//dl.dropbox.com/s/7v31tyaf53kmcv7/honeybee.eot");src:url("//dl.dropbox.com/s/7v31tyaf53kmcv7/honeybee.eot?#iefix") format("embedded-opentype"),url("//dl.dropbox.com/s/awr1gt01c87aaxi/honeybee.woff") format("woff"),url("//dl.dropbox.com/s/hru9ka6dgfcgjg1/honeybee.ttf") format("truetype"),url("//dl.dropbox.com/s/xylorgamsf6fthx/honeybee.svg#honeybee") format("svg");font-weight: normal;font-style: normal;}[/newclass]
[nospaces][googlefont=Roboto:400,700|Old+Standard+TT:400,400i,700]
[attr="class","iwbtr-contain"]
[attr="class","iwbtr-head"]
[attr="class","iwbtr-ly-1"]but i was born to
[attr="class","iwbtr-ly-2"]rule
[attr="class","iwbtr-body"]
[attr="class","iwbtr-text"]
lorem ipsum dolor sit amet, consectetur adipiscing elit. sed eu pellentesque quam, vitae volutpat neque. pellentesque libero ipsum, sodales eget arcu posuere, vulputate dapibus elit. fusce vehicula placerat efficitur. vestibulum scelerisque, mi non auctor egestas, arcu orci hendrerit ante, ac suscipit magna velit vel erat. nullam id odio maximus, cursus lorem eu, volutpat arcu. morbi sit amet mi vel enim facilisis vulputate. cras ut auctor ex. proin leo velit, posuere sed nisi sed, consectetur ultricies augue. nullam sit amet mauris posuere, venenatis diam nec, aliquam felis. cras metus est, rhoncus in dolor vitae, pulvinar sollicitudin metus. nulla lacinia faucibus interdum. proin eu dignissim est, non ultrices tellus. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. duis nec vestibulum est. donec euismod dapibus ligula. fusce laoreet eros ac neque accumsan, ac dignissim leo laoreet.[break][break]
suspendisse nunc augue, varius eu interdum vitae, accumsan quis mi. vestibulum id est efficitur, dictum urna eget, varius dui. vestibulum ut eros at mauris vulputate finibus vitae sed massa. aliquam eu venenatis mi. sed ultricies vehicula sem, eget feugiat metus vulputate volutpat. curabitur iaculis diam eu mauris rutrum laoreet. sed luctus dolor mollis felis gravida, nec semper orci sodales. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; ut fermentum fermentum ornare.[break][break]
nam congue turpis ut tincidunt aliquam. aliquam eu vulputate dolor, et elementum dui. donec laoreet nibh vel sapien condimentum ullamcorper finibus et mauris. aliquam erat volutpat. nullam leo sapien, faucibus nec convallis tincidunt, bibendum at est.
[attr="class","iwbtr-quote"]
lorem ipsum dolor sit amet, consectetur adipiscing elit. sed eu pellentesque quam, vitae volutpat neque. pellentesque libero ipsum, sodales eget arcu posuere, vulputate dapibus elit. fusce vehicula placerat efficitur. vestibulum scelerisque, mi non auctor egestas, arcu orci hendrerit ante, ac suscipit magna velit vel erat. nullam id odio maximus, cursus lorem eu, volutpat arcu. morbi sit amet mi vel enim facilisis vulputate. cras ut auctor ex. proin leo velit, posuere sed nisi sed, consectetur ultricies augue. nullam sit amet mauris posuere, venenatis diam nec, aliquam felis. cras metus est, rhoncus in dolor vitae, pulvinar sollicitudin metus. nulla lacinia faucibus interdum. proin eu dignissim est, non ultrices tellus. pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. duis nec vestibulum est. donec euismod dapibus ligula. fusce laoreet eros ac neque accumsan, ac dignissim leo laoreet.[break][break]
suspendisse nunc augue, varius eu interdum vitae, accumsan quis mi. vestibulum id est efficitur, dictum urna eget, varius dui. vestibulum ut eros at mauris vulputate finibus vitae sed massa. aliquam eu venenatis mi. sed ultricies vehicula sem, eget feugiat metus vulputate volutpat. curabitur iaculis diam eu mauris rutrum laoreet. sed luctus dolor mollis felis gravida, nec semper orci sodales. vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; ut fermentum fermentum ornare.[break][break]
nam congue turpis ut tincidunt aliquam. aliquam eu vulputate dolor, et elementum dui. donec laoreet nibh vel sapien condimentum ullamcorper finibus et mauris. aliquam erat volutpat. nullam leo sapien, faucibus nec convallis tincidunt, bibendum at est.
[attr="class","iwbtr-footer"]
[attr="class","iwbtr-credit"]SELKIE
[newclass=.iwbtr-contain] width: 500px; background: #efefef; display: flex; flex-flow: row wrap; [/newclass]
[newclass=.iwbtr-head] width: 100%; height: 250px; position: relative; background: var(--iwbtr-img); background-color: var(--iwbtr-accent); background-blend-mode: luminosity; background-size: cover; border-bottom: 7px solid #222; overflow: hidden; [/newclass]
[newclass=.iwbtr-head::before] content: ""; position: absolute; left: -1px; top: -1px; clip-path: polygon(100% 0, 0 0, 0 100%); width: 50%; height: 100%; background-color: #000; opacity: 0.2; [/newclass]
[newclass=.iwbtr-head::after] content: ""; position: absolute; bottom: -1px; right: -1px; height: 125px; width: 125px; background: #fff; clip-path: polygon(100% 0, 0% 100%, 100% 100%); opacity: 0.15; z-index: 0; [/newclass]
[newclass=.iwbtr-head div] position: absolute; z-index: 1; [/newclass]
[newclass=.iwbtr-ly-1] height: 0px; color: #fff; text-transform: uppercase; font: 700 10px roboto; bottom: 90px; right: 25px; [/newclass]
[newclass=.iwbtr-ly-2] height: 50px; font: 700 60px/100% Old Standard TT; color: #000; text-transform: uppercase; bottom: 25px; right: 25px; position: relative; [/newclass]
[newclass=.iwbtr-ly-2::after] content: ""; position: absolute; width: 10px; height: 15px; background: var(--iwbtr-accent); bottom: 0px; right: 0px; width: 100%; z-index: -1; [/newclass]
[newclass=.iwbtr-body] width: 500px; position: relative; background: #f8f8f8; overflow: hidden; [/newclass]
[newclass=.iwbtr-text] padding: 60px; font: 400 14px/18px Old Standard TT; color: #444; text-align: justify; position: relative; z-index: 1; [/newclass]
[newclass=.iwbtr-text b] font: 700 14px/18px roboto; position: relative; color: var(--iwbtr-accent); [/newclass]
[newclass=.iwbtr-quote] width: 65px; height: 69px; margin-right: 10px; display: inline-block; float: left; background: var(--iwbtr-accent); clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); shape-outside: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); display: flex; align-items: center; justify-content: center; [/newclass]
[newclass=.iwbtr-quote:before] content: "\eca8"; font-family: "honeybee"; color: #111; font-size: 24px; [/newclass]
[newclass=.iwbtr-body::after] content: ""; width: 50%; height: 120%; position: absolute; right: -100px; top: -50px; background: url(https://image.ibb.co/eA8wR8/40.png); transform: scaleX(-1); opacity: 0.2; filter: grayscale(100%) contrast(75%); z-index: 0; [/newclass]
[newclass=.iwbtr-body::before] content: ""; position: absolute; top: 0px; right: 0px; z-index: 1; height: 100%; width: 150px; background: rgb(248, 248, 248); background: linear-gradient( 90deg, rgba(248, 248, 248, 1) 0%, rgba(255, 255, 255, 0) 100% ); [/newclass] [newclass=.iwbtr-footer] width: calc(100% - 100px); background-color: #111; position: relative; border-bottom: 7px solid var(--iwbtr-accent); display: flex; flex-flow: row nowrap; align-items: center; padding: 40px 50px; [/newclass]
[newclass=.iwbtr-footer::before] content: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background:var(--iwbtr-img); background-position: bottom; filter: grayscale(100%) contrast(75%); opacity: 0.175; [/newclass]
[newclass=.iwbtr-footer div] height: 20px; display: flex; flex-flow: row wrap; align-items: center; position: relative; color: #000; font: 700 18px/100% Roboto; text-transform: uppercase; z-index: 1; background: var(--iwbtr-accent); padding: 6px 10px 5px 10px; [/newclass]
[newclass=.iwbtr-footer div a] font: 700 18px/100% Roboto !important; text-transform: uppercase !important; background: #A41414 !important; color: #000 !important; [/newclass]
[newclass=.iwbtr-credit] width: 50px; margin: 0px 0px 0px 450px; [/newclass]
[newclass=.iwbtr-credit a] font: 700 8px/100% roboto !important; [/newclass]
[newclass=.iwbtr-contain-honeybee]speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale } @font-face {font-family: "honeybee";src:url("//dl.dropbox.com/s/7v31tyaf53kmcv7/honeybee.eot");src:url("//dl.dropbox.com/s/7v31tyaf53kmcv7/honeybee.eot?#iefix") format("embedded-opentype"),url("//dl.dropbox.com/s/awr1gt01c87aaxi/honeybee.woff") format("woff"),url("//dl.dropbox.com/s/hru9ka6dgfcgjg1/honeybee.ttf") format("truetype"),url("//dl.dropbox.com/s/xylorgamsf6fthx/honeybee.svg#honeybee") format("svg");font-weight: normal;font-style: normal;}[/newclass]
