This content originally appeared on DEV Community and was authored by Gaurav-Shekhawat
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%;
}
}
Other frontendmentor projects done:-
- four card feature section
- three column preview card
- profile card component.
This content originally appeared on DEV Community and was authored by Gaurav-Shekhawat
Gaurav-Shekhawat | Sciencx (2021-08-18T16:39:44+00:00) Day 5: 100 days of code. Retrieved from https://www.scien.cx/2021/08/18/day-5-100-days-of-code/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.