Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
10
Comments
5

Chris-Ann C.

@cdc2021London300 points

Hello, I am Chris-Ann, newbie to coding :).

Latest solutions

  • Huddle curve landing page using BEM & SASS


    Chris-Ann C.•300
    Submitted over 4 years ago

    0 comments
  • dark flyo landing page using CSS with hover function


    Chris-Ann C.•300
    Submitted over 4 years ago

    1 comment
  • Clipboard landing page using CSS Flexbox hover feature


    Chris-Ann C.•300
    Submitted over 4 years ago

    2 comments
  • Flymo data storage component using CSS & HTML


    Chris-Ann C.•300
    Submitted over 4 years ago

    1 comment
  • Testimonial Grid using CSS Grid & Flexbox


    Chris-Ann C.•300
    Submitted over 4 years ago

    2 comments
  • Huddle landing page - Flex


    Chris-Ann C.•300
    Submitted over 4 years ago

    0 comments
View more solutions

Latest comments

  • oluwapelumi Fadiya•30
    @KodeNinj
    Submitted over 4 years ago

    FYLO landing page

    2
    Chris-Ann C.•300
    @cdc2021
    Posted over 4 years ago

    @oluwapelumi

    Great job on this challenge!

    Suggestions:

    • Have a read of your report as you have some accessiblility issues, maybe try adding a label for "email" which needs to match your input id rather than 'action'.
    • Ensure you are using the headings in chronological order and applying to sections.
    • The second page is very close to the first page so I would add some padding or margin to separate the elements.
    • The testimonial cards sits behind the access card, maybe have a look into your positioning.

    Hope this is useful.

    Happy coding :)

  • Teri Eyenike•20
    @Terieyenike
    Submitted over 4 years ago

    Mobile-first approach using CSS Grid and Flexbox, Loopstudios

    4
    Chris-Ann C.•300
    @cdc2021
    Posted over 4 years ago

    Great job on this project! Looks and feels good. One thing your burger menu disappears when scrolling so maybe think about the colour scheme as it dissolves into the white background.

    Haappy coding !

  • ETINOSA EKHATOR•220
    @Etinosa22
    Submitted over 4 years ago

    FOUR-CARD

    2
    Chris-Ann C.•300
    @cdc2021
    Posted over 4 years ago

    Great work on this challenge, very responsive!

    Minor details, the contents within your header are quite close so maybe adding some padidng betweeen to space out the h2 and p tag. Also the opacity of the rely class should match the power class rather than the p tag.

    Hope this is useful.

    Happy coding :)

  • Chris-Ann C.•300
    @cdc2021
    Submitted over 4 years ago

    Use of GRID and Flexbox to style

    2
    Chris-Ann C.•300
    @cdc2021
    Posted over 4 years ago

    Great, thank you :)

  • Alejandro•10
    @Lerix78
    Submitted over 4 years ago

    Profile card component

    2
    Chris-Ann C.•300
    @cdc2021
    Posted over 4 years ago

    Hi Alejandro,

    I would remove the background img from the HTML file and style in CSS using background-image: url(./); remove repeat - background-repeat: no repeat In order to position the images use tranform: tranlate (%, %) This should solve your background image issues and so make styling of the container easier.

    Hope this is useful. Chris-Ann

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub