Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hello! 🖐️ Well done on completing the challenge

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in font color and shadow but still good
    2. html is pretty good, not too nested 👍
    3. Responsive until galaxy fold screen size 👌
    4. CSS Naming is also good, represent what is it for, like <div class="details"> for details section

    My Feedback:

    • I suggest you use html semantic convention, for example <div class="container__ext"> to <main class="container__ext">, it will make it clearer, and will improve seo if you want to submit your website to google, but you place h1 and p correctly 👌, i recomended this article: here
    • You can set font color #8BACD9 for class : .text .second__p .third__p
    • Shadow is too bold, you can use this to make it more smooth box-shadow: 0 25px 50px #00000018

    anyways overall is good, nice solution, hope it's helpful 🙌

    Marked as helpful

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hello 👋, welcome to front-end mentor community, the way you submitted is not correct.

    • you must deploy your result first into live, you can read here
    • don't compress your result to zip

    if you have problems, you can contact me via linkedin or other members of this community, we are welcome 🙌.

    we are also studying here, so don't hesitate to ask, hope it's helpful 👌.

    1
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hello! 🖐️ Well done on completing the challenge

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in scale and background but still good
    2. html is pretty good, not too nested 👍

    My Feedback:

    • I suggest you use html semantic convention, for example <div class="container"> to <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: he

    • I don't think css naming is right, because it still doesn't represent what it's for

      i think this more suitable:

      • qr_code → container
      • imgqr → img or img-qr
      • image_content → content or description

    • it’s not too responsive on mobile, to fix it change style into this:

      @import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300&display=swap');
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        background-color: hsla(195, 43%, 91%, 0.72);
        font-family: 'Outfit', sans-serif;

        /* to make qr code card center */
        min-height: 100vh;
        display: grid;
        place-items: center;

    }
    .qr_code {

        /* use padding in here instead in imgqr to make padding equal beteen image and content */
        padding: 16px;

	/* height: 484px; */
    /* set dynamic width */
	width: 100%;
    /* add max width */
    max-width: 335px;

    /* remove margin */
    /* margin: 0 auto; */
	background-color: white;

    /* use relative instead */
	position: relative;
	/* top: 19%; */
	/* left: 38%; */
    border-radius: 12px;
}
.qr_code img {
    /* remove height */
	/* height: 290px; */
    /* use dynamic width */
	width: 100%;
	border-radius: 8px;
}

/* you can remove this */
.imgqr {
	/* padding: 28px; */
    
    /* remove margin */
	/* margin-left: -12px; */
	/* margin-top: -14px; */
}

.image_content h1{
    font-size: 22px;
    font-weight: bolder;

    /* change padding */
    padding: 0 10px 10px 10px;

    /* remove this */
    /* margin-top: -25px; */
    text-align: center;
    
}
.image_content p{
    font-size: 16px;
    text-align: center;
    color:  hsl(210, 8%, 56%);
}

    • Maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )

    you can contact me in my linkedin or reply this if have question 👐.

    anyways overall is good, nice solution, hope it's helpful 🙌

    Marked as helpful

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hi.. 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in position and scale but still good
    2. HTML is pretty good, not too nested and combination of semantic HTML👍
    3. Responsive until galaxy fold screen size (280 x 653)px 👌
    4. CSS Naming is also good, represent what is it for, like <div class="price"> for price section

    My Feedback:

    • Javascript is not needed in this solution, you can use only css on view hover

      • 1 - Remove main.js

      • 2 - change and add this to style.css

        .card_container .banner_image_container .hover_state {
  /* display: none; */
  position: absolute;
  width: 250px;
  height: 250px;
  margin-left: 25px;
  margin-top: -16rem;
  border-radius: 10px;
  background-color: var(--cyan-color);
  /* set opacity to 0 instead display none */
  opacity: 0;
  /* add transiton to make it more smooth */
  transition: opacity 0.3s ease-in-out;
}

