Day 5: 100 days of code, FrontendMentor Projects Summary
Tags: webdev, 100daysofcode, frontendmentor, css
Published: 2021-08-18 16:39:44


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](https://css-tricks.com/almanac/properties/b/border-collapse/)  

{% codepen https://codepen.io/grvskwt/pen/RwVzMzp %}

### CSS checked pseudo class
The implementation can be seen in the above codepen. 
The full description, you can find on:- [MDNdocs](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked)

Summary: [css-tricks](https://css-tricks.com/almanac/selectors/c/checked/)



### CSS `element1~element2` Selector
FULL description :-  [W3Schools](https://www.w3schools.com/cssref/sel_gen_sibling.asp)

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](https://www.w3schools.com/cssref/sel_element_pluss.asp)


![Table specifying selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ho3ot3c5izav88mji4do.png)



## Other frontendmentor projects done:-
* four card feature section
* three column preview card
* profile card component.