/* a couple of custom CSS properties to allow for consistent theming,
allowing for theme changes in one place that updates all uses at
once: */
:root {
--categoryColor: #f90;
--spacing: 1em;
}
/* a simple reset, to cause the browser to include paddings and border-
sizes within the declared size of the element: */
*,
::before,
::after {
box-sizing: border-box;
/* removing browser default margin and padding: */
margin: 0;
padding: 0;
}
body {
/* setting the font defaults for the page; which will over-write
browser default styles (though user-agent styles will likely
take precedence over these styles if they're set; that's a
feature and not a bug): */
font-family: "Roboto", "Poppins", system-ui;
font-size: 16px;
font-weight: 500;
}
/* setting some basic styles for users that use keyboard navigation, to
show an obvious outline around focused elements: */
:focus-visible {
outline: 0.25em solid currentColor;
outline-offset: 0.25em;
}
/* removing the default list-markers from the listed elements; this
also removes the accessibility feature in which screen-readers
announce the contents as a list; so while we're removing the
list-markers here (and thereby removing that functionality from
the associated elements), we have used an aria-role="list" attribute
on the <ul>, and aria-role="listitem" on the child <li> elements in
order to preserve/restore that functionality; since we only wish to
hide the content from the visual theme: */
ul,
li {
list-style-type: none;
}
main {
/* setting up a grid-display on the <main> element that wraps all
content (in this demo): */
display: grid;
/* making use of the var() function, and the --spacing custom
property to apply a consistent gap: */
gap: var(--spacing);
/* using CSS logical properties to size the element on its inline
axis (the axis on which inline content flows, such as words
in a sentence, equivalent to 'width' in the English language).
We're using the clamp() function to determine the size of the
eleemnt; with a preferred size of 80% of its own parent
containing element's inline size, with a minimum size of 20rem
and a maximum size of 1200px: */
inline-size: clamp(20rem, 80%, 1200px);
/* setting margins on the block axis; this is perpendicular to the
inline axis and equivalent to 'height' in the English language: */
margin-block: var(--spacing);
/* setting inline margins of auto, in order that the content will
be centered within its parent (if enough space exists): */
margin-inline: auto;
}
.library {
/* I left the border in place in order to allow the sizing to be
easily visualised, but it's not necessary for the demo: */
border: 1px solid currentColor;
/* I chose to use display: flex here: */
display: flex;
/* and used the flex-flow shorthand to set:
flex-direction: row;
flex-wrap: wrap;
*/
flex-flow: row wrap;
/* applying the gap between items (again): */
gap: var(--spacing);
/* spreading the elements out across the inline-axis; adjust to
your preferences though: */
justify-content: space-between;
/* assigning a padding, to move the child element(s) away from
the <li> element's boundaries:: */
padding: var(--spacing);
}
.library > li {
background-color: hsl(0deg 0% 0% / 1);
/* using the calc() function to set a border-radius on the
element, based on the theme's --spacing property: */
border-radius: calc(var(--spacing) / 2);
border: 1px solid currentColor;
padding: var(--spacing);
}
/* selecting the descendant elements of the <figure> element that
match the supplied CSS selectors, so here we select all
<img> and <button> elements that are within the <figure> ancestor: */
figure :is(img, button) {
/* setting the border-radius as above, based on the --spacing custom
property: */
border-radius: calc(var(--spacing) / 2);
}
figcaption {
/* setting the color to white using CSS colors 4 syntax and the
hsl() function: */
color: hsl(0deg 100% 100% / 1);
/* using display: grid: */
display: grid;
/* setting the gap between the grid-columns: */
grid-column-gap: calc(var(--spacing)/2);
/* defining 3 columns, the first and last taking a size of 2rem,
with the central taking 1 fraction of the remaining space: */
grid-template-columns: 2rem 1fr 2rem;
/* using CSS logical properties to place a margin (again using the
custom property, and var() function) to the start-edge of the
element's block-axis (in English, equivalent to margin-top): */
margin-block-start: var(--spacing);
}
/* using the :is() pseudo-class to select elements matching the supplied
CSS selectors (.gameTitle, .categories) within a figcaption ancestor: */
figcaption :is(.gameTitle, .categories) {
/* positioning those elements in grid-column 2: */
grid-column: 2;
}
figcaption :is(.gameIcon, .play) {
/* putting these elements in grid-row 1: */
grid-row: 1;
/* with a maximum inline size ('width,' in the English language) of
100%, so the element can't/won't extend beyond the assigned space: */
max-inline-size: 100%;
/* using object-fit to scale the element(s) in a way that they'll fill
their available space in a manner which preserves their aspect-ratio: */
object-fit: cover;
}
.gameTitle {
font-size: 1.5em;
}
.gameIcon {
/* we could use border-radius: 50%, but clip-path() is well-supported and
actually clips the element as described, to a circle - centered by
default - of radius 50%: */
clip-path: circle(50%);
/* and positioning it within the grid, into grid-column 1: */
grid-column: 1;
}
.play {
background-color: hsl(0deg 95% 50% / 1);
border: 1px solid transparent;
/* inherits from its ancestor: */
color: inherit;
grid-column: 3;
/* I'm using position: absolute on the (following) pseudo-element, so
we're specifying a non-static position on this element, so that it
acts as the containing block: */
position: relative;
}
.play::before {
/* the Unicode right-pointing triangle: */
content: "B6";
font-size: 1rem;
/* to allow for the element to be positioned absolutely, with reference
to its containing block (the first element with 'position' set to
something other than 'static' (the default): */
position: absolute;
/* positioning the element's top-left corner with reference to its
ancestor's top-left corner: */
top: 50%;
left: 50%;
/* translating the element -50% of its own size on both the horizontal
and vertical axes, in order to have it centered: */
translate: -50% -50%;
}
.categories {
/* setting the color of text content within the element: */
color: var(--categoryColor);
}
.categories a {
/* setting <a> elements to inherit their color: */
color: inherit;
text-decoration: none;
}
.categories a:is(:hover, :active, :focus) {
text-decoration: underline;
text-underline-offset: 0.3em;
}
<!-- importing fonts from Google Fonts (this is optional, obviously, and only
included because so many people like to use them) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<main>
<!-- you want to show a list of games in your "game browsing section,"
to that end I'm using an unordered list (you may prefer to use an
<ol> if you'd consider it to be ordered): -->
<ul class="library">
<!-- the <li> elements each wrap one game from the library: -->
<li>
<!-- you want to show an <img> with associated text; the <figure>
element - along with its <figcaption> - seems to fit this
use-case: -->
<figure>
<!-- the <img> to show the game image asset: -->
<img src="https://i.stack.imgur.com/ZeeKUm.jpg" alt="" class="gameTitleScene">
<figcaption>
<!-- the icon/smaller game-image: -->
<img src="https://i.stack.imgur.com/4GZ51s.png" alt="" class="gameIcon">
<!-- game title, I've used an <h3> as there should be only one <h1> in
a page, and the <h2> elements seem a likely choice for section titles;
obviously adjust to whichever element you prefer: -->
<h3 class="gameTitle">Minecraft</h3>
<!-- I wasn't sure if there would only be one, or multiple, categories; so I
wrapped the categories (as <a> elements to allow for easier browsing to
all games of a given category), within <li> elements again within an
unordered-list: -->
<ul class="categories">
<li><a href="#" class="category">Adventure</a></li>
</ul>
<!-- the 'play' button, with a type of "button" so that if you choose to nest
this within a <form> it won't submit that <form> by default: -->
<button type="button" class="play"></button>
</figcaption>
</figure>
</li>
</ul>
</main>