.card_container .banner_image_container .hover_state:hover {
  opacity: 0.3;
  cursor: pointer;
}

    • Using grid you can make it center, change body and card-container in style.css to :

      body {
  background: var(--main-background);
  color: white;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* card container */
.card_container {
  background: var(--card-dark-blue);
  width: 300px;
  height: 500px;
  border-radius: 10px;
  margin: auto;
  box-shadow: 0px 2px 10px 0px var(--card-dark-blue);
  /* remove margin */
  /* margin-top: 50px; */
}

    Overall, well done - your innovative approach using js is actually good! 👏, hope it's helpful 🙌

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hi.. 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in width but still good
    2. html is pretty good, not too nested 👍
    3. SCSS Naming is also good, represent what is it for, like <div class="prices"> for prices section
    4. SCSS folder well structured too, i like it, but my opinion you can build scss into assets to, example to /assets/style.css

    My Feedback:

    • Maybe you can set width:50% to > md screen in .left , to make sure width is still 50% in any browser, because sometime each browser have different characteristic
    • I suggest you use html semantic convention, for example <div class="container"> to <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here
    • Maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )

    anyways overall is good, nice solution, hope it's helpful 🙌

    Marked as helpful

    1
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hello! 🖐️ Well done on completing the challenge – you did it! 🌟

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in scale but still good
    2. html is pretty good, not too nested with combination semantic HTML 👍
    3. CSS Naming is also good, represent what is it for, like <div class="plan"> for plan section

    My Feedback:

    • Is not too responsive on screen < 380px, to fix it you can add flex-wrap: wrap in .plan

    • you can seperate file by folder to be more structured, for example:

      public/
