@ukanlei
Mary Njoroge
@MaryahceeAll comments
- @Maryahcee
To avoid repetition in CSS I use class with same name when there are several elements that need same styling design. Also breakdown sections if it's Navbar section check to see what elements have similar design and give them same class name.
Finish designing one section at a time it makes the work easier and you won't have to keep repeating your self. Cheers! Keep coding!
- @ukanlei@Maryahcee
Hi the card looks good. At first someone struggles with finding the best working flow. However I have some tips that have helped me become organized while working on my projects. First look and analyize the design and make a sketch of how I will approach the design. Second write down all sections (eg. Navbar, Main, footer.) in the design and what I will use (eg flex or grid) to make them. If you do this routine in your first projects you will notice that in the future you won't necessarily have to do it it comes naturally with more practice. I hope this helps. Happy coding!
- @EduMPinheiro@Maryahcee
To add a divider line before the avatar add a div with an <hr> element, then style it as follows: hr { width: 80%; color: white; }
- @EduMPinheiro@Maryahcee
Hi Nice work here! To put a circular border around the avatar image Add this border-color: white; border-radius: 50%; border-style: solid;
- @emjogale@Maryahcee
@emjogale nice to know you managed. Happy coding.
- @emjogale@Maryahcee
Hi, the background looks good to the eye , however you can add center/cover after no repeat. Nice work!
- @dodrin@Maryahcee
Nice work. .container { height: 200px; position: relative; border: 3px solid green; }
.vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } Try this for smaller screen. Make sure you give the container a position of relative first.
Marked as helpful - @theohm12@Maryahcee
Hi, nice work. You should also add the hover state it should look like the attached image under active-state.
