@shakhboz-shukhrat
Posted
Hello there👋! Congratulations on completing this challenge!
There are no major issues with the code. However, there are a few minor improvements that can be made:
1.The font property should be specified with a unit, e.g. font-weight: 900; should be font-weight: 900; font-size: 15px;
.
2.The font
property should be spelled out, e.g. font: 900; should be font-weight: 900;
.
3.The background-size
property should be set to cover
instead of contain
to ensure that the background image covers the entire background.
Here is the corrected code:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: 'Red Hat Display', sans-serif;
min-height: 100vh;
background: url(images/pattern-background-desktop.svg);
background-repeat: no-repeat;
background-size: cover;
background-color: hsl(225, 100%, 94%);
position: relative;
font-size: 16px;
}
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 450px;
background-color: white;
border-radius: 20px;
overflow: hidden;
}
.text-content{
padding: 7%;
text-align: center;
}
.title{
color: hsl(223, 47%, 23%);
font-weight: 900;
font-size: 32px;
margin-bottom: 20px;
}
.text-content p.subtitle{
color: #8a8a8a;
margin-bottom: 25px;
}
.plan-box{
background-color: hsl(225, 100%, 98%);
border-radius: 12px;
display: flex;
padding: 25px;
align-items: center;
justify-content: space-between;
}
.plan-box-left{
display: flex;
align-items: center;
text-align: left;
}
.plan-box-left div{
margin-left: 20px;
}
.plan-box-left div h5{
font-weight: 900;
font-size: 15px;
color: hsl(223, 47%, 23%);
}
.plan-box-left div p{
font-size: 14px;\n color: #8a8a8a;
}
.plan-box a{
font-weight: 900;
color: hsl(245, 75%, 52%);
transition: color cubic-bezier(0.39, 0.575, 0.565, 3) ease;\n}\n\na.proceed-btn{\n display: block;
text-decoration: none;
color: white;
background-color: hsl(245, 75%, 52%);
padding: 20px 0;
border-radius: 12px;
margin: 30px 0;
}
a.cancel-btn{
color: hsl(224, 23%, 55%);
text-decoration: none;
font-weight: 900;
}
a.proceed-btn:hover{
background-color: hsl(224, 23%, 55%);
}
.plan-box a:hover{
text-decoration: none;
color: hsl(224, 23%, 55%);
}
a.cancel-btn:hover{
color: hsl(223, 47%, 23%);
}
@media only screen and (max-width: 425px){
body{
background-image: url(images/pattern-background-mobile.svg);
font-size: 14px;
}
.container{
max-width: 87%;
}
.title{
font-size: 23px;
}
div.plan-box{
padding: 12px;
}
.plan-box-left div{
margin-left: 10px;
}
a.proceed-btn,
a.cancel-btn,
.plan-box{
font-size: 13px;
}
.text-content{
padding: 9% 7%;
}
}
Hope you'll find this helpful
Marked as helpful