S
What challenges did you encounter, and how did you overcome them?S
What specific areas of your project would you like help with?Placing items on the desktop
hello, good job i saw your design and your code. i have noticed a few things. firstly when you switch to the mobile display there is no margins between the cards. you can add margin to the card(bottom or top and buttom).also it breaks between the 1023px - 700px. i think you could use
@media (max-width: 1024px):
instead of
@media (min-width: 1024px):
secondly, i see that you give each card a class name (yellow-card, cyan-card, blue-card, red-card) which is correct to set the top border color for each but you have replicated the other attributes in each class. instead you could give all a general-name('card' for example)
<div class="card blue-card">
then set the style
.card {
border: 1px solid white;
padding: 20px;
width: 300px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
and then a unique name for each card to set the differences like the border color
.cyan-card {
border-top: 5px solid var(--cyan);
}
.yellow-card {
border-top: 5px solid var(--yellow);
}
.red-card {
border-top: 5px solid var(--red);
}
.blue-card {
border-top: 5px solid var(--blue);
}
for placing the image to the right bottom corner of the card instead of adding padding i think it is possible to use :
align-items:end;
and one last thing you could reduce the width of the card a little to make it much like the design
i wish you happy day
The design
What challenges did you encounter, and how did you overcome them?The image on the large screen didn't align at some point I used width property to correct it
What specific areas of your project would you like help with?i would any correction that could be made from the general code.
generally the design is ok . you can make it even better. my first notice that you made all the borders rounded. you could select any corner you wanted and set the border radius. for example:
border-top-left-radius: 10px;
border-top-right-radius: 10px;
for the mobile design it is ok. when changing the width the ratio between the image and the content is not as shown in the design. one option is to set the containers: .text and .images widths to 50% for each
.text{width:50%;}
.images{width:50%;}
and then adjust the elements inside it to the suitable ratio
another option which i think is better is to change the display to grid
main{
display:grid;
grid-template-columns: repeat(2,1fr);
}
this will split the main container into two columns with the same width.then set the images container to fit in the grid width (width:100% and height:100%) and finally set the image and the alternative image to
height:100%;
max-width:100%;
i hope this could help in making some changes and i wish you happy journey
I am happy to bring the design with code not accurate as pixel by pixel but the code can match the design at certain level.
What challenges did you encounter, and how did you overcome them?Challenges was to the find accurate value of padding, margin and width. I searched some previous reference who had done the projects before. Discord was helpful with that with that reference I moved forward on the project with my idea.
What specific areas of your project would you like help with?It will be helpful to know the mistake I have made on this project. And what could be done better or more accurate with more efficiency.
Good job. everything is almost fine. you can optimize the code by reviewing the margins and the font sizes. but generally, it is well organized. keep it up
proud of everything and will keep everything same
What challenges did you encounter, and how did you overcome them?none
What specific areas of your project would you like help with?none
good job. you can make it even better by noticing for the margins and the padding.
close to style guide
What challenges did you encounter, and how did you overcome them?need to complete faster
What specific areas of your project would you like help with?none
Good job. you can make it better by noticing to the sizes and the elements. the font used is not similar to the design.
i can finish it
What challenges did you encounter, and how did you overcome them?qr image not resize in small px, then i put width 100%
What specific areas of your project would you like help with?maybe any option options props than 100% width prop?
hello, good work . i have some ideas may help. you could add a margin to the container to keep it in the middle . it could be a percentage. 10% top and bottom and 30% left and right for example. also try to keep the units similar in the design it could be easy to read. for example use the percentage or the pixels or the ems and rems. try to avoid the inches unless you are completely comfortable with. thanks
