P

Nakoya Wilson

@nakoyawilson
Trinidad and Tobago
570Points

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

Latest Solutions

Latest Comments

    • HTML
    • CSS
    • JS

    Loopstudios landing page - React, Sass, BEM, hooks, grid, flexbox

    1
    P
    Nakoya Wilson570 | Posted about 3 hours agocommented on mattreee's "Loopstudios landing page" solution

    I took a look at your code and I'm not familiar with Sass but I noticed in your main.css file for your media query you have __icons { ... } instead of .footer__icons {... } and I downloaded your code and ran it using .footer__icons {... } and that centered the icons for me.

    0
    • HTML
    • CSS

    Testimonials grid section CSS

    1
    P
    Nakoya Wilson570 | Posted about 4 hours agocommented on Scott Wilder's "Testimonials grid section" solution

    Instead of doing a 3 column grid and specifying widths, I would suggest doing a 4 column grid and using span 2 for the wider boxes. I experimented with your code and used this to achieve the layout.

    .flex-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto auto;
        max-width: 70rem;
        gap: 10px;
        align-items: stretch;
      }
    
      .boxes {
        margin: 0;
      }
    
      .box-1 {
        grid-column: span 2;
      }
    
      .box-4 {
        grid-column: span 2;
      }
    
      .box-5 {
        grid-column: 4 / 5;
        grid-row: 1 / 3;
      }
    
    0
    • HTML
    • CSS

    HTML CSS

    1
    P
    Nakoya Wilson570 | Posted about 5 hours agocommented on Luis Yps Fdez's "Stats preview card component" solution

    You can try using the mix-blend-mode css property to add the accent color to the image. I would suggest wrapping the picture in a div and adding the violet color as a background and then adding mix-blend-mode and opacity to your picture_img class. I tried adding the violet color as a background to your picture class and it worked for desktop but gave a weird effect on mobile which is why I suggested wrapping the picture in a div but you can experiment with it.

    .wrapper_div {
        background-color: var(--softviolet);
    }
    
    .picture_img {
        ...
       mix-blend-mode: multiply;
       opacity: 0.75; 
       border-radius: 10px 10px 0 0;
    }
    
    0
    • HTML
    • CSS

    Project

    2
    P
    Nakoya Wilson570 | Posted about 16 hours agocommented on debu100's "Stats preview card component" solution

    Hi debu100. I took a look at your github repository for this project and since you have an index.html file you shouldn't get a 404 error if you deploy to github. The reason you were getting the 404 error on your NFT preview card project is because you don't currently have an index.html file in that repository.

    The reason your image is not showing up on codepen is because your image is not currently hosted anywhere. You will need to upload your image to github and ensure you are using the correct path for the source for it to show up when your page is deployed.

    0
    • HTML
    • CSS
    • JS

    My Social Media Dashboard

    3
    P
    Nakoya Wilson570 | Posted about 20 hours agocommented on Quang Hung Pham's "Social media dashboard with theme switcher" solution

    You can try adding your youtube class to the selector to specifically target the youtube paragraph instead of using inline styling:

    .youtube .card-footer p {
        color: var(--bright-red);
    }
    
    0