"Serviços Empresa"
Bootstrap 3.1.0 Snippet by whiteOrb

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ----------> <head> <link href='http://fonts.googleapis.com/css?family=Arvo:400,700' rel='stylesheet' type='text/css'> </head> <!-- price & service --> <div class="container"> <!-- Breadcrumb --> <div class="row"> <h2 id="details">Serviços de Empresa</h2> </div><br> <div class="content-pricing clearfix"> <!-- Content --> <!-- Planos --> <div class="col-md-2 planos" id="directions"> <div class="pricing_header"> <h2>Planos</h2> <h3>Choose the right package</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales elementum vulputate. Nullam inlacus pulvinar, lobortis dolor ut, pharetra magna. </p> </div> <ul class="list-group"> <li class="list-group-item">Aceder a <b>notas de mercado</b></li> <li class="list-group-item"><b>Comparação</b> de notas internas e de mercado</li> <li class="list-group-item">Pesquisar informação de <b>benchmarking</b></li> <li class="list-group-item">Relatórios de <b>Business Inteligence</b></li> <li class="list-group-item"><b>Qualificação</b> de Empresa</li> <li class="list-group-item"><b>Upload</b> de documentos de Qualificação</li> <li class="list-group-item"><b>Validação</b> e <b>Monitorização</b> de documentos</li> <li class="list-group-item"><b>Informar</b> os seus Clientes da sua Qualificação</li> <li class="list-group-item">Avaliar <b>Fornecedores</b></li> <li class="list-group-item">Avaliar <b>Compradores</b></li> <li class="list-group-item"><b>Vizualizar</b> Avaliações</li> <li class="list-group-item"><b>Configurar</b> a plataforma</li> <li class="list-group-item"><b>Pesquisar</b> no directório de empresas</li> <li class="list-group-item"><b>Download</b> de documentação de Qualificação</li> <li class="list-group-item">Relatórios de <b>Business Intelligence</b></li> <li class="list-group-item"><b>Promover</b> a Empresa</li> <li class="list-group-item"><b>Destaque</b> no directório de empresas</li> <li class="list-group-item"><b>Auto-Avaliação</b></li> </ul> </div> <!-- Ending Planos--> <!-- Pack 1--> <div class="col-md-2 free" id="home-box"> <div class="pricing_header"> <div class="icon"><span>Free</span></div> <h2>Free</h2> <h4>Opções Limitadas</h4> </div> <ul class="list-group"> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> </ul> </div> <!-- Ending Pack 1--> <!-- Pack 2--> <div class="col-md-2 avaliacao" id="home-box"> <div class="pricing_header"> <div class="icon"><span>Avaliação</span></div> <h2>Avaliação</h2> <h4>Opções Standard</h4> </div> <ul class="list-group"> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item off">Not Checked</li> </ul> </div> <!-- Ending Pack 2--> <!-- Pack 3--> <div class="col-md-2 qualificacao" id="home-box"> <div class="pricing_header"> <div class="icon"><span>Qualificação</span></div> <h2>Qualificação</h2> <h4>Permite Qualificar-se</h4> <div class="ribbon ribbon-red"> <div class="banner"> <div class="text">RECOMENDADO</div> </div> </div> </div> <ul class="list-group"> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> </ul> </div> <!-- Ending Pack 3--> <!-- Pack 4--> <div class="col-md-2 benchmarking" id="home-box"> <div class="pricing_header"> <div class="icon"><span>Benchmarking</span></div> <h2>Benchmarking</h2> <h4>Ver Notas de Mercado</h4> </div> <ul class="list-group"> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> <li class="list-group-item off">Not Checked</li> </ul> </div> <!-- Ending Pack 4--> <!-- Pack 5--> <div class="col-md-2 institucional" id="home-box"> <div class="pricing_header"> <div class="icon"><span>Institucional</span></div> <h2>Institucional</h2> <h4>Destaque a sua Empresa</h4> </div> <ul class="list-group"> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> <li class="list-group-item on">Checked</li> </ul> </div> <!-- Ending Pack 5--> </div> <div class="col-md-2 button-space">   </div> <div class="col-md-2"> <button>Subscrever</button> </div> <div class="col-md-2"> <button>Subscrever</button> </div> <div class="col-md-2"> <button>Subscrever</button> </div> <div class="col-md-2"> <button>Subscrever</button> </div> <div class="col-md-2"> <button>Subscrever</button> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,700,500); body { background: #f6f6f6; } .clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .container { padding-top: 40px; width: 1302px; } #details { font-family: 'Arvo', serif; font-size: 14px; color: #07d0ec; width: 175px; height: 37px; background: url('http://i.imgur.com/LLBeSeJ.jpg') no-repeat; padding: 12px 0px 0px 18px; font-weight: 400; } #home-box > h2 { font-family: "Quicksand", sans-serif; font-weight: 400; line-height: 1.1; color: #75b1ae; } .content-pricing { background: #fff; border: 1px solid #ddd; height: auto; box-shadow: 0px 0px 50px 0px rgba(30,30,30,0.1); } .content-pricing .col-md-2:nth-child(1) { z-index: 600; } .content-pricing .col-md-2:nth-child(2) { z-index: 500; } .content-pricing .col-md-2:nth-child(3) { z-index: 400; } .content-pricing .col-md-2:nth-child(4) { z-index: 300; } .content-pricing .col-md-2:nth-child(5) { z-index: 200; } .content-pricing .col-md-2:nth-child(6) { z-index: 100; } .content-pricing #home-box { margin: 0; padding: 0; border-left: 1px solid #ddd; } .content-pricing #directions { width: 320px; } .content-pricing .col-md-2 { width: 190px; } .content-pricing .planos { padding: 0; } .content-pricing #directions, .content-pricing .free, .content-pricing .avaliacao, .content-pricing .qualificacao, .content-pricing .benchmarking { box-shadow: 0px 0px 10px 0px rgba(30,30,30,0.1); } .list-group { font-family: 'Roboto', sans-serif; margin: 0; padding: 0; } .list-group li { border: none; border-top: 1px solid #ddd; } .list-group li b { color: rgba(30,30,30,0.8); } .price { font-size: 25px; float: left; } .pricing_header { background: #fff; transition: background 0.4s ease-out 0s; text-align: center; font-family: "Arvo", serif; padding: 10px 0px; } .pricing_header .icon { background: url('http://i.imgur.com/qc5xkSD.jpg') no-repeat; width: 130px; height: 130px; display: block; text-align:center; margin: 0 auto; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; cursor: pointer; text-indent: -9999px; } .pricing_header .icon:hover { background: url('http://i.imgur.com/3994yTo.jpg') no-repeat; } .pricing_header h2 { text-align:center; line-height: 25px; padding: 5px 0px 5px 0px; margin: 0 auto; font-family: "Arvo", serif; font-weight: 700; color: rgba(30,30,30, 0.8); font-size: 18px; width: 140px; border-bottom: 1px solid #07d0ec; } .pricing_header h4 { font-family: 'Roboto', sans-serif; font-size: 12px; font-weight: 400; padding: 10px 0px 9px; } .pricing_header h2 span { border-bottom: 1px solid #07d0ec; } #directions .pricing_header { font-family: 'Roboto', sans-serif; } #directions .pricing_header h2 { width: 120px; padding: 5px 0px; margin: 10px auto 0 auto; color: rgba(30,30,30, 0.8); border-bottom: 2px solid #07d0ec; } #directions .pricing_header h3 { font-size: 14px; font-weight: normal; font-family: 'Roboto', sans-serif; } #directions .pricing_header p { padding: 25px 15px 10px 15px; text-align: justify; font-size: 12px; color: rgba(30,30,30,0.7); font-family: 'Roboto', sans-serif; line-height: 27px; } .list-group-item:first-child { border-top-right-radius: 0px; border-top-left-radius: 0px; } .btn { float: right; font-family: "Quicksand", sans-serif; font-weight:500; } .off { background: url('http://i.imgur.com/QbOBJ8z.jpg') no-repeat center; text-indent: -9999px; } .on { background: url('http://i.imgur.com/EJL6Xef.jpg') no-repeat center; text-indent: -9999px; } .button-space { height: 40px; width: 320px !important; } .col-md-2 { width: 190px; text-align: center; margin: 0; padding: 0; } .col-md-2 button { width: 99%; background: #acadb1; border: none; padding: 10px 0px; color: #fff; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; font-family: 'Roboto', sans-serif; font-size: 18px; font-smooth: always; letter-spacing: 0.25px; } .col-md-2 button:hover { background: #00c3df; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; } .col-md-2 button:active { background: #00afc8; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; } .col-md-2 button:focus { outline: none; } .ribbon { position: absolute; top: 0; right: 0; } .ribbon .banner { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); color: #fff; -webkit-font-smoothing: antialiased; display: block; float: right; position: relative; right: -14px; top: 22px; width: 100px; margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; font-family: 'Roboto', sans-serif; } .ribbon .banner:before { -webkit-transform: skewY(-45deg) translate(50%,15px); -moz-transform: skewY(-45deg) translate(50%,15px); -ms-transform: skewY(-45deg) translate(50%,15px); -o-transform: skewY(-45deg) translate(50%,15px); -webkit-transform-origin: 100% center; -moz-transform-origin: 100% center; -ms-transform-origin: 100% center; -o-transform-origin: 100% center; left: -45px; } .ribbon .banner:after { -webkit-transform: translate(100%,-100%) skewY(45deg) translateX(-58%); -moz-transform: translate(100%,-100%) skewY(45deg) translateX(-58%); -ms-transform: translate(100%,-100%) skewY(45deg) translateX(-58%); -o-transform: translate(100%,-100%) skewY(45deg) translateX(-58%); -webkit-transform-origin: 0 center; -moz-transform-origin: 0 center; -ms-transform-origin: 0 center; -o-transform-origin: 0 center; right: -17px; } .ribbon-red .banner:after, .ribbon-red .banner:before { background-color: #ce9c01; content: ''; display: block; height: 12px; position: absolute; width: 30px; } .ribbon .text { position: relative; z-index: 2; padding: 6px 0; font-size: 12px; font-weight: bold; min-height: 18px; line-height: 18px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.20); white-space: nowrap; text-overflow: ellipsis; } .ribbon .text::before, .ribbon .text::after { content: ''; display: block; height: 30px; position: absolute; top: 0; width: 100%; z-index: -1; } .ribbon .text::before { -webkit-transform: translateX(-15%) skewX(-45deg); -moz-transform: translateX(-15%) skewX(-45deg); -ms-transform: translateX(-15%) skewX(-45deg); -o-transform: translateX(-15%) skewX(-45deg); } .ribbon .text::after { -webkit-transform: translateX(15%) skewX(45deg); -moz-transform: translateX(15%) skewX(45deg); -ms-transform: translateX(15%) skewX(45deg); -o-transform: translateX(15%) skewX(45deg); } .ribbon-red .text::before, .ribbon-red .text::after, .no-css-transforms .ribbon-red .text { background-color: #ffc204; }

Related: See More


Questions / Comments: