Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
38
Comments
64

Riki Wendri

@F4YYIndonesia1,380 points

Construction Engineer, Entrepreneur, Business Owner, Software Engineer (Future wannabe)

I’m currently learning...

React JS, Redux

Latest solutions

  • REST Countries API using React Styled Components

    #react#styled-components

    Riki Wendri•1,380
    Submitted about 2 years ago

    2 comments
  • Calculator app using React Styled-Components

    #react#styled-components

    Riki Wendri•1,380
    Submitted about 2 years ago

    0 comments
  • Advice generator app using React Styled Components

    #react#styled-components#fetch

    Riki Wendri•1,380
    Submitted about 2 years ago

    1 comment
  • Newsletter signup using React - Styled Components - Formik - Yup

    #react#styled-components

    Riki Wendri•1,380
    Submitted about 2 years ago

    0 comments
  • Todo app using React Styled Components

    #react#styled-components

    Riki Wendri•1,380
    Submitted about 2 years ago

    0 comments
  • Multi-step form using React Styled component - Formik - Yup - ChakraUI

    #react#styled-components#chakra-ui

    Riki Wendri•1,380
    Submitted about 2 years ago

    0 comments
View more solutions

Latest comments

  • yashh247•30
    @yashh247
    Submitted almost 2 years ago

    Newsletter-sign-in-solution

    #bootstrap
    1
    Riki Wendri•1,380
    @F4YY
    Posted almost 2 years ago

    Hi @yashh247,

    Congratulation for successfully completing the challenge...

    There's little suggestion about what you've missed to the given design. Which is when user submits their email address through the form and clicked subscribe button, then the Thank You component will be rendered, displaying the thank you message along with the user's email address that has been inputted instead of just static text @loremcompany.com.

    To achieve the desired behavior, you might need to add JavaScript function, so that the inputted email address is dynamically inserted into the thank you message.

    Hope that could be Helpful. Above all you did very good. Keep happy coding...

  • Keo Lamola•60
    @KeoLamola
    Submitted almost 2 years ago

    NFT-preview-card

    2
    Riki Wendri•1,380
    @F4YY
    Posted almost 2 years ago

    Hi @OekPhlesym,

    Congratulations on successfully completing the challenge, you did very well...

    There is improvement room to make it closer to the given design. Which is appearance of the eye icon overlaying above the equilibrium image when hovering. You can set overlay component and make its absolute position, also set relative position of the image container.

    Then insert it in HTML & CSS, the code snippet could be like this, you might adjust it as you like:

    in HTML:

    <div class="avatar">
        <img src="images/image-equilibrium.jpg" alt="preview">
        <img src="images/icon-view.svg" class="overlay" /> 
    </div>
    

    in CSS:

    .avatar {
       display: flex;
       position: relative;
       justify-content: center;
       align-items: center;
       height: 60%;
       width: 100%;
    }
    .overlay{
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       opacity: 0;
    }
    .overlay: hover{
       opacity: 1;
       background: hsl(178, 100%, 50%, 0.5);
    }
    

    Hope that could be Helpful. Keep happy coding...

  • ArinjayBhola•90
    @ArinjayBhola
    Submitted almost 2 years ago

    CSS Flex Box, Responsive website using Media queries

    1
    Riki Wendri•1,380
    @F4YY
    Posted almost 2 years ago

    Hi @ArinjayBhola,

    Congratulation for successfully completing your 1st challenge, you did great...

    Little suggestion to make it closer to the given design, which is when user submits their email address through the form and clicked subscribe button, then the Thank You / Success component will be rendered, displaying the thank you message along with the user's email address that has been inputted instead of just static text ash@loremcompany.com.

    To achieve the desired behavior, you might need to add JavaScript function, so that the inputted email address is dynamically inserted into the thank you message.

    Hope that could be Helpful. Keep happy coding...

  • P
    peipeix2•110
    @peipeix2
    Submitted almost 2 years ago

    Product Review Card Component

    1
    Riki Wendri•1,380
    @F4YY
    Posted almost 2 years ago

    Hi @peipeix2,

    Congratulation for successfully completing the challenge, nicely done...

    However, when on mobile screen view the image's not showing. In your code, the src attribute for the mobile screen size is specified as src="../images/image-product-mobile.jpg". The use of the .. in the path indicates that the image file is located in a directory one level above the current directory.

    Try using src="./images/image-product-mobile.jpg" is the way to specify the relative path to the image file when it is located in the images folder directory within the same directory as the HTML file. By using this path, the browser will display the image-product-mobile.jpg.

    Hope that could be Helpful. Keep happy coding...

    Marked as helpful
  • Rel Guzman•20
    @rgap
    Submitted almost 2 years ago

    QR Code Component using CSS, BEM, Flexbox

    #bem
    1
    Riki Wendri•1,380
    @F4YY
    Posted almost 2 years ago

    Hi @rgap,

    Congratulation for successfully completing your challenge, you did very well...

    Based on the CSS code you provided, it seems that the width of the .box element is set to 20%. This means that the width of the .box element will be 20% of its parent container's width. When displaying on a mobile screen, it can cause the .box element to shrink and the text within it to overflow. This can result in the text not fitting within the container and appearing outside of it.

    To fix this issue, you might consider using media queries to adjust the width of the .box element for different screen sizes. Such like CSS code snippet below:

    @media (max-width: 480px) {
        .box {
            width: 80%; /* Adjust the width as per your requirement */
        }
    }
    

    You can customize the styles for different screen sizes and ensure that the text fits within its parent container without overflowing.

    Hope that could be Helpful. Keep happy coding...

  • Hatem Gw•150
    @HatemGw
    Submitted almost 2 years ago

    newsletter-sign-up-with-success-message-main

    #sass/scss#solid-js
    1
    Riki Wendri•1,380
    @F4YY
    Posted almost 2 years ago

    Hi @HatemGw,

    Congratulation for successfully completing the challenge...

    There's suggestion to make it closer to the given design, which is when user submits their email address through the form and clicked subscribe button, then the Thank You / Success component will be rendered, displaying the thank you message along with the user's email address that has been inputted instead of just static text ash@loremcompany.com.

    To achieve the desired behavior, you might need to add JavaScript function, so that the inputted email address is dynamically inserted into the thank you message.

    Hope that could be Helpful. Above all you did great. Keep happy coding...

    Marked as helpful
View more comments
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