Profile Card HTML CSS #4

This profile card HTML CSS tutorial shows you how to build a neo-brutalist designer profile card with a serif body font, a Courier New typewriter font for the labels, and an offset box-shadow on the card and the CTA button. The availability badge uses a ::before pseudo-element to add a small green dot, and the CTA button animates downward on hover as the shadow is removed, so it feels like it’s being pressed in.

Final output:

Final Output Code for Profile Card HTML CSS #4:

1. Let’s start with a .profile-card div. Inside it, add a .profile-card-top div with the profile image and an availability badge span.

<div class="profile-card">
    <div class="profile-card-top">
        <img src="maya-bennett.png" alt="">
        <span>Available</span>
    </div>
</div>

Reset margins, set Georgia as the font family, and define the dark brown color as a CSS variable on :root. Style the card with a max-width, a warm cream background, a dark border, and a bottom-right box-shadow to give it that neo-brutalist feel.

* {
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: Georgia, 'Times New Roman', Times, serif;
}
:root {
    --black: hsl(36, 15%, 13%);
}
.profile-card {
    max-width: 24rem;
    border: 2px solid var(--black);
    background-color: hsl(46, 49%, 90%);
    color: var(--black);
    box-shadow: 9px 9px 0px 0px var(--black);
}

Output:

2. Style .profile-card-top. Set the position property to relative so the availability badge can be placed on top of the image using absolute positioning. Set the image width to 100% and use object-fit: cover with a max-height so it fills the top of the card without stretching.

Style the badge span with a golden background and a dark border. Set the position property to absolute with top and left to place it in the top left corner of the image. Add a small green dot before the text using a ::before pseudo-element, since the dot visually signals availability without needing a separate icon.

.profile-card .profile-card-top {
    position: relative;
}
.profile-card .profile-card-top img {
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
}
.profile-card .profile-card-top span {
    font-weight: 700;
    font-size: 0.625rem;
    line-height: 1.3;
    letter-spacing: 1.08px;
    text-transform: uppercase;
    position: absolute;
    top: .75rem;
    left: .75rem;
    border: 1px solid var(--black);
    background-color: hsl(41, 82%, 61%);
    padding: .5rem 0.625rem .5rem 1.375rem;
}
.profile-card .profile-card-top span::before {
    position: absolute;
    left: .675rem;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 0.438rem;
    height: 0.438rem;
    background-color: hsl(150, 28%, 27%);
    border-radius: 50%;
}

Output:

3. Fill in .profile-card-body with the profile tag, name heading, designation, bio paragraph, location and experience row, and a .profile-card-bottom div.

<div class="profile-card-body">
    <span class="profile-tag">DESIGNER PROFILE</span>
    <h3>Maya Bennett</h3>
    <span class="designation">Brand designer & art director</span>
    <p>I build expressive identities for good people doing interesting things, usually with bold type and a little mischief.</p>
    <div class="location-exp">
        <span>PORTLAND, OR</span>
        <span>6 YEARS EXP.</span>
    </div>
    <div class="profile-card-bottom">
        <a class="cta" href="#">LET'S WORK</a>
        <div>
            <a href="#">IG</a>
            <a href="#">BE</a>
            <a href="#">LI</a>
        </div>
    </div>
</div>

Add padding to .profile-card-body. Style the .profile-tag with the Courier New font in a terracotta red and wide letter spacing so it reads like a typewriter label above the name. And style the heading with a light font weight and a tight letter spacing since Georgia’s serifs make it feel elegant even at a light weight. Style the .designation with Courier New in a warm brown muted color.

.profile-card .profile-card-body {
    padding: 1.5rem;
}
.profile-card .profile-tag {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: .675rem;
    line-height: 1.3;
    letter-spacing: 1.62px;
    color: hsl(11, 60%, 44%);
}
.profile-card h3 {
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 1.08;
    letter-spacing: -1.95px;
    margin-block: .5rem;
}
.profile-card .designation {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: .75rem;
    line-height: 16.5px;
    color: hsl(29, 21%, 36%);
}

Output:

4. Style the bio paragraph. Add top and bottom borders using the border block property to frame it as a distinct block between the designation and the location row below. Add some top and bottom padding using the padding block property to give it breathing room inside the borders.

.profile-card p {
    margin-block: 1rem;
    padding-block: 1rem;
    border-block: 1px solid hsl(37, 15%, 54%);
    font-size: .875rem;
    line-height: 1.5;
}

Style .location-exp with flexbox and the justify content property set to space-between so the location and experience sit at opposite ends. Use Courier New with uppercase text and wide letter spacing to match the typewriter style of the rest of the card.

.profile-card .location-exp {
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: .675rem;
    line-height: 1.3;
    letter-spacing: 0.72px;
    margin-bottom: 1.125rem;
}

Output:

