<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Website CSS style -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Website Font style -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
<!-- Google Fonts -->
<link href='https://fonts.googleapis.com/css?family=Passion+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<title>ONFLIP Educação</title>
</head>
<body>
<!-- Planos MarktClub -->
<div class="container">
<div class="row">
<!--<h3><a href="http://www.onflip.com.br/cursogratis">Cadastre-se grátis e ganhe um Curso.</a></h3>-->
<div class="col-xs-12 col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
Escolha seu curso</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 25,00 <span class="subscript">(Pagamento Único)</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
</td>
</tr>
<tr class="active">
<td>
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='3b8bbfce-a526-4121-87a5-347204fc9834' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!--<h3><a href="http://www.onflip.com.br/cursogratis">Cadastre-se grátis e ganhe um Curso.</a></h3>-->
<div class="col-xs-12 col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
Persona</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 14,90 <span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
1 Pessoa
</td>
</tr>
<tr class="active">
<td>
Todos os Cursos (18)
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='3b8bbfce-a526-4121-87a5-347204fc9834' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="panel panel-success">
<!--tag mais popular aqui-->
<div class="panel-heading">
<h3 class="panel-title">
Dupla</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 29,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
2 Pessoas
</td>
</tr>
<tr class="active">
<td>
Todos os Cursos (18)
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='ad053aae-00d2-432f-9b56-67f674068030' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="panel panel-danger">
<!--tag mais popular aqui-->
<div class="panel-heading">
<h3 class="panel-title">
Trio</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 49,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
3 Pessoas
</td>
</tr>
<tr class="active">
<td>
Todos os Cursos (18)
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='6b1b42d3-7f9c-4a69-88f1-84337aabbd80' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="panel panel-primary">
<div class="cnrflash">
<div class="cnrflash-inner">
<span class="cnrflash-label">Mais
<br>
Popular</span>
</div>
</div>
<div class="panel-heading">
<h3 class="panel-title">
Família</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 59,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
5 Pessoas
</td>
</tr>
<tr class="active">
<td>
Todos os Cursos (18)
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a> </div>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='513ae47c-69c5-4809-ae34-3c40b22462d2' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
</div>
<!---- outreos planos -->
<div class="container">
<div class="row">
<!--<h3><a href="http://www.onflip.com.br/cursogratis">Cadastre-se grátis e ganhe um Curso.</a></h3>-->
<div class="col-xs-12 col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
Persona</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 49,90 <span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
1 Pessoa
</td>
</tr>
<tr class="active">
<td>
Todos os Cursos (18)
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='3b8bbfce-a526-4121-87a5-347204fc9834' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="panel panel-success">
<!--tag mais popular aqui-->
<div class="panel-heading">
<h3 class="panel-title">
Dupla</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 79,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
2 Pessoas
</td>
</tr>
<tr class="active">
<td>
Todos os Cursos (18)
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='ad053aae-00d2-432f-9b56-67f674068030' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="panel panel-danger">
<!--tag mais popular aqui-->
<div class="panel-heading">
<h3 class="panel-title">
Trio</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 99,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
3 Pessoas
</td>
</tr>
<tr class="active">
<td>
Todos os Cursos (18)
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='6b1b42d3-7f9c-4a69-88f1-84337aabbd80' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="panel panel-primary">
<div class="cnrflash">
<div class="cnrflash-inner">
<span class="cnrflash-label">Mais
<br>
Popular</span>
</div>
</div>
<div class="panel-heading">
<h3 class="panel-title">
Família</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 119,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
5 Pessoas
</td>
</tr>
<tr class="active">
<td>
Todos os Cursos (18)
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a> </div>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='513ae47c-69c5-4809-ae34-3c40b22462d2' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<!--<h3><a href="http://www.onflip.com.br/cursogratis">Cadastre-se grátis e ganhe um Curso.</a></h3>-->
<div class="col-xs-12 col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
Prepraratório</br>Mercado de Trabalho</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 29,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
1 Pessoa (Acesso)
</td>
</tr>
<tr class="active">
<td style="text-align:left;">
<ul>
Cursos:
<li>
Entrevista de Emprego
</li>
<li>Técnicas de Redação</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='ae9c6e2b-af34-40d3-9513-ee46504fc96f' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="panel panel-success">
<!--tag mais popular aqui-->
<div class="panel-heading">
<h3 class="panel-title">
Informática</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 29,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
1 Pessoa (Acessos)
</td>
</tr>
<tr class="active">
<td style="text-align:left;">
<ul>
Cursos:
<li>
Excel 2013 - Essencial
</li>
<li>Excel 2013 - Tabelas Dinâmicas</li>
<li>Excel 2013 - Dashboards</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='40cc4a24-a9bc-4762-b239-9a224622254c' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="panel panel-danger">
<!--tag mais popular aqui-->
<div class="panel-heading">
<h3 class="panel-title">
Computação Gráfica</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 29,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
1 Pessoa (Acessos)
</td>
</tr>
<tr class="active">
<td style="text-align:left;">
<ul>
Cursos:
<li>
Corel Draw X7 - Essencial
</li>
<li>Photoshop CC - Essencial </li>
</ul>
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='fd82783a-8367-41c6-a383-2db718ff3c80' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="panel panel-primary">
<div class="cnrflash">
<div class="cnrflash-inner">
<span class="cnrflash-label">Mais
<br>
Popular</span>
</div>
</div>
<div class="panel-heading">
<h3 class="panel-title">
Adm. Contábil</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 29,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
1 Pessoa (Acesso)
</td>
</tr>
<tr class="active">
<td style="text-align:left;">
<ul>
Cursos:
<li>
Administração
</li>
<li>Contabilidade</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a> </div>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='5e2841e1-25bb-4353-b56c-b03aced44094' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
</div>
<!-- outros planos -->
<div class="container">
<div class="row">
<!--<h3><a href="http://www.onflip.com.br/cursogratis">Cadastre-se grátis e ganhe um Curso.</a></h3>-->
<div class="col-xs-12 col-md-3">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">
Recursos Humanos</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 29,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
1 Pessoa (Acesso)
</td>
</tr>
<tr class="active">
<td style="text-align:left;">
<ul>
Cursos:
<li>
Departamento Pessoal
</li>
<li>Secretariado</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='1e1bbf26-52b9-4667-9a34-3689e147e665' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<div class="panel panel-success">
<!--tag mais popular aqui-->
<div class="panel-heading">
<h3 class="panel-title">
Desenv. Jogos Digitais</h3>
</div>
<div class="panel-body">
<div class="the-price">
<h1>
R$ 29,90<span class="subscript">/mês</span></h1>
<small></small>
</div>
<table class="table">
<tr>
<td>
1 Pessoa (Acessos)
</td>
</tr>
<tr class="active">
<td style="text-align:left;">
<ul>
Cursos:
<li>Construct 2 - Básico</li>
<li>Construct 2 - Intermediário</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="panel-footer">
<!--<a href="http://www.jquery2dotnet.com" class="btn btn-success" role="button">Entrar</a>-->
<form method='post' action='https://cieloecommerce.cielo.com.br/transactionalvnext/order/buynow' target='blank'><input type='hidden' name='id' value='8ffb7a82-76ea-475b-bbed-653e19677f03' /><input type='image' name='submit' alt='Comprar' src='https://cieloecommerce.cielo.com.br/backoffice/Content/img/buttons/button-5-1.png' /></form>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
body
{
margin-top: 20px;
}
.panel
{
text-align: center;
}
.panel:hover { box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px 5px rgba(130, 130, 130, 0.35); }
.panel-body
{
padding: 0px;
text-align: center;
}
.the-price
{
background-color: rgba(220,220,220,.17);
box-shadow: 0 1px 0 #dcdcdc, inset 0 1px 0 #fff;
padding: 20px;
margin: 0;
}
.the-price h1
{
line-height: 1em;
padding: 0;
margin: 0;
}
.subscript
{
font-size: 25px;
}
/* CSS-only ribbon styles */
.cnrflash
{
/*Position correctly within container*/
position: absolute;
top: -9px;
right: 4px;
z-index: 1; /*Set overflow to hidden, to mask inner square*/
overflow: hidden; /*Set size and add subtle rounding to soften edges*/
width: 100px;
height: 100px;
border-radius: 3px 5px 3px 0;
}
.cnrflash-inner
{
/*Set position, make larger then container and rotate 45 degrees*/
position: absolute;
bottom: 0;
right: 0;
width: 145px;
height: 145px;
-ms-transform: rotate(45deg); /* IE 9 */
-o-transform: rotate(45deg); /* Opera */
-moz-transform: rotate(45deg); /* Firefox */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin: 100% 100%; /*Purely decorative effects to add texture and stuff*/ /* Safari and Chrome */
-ms-transform-origin: 100% 100%; /* IE 9 */
-o-transform-origin: 100% 100%; /* Opera */
-moz-transform-origin: 100% 100%; /* Firefox */
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.1) 50%), linear-gradient(0deg, transparent 0%, rgba(1,1,1,.2) 50%);
background-size: 4px,auto, auto,auto;
background-color: #aa0101;
box-shadow: 0 3px 3px 0 rgba(1,1,1,.5), 0 1px 0 0 rgba(1,1,1,.5), inset 0 -1px 8px 0 rgba(255,255,255,.3), inset 0 -1px 0 0 rgba(255,255,255,.2);
}
.cnrflash-inner:before, .cnrflash-inner:after
{
/*Use the border triangle trick to make it look like the ribbon wraps round it's container*/
content: " ";
display: block;
position: absolute;
bottom: -16px;
width: 0;
height: 0;
border: 8px solid #800000;
}
.cnrflash-inner:before
{
left: 1px;
border-bottom-color: transparent;
border-right-color: transparent;
}
.cnrflash-inner:after
{
right: 0;
border-bottom-color: transparent;
border-left-color: transparent;
}
.cnrflash-label
{
/*Make the label look nice*/
position: absolute;
bottom: 0;
left: 0;
display: block;
width: 100%;
padding-bottom: 5px;
color: #fff;
text-shadow: 0 1px 1px rgba(1,1,1,.8);
font-size: 0.95em;
font-weight: bold;
text-align: center;
}
