Skip to content
OverviewSolutions
20
Comments
18
Nathan Ray
@NathanRayM

All comments

  • Nathan Ray•400
    @NathanRayM

    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•150
    @iamalabisunday
    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

    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!

  • Nathan Ray•400
    @NathanRayM

    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
    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

    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
  • Nathan Ray•400
    @NathanRayM

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

  • Nathan Ray•400
    @NathanRayM

    Hello, great work!

    You can center your container by using these properties.

    body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
  • Egor Pyankov•60
    @egorpya
    What are you most proud of, and what would you do differently next time?

    First of all, I am really proud of myself for taking the first step in this journey. I enjoy this feeling of tinkering with code and I do not understand how I didn't returned earlier!

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

    As always, centering a div is a problem. The Problem. My first idea was using Flexbox, but then I was stuck with responsitivity issues. So, I found this solution:

    .please_for_gods_sake_just_center_already {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

There were problems with the QR code image. Still learning how to deal with \<img> scaling. Right now I did it like this:

```css
img {
  width: auto;
  height: auto;
  max-width: 300px;
  max-height: 300px;
}

    Viewport centeted QR-code component

    #accessibility
    1
    Nathan Ray•400
    @NathanRayM

    Hello, this looks really good. Great job. Here is another way that you can center the div.

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

    I hope you find this helpful.

    Marked as helpful
  • Nathan Ray•400
    @NathanRayM

    Hello,

    Great job! This looks really good. I have a suggestion to help you get the right side closer to the design. Add a background color to your image container and then use mix-blend mode: multiply, and opacity on the actual image.

    For Example:

    .image {
  background-color: hsl(277, 64%, 61%);
}

img {
  mix-blend-mode: multiply;
  opacity: 0.75;
}
  • Nathan Ray•400
    @NathanRayM

    Hello, Really great job! I have a suggestion that you may find helpful. Currently, it appears that your background image is repeating. You can remedy this by applying background-repeat to no-repeat. I hope this is helpful.

    Example:

    body{
background-image: url(./images/pattern-  background-desktop.svg);
background-size: cover;
background-repeat: no-repeat;
}
  • waghmare-amit•70
    @waghmare-amit
    What are you most proud of, and what would you do differently next time?

    I am most proud of not giving upon the project! I admit that I took so long to complete the project, the reason for this is - College work (from the last month, we had so much college work to do and then the practicals and final exam). I could have given time (even if little), since I realised that I didn't prepare well for exams. Next time, I would make myself do coding even if there are college works to do.

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

    I was not able to make the custom 'C' logo, and could not write over an image and did not know how to place a text and an image side-by-side. The solution for all these things were found on the internet and AI.

    The Webpage is not totally responsive, I will learn that too!

    What specific areas of your project would you like help with?

    I would want some help on how to make the webpage responsive and how to give a 3D look to buttons.

    Clipboard Landing Page

    1
    Nathan Ray•400
    @NathanRayM

    Hello, nice job getting this one done. I have a few suggestions that you may find helpful.

    To give the buttons that 3d look that you are looking for. Give them a border bottom and a box shadow.

    For example:

    .topsidebuttons .button1 {
    border-bottom: 2px solid hsl(171, 66%, 39%);
    box-shadow: 0px 8px 18px hsla(171, 66%, 44%, 0.40);
}
.topsidebuttons .button2 {
   border-bottom: 3px solid hsl(233, 100%, 62%);
   box-shadow: 0px 8px 18px hsla(201, 11%, 66%, 0.50);
}

    Also, instead of giving your buttons a fixed width and height try using padding to give them their width and height. This will keep them more responsive.

    For Example:

    .topsidebuttons .button1{
   padding: 16px 40px 16px 40px;
}

    I hope you find this helpful.... and happy coding!

    Marked as helpful
  • P
    Akshata•210
    @Akshatasarawgi
    What are you most proud of, and what would you do differently next time?

    I am proud to have been able to get the styling as close as possible to the original challenge. This is a great project to practice the styling part.

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

    I learnt how to add the focus, active and hover state to the buttons. It was a challenge at first but I was able to learn about it and use it in my code.

    Social Links Profile

    1
    Nathan Ray•400
    @NathanRayM

    Great Job!

  • Nathan Ray•400
    @NathanRayM

    Hello! Great job on your first challenge. It looks like the QR code may not be showing due to the way you have it in your html. In your github you don't have an images folder but have your html pointing to an images folder.

    Here is what you currently have.

    <img class="container__qr-code" src="images/image-qr-code.png" alt="QR-code">

    You can change it to this and it should resolve the issue.

    <img class="container__qr-code" src="image-qr-code.png" alt="QR-code">

    Another option would be to add an images folder to the main root in github and place the QR code picture in the folder.

    I hope this helps.

  • Nathan Ray•400
    @NathanRayM

    Hello,

    Really great job! I have a suggestion that you may find helpful. Currently, it appears that your background image is repeating. You can remedy this by applying background-repeat to no-repeat. I hope this is helpful.

    Example:

    body{
background-image: url(./images/pattern-  background-desktop.svg);
background-size: cover;
background-repeat: no-repeat;
}
    Marked as helpful
  • Nathan Ray•400
    @NathanRayM

    Hello,

    Great job! I have a suggestion that you may find helpful. Instead of using margin to space the paragraphs, you can set the div container to either display flex or grid, use column, and then use gap to create even spacing between them. I hope this helps.

    Example:

    div{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
    Marked as helpful
  • Nathan Ray•400
    @NathanRayM

    Hello,

    Really nice job! I have a suggestion for the image that may be helpful to you. Instead of using the overlay, in CSS You could try setting the background color to the container that the image is in. Then, add the mix-blend mode to your image in CSS and set it to multiply and adjust the opacity.

    Example:

    .image-container{
background-color: hsl(277, 64%, 61%);
}
img{
mix-blend-mode: multiply;
opacity: 0.75;
}
    Marked as helpful
  • Nathan Ray•400
    @NathanRayM

    Hello,

    Great work! I have some suggestions that you may find helpful. Instead of using overlay for the image and background color, in CSS You could try setting the background color to the container that the image is in. Then, add the mix-blend mode to your image in CSS and set it to multiply and adjust the opacity. I hope this helps.

    example:

    .image-container{
background-color: hsl(277, 64%, 61%);
}
img{
mix-blend-mode: multiply;
opacity: 0.75;
}
    Marked as helpful
  • Nathan Ray•400
    @NathanRayM

    Hello, Your design looks good on mobile devices that this design was based off of. Nice work! The size of the challenge itself is small enough that you shouldn’t need a media query in terms of screen size. You can check how your design will look by using the dev tools in your browser. Here is an article on how to do so. I hope this helps.

    In Chrome: In DevTools, click Toggle Device Toolbar or press Ctrl+Shift+M (or Cmd+Shift+M on macOS). In Edge: In DevTools, click Toggle device emulation or press Ctrl+Shift+M (or Cmd+Shift+M on macOS)

  • Nathan Ray•400
    @NathanRayM

    Hello, In CSS You could try setting the background color to the container that the image is in. Then, add the mix-blend mode to your image in CSS and set it to multiply and adjust the opacity.

    .image-container{
background-color: hsl(277, 64%, 61%);
}
img{
mix-blend-mode: multiply;
opacity: 0.75;
}
    Marked as helpful