5. Style .profile-card-bottom. Use flexbox with the justify content property set to space-between to push the CTA button and social links to opposite ends.

Style the .cta link with a terracotta background, a dark border, and the same offset box-shadow as the card itself. Use flexbox again to place text and arrow at opposite ends.

Add a hover state that removes the shadow and translates the button down slightly so it feels like it’s being pressed in. Style the social links with the Courier New font in the dark color.

.profile-card .profile-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.profile-card .cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    width: 100%;
    padding: .75rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: .75rem;
    line-height: 15px;
    letter-spacing: 0.8px;
    background-color: hsl(11, 60%, 44%);
    border: 2px solid var(--black);
    color: hsl(44, 100%, 96%);
    box-shadow: 4px 4px 0px 0px var(--black);
    transition: transform .1s, box-shadow .1s;
}
.profile-card .cta:hover {
    box-shadow: none;
    transform: translateY(.25rem);
}
.profile-card .profile-card-bottom div {
    display: flex;
    align-items: center;
    gap: .875rem;
}
.profile-card .profile-card-bottom div a {
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--black);
}

Output:

Final Output Code for Profile Card HTML CSS #4:

HTML

<div class="profile-card">
    <div class="profile-card-top">
        <img src="maya-bennett.png" alt="">
        <span>Available</span>
    </div>
    <div class="profile-card-body">
        <span class="profile-tag">DESIGNER PROFILE</span>
        <h3>Maya Bennett</h3>
        <span class="designation">Brand designer & art director</span>
        <p>I build expressive identities for good people doing
            interesting things, usually with bold type and a
            little mischief.</p>
        <div class="location-exp">
            <span>PORTLAND, OR</span>
            <span>6 YEARS EXP.</span>
        </div>
        <div class="profile-card-bottom">
            <a class="cta" href="#">LET'S WORK <span>↗</span></a>
            <div>
                <a href="#">IG</a>
                <a href="#">BE</a>
                <a href="#">LI</a>
            </div>
        </div>
    </div>
</div>

CSS

* {
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: Georgia, 'Times New Roman', Times, serif;
}
:root {
    --black: hsl(36, 15%, 13%);
}
.profile-card {
    max-width: 24rem;
    border: 2px solid var(--black);
    background-color: hsl(46, 49%, 90%);
    color: var(--black);
    box-shadow: 9px 9px 0px 0px var(--black);
}
.profile-card .profile-card-top {
    position: relative;
}
.profile-card .profile-card-top img {
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
}
.profile-card .profile-card-top span {
    font-weight: 700;
    font-size: 0.625rem;
    line-height: 1.3;
    letter-spacing: 1.08px;
    text-transform: uppercase;
    position: absolute;
    top: .75rem;
    left: .75rem;
    border: 1px solid var(--black);
    background-color: hsl(41, 82%, 61%);
    padding: .5rem 0.625rem .5rem 1.375rem;
}
.profile-card .profile-card-top span::before {
    position: absolute;
    left: .675rem;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    width: 0.438rem;
    height: 0.438rem;
    background-color: hsl(150, 28%, 27%);
    border-radius: 50%;
}
.profile-card .profile-card-body {
    padding: 1.5rem;
}
.profile-card .profile-tag {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: .675rem;
    line-height: 1.3;
    letter-spacing: 1.62px;
    color: hsl(11, 60%, 44%);
}
.profile-card h3 {
    font-weight: 400;
    font-size: 2.25rem;
    line-height: 1.08;
    letter-spacing: -1.95px;
    margin-block: .5rem;
}
.profile-card .designation {
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: .75rem;
    line-height: 16.5px;
    color: hsl(29, 21%, 36%);
}
.profile-card p {
    margin-block: 1rem;
    padding-block: 1rem;
    border-block: 1px solid hsl(37, 15%, 54%);
    font-size: .875rem;
    line-height: 1.5;
}
.profile-card .location-exp {
    display: flex;
    justify-content: space-between;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: .675rem;
    line-height: 1.3;
    letter-spacing: 0.72px;
    margin-bottom: 1.125rem;
}
.profile-card .profile-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}
.profile-card .cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    width: 100%;
    padding: .75rem;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: .75rem;
    line-height: 15px;
    letter-spacing: 0.8px;
    background-color: hsl(11, 60%, 44%);
    border: 2px solid var(--black);
    color: hsl(44, 100%, 96%);
    box-shadow: 4px 4px 0px 0px var(--black);
    transition: transform .1s, box-shadow .1s;
}
.profile-card .cta:hover {
    box-shadow: none;
    transform: translateY(.25rem);
}
.profile-card .profile-card-bottom div {
    display: flex;
    align-items: center;
    gap: .875rem;
}
.profile-card .profile-card-bottom div a {
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--black);
}

If you have any doubts or stuck somewhere, you can reach out through Coding Yaar's Discord server.