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

konji85

@konji8580 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!

Latest solutions

  • FourCardsPageUsingFlexBox


    konji85•80
    Submitted about 1 year ago

    my doubts with every challenge are the margins, paddings and the font-sizes. I try to estimate it every time from the design images but i am not sure is this the correct way or there is another.


    1 comment
  • ProductPreviewCardusingGridandFlexbox


    konji85•80
    Submitted about 1 year ago

    any advice for design updating would be greatly appreciated


    1 comment
  • RecipePage


    konji85•80
    Submitted about 1 year ago

    responsiveness of the page


    1 comment
  • SocialLinksProfileUsingFlexBox


    konji85•80
    Submitted about 1 year ago

    font-sizes and setting the margins


    2 comments
  • BlogCard


    konji85•80
    Submitted about 1 year ago

    specifying the widths and the font-sizes


    1 comment
  • QR_Code_Mentor


    konji85•80
    Submitted about 1 year ago

    making the page responsive


    2 comments

Latest comments

  • sreos•110
    @sreos
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    S

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

    S

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

    Placing items on the desktop

    Four Card Feature Section With CSS

    1
    konji85•80
    @konji85
    Posted about 1 year ago

    hello, good job i saw your design and your code. i have noticed a few things. firstly when you switch to the mobile display there is no margins between the cards. you can add margin to the card(bottom or top and buttom).also it breaks between the 1023px - 700px. i think you could use

     @media (max-width: 1024px):
    

    instead of

      @media (min-width: 1024px):
    

    secondly, i see that you give each card a class name (yellow-card, cyan-card, blue-card, red-card) which is correct to set the top border color for each but you have replicated the other attributes in each class. instead you could give all a general-name('card' for example)

                 <div class="card  blue-card">
    

    then set the style

        .card {
        border: 1px solid white;
        padding: 20px;
        width: 300px;
        background-color: white;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    

    and then a unique name for each card to set the differences like the border color

       .cyan-card {
        border-top: 5px solid var(--cyan);
       }
     .yellow-card {
        border-top: 5px solid var(--yellow);
      }
     .red-card {
        border-top: 5px solid var(--red);
      }
      .blue-card {
        border-top: 5px solid var(--blue);
       }
    

    for placing the image to the right bottom corner of the card instead of adding padding i think it is possible to use :

           align-items:end;
    

    and one last thing you could reduce the width of the card a little to make it much like the design

    i wish you happy day

  • Samuel Nerat•120
    @Samuelnerat
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    The design

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

    The image on the large screen didn't align at some point I used width property to correct it

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

    i would any correction that could be made from the general code.

    Product Preview Card with HTML & CSS

    1
    konji85•80
    @konji85
    Posted about 1 year ago

    generally the design is ok . you can make it even better. my first notice that you made all the borders rounded. you could select any corner you wanted and set the border radius. for example:

                border-top-left-radius: 10px;
                border-top-right-radius: 10px; 
    

    for the mobile design it is ok. when changing the width the ratio between the image and the content is not as shown in the design. one option is to set the containers: .text and .images widths to 50% for each

                  .text{width:50%;}
                  .images{width:50%;}
    

    and then adjust the elements inside it to the suitable ratio

    another option which i think is better is to change the display to grid

         main{
                      display:grid;
                       grid-template-columns: repeat(2,1fr);
                    }
    

    this will split the main container into two columns with the same width.then set the images container to fit in the grid width (width:100% and height:100%) and finally set the image and the alternative image to

                       height:100%;
                       max-width:100%;
    

    i hope this could help in making some changes and i wish you happy journey

    Marked as helpful
  • Omlan•110
    @omlan99
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I am happy to bring the design with code not accurate as pixel by pixel but the code can match the design at certain level.

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

    Challenges was to the find accurate value of padding, margin and width. I searched some previous reference who had done the projects before. Discord was helpful with that with that reference I moved forward on the project with my idea.

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

    It will be helpful to know the mistake I have made on this project. And what could be done better or more accurate with more efficiency.

    Recipe Page

    1
    konji85•80
    @konji85
    Posted about 1 year ago

    Good job. everything is almost fine. you can optimize the code by reviewing the margins and the font sizes. but generally, it is well organized. keep it up

  • Shubham81617•30
    @Shubham81617
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    proud of everything and will keep everything same

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

    none

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

    none

    social links profile

    1
    konji85•80
    @konji85
    Posted about 1 year ago

    good job. you can make it even better by noticing for the margins and the padding.

  • kabir lamin•20
    @kabman
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    close to style guide

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

    need to complete faster

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

    none

    basic html and css,used google fonts as specified in the style guide

    1
    konji85•80
    @konji85
    Posted about 1 year ago

    Good job. you can make it better by noticing to the sizes and the elements. the font used is not similar to the design.

  • Mik2nd•360
    @mik2nd
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    i can finish it

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

    qr image not resize in small px, then i put width 100%

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

    maybe any option options props than 100% width prop?

    width 100% for image

    1
    konji85•80
    @konji85
    Posted about 1 year ago

    hello, good work . i have some ideas may help. you could add a margin to the container to keep it in the middle . it could be a percentage. 10% top and bottom and 30% left and right for example. also try to keep the units similar in the design it could be easy to read. for example use the percentage or the pixels or the ems and rems. try to avoid the inches unless you are completely comfortable with. thanks

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