Neerajkumar-web• 160
@Neerajkumar-web
Submitted
All Feedback Are welcome
Vinicius Porto Ribeiro
@RibeiroPorto
All comments
@RibeiroPorto
Posted
Hello NEERAJKUMAR-WEB, You did a very good job, congratulations. Here are some tips i think would help you: 1- in you
<div class='left'>you've putten the style:background-image: url(./images/image-product-desktop.jpg);if you turn tobackground-image: url(./image-product-desktop.jpg);i think it will work, becouse of the way you organized your directories. 2-if you want to center your main content inside you could add to the style of your page's body:height: 100vh; display: flex; align-items: center; justify-content: center;BTW: probably the code would need some adaptations to be centered Again, very good job. if you need any help, please feel free to contact me.
0- DESYCO• 60
@Chima22
Submitted
Please I will like your contribution for perfect design and approve.
@RibeiroPorto
Posted
Verry good job CHIMA22, congratulation. Some tips i think would help you: Instead of using padding in all of your elements to center them, you could have used padding in your container together with:
box-sizing border-box;Another tip: you could have created a a div to make a hover effect in yout image, this way for instance: HTML:
<div class="img-container"> <img id="eqimg" src="./image-equilibrium.jpg" alt=""> <div id="hide"></div> </div>CSS:
#hide { z-index: 0; background: hsla(216, 50%, 16%, .5); width: 100%; height: 100%; position: absolute; top: 0; visibility: hidden; } .img-container:hover #hide { visibility: visible; }Anyway, you did a great job, keep working. If you need any help, please fell free to contect me.
Marked as helpful
0 - Abirami• 20
@abira02
Submitted
I centered the Div tag which contains the image and paragraphs by adding padding-top property to the body is there any other way to do it ?
@RibeiroPorto
Posted
Hello, Your project looks really good, well done!! Answering your question, there are some ways to center and element:
- you could remove the (
padding-top: 100px;) from the body and add these lines to the container:
position: relative; top: 50%; transform: translateY(-50%);and to the body:
height: 100vh;- you could remove (
padding-top: 100px;) from the body and (margin: auto;) from the container, and add to the body:height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
Marked as helpful
1 - you could remove the (
- madhaus• 1,040
@festsnusa
Submitted
@RibeiroPorto
Posted
Hello madhaus! how are you ? Your project is very good!
Just one tip i think you may enjoy:
- I think that you had some difficulties centering your main container.A way to do it is:
html { height: 100%; } body { height: 100%; display: flex; justify-content: center; align-items: center; }another way is:
body { height: 100vh; display: flex; justify-content: center; align-items: center; }Anyway your project is awesome, congrats!
I hope you enjoy this small tip, hope it helps you. Any questions please feel free to contact me!
0 - Srikanth• 110
@AgeOfUltra
Submitted
@RibeiroPorto
Posted
Hello AgeOfUltra! how are you ? Your project is very good!
Just some tips i think you may enjoy:
- I think that you used:
max-height: 40vmin; margin: 122px auto;to center your component. another way to do it is:
position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);- I also noticed that you use the same image for desktop and mobile. You could use:
<picture class="item1"> <source class="image" srcset="image-product-mobile.jpg" media="(max-width: 375px)"> <img class="image" src="image-product-desktop.jpg"> </picture>Instead of:
<div class="item1"> <img class="image" src="image-product-desktop.jpg"> </div>to make it more responsive.
Anyway your project is awesome, congrats!
I hope you enjoy this small tip, hope it helps you. Any questions please feel free to contact me!
Marked as helpful
0 - Kacper• 180
@kacper-reiman
Submitted
@RibeiroPorto
Posted
Hello Kacper! how are you ? Your project is very good!
Just one tip i think you may enjoy:
- To make the background look the design you could use:
background-position: right 50vw bottom 50vh, left 50vw top 50vh;Instead of using:
background-position: center;Anyway your project is awesome, congrats!
I hope you enjoy this small tip, hope it helps you. Any questions please feel free to contact me!
Marked as helpful
0 - Sonia• 10
@soniaela
Submitted
Best practice questions: Should every HTML element be contained within its own <div> even if no styling will be applied to it?
@RibeiroPorto
Posted
Hi Sonia! how are you ? Your project is very good!
Some little tips i think you would enjoy:
- To make the body fill the entire screen you could use:
body{ width:100%; height:100vh; } - You could also define the background-color inside body instead of creating a div for it.
- Instead of using padding:200px trying to center your "QR code" card, you could use:
display: flex; justify-content:center; align-items:center;
I hope you enjoy these small tips, hope it helps you. Any questions feel free to contact me!
Marked as helpful
1 - To make the body fill the entire screen you could use:
