@tdimnet
Posted
Hi Cynthia,
Nice job so far!
Since you're using Bootstrap, you shouldn't have to use your own style:
* {
margin:0;
padding:0;
box-sizing: border-box;
}
.main{
background-color: #f4dff5;
}
.card{
max-width:450px;
}
.price{
color:var(--bs-green);
font-size:larger;
font-weight:800;
}
.fw-lighter{
font-size:10px;
}
.card-title{
font-size:20px;
}
@media screen and(max-width:425px){
.card-title{
font-size:50px !important;
}
}
Nowadays one of the best and easiest way to use Bootstrap is with Sass, you can read the document on how to set up it here: https://getbootstrap.com/docs/5.3/customize/sass/.
You can update the Bootstrap's color variables here: https://getbootstrap.com/docs/5.3/customize/color/#using-the-new-colors
By the way, you don't need to use a reboot
*{
margin:0;
padding:0;
box-sizing: border-box;
}
Bootstrap includes a reboot by default: https://getbootstrap.com/docs/5.3/content/reboot/
Let me know if you need any resources :).
Have a nice day, Tom.