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;
}

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);

will work but

box-shadow: 0px 0px 16px 5px rgba(0 0 0 0.21);      //wontwork

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;
}

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;
}
}

Remember that

width:content-width;

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>

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%);
}

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>

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%;
}
}

• If two div's borders are overlapping, then you can combine them using:-

border-collapse: collapse;

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

Other frontendmentor projects done:-

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