├─ images/
│  ├─ pattern-background-desktop.svg // and etc
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    In summary, great work and an impressive solution - keep it up!, hope it's helpful 👍

    1
  • rathmanjonathan• 30

    @rathmanjonathan

    Submitted

    What I found difficult was the responsive aspect of it. Such as what do I add to what. I do have questions about best practices such as what I should generally do when approaching something in css like if I should apply a certain property a certain way every time.

    QR CODE COMPONENT

    3

    dimar hanung• 560

    @dimar-hanung

    Posted

    Hello 👋, Well done on completing the challenge! 🎉

    I have some interest and feedback with your code

    That i like:

    1. HTML is pretty good, not too nested 👍
    2. CSS Naming is also good, represent what is it for, like <div class="container"> for wrap another element / html tag
    3. Responsive until galaxy fold screen size 👌

    My Feedback and about your question:

    • I suggest you use html semantic convention, for example <div class="container"> to <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here

    • You’re forgot to push images maybe? or have problem to push the image to github? it causing image is not appear

    • You can make it center by adding min-height:100vh, make body styles into this

      body {
    background-color: hsl(212, 45%, 89%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

    • You can seperate file by folder to be more structured ( just developer preference, not a rule ), for example:

      public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    anyways overall is good, nice solution for first chellange, hope it useful 🙌

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hello 👋, Well done on completing the challenge! 🎉

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in position and font because footer, but still good 👐
    2. 📁 Folder is well structured, i like it
    3. html is pretty good, not too nested 👍
    4. CSS Naming is also good, represent what is it for, like <div class="card"> for card section
    5. Responsive until galaxy fold screen size 👌

    My Feedback:

    • You can make it center by adding min-height and remove set margin:0 to fix overflow, make body styles into this

      body {
  font-size: 15px;
  font-family: "Outfit", sans-serif;
  background-color: hsl(212, 45%, 89%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  margin: 0;
  min-height: 100vh;
}

    anyways overall is good, nice solution, hope it useful 🙌

    Marked as helpful

    0
  • Olebogeng Sebogodi• 80

    @Olebxgeng

    Submitted

    Which areas of your code are you unsure of? Unsure of whether I formatted my css correctly. Any advice/feedback welcome :)

    HTML CSS QR component

    1

    dimar hanung• 560

    @dimar-hanung

    Posted

    Hello 👋, Great job on complete the challenge! 🎉

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in position and font because footer, but still good
    2. html is pretty good, not too nested with combination semantic html 👍
    3. CSS Naming is also good, represent what is it for, like <div class="qr-code"> for qr code section
    4. Responsive until galaxy fold screen size 👌

    My Feedback:

    • Maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )

    • You can make it center using grid, make body styles into this

      body {
  font-family: "Outfit", sans-serif;
  background-color: hsl(212, 45%, 89%);
  margin: auto auto;
  display: grid;
  place-items: center;
  min-height: 100vh;
}

    • you can seperate file by folder to be more structured ( just developer preference, not a rule), for example:

      public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    anyways overall is good, nice solution, hope it useful 🙌

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hello 👋, Amazing job on conquering the challenge! 🌟

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in scale and font but not bad
    2. html is pretty good, not too nested with combination semantic html 👍, just little mistake you can remove useless white spaces between body and main
    3. Responsive until galaxy fold screen size 👌

    My Feedback:

    • Maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )
    • You have import font, but not using it, you can add font-family: "Vollkorn", serif; in body styles

    anyways overall is good, nice solution, hope it useful 🙌

    Marked as helpful

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hello 👋, Well done on completing the challenge – you did it! 🌟

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in scale and color but still good
    2. html is pretty good, not too nested 👍
    3. CSS Naming is also good, represent what is it for, like <div class="card"> for card section

    My Feedback:

    • I suggest you use html semantic convention, for example add <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here
    • for card section i’m prefer to use class instead id, because card is component which may be used again and again.
    • In galaxy fold (280px x 653px) is not to responsive, you can fix it by using dynamic width in image
      • remove margin in #card add padding 15px in #card
      • remove padding in .image-qr-code and add width: 100%; in .image-qr-code

    anyways overall is good, nice solution, hope it useful 🙌

    Marked as helpful

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hello! 🖐️ Well done on completing the challenge 🎉

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in scale but still good
    2. html is pretty good, not too nested 👍
    3. Responsive until galaxy fold screen size 👌
    4. CSS Naming is also good, represent what is it for, like <div class="card"> for card section

    My Feedback:

    • I suggest you use html semantic convention, for example <div class="container"> to <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here

    • you can seperate file by folder to be more structured, for example:

      public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    anyways overall is good, nice solution, hope it useful 🙌

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hi.. 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different because footer, but no problem
    2. html is pretty good, not too nested and combination with semantic html 👍
    3. Responsive until galaxy fold screen size 👌

    My Feedback:

    • maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )

    • you can seperate file by folder to be more structured ( but is just developer preference, not a rule ), for example:

      public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    anyways overall is good, nice solution, hope it useful 🙌

    0
  • ZaiinabM• 30

    @ZaiinabM

    Submitted

    Hello guys, I just completed the order summary project. I struggled with positioning and sizing my divs. Also couldn't get the background image to work/display. Kindly check it out and review where corrections are necessary. Thank you.

    Order summary component using Flex

    1

    dimar hanung• 560

    @dimar-hanung

    Posted

    Hi.. 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I really appreciate the well-structured folder organization. 👌
    2. CSS Naming is also good, represent what is it for, like <div class="plan"> for plan section

    My Feedback:

    • I noticed that you're missing a closing </div> tag for the div with the class "container". Please add the closing </div> tag right above the </body> tag to fix the issue.
    • I suggest you use html semantic convention, for example <div class="container"> to <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here
    • maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )

    About your question:

    • To fix the background image issue, try using the ./ path notation for the image URL in your CSS. This will look for the image in the current directory. Change your body background property to:

      body{
    background: url(./images/pattern-background-mobile.svg), hsl(225, 100%, 94%);
}

    • you can use grid for simple centering div content ( Don't forget the issue earlier, put the closing tag above the closing body tag first )

      .container{
 min-height: 100vh;
 display: grid;
 place-items: center;
}

    anyways overall is good, nice solution, hope it useful 🙌

    Marked as helpful

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hi.. 👋, Congrats completing this challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in font scale and position, but still good
    2. HTML is pretty good, not too nested 👍
    3. Responsive until galaxy fold screen size 👌
    4. CSS Naming is also good, represent what is it for, very clear 👐

    My Feedback:

    • I suggest you use html semantic convention, for example <div class="container"> to <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here

    • Maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )

    • You can seperate file by folder to be more structured, for example:

      public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    • To make it center, you can add this is in body style

      display: grid;
