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.
Top comments (0)