![]() memory-card children, let’s add position: relative so we can position the children absolutely, relative to it. Let’s make three rows, four card each by setting width to 25% and height to 33.333% minus 10px from margin. * styles.css */Įach card width and height is calculated with calc() CSS function. By setting flex-wrap to wrap, flex-items wrap along multiple lines, accordingly to their size. By default, the items are set to shrink in width to fit the container. memory-game will also be a flex-container. memory-game container, it will be centered both vertically and horizontally. The box-sizing: border-box property includes padding and border values into element’s total width and height, so we can skip the math.īy setting display: flex to the body and margin: auto to the. We will use a simple but yet very useful reset, applied to all items: /* styles.css */ The set of cards will be wrapped in a section container element. The assets for this project can be downloaded at: Memory Game Repo The first one represents the card front-face and the second its back-face. memory-card, which holds two img elements. The game has 12 cards and each card consists of a container div named. The initial template linking both css and js files. □ touch index.html styles.css scripts.js Let’s start creating the files in the terminal: □ mkdir memory-game If you prefer, a Portuguese translation of this tutorial can be found If you know what HTML, CSS and JS are for, it’s more than enough! ![]() You are not expected to have much prior knowledge in programming. We will discuss data-attribute, positioning, perspective, transitions, flexbox, event handling, timeouts and ternaries. This tutorial explains some basic HTML5, CSS3 and JS concepts.
0 Comments
Leave a Reply. |