place-items: center;

      and remove footer, or move footer to inside container

    but overall is good, nice solution, hope useful 🙌

    Marked as helpful

    0
  • zMitchC• 30

    @zMitchC

    Submitted

    Hi guys! This is my solution.

    There are two things I'm note sure about: The first thing is the code optimization, to be more simple avoiding repeat in the code.

    Secondly, I don't know if I've written well the README file. Is that clear to understand?

    Feel free to give me feedbacks and tips. I'm happy to learn new things that can improve my works! :)

    Container with QR Code using HTML and CSS

    3

    dimar hanung• 560

    @dimar-hanung

    Posted

    Hi.. 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in scale but still good
    2. html is pretty good, not too nested 👍
    3. Responsive until galaxy fold screen size 👌
    4. CSS Naming is also good, represent what is it for, but in my opinion don't use abbreviations, because the important thing is easy to understand, instead class="qrcode-ctnr" i’ts ok to be class="qrcode-container" , it looks a bit long, but the main thing is easy for others to understand

    My Feedback:

    • I suggest you use html semantic convention, add <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here
    • you can seperate file by folder to be more structured, for example:
    public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    About your question

    • You handle it well, like in here:

      .qrcode-title, .qrcode-par{
    font-family: 'Outfit', 'sans-serif';
    text-align: center;    
}

      so it more less repetitive, nice 👍

    • The README.md was clear, just little mistake like whitespace in image too long and some typo like in section Afer that, to get rounded corners I use border-radius: 10px., but I understand what you mean like progress, technology used, etc

    and finally overall is good, nice solution, hope it useful 🙌

    Marked as helpful

    1
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hi.. 👋, Congrats completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different scale but still good 👐
    2. html is pretty good, not too nested and with combination semantic HTML👍

    My Feedback:

    • it’s good in normal laptop, but in 1920px it’s not center, because you set max-width:1440px , remove max-width or add margin: 0 auto (make it center harizontal) will fix it
    • You can seperate file by folder to be more structured, for example:
    public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    overall is good, nice solution, hope it useful 🙌

    Marked as helpful

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hi.. 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in font scale but still good
    2. html is pretty good, not too nested and with combination semantic HTML👍
    3. Responsive until galaxy fold screen size 👌

    My Feedback:

    • Maybe you can use tools like prettier to format your code to be more beautiful ( TIP: set prettier configuration to format on save, make it easier )
    • Give html class naming is recomended, this can prevent style conflict in future, but in this case it is not necessary, so it's ok 🙌
    • You can seperate file by folder to be more structured, for example:
    public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    overall is good, nice solution, hope it useful 🙌

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hi.. 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different in scale but still good
    2. html is pretty good, not too nested 👍
    3. Responsive until galaxy fold screen size 👌
    4. CSS Naming is also good, represent what is it for, like <div class="card"> for card section

    My Feedback:

    • I suggest you use html semantic convention, for example <div class="container"> to <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here

    • you can seperate file by folder to be more structured, for example:

    public/
├─ images/
│  ├─ qr-code-image.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    anyways overall is good, nice solution, hope it useful 🙌

    Marked as helpful

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hello.. 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. html is pretty good, not too nested with combination of semantic HTML👍
    2. class naming is also good, represents its use for what 👌

    My Feedback:

    • The shadow is too bold
    • You can remove or make it have some color in bottom footer, so it looks mixed
    • You can seperate file by folder to be more structured, for example:
    public/
