DEV Community

Cover image for Day 5: 100 days of code, FrontendMentor Projects Summary
Gaurav-Shekhawat
Gaurav-Shekhawat

Posted on • Updated on

Day 5: 100 days of code, FrontendMentor Projects Summary

Starting day 5…

FrontendMentor :- Order Summary Component

Learnings:-
Made an outer-container, and then set the background image as that svg file, due to this there is no distortion in that. Also, set the background-size to 100vw, so that the image fill the whole width of the outer-container.
It is good if you put the below code at the start of each sass file. By this, we can then manually set the margin and padding for each element.

*{ 
margin:0;
padding:0;
box-sizing:border-box;
}
Enter fullscreen mode Exit fullscreen mode

In the sass file, while putting colors as hsl or rgb, you have to put spaces between the values otherwise it will give an error. Hence,

box-shadow: 0px 0px 16px 5px rgba(0, 0, 0, 0.21);
Enter fullscreen mode Exit fullscreen mode

will work but

box-shadow: 0px 0px 16px 5px rgba(0 0 0 0.21);      //wontwork
Enter fullscreen mode Exit fullscreen mode

Set the width of the "card" div not in term of percentage of the "outer-container", because it will shrink in that case as we decrease the size of the window. Better, you should set the width as:-

.card{
max-width: 450px;
}
Enter fullscreen mode Exit fullscreen mode

By this, the size of your card will not decrease as the width of the window decreases.
Setting the media queries:-

@media only screen and (max-width: 600px) {
* {
font-size: 14px;
}
.outer-container {
background: url("./order-summary-component-main/images/pattern-background-mobile.svg") hsl(225deg, 100%, 94%);
background-size: 100vw;
background-repeat: no-repeat;
}
.container {
margin: 70px 0;
width: 330px;
}
.annual-plan {
width: content-width;
}
}

Enter fullscreen mode Exit fullscreen mode

Remember that

width:content-width;
Enter fullscreen mode Exit fullscreen mode

is a very powerful tool. Use it wisely.

FrontendMentor :- Stats preview card component

Learnings:-
wasted 30 minutes, trying to put that violet mask over the image, then found the correct way to do that using pseudo elements(covered in day 2, also remember that don't try to use pseudo elements on images, as it will not work sadly).

HTML code:-

<div class="imagediv">
<img src="./stats-preview-card-component-main/images/image-header-desktop.jpg" alt="" />
</div>
Enter fullscreen mode Exit fullscreen mode

CSS code:-

.imagediv{
position: relative;
}
.imagediv::after{
position: absolute;
content:'';
display: block;
inset:0;
width:100%;
opacity:0.5;
height:100%;
background: hsl(277, 84%, 61%);
}
Enter fullscreen mode Exit fullscreen mode

Spent the whole time to fit the image inside of that container, to the left. The best solution I found was using this:-

HTML:-

<div class="imagediv">
<img src="./stats-preview-card-component-main/images/image-header-desktop.jpg" alt=""/>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS -

.imagediv {
position: relative;    //  this is used for the point this point.
width:50%;     // width of image container as half of total
img {
object-fit:cover;      //this preserve the aspect ratio and 
                         trims off extra image left                                                                 
width:100%;
height:100%;
}
}
Enter fullscreen mode Exit fullscreen mode
  • If two div's borders are overlapping, then you can combine them using:-
border-collapse: collapse;
Enter fullscreen mode Exit fullscreen mode

Full reference:- CSS tricks

CSS checked pseudo class

The implementation can be seen in the above codepen.
The full description, you can find on:- MDNdocs

Summary: css-tricks

CSS element1~element2 Selector

FULL description :- W3Schools

Summary: Basically if the code is p~ul , then it selects all the ul below p which have the same parent as p.

CSS element+element Selector

Summary: If the code is div + p then it selects all the p , immediately after div ( and not as child of div, basically the p which is just after the closing div tag)

Full reference :- w3schools

Table specifying selectors

Other frontendmentor projects done:-

  • four card feature section
  • three column preview card
  • profile card component.

Top comments (0)