Laying out a Mega Drive cartridge case cover


by Jeremy Caudle
notes

For Father's Day I received a game coupon allowing me to pick any game I'd like to have and be treated to it. Most modern games on systems like the Nintendo Switch and PlayStation 4 start around $60, so I asked if I could instead get two cheaper retro games. One of them being a Sega Mega Drive game. I have yet to play it, but it prompted me to try and lay out the front of the game case using flexbox. I'll give it a better go at a later date.

Mega Drive Cartridgeメガドライブ壱二

Game Name Game Subtitle

ゲームの名前 〜ゲームの字幕〜

  • 1Player
  • Strategy
  • Memory Back Up

View the code:

HTML and JS
<div class="codedoodle-block">
        <h6 class="mega-drive-top-text"><span class="english-txt">Mega Drive Cartridge</span><span class="japanese-txt">メガドライブ壱二</span></h6>
        <h1 class="eng-game-name">Game Name <span class="eng-subhead">Game Subtitle</span></h1>
        <h2 class="jpn-game-name">ゲームの名前 <span class="jpn-subhead">〜ゲームの字幕〜</span></h2>
        <div class="stretch">
            <ul class="cartridge-box-etc">
                <li class="player-count"><span>1</span>Player</li>
                <li class="game-type">Strategy</li>
                <li class="extra-feature">Memory Back Up</li>
                <li class="sega-logo">
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="100" viewbox="0 0 300 100">
                        <path d="m 147.808,90.893999 c 5.508,5.349 13.019,8.656 21.303,8.656 l 130.889,0.015 -28.268,-84.332 C 267.871,6.2739988 258.813,-1.2207031e-6 247.934,-1.2207031e-6 237.101,-1.2207031e-6 227.906,6.4789988 224.189,15.400999 l -9.423,27.471 -0.037,-41.4530002 -45.709,-0.023 c -8.262,0 -15.689,3.224 -21.159,8.557 l 0.016,-8.52 h -46.801 c -8.717,0 -16.645,3.717 -22.19,9.5590002 V 1.3959988 l -44.11,0.038 C 15.734,1.4179988 0.114,16.302999 0.091,35.982999 c 0,9.111 3.982,17.374 9.854,23.496 L 0,59.462999 v 40.087 l 44.442,-0.008 c 12.487,-0.015 24.861,-7.549 29.162,-16.576 l 0.129,-0.371 c 4.969,10.036 15.339,16.955 27.341,16.955 l 46.733,-0.008 v -8.648" style="fill: rgb(255, 255, 255);"/>
                        <path d="m 6.866,92.690999 37.477,-0.038 c 15.333,0 27.759,-12.388 27.759,-27.652 0,-15.294 -12.426,-27.683 -27.759,-27.683 l -9.733,0.053 c -0.767,0 -1.389,-0.629 -1.389,-1.403 0,-0.774 0.622,-1.404 1.389,-1.404 l 37.409,0.008 0.015,-11.736 H 34.602 c -7.237,0 -13.125,5.879 -13.125,13.102 0,7.23 5.887,13.086 13.125,13.086 l 9.779,0.129 c 8.785,0 15.894,7.085 15.894,15.826 0,8.747 -7.108,15.848 -15.894,15.848 h -37.5 l -0.015,11.864" style="fill: rgb(0, 96, 168);"/>
                        <path d="m 6.881,78.071999 h 37.5 c 7.26,0 13.132,-5.856 13.132,-13.094 0,-7.23 -5.872,-13.079 -13.132,-13.079 l -9.779,-0.106 c -8.77,0 -15.886,-7.093 -15.886,-15.856 0,-8.739 7.116,-15.833 15.886,-15.833 l 37.432,-0.008 L 72.019,8.3149988 H 34.61 c -15.317,0 -27.759,12.3740002 -27.759,27.6530002 0,15.279 12.442,27.66 27.759,27.66 l 9.68,0.015 c 0.736,0 1.358,0.6 1.358,1.358 0,0.744 -0.622,1.343 -1.358,1.343 l -37.424,0.03 0.015,11.698" style="fill: rgb(0, 96, 168);"/>
                        <path d="m 101.158,80.901999 c -6.502,0 -11.828,-5.182 -11.828,-11.798 v -37.438 c 0,-6.365 5.326,-11.6 11.828,-11.6 l 40.003,0.007 V 8.3149988 h -40.003 c -13.018,0 -23.563,10.5070002 -23.563,23.4800002 v 37.31 c 0,12.974 10.545,23.496 23.563,23.496 l 39.836,0.016 -0.008,-11.729 -39.828,0.014" style="fill: rgb(0, 96, 168);"/>
                        <path d="m 92.198,31.794999 c 0,-4.961 3.991,-8.982 8.96,-8.982 h 40.003 v 11.774 h -34.465 c -2.761,0 -2.799,2.739 -2.799,2.739 h 28.753 v 11.721 H 92.184 l 0.014,-17.252" style="fill: rgb(0, 96, 168);"/>
                        <path d="m 101.158,78.049999 c -4.954,0 -8.975,-3.998 -8.975,-8.945 v -17.267 h 40.466 v 11.745 h -28.753 c 0.038,2.761 2.799,2.775 2.799,2.775 h 34.298 l -0.008,11.676 -39.827,0.016" style="fill: rgb(0, 96, 168);"/>
                        <path d="m 169.194,80.871999 c -6.479,0 -11.774,-5.28 -11.774,-11.768 v -37.31 c 0,-6.494 5.257,-11.729 11.743,-11.729 h 38.745 V 8.3149988 h -38.835 c -13.012,0 -23.557,10.5070002 -23.557,23.4800002 v 37.31 c 0,12.974 10.636,23.496 23.647,23.496 l 38.745,0.016 v -55.291 h -33.297 v 11.721 h 21.53 v 31.825 h -26.947" style="fill: rgb(0, 96, 168);"/>
                        <path d="m 160.181,69.103999 c 0,4.971 4.021,9.014 8.982,9.014 h 24.201 v -26.295 H 174.64 v 11.76 h 6.949 l 0.022,2.761 h -6.918 c -1.51,0 -2.746,-1.251 -2.746,-2.761 l -0.062,-26.265 c 0,0 -0.008,-2.731 2.777,-2.799 h 33.259 l -0.015,-11.714 -38.745,0.008 c -4.961,0 -8.982,4.021 -8.982,8.982 v 37.309" style="fill: rgb(0, 96, 168);"/>
                        <path d="m 244.315,22.637999 c 0.522,-1.494 1.941,-2.571 3.618,-2.571 1.678,0 3.111,1.077 3.619,2.571 l 18.808,55.563 h -27.54 l 0.03,-13.071 h 9.203 l -4.143,-12.313 -13.496,39.79 h -13.883 l 23.784,-69.969" style="fill: rgb(0, 96, 168);"/>
                        <path d="m 274.152,80.871999 h -31.286 v 11.735 h 47.612 l -24.762,-73.262 c -2.17,-7.146 -9.323,-12.4030002 -17.791,-12.4030002 -8.481,0 -15.612,5.2340002 -17.798,12.3740002 l -24.989,73.292 h 12.465 l 24.262,-71.244 c 0.985,-2.359 3.308,-4.021 6.039,-4.021 2.716,0 5.052,1.662 6.046,4.006 l 20.202,59.523" style="fill: rgb(0, 96, 168);"/>
                        <path d="m 281.504,17.638999 c 2.216,0 4.302,-0.865 5.865,-2.42 1.562,-1.57 2.435,-3.641 2.435,-5.8560002 0,-2.2 -0.873,-4.264 -2.435,-5.834 -1.563,-1.547 -3.649,-2.412 -5.865,-2.412 -4.559,0 -8.284,3.695 -8.284,8.247 0,2.2150002 0.865,4.2860002 2.442,5.8560002 1.556,1.554 3.634,2.419 5.842,2.419 m -7.115,-8.2770002 c 0,-1.889 0.728,-3.679 2.085,-5.022 1.351,-1.343 3.141,-2.071 5.03,-2.071 1.912,0 3.702,0.729 5.053,2.071 1.343,1.343 2.087,3.133 2.087,5.022 0,3.9220002 -3.202,7.1080002 -7.14,7.1080002 -1.89,0 -3.68,-0.736 -5.03,-2.079 -1.358,-1.342 -2.085,-3.125 -2.085,-5.0290002 z" style="fill: rgb(35, 31, 32);"/>
                        <path d="m 279.38,10.059999 v 3.899 h -1.199 V 4.7949988 h 3.406 c 1.283,0.015 2.034,0.015 2.747,0.553 0.69,0.509 0.979,1.275 0.979,2.125 0,2.14 -1.744,2.42 -2.186,2.511 l 2.58,3.9750002 h -1.449 l -2.511,-3.899 h -2.367 m 0,-1.0090002 h 2.435 c 0.388,0 0.752,0 1.116,-0.091 0.85,-0.205 1.153,-0.812 1.153,-1.479 0,-0.243 -0.023,-0.857 -0.547,-1.282 -0.479,-0.402 -1.085,-0.387 -1.79,-0.387 h -2.367 v 3.239 z" style="fill: rgb(35, 31, 32);"/>
                    </svg>
                </li>
            </ul>
        </div>
    </div>
