The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Notes: Creating A Layered Card With HTML and CSS from Kevin Powell

TODO: Pull subtitle into page object


Hi George

You can contact us whenever you need help

Start Chatting

Essie Walton


Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Notes: Creating A Layered Card With HTML and CSS from Kevin Powell

These are my notes from going through this video. 

-- youtube
-- TskEjH6VkSM 

-- notes

- This was more watching him figure out how to do something than 
a prepped video. No big deal, but I prefer the prepped ones 
so there's less back tracking (not thta he did that much)

- Best example I've seen of 
`body { min-height: 100vh; display: grid; place-content: center; }`css`
for centing text

- I didn't things inside a section instead of an entirely black page
so I could write these notes. 

- This approach is using subgrid

- It doesn't look the same for me in firefox as chrome. Firefox
is what he was using so that's what I'm looking at during dev.

- Saw `padding-block`css` for the first time. Need to look 
into that

- I'm not sure I'd seen `box-shadow`css` before either. But,
maybe I have? EIther way, something to play around with

- Use a `border-radius: 50%;`css` to make an image a circle

- If you don't do a reset on a page you can do 
`.example > * { margin: 0;}`css` to reset everything inside
specific elements

- Can do `border-radius: 100vw;` on a div with a 1px border
to add a pill shape around it. (Don't use %, it'll turn into
an oval). See the _Active__ text in the example. 

- `1ex`css` is for the height of a lowercase letter (not sure
which one but probably _e__ or _x__?)

- The `status::before`css` combined with the flex box in 
`.status`css` is a very cool way to add the little dots
in front of text. 

- Very cool technique of using the data attribute to define
a variable that other things use.

- This is pretty good box shadow `box-shadow: 0 0 1rem rgb(0 0 0 / .3);`css`

-- html

<section class="example">

  <div class="card">
    <div class="welcome">
        <h1 class="card-heading">Hi George</h1>
        <p>You can contact us whenever you need help</p>
    <div class="start-chatting">
      <h2 class="card-heading">Start Chatting</h2>
      <div class="rep-info">
        <img src="">
        <p class="name">Essie Walton</p>
        <div class="status" data-status="active">Active</div>
      <button class="button">Send a message</button>


-- css

body {
  background-color: black;
  color: #aaa;

-- css

:root {
  --clr-primary: hsl(215, 99%, 66%);
  --clr-secondary: hsl(256, 69%, 65%);
  --clr-neutral-100: hsl(0, 0%, 100%);
  --clr-neutral-900: hsl(230, 32%, 15%);
  --gradient: linear-gradient(45deg, var(--clr-primary), var(--clr-secondary));

.example {
  font-family: system-ui;
  text-align: center;
  min-height: 100vh;
  display: grid;
  place-content: center;
  color: var(--clr-neutral-900);

.card {
  display: grid;
  grid-template-columns: 2rem 20rem 2rem;
  grid-template-rows: repeat(3, auto);

.welcome {
  background: var(--gradient);
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  border-radius: 1rem;
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  color: var(--clr-neutral-100);

.welcome div {
  padding-block: 1.2rem;
  grid-column: 2 / 3;

.button {
  padding: 1em;
  background: var(--gradient);
  color: var(--color-neutral--100);
  border: 0;
  border-radius: .25rem;
  font-size: 1.05rem;
  cursor: pointer;
  background-size: 100%;
  transition: background-size 200ms, scale 200ms;

.button:focus {
  background-size: 200%;
  scale: 1.05;

.card-heading {
  font-size: 1.25rem;
  font-weight: 600;

.start-chatting > * {
  margin: 0;

.start-chatting {
  background: var(--clr-neutral-100);
  padding: 2rem 4rem 4rem;
  grid-column: 2 / 3;
  grid-row: 2 / 4;
  border-radius: 0.5rem;
  box-shadow: 0 0 1rem rgb(0 0 0 / .3);
  display: grid;
  gap: 2rem;

.start-chatting img {
  max-width: 8rem;
  border-radius: 50%;

.rep-info > * {
  margin: 0;

.name {
  font-size: 1.25rem;

.status {
  display: flex;
  gap: 0.4em;
  align-items: center;
  font-size: 0.875rem;
  border: 1px solid #555;
  border-radius: 100vw;
  width: max-content;
  margin-inline: auto;
  padding: .25em 1em;
  opacity: .7;

.status::before {
  content: '';
  height: 1ex;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--status-color, black);

.status[data-status="active"] {
  --status-color: limegreen;

-- categories
-- CSS
-- Notes
-- Design 

-- metadata
-- date: 2023-07-17 20:44:43
-- id: 2sitacji
-- site: aws
-- type: css-experiment
-- status: draft