<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 class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ivancampillo/pen/xEALrJ?depth=everything&order=popularity&page=88&q=develop&show_forks=false" />
<style class="cp-pen-styles">/** STEPS **/
.steps {
display: flex;
width: 100%;
margin: 25px 0px:
min-width: 1024px;
}
.steps .step {
justify-content: center;
text-align: center;
}
.steps .step .img{
object-fit: contain;
margin: 10px auto 10px auto;
}
.steps .step.start .img{
width: 72px;
height: 100px;
}
.steps .step.sdk .img{
width: 122px;
height: 100px;
}
.steps .step.support .img{
width: 98px;
height: 100px;
}
.steps .step .title{
height: 30px;
font-family: SourceSansPro;
font-size: 24px;
color: #061d71;
}
.steps .step .text{
height: 30px;
font-family: SourceSansPro;
font-size: 12px;
line-height: 1.2;
text-align: center;
color: #4a4a4a;
margin: 5px 15%;
height: 50px;
}
/** SQUARES **/
.squares {
display: inline-block;
width: 100%;
margin: 25px 0px;
min-width: 1024px;
}
.squares .square {
position: relative;
height: 260px;
display: inline-block;
width: calc(50% - 2px);
text-align: left;
margin: -1px 0;
background-repeat: no-repeat;
background-size: cover;
}
.squares .square.one {
background-image: url("https://i.imgur.com/OR8rbjN.jpg");
background-position: 50% 10%;
}
.squares .square.two {
background-image: url("https://i.imgur.com/ADN0pb2.jpg");
background-position: 50% 90%;
}
.squares .square.three {
background-image: url("https://i.imgur.com/pBM4fQT.jpg");
background-position: 50% 30%;
}
.squares .square.four {
background-image: url("https://i.imgur.com/CYZIpW7.jpg");
background-position: 50% 0%;
}
.squares .square .title {
position: absolute;
top: 40%;
left: 5%;
right: 5%;
font-family: SourceSansPro;
font-size: 36px;
color: #ffffff;
text-transform: uppercase;
}
.squares .square .text {
position: absolute;
top: 60%;
left: 5%;
right: 20%;
font-family: SourceSansPro;
font-size: 16px;
color: #ffffff;
}
/** CARDS **/
.cards-title {
display: flex;
justify-content: center;
width: 100%;
margin: 20px auto;
min-width: 1024px;
font-weight: bold;
text-align: center;
color: #061d71;
}
.cards {
display: flex;
justify-content: center;
width: 100%;
margin: 0 auto;
min-width: 1024px;
}
.cards .card {
position: relative;
height: 360px;
max-width: 300px;
text-align: center;
margin: 5px;
border-radius: 4px;
background-color: #ffffff;
border: solid 1px #979797;
}
.cards .card .img{
height: 200px;
background-repeat: no-repeat;
background-size: cover;
}
.cards .card.one .img{
background-image: url("https://i.imgur.com/qMePb3G.jpg");
background-position: 50% 0%;
}
.cards .card.two .img{
background-image: url("https://i.imgur.com/705xe8P.jpg");
background-position: 50% 0%;
}
.cards .card.three .img{
background-image: url("https://i.imgur.com/hIkFsxng.jpg");
background-position: 50% 0%;
}
.cards .card .title{
height: 24px;
font-family: Roboto;
font-size: 20px;
text-align: center;
color: #061d71;
text-transform: uppercase;
margin: 15px 0;
}
.cards .card .text{
height: 80px;
font-family: SourceSansPro;
font-size: 15x;
line-height: 1;
text-align: center;
color: #4a4a4a;
margin: 20px 20px
}
</style></head><body>
<!-- Steps -->
<div class="steps">
<div class="step start">
<div class="img">
<svg id="icons_-_NO_edit" data-name="icons - NO edit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69 96"><defs><style>.cls-1{fill:none;stroke:#262f62;stroke-miterlimit:10;stroke-width:4px;}</style></defs><title>APIVERSITY_icons_ok</title><path class="cls-1" d="M17,39V13A10,10,0,0,1,27,3H56A10,10,0,0,1,66,13V83A10,10,0,0,1,56,93H27A10,10,0,0,1,17,83V57"/><line class="cls-1" x1="1" y1="48" x2="50" y2="48"/><polyline class="cls-1" points="34.5 63.5 50 48 34.5 32.5"/></svg>
</div>
<div class="title">Comienza</div>
<div class="text">Como usuario administrador, puedes editar este contenido in line, o seleccionar uno previamente creado desde el panel de administración de Developer Center</div>
</div>
<div class="step sdk">
<div class="img">
<svg id="icons_-_NO_edit" data-name="icons - NO edit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 126"><defs><style>.cls-1{fill:#262f62;}</style></defs><title>APIVERSITY_icons_ok</title><path class="cls-1" d="M62.79,40.35a3.63,3.63,0,0,1-2.18.55,5.57,5.57,0,0,1-2.27-.49,7.58,7.58,0,0,1-2-1.28L54.7,41a8.53,8.53,0,0,0,5.86,2.3A7.5,7.5,0,0,0,63,43a5.56,5.56,0,0,0,1.82-1A4.39,4.39,0,0,0,66,40.47a4.17,4.17,0,0,0,.4-1.8,4.25,4.25,0,0,0-.25-1.52A3.67,3.67,0,0,0,65.41,36a5,5,0,0,0-1.08-.89A8.43,8.43,0,0,0,63,34.42l-2.06-.89-1-.41A4.36,4.36,0,0,1,59,32.68a2.12,2.12,0,0,1-.59-0.58,1.37,1.37,0,0,1-.22-0.78A1.56,1.56,0,0,1,58.92,30a3.35,3.35,0,0,1,1.93-.49,5,5,0,0,1,1.94.36,7.07,7.07,0,0,1,1.66,1L65.89,29a7.63,7.63,0,0,0-2.29-1.45,7.14,7.14,0,0,0-2.75-.54,6.84,6.84,0,0,0-2.2.34,5.31,5.31,0,0,0-1.72.94,4.41,4.41,0,0,0-1.13,1.4,3.78,3.78,0,0,0-.41,1.74A3.86,3.86,0,0,0,55.69,33a4,4,0,0,0,.77,1.18,5.13,5.13,0,0,0,1.08.86,7.89,7.89,0,0,0,1.22.6l2.14,0.94Q61.47,36.8,62,37a4.63,4.63,0,0,1,.84.47,1.9,1.9,0,0,1,.54.59,1.62,1.62,0,0,1,.19.82A1.73,1.73,0,0,1,62.79,40.35Z"/><path class="cls-1" d="M77.22,42.53A5.94,5.94,0,0,0,79.5,41a6.71,6.71,0,0,0,1.44-2.48,10.69,10.69,0,0,0,.5-3.43q0-3.89-2-5.83A7.38,7.38,0,0,0,74,27.34H70V43h4.2A8.57,8.57,0,0,0,77.22,42.53Zm-4.44-1.75V29.6h1.1a4.51,4.51,0,0,1,3.48,1.32,6,6,0,0,1,1.22,4.2,6.32,6.32,0,0,1-1.22,4.28,4.41,4.41,0,0,1-3.48,1.38h-1.1Z"/><polygon class="cls-1" points="87.87 38.45 90.15 35.65 94.06 43.04 97.16 43.04 91.81 33.46 96.63 27.34 93.53 27.34 87.94 34.47 87.87 34.47 87.87 27.34 85.06 27.34 85.06 43.04 87.87 43.04 87.87 38.45"/><path class="cls-1" d="M154.15,64.71l-27-6.34L146,42.93,116.49,29.72l-0.17.39V6.79a5,5,0,0,0-5-5H44a5,5,0,0,0-5,5v22.3L8,42.93,27.22,58.59,1.17,64.71,27.31,76.18V99.71l49.14,25.18,0.45,0.23L126.76,100l0.55-.28V76.49ZM105.28,84L80.59,79.21,126,60.15l21.88,5.14Zm11-21.93V56.33l6.44,3Zm26-18.61-17.78,14.5-8-3.72-0.19.41V31.84ZM44,3.79h67.33a3,3,0,0,1,3,3V62.88L77.66,78.28,41,62.87V6.79A3,3,0,0,1,44,3.79ZM31.9,59.06L39,55.76V62ZM39,31.29V53.55l-9.4,4.38L11.79,43.43Zm-9.8,28.9,0.1,0.08,0.17-.08,45.28,19L50,84,7.46,65.29Zm0.13,16.87,20.49,9,26.1-5v41.34L29.31,98.48V77.06Zm96,21.42-47.4,23.9V80.76H77.26l0.4-.08,27.85,5.37,19.8-8.69V98.48Z"/></svg>
</div>
<div class="title">Librerías</div>
<div class="text">Como usuario administrador, puedes editar este contenido in line, o seleccionar uno previamente creado desde el panel de administración de Developer Center</div>
</div>
<div class="step support">
<div class="img">
<svg id="icons_-_NO_edit" data-name="icons - NO edit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 104 106"><defs><style>.cls-1{fill:none;stroke:#262f62;stroke-miterlimit:10;stroke-width:4px;}.cls-2{fill:#262f62;}</style></defs><title>APIVERSITY_icons_ok</title><polyline class="cls-1" points="58 42 68 42 68 59 86 41 101 41 101 3 37 3 37 21"/><path class="cls-1" d="M26,71v9L9.56,85.58A10,10,0,0,0,3,95v8H66.11L66,95a9.86,9.86,0,0,0-6.45-9.42L43,80V69.94"/><path class="cls-1" d="M50,53c0,11-6.69,20-15.86,20S17,64,17,53s8-20,17.14-20S50,42,50,53Z"/><path class="cls-1" d="M50.66,51.26c-0.56.08-1,.63-1.57,0.74-5.66,1.09-8-1.55-11.09-7-1.87,3.58-9.2,7-14,7-2.36,0-4-1.08-6-2.14"/><rect class="cls-2" x="56" y="20" width="4" height="4"/><rect class="cls-2" x="68" y="20" width="4" height="4"/><rect class="cls-2" x="80" y="20" width="4" height="4"/></svg>
</div>
<div class="title">Soporte</div>
<div class="text">Como usuario administrador, puedes editar este contenido in line, o seleccionar uno previamente creado desde el panel de administración de Developer Center</div>
</div>
</div>
<!-- Squares -->
<div class="squares">
<div class="square one">
<div class="title">Rápido y Sencillo</div>
<div class="text">Como usuario administrador, puedes editar este contenido in line, o seleccionar uno previamente creado desde el panel de administración de Developer Center</div>
</div>
<div class="square two">
<div class="title">Innovación</div>
<div class="text">Como usuario administrador, puedes editar este contenido in line, o seleccionar uno previamente creado desde el panel de administración de Developer Center</div>
</div>
<div class="square three">
<div class="title">Comunidad</div>
<div class="text">Como usuario administrador, puedes editar este contenido in line, o seleccionar uno previamente creado desde el panel de administración de Developer Center</div>
</div>
<div class="square four">
<div class="title">Código Limpio</div>
<div class="text">Como usuario administrador, puedes editar este contenido in line, o seleccionar uno previamente creado desde el panel de administración de Developer Center</div>
</div>
</div>
<!-- Cards -->
<h1 class="cards-title">ÚLTIMOS POST DE TU BLOG</h1>
<div class="cards">
<div class="card one">
<div class="img"></div>
<div class="title">Post Uno</div>
<div class="text">Como usuario administrador, puedes editar este contenido in line, o seleccionar uno previamente creado desde el panel de administración de Developer Center</div>
</div>
<div class="card two">
<div class="img"></div>
<div class="title">Post Dos</div>
<div class="text">Como usuario administrador, puedes editar este contenido in line, o seleccionar uno previamente creado desde el panel de administración de Developer Center</div>
</div>
<div class="card three">
<div class="img"></div>
<div class="title">Post Tres</div>
<div class="text">Como usuario administrador, puedes editar este contenido in line, o seleccionar uno previamente creado desde el panel de administración de Developer Center</div>
</div>
</div>
</body></html>
