This is pretty straight-forward. Great for beginners, project.
What challenges did you encounter, and how did you overcome them?The size of the qr code and colors were a little bit of a challenge. Before realizing that I could use Figma to solve the issue.
What specific areas of your project would you like help with?None
hello Im gonna write it fast i dont have enough time!!!
So the card sizes are diffrent from template...
width should be 320px and height should be 497px
gap between img and text should be 1rem or 16px
img width and height should be equal to 288px
padding in card should be 16px or 1rem
and make box-shadow color more light!!!
I hope it helps you!I would appreciate if you mark this comment as helpful!!!
anything you can imagine, you can achieve in frontend development
What challenges did you encounter, and how did you overcome them?font usage had to check online
What specific areas of your project would you like help with?a more simple approach to solve this.
Hello👋🏼!!!
I've reviewed your code and I have some advice for you!
1.The gap between the img and text containers is too high... it should be 16px or 1rem.
2.In the style CSS, you have padding: 0.75rem 0.75rem;. The right value includes the up and down setting, and the second value is for right and left. Instead of repeating the value 0.75rem twice, you can just write padding: 0.75rem;. It's better. If you don't understand, you can also type 4 values like (it's just an example): margin: 24px, 28px, 11px, 10px;. The first value is up, the second value is right, the third value is down, and the fourth value is left.
3.And also make sure that the card width is equal to 320px and height to 497px.
I hope this comment helped you! I would appreciate it if you marked this as helpful.
GOOD LUCK!
Hello!!! I saw your code,theres some things to upgrade!
1.your structure of text is messed up it may be because of high font-size or because you did it with rem anyways try to do with px's... it should be instead of 1rem 16px and instead of 1.5rem 24px wich are high as i think! try to reduce them
2.padding from top is high reduce it!
3.i think it will help...Make sure that width of card is 320px and height 497px I didnt saw if you had that mentioned in your code or not!
Sorry I dont have many time i ope you'll figure things out...if not reply to comment with a thing that you need help with and I will contact you as soon as I will be free! GOOD LUCK!!
also ill appreciate if you mark this helpful
Hello! 👋🏻
I've reviewed your code and I have some advice for you:
1.The card size is larger than it is on the template... width should be 320px and height should be 497px.
2.The image size is also larger than it is on the template... it should be both 288px in height and width.
3.The border-radius is too low, make it 15px.
4.The box shadow is also too dark, make it lighter... you can achieve this by changing the color to be much lighter and also reducing the distance that the box-shadow covers to 15px.
5.The paragraph color is incorrect, make it darker (the color is provided in the project file).
6.The padding of the card should be like this: padding: 16px 32px; or if you want to use rem, do it like this: padding: 1rem 2rem;.
I hope my comment helped you! I would appreciate it if you marked this comment as helpful!
Good luck in your next projects!
I am proud of that i am able to do that. and next time i'll make it more better.
What challenges did you encounter, and how did you overcome them?background color but i make it
What specific areas of your project would you like help with?where i wrong and what should i do about it.
Hello👋🏻!!!
I reviewed your code and there is A LOT to go through!!!
I can view your code in inspect element, but I don't have time, so I'll just guide you!!!
1.The width and height are correct in this screenshot, but when I go to the website, it's just ughh... So, I can't access your code because you didn't provide the correct link. But make sure that the width is equal to 320px and the height is 497px. You can adjust it by padding as well, with 16px or 1rem on top/bottom and 32px or 2rem if you are doing the project with rem!
2.The image of the QR code isnt right!!! Both width and height should be 288px, and the border radius should be 15px.
3.Text gap should be 16px. You can do it with margin-top on the paragraph or by using display flex on .headers. Also, the main text should be lighter!
4.You should follow the template! Your colors aren't right; the background should be a different color, as well as the paragraph and main text!
Also, next time use the repository URL for us to view your code!
I hope this helped you! I would appreciate it if you marked this as helpful.
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Hello!👋
Great work, but I have some comments to make!
1. Remove the footer from the card! It disrupts your design; you can place it outside of the card.
2. The border radius of the QR code image is too high; you should reduce it, for example, border-radius: 15px;.
3. Make sure the width of the card is 320px and the height is 497px!
4. As you can see, the paragraph of the card is not following the design. You can balance it by reducing its width or adjusting the padding of the card(but I think adjusting with width is right option here). Additionally, consider lowering the font size of the title of your card.
I hope you find this comment helpful. I would appreciate it if you would mark this comment as helpful.
Hello!👋 I reviewed your code, and it's good, but there are some issues that need attention.
1. You aren't utilizing the provided elements. It's essential to use the materials provided for the solution. Specifically, you should use the provided QR code image. While it's acceptable to use other resources during practice sessions, in a real project assigned by your HR, you should adhere to using the provided materials.
2. The width and height of the card aren't correct. They should be width: 320px;and height: 497px; respectively. It's preferable to achieve these dimensions by providing exact padding settings.
For "FREE+" challenges, Figma designs are provided. Even though the dev mode is not currently free, you can still view the widths and heights of elements in the designs.
I hope my comments were helpful. I would appreciate it if you could mark this as helpful.
trying to get image to display correctly
Hello👋!
I reviewed your code and its great but there are changes to made!!!
Optional:Most developers as default and global css they use style.css instead of index.css its not necessary as far as I know but its better
1.Width and height of card needs to be corrected in total it should be width: 320px; and height should be height: 497px; in rems(on default 16px) its width:20rem; height: 31,0625rem;
2. Distance between the text and Qr-code image should be more... It should be 16px or 1rem you can achieve this by putting texts in one div like this:
<div class="container">
<img src="images/image-qr-code.png" alt="QR code" class="qr"/>
<div class="text-cont">
<h1> improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</div>
</div>
and add this styles to container in css:
.container {
display:flex;
flex-direction: column;
align-items: center;
gap: 16px; /*or 1 rem if you work with rems*/
}
you also should add styles to .text-cont:
.text-cont {
display:flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
or to not use extra lines...
.container , .text-cont {
display:flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
I don't have time to find other issues I hope you figure this out! I hope my comment was helpful. Good Luck In Next Projects!!!! I would appreciate if you mark this comment as helpful!
it was not difficult
What challenges did you encounter, and how did you overcome them?keeping the dimensions between the elements. i didnot know the exact way so i had to estimate
What specific areas of your project would you like help with?making the page responsive
Hello I saw your solution... I went to your site... saw your code... etc
Overall its like medium let me correct you...
1.the container should not be like that you should add that properties to body:
body{
font-size: 15px;
max-width: 1440px;
background-color:hsl(212, 45%, 89%) ;
font-family: 'Outfit';
}
.container{
max-width: 1230px;
height: 100%;
display: flex;
margin: 0 auto;
justify-content: center;
align-items: center;
}
2.YOU SHOULDN'T DO MARGIN USING %!!! This ruins your whole structure on responsive:
card-container{
background-color: hsl(0, 0%, 100%);
border-radius: 15px;
padding: 16px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
Here you dont need margin because you are already make container position it in center by display flex
3.Is text problem is in responsive text is shortened because you use % in margin... Instead you can:
card-container img{ border: 1px solid moccasin; width: 100%; border-radius: 10px; }
.primary{
color:hsl(218, 44%, 22%);
font-weight:700;
width: here you can provide exact width and control text-align with it;
font-size: 1.1rem;
}
.secondary{
color:hsl(220, 15%, 55%);
font-size: 15px;
font-weight:400;
font-size: 0.8rem;
width: here you can provide exact width and control text-align with it;
}
I hope this helped you
I would appreciate it if you would mark this comment helpful!
I am proud of me doing it better everyday . I would like to add more functionalities next time to my project.
What challenges did you encounter, and how did you overcome them?The challenges i mainly encountered was making it responsive , But after focusing a bit i made the website responsive for all devices.
What specific areas of your project would you like help with?I would like to hear suggestions or improvement in my project.
COOL! you have good skills in css...
BUT................
You should follow the actual template,there's no need anything special like that. Yes you did what you told to but if in template there isn't providen specific image or detail that in this projects something should have hover effect you shouldn't do it...
This website is all about getting experience! When you will get a job there will be providen a template... that you should follow!
But in summary your solution is great!
I hope I explained everything you needed! I would be glad if you mark this helpful!
GOOD LUCK IN YOUR NEXT PROJECTS!!!
Actually, i can't tell how much happy i feel, after doing this challenge. i feel like, the same way as i feel, when i am doing one of my hobby. i mean:
coding, writing stories, reading novels, and listening to songs. Even though writing, reading novel and listening to songs doesn't have a close relationship with coding. but completing this challenges brought but my emotion.
i'm proud of how i completed his challenge by using html and css only. not saying that i know the most but meaning that i'm on good position to say that ** i can**.
Hello👋🏻... i reviewed your project! I see a lot of potential here but your not using it...
1.you should use materials provided by the HR... in this case materials that are provided in this project
2.There are some styleguides that are providen within project,the fonts you should use... or the colors... you have right font but colors aren't matching...
3.In projects there are providen figma designs...Like in this project,it has too... where you can see specific components styles,follow them and make as it is there!
Follow this instructions and you will become best version of yourself...
If you find that helpfull I'll appreciate if you mark this comment as helpfull good luck!
its good but there are details you should fix:first you need to add more width to card...Second: you should light up cards box-shadow use #d3d3d3 instead...Third:You should make text like it is on design... overall on card you can do this: body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; text-align: center; width: 100%; height: 80vh;
background-color: #d6e1f0; }
.container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
.absolute { width:320px; height: 497px; border-radius: 15px; padding: 16px; box-shadow: 0px 0px 10px #d3d3d3; }
also image and text should have another section...text section wich will have display flex ... align-items center;, justify-content: center; flex-direction: column;gap: 16px; there are more to do but I dont have enough time... I hope you will get it by urself. I hope you find this usefull... GOOD LUCK!!!💪🏻
