Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
18
Comments
6

Arlagonix

@arlagonixRussia420 points

Hello! 👋 I'm Alex, a 25-year-old front-end web developer. Enthusiastic about learning and connecting with others, I constantly seek growth in my skills and embrace collaborative projects to create meaningful web experiences. Let's build something incredible together! 🚀💻

I’m currently learning...

🛠️ HTML 🎨 CSS ✨JavaScript 👑TypeScript 🚀 ReactJS

Latest solutions

  • Recipe Page

    #angular#typescript

    Arlagonix•420
    Submitted 6 months ago

    0 comments
  • Results Summary using ReactJS, SASS, CSS Modules

    #sass/scss#react

    Arlagonix•420
    Submitted over 2 years ago

    0 comments
  • Easy Bank Landing Page using NextJS, Styled Components, AnimeJS

    #animation#next#styled-components

    Arlagonix•420
    Submitted over 2 years ago

    0 comments
  • Multi-Step Form using ReactJS, TypeScript, TailwindCSS, Framer-Motion

    #tailwind-css#typescript#motion

    Arlagonix•420
    Submitted over 2 years ago

    2 comments
  • REST Countries using React, Styled-Components, React Query

    #tanstack-query#styled-components#react

    Arlagonix•420
    Submitted over 2 years ago

    0 comments
  • News Homepage using HTML, TailwindCSS, Webpack

    #webpack#tailwind-css

    Arlagonix•420
    Submitted over 2 years ago

    1 comment
View more solutions

Latest comments

  • Anurag Mohanty•160
    @ar-mohanty
    Submitted over 2 years ago

    Responsive card layout using media query.

    2
    Arlagonix•420
    @arlagonix
    Posted over 2 years ago

    Woah, it looks awesome! No problems whatsoever

  • Glozsa•180
    @Glozsa
    Submitted over 2 years ago

    Day 6 of learning front-end (I think)

    1
    Arlagonix•420
    @arlagonix
    Posted over 2 years ago

    Nice solution (I think)

    Consider adding draggable="false" to the img so people wouldn't accidentally drag it around

    Consider reducing space between header and paragraph. Closely related things must be close to each other. Presently the header is closer to the image than to the paragraph

    The card isn't responsive when the screen width is less than 343px. Actually there are usually no screens with such small width, but still

    Btw awesome shadow

    Overall great solution

    Marked as helpful
  • Sayyid Widad Alawi•90
    @alawi17
    Submitted over 2 years ago

    Order Summary Card Mobile-first CSS Grid, Flexbox

    2
    Arlagonix•420
    @arlagonix
    Posted over 2 years ago

    How did you remove scrolling? There are 2 options:

    • Set margin: 0 to body tag. I recommend this approach
    • Set overflow: hidden to body tag

    Also your background doesn't stretch to full width

    If you're publishing your code on Github, I recommend to use Github Pages to host there your working application. Thus you will keep both code and demonstration in one place

    Marked as helpful
  • Diogo Quina•30
    @DQuina
    Submitted over 2 years ago

    Preview Card

    1
    Arlagonix•420
    @arlagonix
    Posted over 2 years ago

    Looks awesome! Woah, you absolutely nailed it!

  • Lucas Matheus•400
    @Lukiticas
    Submitted almost 3 years ago

    countries with map, pagination and news!!!

    #react#react-router#styled-components#fetch
    2
    Arlagonix•420
    @arlagonix
    Posted almost 3 years ago

    I don't know how to ignore the errors, but the solution looks great!

    • Smooth animations
    • A map
    • A list of related news articles
    • Loader showing when the page is loading

    Splendid!

  • Fat•910
    @Fahatmah
    Submitted almost 3 years ago

    Faq Accordion using HTML, CSS & JS

    1
    Arlagonix•420
    @arlagonix
    Posted almost 3 years ago

    It looks awesome! I love it!

    • The layout is responsive and looks nice on different resolutions. Although on the smallest resolution text inside of the 1-st, 3-rd sections seem to not have enough space

    • Awesome animations! Looks very smooth. It looks fantastic that the background also resizes with the frame when you open the details

    • Nice that you made the bold highlight only when the details are opened. It looks better than in the initial design

    • It seems to me that the font size might be a bit bigger. 11px and 14px are a bit small. There is enough space for bigger text: 16px + 24px for example

    • I think it would look better if your stylized a bit more the part "Challenge by ... Coded by ...". It looks a bit out of place. I'd make the text bigger, changed the font family, the font color

    • Also changing gradient background might fit here perfectly (as soon as it's initially already some sort of gradient). Here's a guide from Kevin Powell channel: https://www.youtube.com/watch?v=f3mwKLXpOLk&ab_channel=KevinPowell. It's quite easy: make background size big and move it from side to side with an infinite animation

    • Another way to enhance the solution is to probably add some icons to the left of the questions. There are not so many of them, but that might make the text easier to look through

    Marked as helpful
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

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