Search code examples
htmlcsslayout

How can I make a layout like this pokedex?

  • I'm building a pokedex using the PokeApi and I'd like to give it the look of the Pokemon Sword/Shield pokedex.
  • I'm struggling to make the darkest part of the stripe at the top (with "By Number" written in it) perfectly aligned with the red background behind it. Here's what I already figured out, I'm using magic numbers so I don't really like it, any help would be welcome.
  • For the red bg I'm using background-image with a linear gradient as it is easy to tweak but maybe another property would make this work out better.
  • this is what I'm trying to do : this is what I'm trying to do

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
img {
    width: 100%;
}
ul {
    list-style-type: none;
}
body {
    font-family: "Noto Sans KR", sans-serif;
    background-color: #fff;
    color: #282828;
    background-image: linear-gradient(
            115deg,
            transparent 50%,
            #fe4d3e 50% 58%,
            #fa7246 58% 100%
        ),
        radial-gradient(
            circle at 20% 70%,
            rgba(239, 208, 234, 0.9),
            rgb(234, 201, 242, 0.6),
            rgba(231, 238, 197, 0.6),
            rgb(205, 240, 219, 0.6),
            rgb(231, 237, 245, 0.6)
        );
    min-height: 100vh;
    overflow: hidden;
}
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    --offset: 62.7%;
    background-image: linear-gradient(
        115deg,
        rgba(0, 0, 0, 0.15) var(--offset),
        rgb(53, 53, 53) var(--offset)
    );
    margin-top: 10px;
}
.header h1 {
    font-size: 2rem;
    padding-left: 1rem;
}
.header p {
    font-size: 1.5rem;
    color: white;
    padding-right: 13%;
}
<body>
  <main>
    <div class="header">
      <h1>Pokédex</h1>
      <p>By Number</p>
    </div>
  </main>
</body>

Solution

  • One approach is to use the background-attachment property to fix the backgrounds relative to the viewport, which would then allow the relative sizing — 50%, for example — to be the same 50% in all instances, since it's derived from the same element.

    It's worth noting that I've moved most duplicated properties I used in this demo to CSS variables for easier updating in future:

    :root {
  --attachment: fixed;
  --degrees: 115deg;
  --colorStop-1: 50%;
  --colorStop-2: calc(var(--colorStop-1) + 10vh);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Noto Sans KR", sans-serif;
  background-color: #fff;
  color: #282828;
  background-image:
    linear-gradient(
      var(--degrees),
      transparent var(--colorStop-1),
      #fe4d3e var(--colorStop-1) var(--colorStop-2),
      #fa7246 var(--colorStop-2)),
    radial-gradient( circle at 20% 70%,
      rgb(239 208 234 / 0.9),
      rgb(234 201 242 / 0.6),
      rgb(231 238 197 / 0.6),
      rgb(205 240 219 / 0.6),
      rgb(231 237 245 / 0.6)
    );
  background-attachment: var(--attachment);
  min-height: 100vh;
  overflow: hidden;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-image:
    linear-gradient(
      115deg,
      rgba(50 0 0 / 0.15) var(--colorStop-1),
      rgb(53 53 53) var(--colorStop-1)
    );
  background-attachment: var(--attachment);
  margin-top: 10px;
}

.header h1 {
  font-size: 2rem;
  padding-left: 1rem;
}

.header p {
  font-size: 1.5rem;
  color: white;
  padding-right: 13%;
}
    <body>
  <main>
    <div class="header">
      <h1>Pokédex</h1>
      <p>By Number</p>
    </div>
  </main>
</body>

    JS Fiddle demo.

    References: