Rohit Kumar Saini
@rockingrohit9639All comments
- @Soto-J@rockingrohit9639
Hey @Soto-J
I saw your submission and found some issues. I am giving you some suggestions which will help you in improving your design.
Suggestion 1
Instead of giving the class
card-container
to the body give this class to thediv
inside body. Then you can give the following styles to this class -.card-container { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
This will make sure that all your content is in the center of the screen. Then you can give property
flex:1
to both of your sections inside the main. This will make sure that both of your sections have equal width.Suggestion 2
To make the overlay effect you can do the following.
- Add an empty div as
<div class="overlay"></div>
in your picture section. - Add the following style to picture section
.picture { position: relative; }
Then you can give the following styles to overlay
.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: hsl(277, 64%, 61%); mix-blend-mode: multiply; }
You can also try different values of mix-blend-mode.
I hope this will help you in improving your design.
Marked as helpful - Add an empty div as
- @joaojgabriel@rockingrohit9639
Hey @joaojgabriel
Your background does not match the provided design. There are two approaches to doing this.
First Approach
- You can use background-image to set the background images and play with background properties like
background-size, background-repeat, etc.
to make your background look like a design.
Second Approach
- You can give
position: relative;
to the parent element and can have twoimg
with the source of images and you can position them accordingly.
.parent { position: relative; } .img-top { position: absolute; width: 100%; top: -50%; /* this can be different according to you.*/ left: -50%; /* this can be different according to you.*/ } .img-bottom { position: absolute; width: 100%; bottom: -50%; /* this can be different according to you.*/ right: -50%; /* this can be different according to you.*/ } Hope this will help you in improving your design.
Marked as helpful - You can use background-image to set the background images and play with background properties like
- @Soto-J@rockingrohit9639
Hey @Soto-J I have some suggestions for you.
- You can use
background-repeat: no-repeat;
which will make sure that your background image does not repeat. - You can use
background-size: contain;
which will maintain the aspect ratio of the image, you can also usebackground-size: cover;
according to your need. - You can give a background color to the body from the style guide. I think the color is
hsl(245, 75%, 52%)
;
Only these changes will make your design a lot better.
- To remove the report warning you can give an
alt
text in your image.
Hope this helps you.
Marked as helpful - You can use
- @IAmKachi@rockingrohit9639
Hey @IAmKachi
Media queries are difficult at first but when you get to know about they become a lot easier. You can refer to this link to learn about media queries -> Media Queries
Firstly learn about these two media queries and more than half of the work will be done -
@media only screen and (min-width: 900px) {} @media only screen and (max-width: 900px) {}
- You should use semantic HTML tags, they define the meaning to both the developers and browsers. Some tags are - `main, section, article, header, footer, etc. To learn more HTML, CSS or JavaScript follow this link - w3schools
- @Isaaclkm@rockingrohit9639
Hey @Isaaclkm, It is good to have classes on all of your HTML elements, but there are some CSS Selectors which are very helpful while working and styling using CSS. To learn about different CSS Selectors you can go with the following link. CSS Selectors
Apart from it, some issues which I found are:-
- You should use semantic HTML tags like
main, section, footer, etc
in your HTML. - You should use
/
in image src not\
E.g. Use this
<img src=`images/perf1.jpg` alt=`perfume bottle`>
not this
<img src=`images\perf1.jpg` alt=`perfume bottle`>
Marked as helpful - You should use semantic HTML tags like
- @Mosestule2003@rockingrohit9639
Hey, @Mosestule2003 Congratulations on your submission.
I looked at your design and found that it could be improved more. The things which you can improve are --
- Use the
font-size
of paragraph to be 18px and don't have any <br> in your <p>. It will automatically fit with the container width. - The color of the paragraph also does not match, you can change it too.
- You should have all the content in
<main>
and you should also have<footer>
. So your report will not be having any issues. - Add
<!DOCTYPE html>
at the top of your HTML document. - You should have
width: 100%
in the CSS not at the direct element. - You should not have
<p>
inside H3 or any other heading element, instead you can use<span>
.
I hope this feedback will help you a little bit in improving your design. All the best.
- Use the
- @NinoTsitsriashvili@rockingrohit9639
Hello Nino, I think your live site url is not working fine. It is giving a 404 page not found error. You should update this.
- @superschooler@rockingrohit9639
Hey @superschooler,
You can use
body { display: flex; align-items: center; justify-content: center; }
This will immediately make your solution more accurate to the design.