<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section class="wrapperColor"> <div class="container-fostrap"> <div class="content"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-3"> <div class="card"> <a class="img-card" href="javascript:;" style="background:#0072AE;"> </a> <div class="card-content"> <!--<h4 class="card-title"> <a href="javascript:;"> Nombre del color </a> </h4>--> <p class=""> <b>HEX:</b> #0072AE </p> <p class=""> <b>RGB:</b> rgb(255,255,255) </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <a class="img-card" href="javascript:;" style="background:#FF6702;"> </a> <div class="card-content"> <!--<h4 class="card-title"> <a href="javascript:;"> Nombre del color </a> </h4>--> <p class=""> <b>HEX:</b> #FF6702 </p> <p class=""> <b>RGB:</b> rgb(247,247,247) </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <a class="img-card" href="javascript:;" style="background:#F1F1F1;"> </a> <div class="card-content"> <!--<h4 class="card-title"> <a href="javascript:;"> Nombre del color </a> </h4>--> <p class=""> <b>HEX:</b> #F1F1F1 </p> <p class=""> <b>RGB:</b> rgb(241,241,241) </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <a class="img-card" href="javascript:;" style="background:#626265;"> </a> <div class="card-content"> <!--<h4 class="card-title"> <a href="javascript:;"> Nombre del color </a> </h4>--> <p class=""> <b>HEX:</b> #626265 </p> <p class=""> <b>RGB:</b> rgb(98,98,101) </p> </div> </div> </div> </div> </div> </div> </div> </section> </div> <div class="row"> <section class="wrapperButtons"> <div class="container-fostrap"> <div class="content"> <div class="container"> <p class="texto8">Se utiliza para ver un contenido en especifico </p> <div class="row"> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Normal State </a> </h4> <div> <a class="btn-transpt-tmp">[ Ver más</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #666 </p> <p class=""> <b>BACKGROUND:</b> transparent </p> <p class=""> <b>BORDER:</b> 1px solid #666; </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Hover State </a> </h4> <div> <a class="btn-transpt-tmp hover">[ Ver más</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FFF </p> <p class=""> <b>BACKGROUND:</b> #666 </p> <p class=""> <b>BORDER:</b> 1px solid #666; </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Focus State </a> </h4> <div> <a class="btn-transpt-tmp focus">[ Ver más</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FFF </p> <p class=""> <b>BACKGROUND:</b> #F37F42 </p> <p class=""> <b>BORDER:</b> 1px solid #666; </p> </div> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Normal State </a> </h4> <div> <a class="btn-white-tmp">[ Ver más</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FFF </p> <p class=""> <b>BACKGROUND:</b> #0154A0 </p> <p class=""> <b>BORDER:</b> 1px solid #0154A0; </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Hover State </a> </h4> <div> <a class="btn-white-tmp hover">[ Ver más</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #0154A0 </p> <p class=""> <b>BACKGROUND:</b> #FFF </p> <p class=""> <b>BORDER:</b> solid 1px #0154A0; </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Focus State </a> </h4> <div> <a class="btn-white-tmp focus">[ Ver más</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FFF </p> <p class=""> <b>BACKGROUND:</b> #F37F42 </p> <p class=""> <b>BORDER:</b> solid 1px #0154A0; </p> </div> </div> </div> </div> </div> </div> </div> </section> <section class="wrapperButtons"> <div class="container-fostrap"> <div class="content"> <div class="container"> <p class="texto8">Acción, más información </p> <div class="row"> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Normal State </a> </h4> <div> <a class="btn-info-azul-tmp">Más información_</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FFF </p> <p class=""> <b>BACKGROUND:</b> #0154A0 </p> <p class=""> <b>BORDER:</b> 1px solid #0154A0; </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Hover State </a> </h4> <div> <a class="btn-info-azul-tmp hover">Más información_</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #0154A0 </p> <p class=""> <b>BACKGROUND:</b> #FFF </p> <p class=""> <b>BORDER:</b> 1px solid #0154A0; </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Focus State </a> </h4> <div> <a class="btn-info-azul-tmp focus">Más información_</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FFF </p> <p class=""> <b>BACKGROUND:</b> #0154A0 </p> <p class=""> <b>BORDER:</b> 1px solid #0154A0; </p> </div> </div> </div> </div> </div> </div> </div> </section> <section class="wrapperButtons"> <div class="container-fostrap"> <div class="content"> <div class="container"> <p class="texto8">Se utiliza para el click-to-call </p> <div class="row"> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Normal State </a> </h4> <div> <a class="btn-info-naranja-tmp">[ Lo quiero</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FFF </p> <p class=""> <b>BACKGROUND:</b> #FF6702 </p> <p class=""> <b>BORDER:</b> 1px solid #FF6702; </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Hover State </a> </h4> <div> <a class="btn-info-naranja-tmp hover">[ Lo quiero</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FF6601 </p> <p class=""> <b>BACKGROUND:</b> #FFF </p> <p class=""> <b>BORDER:</b> 1px solid #FF6702; </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Focus State </a> </h4> <div> <a class="btn-info-naranja-tmp focus">[ Lo quiero</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FFF </p> <p class=""> <b>BACKGROUND:</b> #F37F42 </p> <p class=""> <b>BORDER:</b> 1px solid #FF6702; </p> </div> </div> </div> </div> </div> </div> </div> </section> <section class="wrapperButtons"> <div class="container-fostrap"> <div class="content"> <div class="container"> <p class="texto8">Se utiliza para solicitar alguna promoción </p> <div class="row"> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Normal State </a> </h4> <div> <a class="btn-info-naranja-tmp">[ Solicitar_</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FFF </p> <p class=""> <b>BACKGROUND:</b> #FF6702 </p> <p class=""> <b>BORDER:</b> 1px solid #FF6702; </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Hover State </a> </h4> <div> <a class="btn-info-naranja-tmp hover">[ Solicitar_</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FF6601 </p> <p class=""> <b>BACKGROUND:</b> #FFF </p> <p class=""> <b>BORDER:</b> 1px solid #FF6702; </p> </div> </div> </div> <div class="col-xs-12 col-sm-3"> <div class="card"> <h4 class="card-title"> <a href="javascript:;"> Focus State </a> </h4> <div> <a class="btn-info-naranja-tmp focus">[ Solicitar_</a> </div> <div class="card-content"> <p class=""> <b>TEXT:</b> #FFF </p> <p class=""> <b>BACKGROUND:</b> #F37F42 </p> <p class=""> <b>BORDER:</b> 1px solid #FF6702; </p> </div> </div> </div> </div> </div> </div> </div> </section> </div> </div>

