Skip to content
OverviewSolutions
44
Comments
12

Hana

@Hanka8Czech Republic960 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!

I’m currently learning...

React and TypeScript

Latest solutions

View more solutions

Latest comments

  • Hana•960
    @Hanka8

    Hi Maca, nice job. Take a look at calc() CSS function to make calculation from px to em/rem easier.

    Marked as helpful
  • Hana•960
    @Hanka8

    Hi Huynh, thanks for your comment. I added position: relative / absolute to my elements, but it still doestn work. I dont understand why (Its better seen when you change box-shadow´s color to for example red).

    .mobile__content__answer {
  background: white;
  color: var(--mobileTextColor2);
  font-size: var(--mobTextSize);
  line-height: var(--mobTextLize);
  border-radius: 10px;
  padding: 6px 8px;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  max-width: calc(128rem/16);
  position: relative;
  z-index: 2;
}

.mobile__content__answer::before {
  content:"";
  position: absolute;
  width:100%;
  right: 0px;
  bottom:-2px;
  transform:scale(.8);
  box-shadow: 0px 0px 5px 3px #eceaee;
  z-index: 1;
}
  • Hana•960
    @Hanka8

    Hi Maca, nice job!

    I like your precise design. There is just one little thing i found in your code:

    • When defining heights and widths of the containers, its better to use relative units than px. Thats because when the user changes the font size in his browser, cards containing the text should grow with it to prevent overflow. All font-sizes should be also defined by relative units, because when you use pixels, its not possible to change the font size in browser. On the other side, paddings should be defined by px, because you dont want them to grow with the text. You can try changing the font size in the browser to see what it does to your layout. I suggest reading this article about units. You can also consider using rems instead of px in your media.

    • I noticed tha you are using ´display: flex´ together with ´width´. That can sometimes cause some confusions, consider using ´flex-basis´ instead. You can read about it here

    Keep up the good work ☺

    Marked as helpful
  • Hana•960
    @Hanka8

    Hi, nice job!

    Here are some suggestions:

    • the color of the background is #1f2630 and buttons have #262f38, you should find the colors at the provided file style-guide.md, or if you are using firefox - there is a built-in dropper feature;

    • use cursor: pointer and add some transition effects on your buttons and labels;

    • you should edit cards padding and width according to the design, i suggest using box-sizing: border-box for it, because thats how you can use padding that is not affecting your cards width;

    • its better to use <footer> instead of <div> for your attribution as it is more semantic;

    • <label> should not have a name, the name attribute should be just in the <input>;

    • I used buttons instead of inputs and put the submit cards html at the dom, then changed the state from display: none to display: block (and vice versa) by clicking the submit button - this is just the different option, you can check out my solution if you want;

    Keep up the good work!

    Marked as helpful
  • Hana•960
    @Hanka8

    Hi, nice job!

    I noticed just some details:

    • You should add same border-radius to your .image-overlay as your .image-top has;

    • style your hr color and width regarding the design;

    • you should add some box-shadow or use filter: drop-shadow to your card;

    Keep up the good work!

  • Hana•960
    @Hanka8

    Hi txosca.

    You provided a creative solution for hovering the image. However, I think its better solution to use pseudo-elements ::before and ::after. This way the hover effect will always appear over the image. You can check out my codepen to study ::before/::after here. Try adding the class for the div containing the image and use something like the code below.

    Also I dont think its a good idea to mix in-line and external css in one project. It creates a big mess.

    I hope this helps!

    .div-image {
  position: relative;
}

.div-image:hover::after {
  content:"";
  position: absolute;
  inset: 0;
  border-radius: 15px;
  background-color: hsla(178, 100%, 50%, 0.7);
}

.div-image:hover::before {
  content:"";
  position: absolute;
  inset: 0;
  background-image: url(images/icon-view.svg);
  background-repeat: no-repeat;
  background-position: center;
  z-index: 100;
}
    Marked as helpful
View more comments