Build a Responsive Website – Part 3

These are notes for the 3nd video in Kevin Powell’s video series titled Build a responsive website with HTML & CSS.

The GitHub repository for this video is here.

Introduction

In this video Kevin adds the container and even-column classes (among others) and works on the alignment of the elements.

General Styling

At the bottom of style.css we add some styling for the body element.

[code language=”css”]
body {
font-size: var(–fs-body);
font-family: var(–ff-body);
color: var(–clr-primary-400);
}
[/code]

Next we create a container class.

[code language=”css”]

.container {
–max-width: 1110px;
–padding: 1rem;

width: min(var(–max-width), 100% – (var(–padding) * 2));
margin-inline: auto;
}
[/code]

And below is the code for the even-columns class.

[code language=”css”]
.even-columns {
display: grid;
gap: 1rem;
}

@media (min-width: 50em) {
.even-columns {
grid-auto-flow: columns;
grid-auto-columns: 1fr;
}
}
[/code]

Add Spacing

Next we add some utility classes to include padding between the sections.

[code language=”css”]
.padding-block-900 { padding-block: var(–size-900); }
.padding-block-700 { padding-block: var(–size-700); }
[/code]

Create Button Classes

Here, below the general styling section in style.css we add a class to stylize the bottons.

[code language=”css”]
.button {
cursor: pointer;
text-decoration: none;
border: 0;
border-radius: 100vmax;
padding: 1.25em 2.5em;
line-height: 1;
font-weight: var(–fw-bold);
font-size: var(–fs-button);
color: var(–clr-neutral-100);
background-color: var(–clr-accent-400);
box-shadow: 0 1.125em 1em -1em var(–clr-accent-500);
}

.button[data-type="inverted"] {
color: var(–clr-accent-400);
background-color: var(–clr-neutral-100);
}

.button:hover,
.button:focus-visible {
background-color: var(–clr-accent-300);
}

.button[data-type="inverted"]:hover,
.button[data-type="inverted"]:focus-visible {
color: var(–clr-accent-300);
background-color: var(–clr-neutral-100);
}
[/code]