Skip to content
OverviewSolutions
12
Comments
31

dimar hanung

@dimar-hanungBanyumas560 points

Front-end, Back-end, UI/UX: A Web of Creative Conflict

I’m currently learning...

Flutter, NestJS, WebGL, Rive

Latest solutions

View more solutions

Latest comments

  • dimar hanung•560
    @dimar-hanung

    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
  • dimar hanung•560
    @dimar-hanung

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

  • dimar hanung•560
    @dimar-hanung

    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
  • dimar hanung•560
    @dimar-hanung

    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 🙌

  • dimar hanung•560
    @dimar-hanung

    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
  • dimar hanung•560
    @dimar-hanung

    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 👍

View more comments