<!-- Adrián Gómez Llorente - http://adgllorente.com --> <h1 class="title">Solar system simplified (scale 1px/3185kms)</h1> <div class="solar-system"> <span class="element sun" element-name="sun" radius="695508kms"></span> <span class="element mercury" element-name="mercury" radius="2440kms"></span> <span class="element venus" element-name="venus" radius="6052kms"></span> <span class="element earth" element-name="earth" radius="6371kms"></span> <span class="element mars" element-name="mars" radius="3389kms"></span> <span class="element jupiter" element-name="jupiter" radius="69911kms"></span> <span class="element saturn" element-name="saturn" radius="58232kms"></span> <span class="element uranus" element-name="uranus" radius="25362kms"></span> <span class="element neptune" element-name="neptune" radius="24622kms"></span> </div>
/** * Adrián Gómez Llorente * http://adgllorente.com */ // Element sizes @scale: 3185px; // Half earth. @sun-diameter: 695508px / @scale; @mercury-diameter: 2440px / @scale; @venus-diameter: 6052px / @scale; @earth-diameter: 6371px / @scale; @mars-diameter: 3389px / @scale; @jupiter-diameter: 69911px / @scale; @saturn-diameter: 58232px / @scale; @uranus-diameter: 25362px / @scale; @neptune-diameter: 24622px / @scale; // Text @line-height: 130px; body { background-color: #100515; margin: 20px 0; display: flex; flex-direction: column; align-items: center; } .title { color: white; font-family: 'Courier New'; font-weight: normal; text-transform: uppercase; border-bottom: 1px dashed white; display: inline-block; } .solar-system { display: flex; flex-direction: row; align-items: center; justify-content: center; } .element { position: relative; border: 0; background-color: white; margin: 80px 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: visible; border: 5px solid #100515; &:hover{ &:after { position: absolute; bottom: 50%; left: 50%; content: ''; height: @line-height; border-left: 1px dashed white; } &:before { position: absolute; bottom: 50%; left: 50%; margin-bottom: @line-height; border-bottom: 1px dashed white; color: white; text-transform: uppercase; content: attr(element-name) ' r:' attr(radius); font-family: 'Courier New'; } } } .sun { background-color: #db3026; width: @sun-diameter; height: @sun-diameter; } .mercury { background-color: #333983; width: @mercury-diameter; height: @mercury-diameter; } .venus { background-color: #f3b677; width: @venus-diameter; height: @venus-diameter; } .earth { background-color: #49cdde; width: @earth-diameter; height: @earth-diameter; } .mars { background-color: #ba5700; width: @mars-diameter; height: @mars-diameter; } .jupiter { background-color: #d3804d; width: @jupiter-diameter; height: @jupiter-diameter; } .saturn { background-color: #e4b159; width: @saturn-diameter; height: @saturn-diameter; } .uranus { background-color: #a3f3ff; width: @uranus-diameter; height: @uranus-diameter; } .neptune { background-color: #0f7a91; width: @neptune-diameter; height: @neptune-diameter; }