Stefan
@st3wnAll comments
- @waithira001@st3wn
Very interesting!
- @Akshit0703@st3wn
I do not see any differents!
- @st3wn@st3wn
I see in the screenshot that there is a box shadow on the white boxes and another font color :o
- @st3wn@st3wn
Big thanks for your time.
Reading something like this and trying to understand it is really the best thing that can happen to a beginner frontend developer.
I think I just lack practice.
<3
- @frontendparham@st3wn
Hey, here some things.
-use line-height -put the stars + the "Rated 5 stars..." in one div and use display flex with a flex-direction: row; -do not use font-weight: bold; everywhere -set a width to the title to get as closest as possible to the frontendmentor design You can watch my version of it if you need help. :)
But pretty good, how long did you need for it?
Marked as helpful - @st3wn@st3wn
Please visit the live page https://st3wn.github.io/FrontendMentorRatingPage/
This compare box here is just for 1440px.
- @stefanatanasovmk@st3wn
Yo Zineb,
love it, thanks :)
Can you still send me your CSS rest? Would be great!
- @J0shcodes@st3wn
hi, start using font-weight: ;
- @AhmedFawzi44@st3wn
Hi man,
I recommend to you to put the full box in one container like.
<div class="container"> In it you put everything of the summary box. </div> - @stefanatanasovmk@st3wn
Hi man,
just a little tip: You can give the left side of the container a padding-right: px; to get the text smaller. Or you put the h1 and paragraph in a div container and give the div container a width.
Aswell you can check the width and height of the image by rightclicking it, click on the tab "details" and then see the px size of the image. Is the image for example 446px high, you set the container to a height of 446px. In your case the picture is a bit cut off.
But overall pretty good!
- @mgwatson21
- @st3wn@st3wn
Thank you very much! Just used HTML and CSS
- @st3wn@st3wn
Thank you man!
- @gp0710@st3wn
Use the height of the Desktop Image (446px) as the Container Image. I made the same challenge, you can checkout the solution on my profile.
Thank you :)
- @Tleesm345@st3wn
-use Media Queries -setup the correct Font for the Button -use correct font color -use a grid system or display flex instead of the inline-block method
- @yaredh30@st3wn
Hey man,
for the colored image you can use a linear-gradient. Example:
background-image: linear-gradient(rgba(170, 92, 219, 0.45), rgba(170, 92, 219, 0.45)), url("../img/image-header-desktop.jpg");
In this case, the image would have a pink overlay (0.45).
Marked as helpful - @st3wn@st3wn
Oh, aswell I had no idea how to make this wave background so I just took white color.