I found it difficult to get all the colors right. I think My code is decent but can always be improved.
Abdelrahman Khaled
@Abdelrahman0KhaledAll comments
- @dev-ele206Submitted over 1 year ago@Abdelrahman0KhaledPosted over 1 year ago
Congratulations on completing this challenge bro❤️ , but i see you have litle problem with centering the card , you can fix it by adding to body this
margin: 0; padding : 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
and
flex-direction: column;
to have div of in the "attribution" under div of "card"
0 - @7MYVSubmitted over 1 year ago@Abdelrahman0KhaledPosted over 1 year ago
@7MYV Congratulations on completing this challenge👌❤️, here are some tips to make it look better. you can use for background ❤️
body { background-image: url(images/bg-desktop.png); background-position: 0 100%; background-color: hsl(229, 57%, 11%); background-size: 100%; background-repeat: no-repeat; }
and till me if it work ❤️
Marked as helpful0 - @tejasvi2708Submitted over 1 year ago@Abdelrahman0KhaledPosted over 1 year ago0
- @AliAbuSalamSubmitted over 1 year ago
I'd like to know if there's a better way to center the card element rather than using flexbox
@Abdelrahman0KhaledPosted over 1 year agoCongratulations on completing this challenge👌❤️, here are some tips to make it look better. to center with out flexbox you can use
.contaner { position: relative; transform: translate(- 50%, - 50%); }
and you need to use fonts in style-guide file, and you need to make border-radius like
card{ border-radius: 15px; }
and you don't need to border color and Congratulations again ,keep coding bro❤️😊 EDITED bro❤️
Marked as helpful1 - @Delian21Submitted about 2 years ago
I have nothing to say... All feedbacks are welcome. Updated with the help of Abdelrahman0Khalid in centering the card.
@Abdelrahman0KhaledPosted about 2 years agohay @Delian21 congratulation you complete the challenge but there is suggest to center your card.
body{ display: flex ; align-items: center; justify-content: center ;
this is after give the body
min height: 100vh
tile me if work . good job friend ..happy coding @Delian21Marked as helpful0 - @PhilaniNcubeSubmitted over 2 years ago@Abdelrahman0KhaledPosted over 2 years ago
hi philani congratulation to complete it but .. i see you have some problems in fonts and font sizes and font weight and colors.. my friend .. all you need ( font size , font family , font weight , background color , colors , act ) in style-guide file with index.html and images file and design file .. you don't need to be pro to git or use it .. its for free with those files
0 - @HasanAbdirahmanSubmitted over 2 years ago
I would appreciate if anyone could give any feedback. especially my desktop version. Thank you
@Abdelrahman0KhaledPosted over 2 years agoThis comment was deleted over 1 year ago0 - @Bidex-03Submitted over 2 years ago
Adding a gradient to an image from html
@Abdelrahman0KhaledPosted over 2 years agohi friend bidex, It was a great attempt , ok .. about your question
add div in the div have img and this what i did and its worked with me ..
.div-have-img{ position: relative; } .div-have-img .new div{ width: 100%; height: 100%; background-color:( what you need ); position: absolute; opacity: 0.5; filter: (what you need ); }
Marked as helpful1 - @Adam31-jpgSubmitted over 2 years ago@Abdelrahman0KhaledPosted over 2 years ago
my friend .. all you need ( font size , font family , font weight , background color , colors , act ) in style-guide file with index.html and images file and design file .. you don't need to be pro to git or use it .. its for free with those files .. and about centering .. margin: auto is not bad in horizontal centering .. put it's pad with linear center ( take a look in your solution and design ) pot your card in div and center it in body to and it's work like magic .. or you can center it with transform : translate(-50% , -50%); top: 50%; left:50% ; in your div of card it's work to . (my English not perfect but i wanted to help)
Marked as helpful0 - @Adam31-jpgSubmitted over 2 years ago@Abdelrahman0KhaledPosted over 2 years ago
Hi Adam, Congratulations on completing 🎉 your challenge. It was a great attempt but there are some problems . look this is my first to comment but you can center the card by flex box give body display: flex and justify-content: center and align-items: center after give body min-hight:100vh and you have some problems in fonts and font sizes and font weight good job bro
0