"Colorful Columns"
Bootstrap 3.3.0 Snippet by ktnthkkr

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row col-container text-center"> <div class="col"> <div style="background-color: rgba(17, 62, 95, 1); height: 250px!important;"> <a class="btn btn-x btn-2" href="telto:+351916877416">telephone</a> <a href="telto:+351916877416"><p class="colored_p" style="color: #f47f2d; font-size: 20px; font-weight: 300;">+351 916 877 416</p></a> <div id="comp-jnj76ijwsvg" class="style-jnj76jwy_comp-jnj76ijw style-jnj76jwy_non-scaling-stroke style-jnj76jwysvg" style="opacity: 1;"><a href="telto:+351916877416"><img src="http://localhost/gemba/wp-content/uploads/2018/11/Screenshot_1.png" width="200px" /></a></div> </div> </div> <div class="col"> <div style="background-color: #f47f2d; height: 250px!important;"> <a class="btn btn-x btn-3" href="email" target="_blank" rel="noopener">Write</a> <p class="colored_p">Responderemos nas próximas 24 horas</p> <div id="comp-jnj76ijvsvg" class="style-jnj76jku_comp-jnj76ijv style-jnj76jku_non-scaling-stroke style-jnj76jkusvg" style="opacity: 1;"><a href="email"> <img src="http://localhost/gemba/wp-content/uploads/2018/11/Screenshot_2.png" width="200px" /> </a></div> </div> </div> <div class="col"> <div style="background-color: #87c1c7; height: 250px!important;"> <a class="btn btn-x btn-1" href="conversamos" target="_blank" rel="noopener">Schedule</a> <p class="colored_p">Marque uma hora conveniente para ambos</p> <div id="comp-jnj76ijqsvg" class="style-jnj76ixs_comp-jnj76ijq style-jnj76ixs_non-scaling-stroke style-jnj76ixssvg" style="opacity: 1;"><a href="conversamos"> <img src="http://localhost/gemba/wp-content/uploads/2018/11/Screenshot_1.png" width="200px" /> </a></div> </div> </div> </div> </div>
@font-face { font-family: wf_4ad048fa29e74054a9c783f58; src: url("https://static.wixstatic.com/ufonts/ac5846_4ad048fa29e74054a9c783f588260ceb/woff/file.woff") format("woff"), url("https://static.wixstatic.com/ufonts/ac5846_4ad048fa29e74054a9c783f588260ceb/woff2/file.woff2") format("woff2"), url("https://static.wixstatic.com/ufonts/ac5846_4ad048fa29e74054a9c783f588260ceb/ttf/file.ttf") format("ttf"); } @font-face{ font-family:"Brandon-Grot-W01-Light"; src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/e00ba30a-0bf3-4c76-9392-8641fa237a92.eot?#iefix"); src:url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/e00ba30a-0bf3-4c76-9392-8641fa237a92.eot?#iefix") format("eot"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/69b40392-453a-438a-a121-a49e5fbc9213.woff2") format("woff2"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/9362bca5-b362-4543-a051-2129e2def911.woff") format("woff"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/85060878-ca6c-43cc-ac31-7edccfdca71b.ttf") format("truetype"),url("//static.parastorage.com/services/third-party/fonts/user-site-fonts/fonts/47f089a6-c8ce-46fa-b98f-03b8c0619d8a.svg#47f089a6-c8ce-46fa-b98f-03b8c0619d8a") format("svg"); } .btn-1{ background-color:#f47f2d; } .btn-2{ background-color: #87c1c7; } .btn-3{ background-color:rgba(17, 62, 95, 1); } .btn-x{ border-radius: 25px;font: normal normal normal 22px/1.4em brandon-grot-w01-light,sans-serif; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-variant-numeric: normal; font-variant-east-asian: normal; font-weight: normal; font-stretch: normal; font-size: 22px; line-height: 1.4em; font-family: brandon-grot-w01-light, sans-serif; transition: color 0.4s ease 0s; color: #397F83; display: inline-block; margin: calc(-1 * 0px) 0px 0; position: relative; white-space: nowrap; margin-top:20px; margin-bottom:20px; } .btn-x:hover{ background-color:rgba(17, 62, 95, 1); color:white; } .col-container { display: table; /* Make the container element behave like a table */ width: 100%; /* Set full-width to expand the whole page */ } .col { display: table-cell; /* Make elements inside the container behave like table cells */ width: 33.33%; } .colored_p{ color: #045184; font-family:avenir-lt-w01_35-light1475496,sans-serif; font-size:17px; line-height: 1.6em; margin-top:20px; margin-bottom:20px; }
$(".second_body").attr("style","display:none"); $(".custom_card").hover( function () { $(this).find(".second_body").attr("style","display:block"); $(this).find(".first_body").attr("style","display:none"); }, function () { $(this).find(".second_body").attr("style","display:none"); $(this).find(".first_body").attr("style","display:block"); } );

Related: See More


Questions / Comments: