Line 2: | Line 2: | ||
<html> | <html> | ||
<style> | <style> | ||
+ | .grafico.bar-chart { | ||
+ | background: #3468AF; | ||
+ | padding: 0 1rem 2rem 1rem; | ||
+ | width: 100%; | ||
+ | height: 60%; | ||
+ | position: relative; | ||
+ | color: #fff; | ||
+ | font-size: 80%; | ||
+ | } | ||
+ | .bar-chart [class^='eje-'] { | ||
+ | padding: 0 1rem 0 2rem; | ||
+ | bottom: 1rem; | ||
+ | } | ||
+ | .bar-chart .eje-x { | ||
+ | bottom: 0; | ||
+ | } | ||
+ | .bar-chart .eje-y li { | ||
+ | height: 20%; | ||
+ | border-top: 1px solid #fff; | ||
+ | } | ||
+ | .bar-chart .eje-x li { | ||
+ | width: 14%; | ||
+ | position: relative; | ||
+ | text-align: left; | ||
+ | } | ||
+ | .bar-chart .eje-x li i { | ||
+ | transform: rotatez(-45deg) translatex(-1rem); | ||
+ | transform-origin: 30% 60%; | ||
+ | display: block; | ||
+ | } | ||
+ | .bar-chart .eje-x li:before { | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | bottom: 1.9rem; | ||
+ | width: 70%; | ||
+ | right: 5%; | ||
+ | box-shadow: 3px 0 rgba(0,0,0,.1), 3px -3px rgba(0,0,0,.1); | ||
+ | } | ||
+ | .bar-chart .eje-x li:nth-child(1):before { | ||
+ | background: #E64C65; | ||
+ | height: 570%; | ||
+ | } | ||
+ | .bar-chart .eje-x li:nth-child(2):before { | ||
+ | background: #11A8AB; | ||
+ | height: 900%; | ||
+ | } | ||
+ | .bar-chart .eje-x li:nth-child(3):before { | ||
+ | background: #FCB150; | ||
+ | height: 400%; | ||
+ | } | ||
+ | .bar-chart .eje-x li:nth-child(4):before { | ||
+ | background: #4FC4F6; | ||
+ | height: 290%; | ||
+ | } | ||
+ | .bar-chart .eje-x li:nth-child(5):before { | ||
+ | background: #FFED0D; | ||
+ | height: 720%; | ||
+ | } | ||
+ | .bar-chart .eje-x li:nth-child(6):before { | ||
+ | background: #F46FDA; | ||
+ | height: 820%; | ||
+ | } | ||
+ | .bar-chart .eje-x li:nth-child(7):before { | ||
+ | background: #15BFCC; | ||
+ | height: 520%; | ||
+ | } | ||
.myintro { | .myintro { | ||
display: table; | display: table; | ||
Line 105: | Line 171: | ||
<h2>Modeling.</h2> | <h2>Modeling.</h2> | ||
<p>Under construction... | <p>Under construction... | ||
− | + | </p> | |
+ | <!-- https://codepen.io/jlalovi/details/bIyAr --> | ||
+ | <div class="container"> | ||
+ | <!-- DONUT CHART BLOCK (LEFT-CONTAINER) --> | ||
+ | <div class="donut-chart-block block"> | ||
+ | <h2 class="titular">OS AUDIENCE STATS</h2> | ||
+ | <div class="donut-chart"> | ||
+ | <!-- PORCIONES GRAFICO CIRCULAR | ||
+ | ELIMINADO #donut-chart | ||
+ | MODIFICADO CSS de .donut-chart --> | ||
+ | <div id="porcion1" class="recorte"><div class="quesito ios" data-rel="21"></div></div> | ||
+ | <div id="porcion2" class="recorte"><div class="quesito mac" data-rel="39"></div></div> | ||
+ | <div id="porcion3" class="recorte"><div class="quesito win" data-rel="31"></div></div> | ||
+ | <div id="porcionFin" class="recorte"><div class="quesito linux" data-rel="9"></div></div> | ||
+ | <!-- FIN AÑADIDO GRÄFICO --> | ||
+ | <p class="center-date">JUNE<br><span class="scnd-font-color">2013</span></p> | ||
+ | </div> | ||
+ | <ul class="os-percentages horizontal-list"> | ||
+ | <li> | ||
+ | <p class="ios os scnd-font-color">iOS</p> | ||
+ | <p class="os-percentage">21<sup>%</sup></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p class="mac os scnd-font-color">Mac</p> | ||
+ | <p class="os-percentage">39<sup>%</sup></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p class="linux os scnd-font-color">Linux</p> | ||
+ | <p class="os-percentage">9<sup>%</sup></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p class="win os scnd-font-color">Win</p> | ||
+ | <p class="os-percentage">31<sup>%</sup></p> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!-- LINE CHART BLOCK (LEFT-CONTAINER) --> | ||
+ | <div class="line-chart-block block"> | ||
+ | <div class="line-chart"> | ||
+ | <div class='grafico'> | ||
+ | <ul class='eje-y'> | ||
+ | <li data-ejeY='30'></li> | ||
+ | <li data-ejeY='20'></li> | ||
+ | <li data-ejeY='10'></li> | ||
+ | <li data-ejeY='0'></li> | ||
+ | </ul> | ||
+ | <ul class='eje-x'> | ||
+ | <li>Apr</li> | ||
+ | <li>May</li> | ||
+ | <li>Jun</li> | ||
+ | </ul> | ||
+ | <span data-valor='25'> | ||
+ | <span data-valor='8'> | ||
+ | <span data-valor='13'> | ||
+ | <span data-valor='5'> | ||
+ | <span data-valor='23'> | ||
+ | <span data-valor='12'> | ||
+ | <span data-valor='15'> | ||
+ | </span></span></span></span></span></span></span> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <ul class="time-lenght horizontal-list"> | ||
+ | <li><a class="time-lenght-btn" href="#14">Week</a></li> | ||
+ | <li><a class="time-lenght-btn" href="#15">Month</a></li> | ||
+ | <li><a class="time-lenght-btn" href="#16">Year</a></li> | ||
+ | </ul> | ||
+ | <ul class="month-data clear"> | ||
+ | <li> | ||
+ | <p>APR<span class="scnd-font-color"> 2013</span></p> | ||
+ | <p><span class="entypo-plus increment"> </span>21<sup>%</sup></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p>MAY<span class="scnd-font-color"> 2013</span></p> | ||
+ | <p><span class="entypo-plus increment"> </span>48<sup>%</sup></p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <p>JUN<span class="scnd-font-color"> 2013</span></p> | ||
+ | <p><span class="entypo-plus increment"> </span>35<sup>%</sup></p> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
+ | <div class="bar-chart-block block"> | ||
+ | <h2 class='titular'>By Country <span>*1000</span></h2> | ||
+ | <div class='grafico bar-chart'> | ||
+ | <ul class='eje-y'> | ||
+ | <li data-ejeY='60'></li> | ||
+ | <li data-ejeY='45'></li> | ||
+ | <li data-ejeY='30'></li> | ||
+ | <li data-ejeY='15'></li> | ||
+ | <li data-ejeY='0'></li> | ||
+ | </ul> | ||
+ | <ul class='eje-x'> | ||
+ | <li data-ejeX='37'><i>España</i></li> | ||
+ | <li data-ejeX='56'><i>Portugal</i></li> | ||
+ | <li data-ejeX='25'><i>Italia</i></li> | ||
+ | <li data-ejeX='18'><i>Grecia</i></li> | ||
+ | <li data-ejeX='45'><i>EE.UU</i></li> | ||
+ | <li data-ejeX='50'><i>México</i></li> | ||
+ | <li data-ejeX='33'><i>Chile</i></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <p class='nota-final'>Este pen es sólo para que <strong>@jlalovi</strong> complemente con los gráficos <a href='https://codepen.io/jlalovi/details/bIyAr'>el suyo</a>.</p> | ||
</div> | </div> |
Revision as of 13:03, 22 August 2017