.wrapperColor { display: table; height: 100%; width: 100%; } .container-fostrap { display: table-cell; padding: 1em; text-align: center; vertical-align: middle; } .fostrap-logo { width: 100px; margin-bottom:15px } h1.heading { color: #fff; font-size: 1.15em; font-weight: 900; margin: 0 0 0.5em; color: #505050; } @media (min-width: 450px) { h1.heading { font-size: 3.55em; } } @media (min-width: 760px) { h1.heading { font-size: 3.05em; } } @media (min-width: 900px) { h1.heading { font-size: 3.25em; margin: 0 0 0.3em; } } .card { display: block; margin-bottom: 20px; line-height: 1.42857143; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); transition: box-shadow .25s; } .card:hover { box-shadow: 0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); } .img-card { width: 100%; height:200px; border-top-left-radius:2px; border-top-right-radius:2px; display:block; overflow: hidden; } .img-card img{ width: 100%; height: 200px; object-fit:cover; transition: all .25s ease; } .card-content { padding:15px; text-align:left; } .card-title { margin-top:0px; font-weight: 700; font-size: 1.65em; } .card-title a { color: #000; text-decoration: none!important; } /** CSS TEMPORAL **/ .wrapperButtons>.container-fostrap>.content>.container { padding: 10px 20px; margin: 0 0 20px; border-left: 5px solid #eee; } .btn-transpt-tmp,.btn-transpt-tmp:hover{ font-size: 16px; color: #666; font-family: "dinnext-regular"; text-align: center; display: inline-block; width: 100%; border: solid 1px #666; max-width: 170px; padding: 6px 20px !important; margin: 10px 0; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-decoration:none!important; } .btn-transpt-tmp.hover,.btn-transpt-tmp.hover:hover { background-color: #666; color: #FFF; } .btn-transpt-tmp.focus,.btn-transpt-tmp.focus:hover { background-color: #F37F42; color: #FFF; } .btn-white-tmp, .btn-white-tmp:hover { font-size: 16px; border: 1px solid #0154A0; background-color: #0154A0; color: #FFF; text-align: center; display: inline-block; width: 100%; max-width: 180px; padding: 6px 20px !important; margin: 10px 0; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-decoration:none!important; } .btn-white-tmp.hover, .btn-white-tmp.hover:hover { background-color: #fff!important; color: #0154A0!important; } .btn-white-tmp.focus, .btn-white-tmp.focus:hover { background-color: #F37F42!important; color: #FFF!important; } .btn-info-azul-tmp,.btn-info-azul-tmp:hover{ color: #FFF; display: inline-block; width: 100%; max-width: 160px; font-size: 16px; font-family: "dinnext-regular"; text-align: center; transition: all 0.3s ease 0s; border-radius: 5px; background-color: #0154A0; border:1px solid #0154A0;; top: 290px; left: 30px; padding: 0.6em !important; text-decoration:none!important; } .btn-info-azul-tmp.hover,.btn-info-azul-tmp.hover:hover{ background-color: #fff; color: #0154A0; } .btn-info-azul-tmp.focus,.btn-info-azul-tmp.focus:hover{ background-color: #F37F42; color: #FFF; } .btn-info-naranja-tmp,.btn-info-naranja-tmp:hover{ font-size: 16px; color: #FFF; font-family: "dinnext-regular"; text-align: center; display: inline-block; width: 100%; background-color: #FF6702; border: solid 1px #FF6702; max-width: 170px; padding: 6px 20px !important; margin: 10px 0; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-decoration:none; } .btn-info-naranja-tmp.hover,.btn-info-naranja-tmp.hover:hover{ background-color: #FFF; border: solid 1px #FF6601; color: #FF6601; } .btn-info-naranja-tmp.focus,.btn-info-naranja-tmp.focus:hover{ background-color: #F37F42; color: #FFF; }