Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- #cargos { width: 850px; background: #000; padding: 35px; box-sizing: border-box; outline: 10px solid #161616; outline-offset: -30px; } #cargos .foto { width: 330px; height: 120px; -webkit-clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 12% 50%); clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 5% 50%); background: url(https://66.media.tumblr.com/58c3e17821da6ffe94790f6e8d043b18/tumblr_pdfjrpcQmZ1x04suio2_500.png) center/cover; transition: all 2s ease-in-out; position: relative; right: 75px; outline-offset: -5px; outline: 1px solid #fff;} #cargos .dados { width: 500px; height: 120px; padding: 10px; box-sizing: border-box; background: #0e0e0e; -webkit-clip-path: polygon(100% 0%, 86% 50%, 100% 100%, 0 100%, 0% 50%, 0 0); clip-path: polygon(100% 0%, 86% 50%, 100% 100%, 0 100%, 0% 50%, 0 0); position: relative; right: 0; outline: 1px solid #fff; outline-offset: -5px; } #cargos .dados2 { width: 200px; height: 100px; background: #0e0e0e; clip-path: polygon(100% 0%, 80% 50%, 100% 100%, 0 100%, 0% 50%, 0 0); outline: 1px solid #fff; outline-offset: -5px; } #cargos .foto2 { width: 220px; height: 100px; background: url(https://66.media.tumblr.com/610be612360d7c32c2d82e54ad3d153b/tumblr_pn13b054B81vls9zso1_500.png) center/cover; transition: all 2s ease-in-out; clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 7% 50%); position: relative; right: 53px; outline: 1px solid #fff; outline-offset: -5px; } #cargos .dados3 { width: 200px; height: 100px; background: #0e0e0e; clip-path: polygon(100% 0%, 80% 50%, 100% 100%, 0 100%, 0% 50%, 0 0); padding: 5px; box-sizing: border-box; position: relative; right: 40px; outline: 1px solid #fff; outline-offset: -5px; } #cargos .foto3 { width: 220px; height: 100px; background: url(https://66.media.tumblr.com/610be612360d7c32c2d82e54ad3d153b/tumblr_pn13b054B81vls9zso1_500.png) center/cover; transition: all 2s ease-in-out; clip-path: polygon(25% 0%, 100% 1%, 100% 100%, 25% 100%, 7% 50%); position: relative; right: 92px; outline: 1px solid #fff; outline-offset: -5px; } #cargos .titulo { font: 30px 'Noto Serif SC', serif; color: #fff; text-transform: uppercase; text-align: center; border-bottom: 1px solid #282828; padding: 10px; box-sizing: border-box; } #cargos .base { width: 100%; padding: 10px; box-sizing: border-box; } #cargos .info { width: 100%; font: 13px 'Roboto', sans-serif; line-height: 160%; text-align: justify; color: #878787; } #cargos .info span { font: 900 20px 'Noto Serif SC ', serif; text-transform: uppercase; border-bottom: 3px solid #fff; margin-left: 50px; line-height: 1.5; color: #fff; } #cargos .inf { font: 13px 'Roboto', sans-serif; width: 100%; padding: 5px; line-height: 160%; text-align: justify; color: #878787; margin-left: 3px;} #cargos .inf span { font: 11px 'Playfair Display', sans-serif; text-transform: uppercase; border-bottom: 1px solid #fff; line-height: 1.5; color: #fff; margin-left: 7px; } #cargos .foto:hover { filter: grayscale(100%); } #cargos .foto2:hover { filter: grayscale(100%); } #cargos .foto3:hover { filter: grayscale(100%); }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
