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

Nathan Ray

@NathanRayMColumbus, Ohio USA400 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

I’m currently learning...

HTML CSS JavaScript

Latest solutions

  • Bento Grid - CSS Grid


    Nathan Ray•400
    Submitted about 1 month ago

    As always, I’m committed to growing in all areas of my development journey, and I welcome any feedback that can help me improve.


    0 comments
  • Testimonials grid section - CSS Grid


    Nathan Ray•400
    Submitted about 1 month ago

    I’m always looking for ways to improve my code—whether it’s enhancing the efficiency of my HTML and CSS, improving semantics, or making layouts more responsive.


    0 comments
  • Fylo data storage component - Responsive Design With a Little JS.


    Nathan Ray•400
    Submitted about 2 months ago

    I’m always looking for ways to improve my code — whether it’s making it more semantic, improving responsive layout, or enhancing organization in general. Any constructive feedback is welcome.


    0 comments
  • Clipboard landing page - Using Responsive HTML , CSS, and a little JS


    Nathan Ray•400
    Submitted 2 months ago

    I'm looking to improve overall but for this would appreciate any feedback on the semantics, and how I can more efficiently write my code including the CSS.


    2 comments
  • Blog preview card - HTML & CSS


    Nathan Ray•400
    Submitted 2 months ago

    I'm alway looking to improve so any feedback may be helpful.


    1 comment
  • Social links profile using HTML and CSS


    Nathan Ray•400
    Submitted 3 months ago

    Any feedback is helpful.


    1 comment
View more solutions

Latest comments

  • ekiananta•20
    @ekiananta
    Submitted about 1 month ago

    blog-preview-card-figma

    1
    Nathan Ray•400
    @NathanRayM
    Posted about 1 month ago

    Great work on completing this challenge — your design looks excellent. I have one suggestion that may help enhance the final result. Your layout closely matches the original design, but it is not centered on the X and Y axis of the page. Below is an example of how to achieve this.

    body{
       display: flex;
       justify-content: center;
       align-items: center;
       min-height: 100vh;
    }
    

    Keep up the great work!

  • Sunday Alabi•410
    @iamalabisunday
    Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    Mastering CSS Grid Layout: I used grid-template-areas effectively to create a complex, responsive layout with different box sizes, while maintaining semantic structure and clarity.

    Responsive Design Implementation: I created a clear mobile-first breakpoint using media queries that neatly stacks content for smaller viewports, ensuring accessibility and readability.

    Clean, Scalable Code: My use of CSS custom properties (:root) for colors and font weights makes the project easily maintainable and theme-adaptable.

    Attention to Detail: I carefully styled profile components, typography, and spacing, showing a strong grasp of both layout and design aesthetics

    What challenges did you encounter, and how did you overcome them?

    Aligning Complex Layout with CSS Grid

    • Challenge: I needed to arrange boxes of varying widths (47rem and 22rem) in a 2x2 grid while maintaining equal spacing and visual balance.
    • Solution: I used grid-template-areas along with a fixed-width grid container (70rem) and a 4-column layout (repeat(4, 1fr)). Then, I strategically placed items using grid-area and grid-column to ensure the wider boxes spanned two columns.
    What specific areas of your project would you like help with?

    Open to feedback

    Testimonials grid section

    1
    Nathan Ray•400
    @NathanRayM
    Posted about 1 month ago

    Great work on completing this challenge — your design looks excellent. I have one suggestion that may help enhance the final result. Your layout closely matches the original design, but it appears the grid containers are missing a box-shadow. You can easily address this by applying a box-shadow to your <section> element.

    For Example:

    section{
    box-shadow: 25px 20px 35px 0 hsla(219, 29%, 14%, 0.2);
    }
    

    Keep up the great work!

  • Akande Temilade Kaosarah•10
    @temi2lade
    Submitted about 2 months ago

    resopnsive landing page using CSSgrid

    1
    Nathan Ray•400
    @NathanRayM
    Posted about 2 months ago

    Hello, Great job completing your first project here on Front End Mentor. I have a few suggestions you may find helpful.

    Currently, your image is not showing in your design. There is a small error in your HTML code that is causing this. In your img element, you have an extra / before images. This is causing your image to not show on your page.

    Current Code <div class="box1"><img src="/images/image-qr-code.png" alt=""></div>

    Corrected Code <div class="box1"><img src="images/image-qr-code.png" alt=""></div>

    Also, I see that you currently have all of your styling set up in your HTML. To follow separation of concerns, it is best to have a separate styling sheet for your design.

  • neeta Purohit•160
    @neetaPurohit
    Submitted about 2 months ago
    What specific areas of your project would you like help with?

    I have social media icon images in my footer, and I want their color to change to hsl(171, 66%, 44%) on hover. If anyone has ideas or advice on how to implement this effect cleanly and effectively, I’d really appreciate your help.

    Also, if you have any suggestions for improving my code or other tips, please feel free to share!

    Thanks in advance!

    Responsive Clipboard Landing Page Challenge using HTML & CSS

    1
    Nathan Ray•400
    @NathanRayM
    Posted about 2 months ago

    Great Job on this landing page! To get the social icon SVG's color to change when hovering, You would need to remove the inline fill color from the SVG itself. You can then style the SVG using CSS. Remove the inline style by opening the SVG in a text editor. This will give you the HTML for the SVG like the example below.

    Example: <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" fill="#4C545C" fill-rule="nonzero"/></svg>

    You can see the inline fill color at the bottom of the code. Remove this and then style the SVG in CSS.

    I hope this is helpful. Happy Coding!

    Marked as helpful
  • P
    Nick J•100
    @troy71
    Submitted 3 months ago

    Using CSS Grid

    2
    Nathan Ray•400
    @NathanRayM
    Posted 2 months ago

    Fantastic! Really nicely organized CSS and HTML. Great job!

  • Shakiba•130
    @Shakiba-Alipour
    Submitted 2 months ago

    Blog-Preview-Card

    2
    Nathan Ray•400
    @NathanRayM
    Posted 2 months ago

    Hello, great work!

    You can center your container by using these properties.

    body{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    }
    
View more comments

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