Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Huddle Landing Page With Fluid Typography and CSS Animations

P
ApplePieGiraffe 30,105

@ApplePieGiraffe


Design comparison

SolutionDesign

Reports

Accessibility report (8)
warning

id attribute value must be unique

<rect id="b" width="960" height="600" rx="20"></rect>
Learn more
warning

id attribute value must be unique

<filter x="-1.6%" y="-2.5%" width="103.1%" height="105%" filterUnits="objectBoundingBox" id="a">
Learn more
warning

id attribute value must be unique

<path d="M20 0h920c11.046 0 20 8.954 20 20v44H0V20C0 8.954 8.954 0 20 0z" id="d"></path>
Learn more
warning

id attribute value must be unique

<filter x="-1.6%" y="-23.4%" width="103.1%" height="146.9%" filterUnits="objectBoundingBox" id="c">
Learn more
warning

id attribute value must be unique

<linearGradient x1="14.811%" y1="-22.362%" x2="75.996%" y2="119.406%" id="e"><stop stop-color="#FAD961" offset="0%"></stop><stop stop-color="#FF52C1" offset="100%"></stop></linearGradient>
Learn more
warning

Heading levels should only increase by one

<h3 class="feature__body__heading mg-bottom-sm">Grow Together</h3>
Learn more
error

Links must have discernible text

<a href="#">
Learn more
warning

All page content should be contained by landmarks

<div class="hero__body animate__animated animate__fadeInLeftBig">
Learn more

ApplePieGiraffe’s questions for the community

Hey, everybody! 😁

This was a fun project in which I tried my hand at implementing fluid typography (i.e., the size of the text grows larger and smaller with the viewport width) with the CSS function clamp() and included some cool animations from, of course—Animate.css.

It's not perfect—but I'm learning a lot and it's great fun! 😆

Feedback is welcome and much appreciated! 👍

Community feedback

@karenefereyan

Posted

Nothing in this world has confused me.more than clamp() 😫😫😫😫

1


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@karenefereyan

😅😀👍

0

@Srinishaa

Posted

I loved it. I am learning to use animations too.

0


P
ApplePieGiraffe 30,105

@ApplePieGiraffe

Posted

@Srinishaa

Thanks! Animations are a lot of fun.

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!