CSS
/* Variables */

        :root {
            --bodybg: black;
            --main: #444444;
            --secondary: #33228f;
        }

        /* Code Block styles  143px by 198px */

        div.codedoodle-block {
            background-color: var(--bodybg, black);
            margin: 3rem auto;
            padding: 1rem;
            width: 429px;
            height: 594px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            border-radius: .5rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            background-image: linear-gradient(black 14%, #cab676 11%);
        }

        div.codedoodle-block h1, div.codedoodle-block h2, div.codedoodle-block h3, div.codedoodle-block h4, div.codedoodle-block h5, div.codedoodle-block h6 {
            margin: 0 auto;
        }   

        .mega-drive-top-text {
            width: 100%;
        }

        .mega-drive-top-text:after {
            content: '';
            float:none;
            clear: both;
        }

        .english-txt {
            font-size: 1rem;
            color: blue;
            text-shadow: 1px 1px 0 white, 0 1px 0 white, 1px 0 white, -1px 0 white, -1px -1px white, 0 -1px white;
            float: left;
            font-size: 1.25rem;
        }
        
        .japanese-txt {
            font-size: 1rem;
            color: rgb(58, 120, 255);
            text-shadow: 1px 1px 0 white, 0 1px 0 white, 1px 0 white, -1px 0 white, -1px -1px white, 0 -1px white;
            float: right;
            font-size: 1.25rem;
        }

        .codedoodle-block .eng-game-name {
            color: white;
            text-transform: uppercase;
            font-size: 4rem;
            text-align: center;
            transform: scaleY(1.5);
            margin-bottom: 3rem;
        }

        .eng-subhead {
            font-size: .75rem;
            display: block;
            color: white;
        }

        .jpn-game-name {
            text-align: center;
            color: yellow;
            text-shadow: 3px 3px 0 black;
        }

        .jpn-subhead {
            font-size: .8em;
            color: white;
            text-shadow: 3px 3px 0 black;
            margin-left: 1rem;
        }

        .stretch {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-content: center;
            font-size: .75rem;
        }

        .cartridge-box-etc {
            display: flex;
            flex-direction: row;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .cartridge-box-etc li {
            margin-right: 1rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-content: center;
        }

        .cartridge-box-etc li:last-of-type {
            margin-right: 0;
            margin-left: 0;
            flex-grow: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            align-items: center;
        }

        .player-count {
            text-transform: uppercase;
            background-color: black;
            color: rgb(58, 120, 255);
            border-radius: .5rem;
            padding: .25rem;
            text-align: center;
            border: solid 3px white;
        }

        .player-count span {
            display: block;
            font-size: 1.5rem;
            font-weight: bold;
            color: black;
            background-color: rgb(58, 120, 255);
        }

        .game-type {
            text-transform: uppercase;
            background-color: black;
            color: yellow;
            border-radius: .5rem;
            padding: .25rem;
            text-align: center;
            border: solid 3px white;
        }

        .extra-feature {
            text-transform: uppercase;
            background-color: salmon;
            color: black;
            border-radius: .5rem;
            padding: .25rem;
            text-align: center;
            border: solid 3px white;
            max-width: 4.5rem;
            font-weight: bold;
            flex-grow: 1;
            align-items: flex-end;
        }

        .sega-logo svg{
            max-width: 120px; 
            max-height: 40px;
        }

        .screen-reader-text {
            color: transparent;
            position: absolute;
            top: 0;
            left: -10000px;
        }

Tags