lucavi | CODE ✦ ASTRAL APP.

Please note that this code does not allow for very lengthy link names; they must be kept short or it will break the code. Most parts to customise are located at the top of the code for easy changes. Here's a list of what they affect:

✦ --primary: this is the header tagline (default a muted goldish colour).
✦ --secondary: the header title and essentially all links (default a silver colour).
✦ --border: link borders.
✦ --iconImg: url of the circular icon in the header.
✦ --bannerImg: url of the background image in the header.

SMALL VER.

<raw-code><center>
<div style="display:grid; grid-template-areas:'header sidebar' 'main sidebar'; grid-template-columns:auto 100px; grid-template-rows:min-content auto; max-width:460px;

--primary:#c4ab6f;
  --secondary:#ccc;
  --border:#cccccc99;
  --iconImg:url('https://pbs.twimg.com/profile_images/1677807514975387651/UivEYWPr_400x400.jpg');
  --bannerImg:url('https://static.vecteezy.com/system/resources/previews/020/375/884/non_2x/black-and-gold-space-background-vector.jpg');">

<div style="grid-area:header; font:600 18px/1.25 'OpenSans', 'Roboto', Arial, sans-serif; text-align:left; background:var(--bannerImg) center no-repeat; background-size:cover; border-radius:12px 12px 0 0; overflow:hidden;">
  <div style="display:grid; grid-template-areas:'icon name' 'icon tagline'; grid-template-columns:min-content auto; grid-gap:0px 10px; padding:25px; background:linear-gradient(to right, #000 40%, transparent 100%);">
  <div style="grid-area:icon; width:75px; aspect-ratio:1; background:var(--iconImg) center no-repeat; background-size:cover; border:2px solid var(--secondary); border-radius:99rem;"></div>
  <div style="grid-area:name; align-self:flex-end; color:var(--secondary);">
    NAME HERE
  </div>
  <div style="grid-area:tagline; align-self:flex-start; font-size:80%; color:var(--primary);">
    TAGLINE HERE
  </div>
  </div>
</div>

<div style="grid-area:sidebar; display:flex; flex-flow:column nowrap; justify-content:space-between; align-items:center; gap:15px; padding:25px 15px; color:#eee; background:#1d1d1d; border-radius:12px;">
  <div style="font:50px/1 sans-serif;">✨</div>
  <div style="display:flex; flex-flow:column nowrap; gap:10px; font:600 10px/1 'OpenSans', 'Roboto', Arial, sans-serif;">
    <a style="text-decoration:none; color:var(--secondary);" href="">LINK01</a>
    <a style="text-decoration:none; color:var(--secondary);" href="">LINK02</a>
    <a style="text-decoration:none; color:var(--secondary);" href="">LINK03</a>
    <a style="text-decoration:none; color:var(--secondary);" href="">LINK04</a>
  </div>
</div>

<div style="grid-area:main; display:grid; grid-template-columns:repeat(auto-fill,75px); grid-auto-rows:75px; justify-content:center; grid-gap:10px; padding:15px; min-width:190px; font:600 12px/1 'Open Sans', 'Roboto', 'Trebuchet MS', sans-serif; color:var(--secondary); background:#1d1d1d; border-radius:0 0 12px 12px;">
  <a style="grid-column:span 2; display:flex; flex-flow:row nowrap; align-items:flex-end; padding:10px; color:var(--secondary); text-decoration:none; text-align:left; border:1px solid var(--border);"
    href="">
    <div style="flex:1;">Span-2 Link</div>
    <div style="flex:1; font:45px/1 sans-serif; align-self:center; text-align:center;">🌠</div>
  </a>

</div>

</div>
</center></raw-code>

LARGE VER.

<raw-code><center>
<div style="display:grid; grid-template-areas:'header sidebar' 'main sidebar'; grid-template-columns:auto 100px; grid-template-rows:min-content auto; max-width:560px;

--primary:#c4ab6f;
  --secondary:#ccc;
  --border:#cccccc99;
  --iconImg:url('');
  --bannerImg:url('');">

<div style="grid-area:main; display:grid; grid-template-columns:repeat(auto-fill,100px); grid-auto-rows:100px; justify-content:center; grid-gap:10px; padding:15px; min-width:190px; font:600 14px/1 'Open Sans', 'Roboto', 'Trebuchet MS', sans-serif; color:var(--secondary); background:#1d1d1d; border-radius:0 0 12px 12px;">
  <a style="grid-column:span 2; display:flex; flex-flow:row nowrap; align-items:flex-end; padding:10px; color:var(--secondary); text-decoration:none; text-align:left; border:1px solid var(--border);"
    href="">
    <div style="flex:1;">Link</div>
    <div style="flex:1; font:65px/1 sans-serif; align-self:center; text-align:center;">🌠</div>
  </a>

</div>

</div>
</center></raw-code>