├─ images/
│  ├─ illustration-hero.png
│  ├─ pattern-background-mobile.svg, etc..
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    anyways overall is good, nice solution, hope it useful 🙌

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hi There! 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code 🙌

    That i like:

    1. I appreciate the similarity of your results with the design, only slight difference in scale

    My Feedback:

    • I suggest you use html semantic convention, for example <div class="kontejner"> to <main class="container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here

    • Your css naming still doesn't represent its use, for example <h3 class="tekst1">Improve your f ... can be <h3 class="title">Improve your f ...

    • Your result is not responsive enough, for fix that add this in head section

      <meta name="viewport" content="width=device-width, initial-scale=1.0" />

      remove this in .kontejner

      margin-left: 800px;
margin-right: 800px;

      and add this in .kontejner

       max-width: 256px;
 margin: 0 auto;

    • you can seperate file by folder to be more structured, for example:

    public/
├─ images/
│  ├─ image-qr-code.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    anyways overall is good, nice solution, hope it useful 🙌

    Marked as helpful

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hi.. 👋, Congratulations on completing the challenge 🎉 .

    I have some interest and feedback with your code

    That i like:

    1. I appreciate the similarity of your results with the design, a bit different but still good
    2. html is pretty good, not too nested 👍

    My Feedback:

    • I suggest you use html semantic convention, for example <div class="main-container"> to <main class="main-container">, it will make it clearer, and will improve seo if you want to submit your website to google, i recomended this article: here

    • Your css naming still doesn't represent its use, for example <div class="item2">Proceed to payment</div> can be <button class="button-primary">Proceed to payment</button>

    • you can seperate file by folder to be more structured, for example:

    public/
├─ images/
│  ├─ illustration-hero.png
│  ├─ pattern-background-mobile.svg, etc..
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html

    anyways overall is good, nice solution, hope it useful 🙌

    Marked as helpful

    1
  • Ruth Joy Tolentino• 10

    @ruthjoy76

    Submitted

    ♥♥♥ Hello, Frontend Mentor community ♥♥♥

    This is my solution for the QR Code Component Challenge.

    I tried my best to create as closer to the actual design as possible. Make the code clean as much as possible

    All feedback is highly appreciated!

    ♥Happy Coding♥

    QR Code Component

    2

    dimar hanung• 560

    @dimar-hanung

    Posted

    Hello Ruth 👋, Congratulations on completing the challenge 🎉 I have some interest and feedback with your code

    That I like:

    1. I appreciate the similarity of your results with the design, pretty cool
    2. HTML code was pretty clean with combination of semantic HTML👍
    3. i like how you use css variables 👌

    My Feedback:

    1. you can use combination width:100% and max-width to make it responsive in small device, that's make width dynamic in small device
    2. you can seperate file by folder to be more structured, for example:
    public/
├─ images/
│  ├─ image-qr-code.png
├─ styles/
│  ├─ main.css
├─ favicon.png
index.html
    1. the semantic html is good, but css naming can be improve, your css naming has not represented its use, specific to img-container, In front end development, containers are usually used as wrappers, not as single element / tag.

    anyways overall is good, nice solution, hope it useful 🙌

    0
  • dimar hanung• 560

    @dimar-hanung

    Posted

    Hello 👋, Congratulations on completing the challenge 🎉.

    i have some feedback might can useful for you

    the part why qr code image does'nt loaded because you implement wrong relative path. it's make the link actually refer to https://mauramos0.github.io/images/image-qr-code.png instead https://mauramos0.github.io/frontendchallenges/images/image-qr-code.png to fix it you can remove first slash

    <img src="images/image-qr-code.png" class="card-image">

    or add dot at first

    <img src="./images/image-qr-code.png" class="card-image">

    TIP: There are 2 types of paths, namely relative paths and absolute paths

    Reference: here

    anyways, overral is good, nice solution 🙌

    Marked as helpful

    0