Looking to hire developers?
@alsir
@Mohammedabbas7
Submitted
I used the background-image property to create a card image and used the background-blend-mode property to blend color with an image but I faced a little problem with the width and height of the background image. I wonder if there is another way to do that using the IMG element.
@alsir
Posted
it's fast to use bachground: the color the the url ; . and for this challenge it's best to to set the size of background img to cover , after you set the width and height of its container
@awwsman
Submitted
challenging i must say
@alsir
Posted
you can use overflow:hidden to hide any element that overflow from it's container .
Marked as helpful
@Reandyx
Submitted
If u like my work leave a like and comment :)!
@alsir
Posted
very great work.
@xs30snw
Submitted
Just completed this challenge, maybe I could refactor source or improve styles.
How good do you think my implementation is?
@alsir
Posted
solid work .but if you make it to fit the screen without needing to scroll it will much better. I realize that the delete button is set as the same as the reset button. hey the code I used to make the delete button work : function del(){ var value=document.getElementById('screen').value; document.getElementById('screen').value=value.substr(0,value.length-1); }
Marked as helpful
@LisaPetersson
Submitted
This is my #2 FEM challenge as a beginner and feedback is highly appreciated. :)
@alsir
Posted
Really good work I recommend to delete the div in the bottom or style it to not reflect in your design .
@alsir
Submitted
I struggled and get no where with trying to make the image in the intro to over flow to the top of the next container any advice or help??
@alsir
Posted
sorry I submitted to wrong challenge
@Nazeer2020
Submitted
Hey, I really struggled to put the big curve background image, if you can give me some tip how can I do it?
@alsir
Posted
I done it by positioning the background image in the bottom of the intro div and set the bottom margin to zero and the div underneath it ,I gave it margin top zero and background color as the same as the curvy image.
@Cip28
Submitted
I've done this challenge using React and SASS. I had some problems with the layout, as you'll see it is not responsive, it breaks if the width is not 375 or 1440px.
Feel free to manifest your opinion regarding the improvement of the solution.
@alsir
Posted
try to add another media query min-width and max-width to make it more responsive I recommend to forget about the 375px and make it up to 600px it will help alot as you work in more challenges . but awesome work keep it up.
Marked as helpful
@AngelG-JAPY
Submitted
This practice was difficult for me. I think it could be better, but can you give me some recommendations. Thanks.
@alsir
Posted
try to make it display flex the image and make a div that contain the header and the paragraph in the mobile veiw make it's flex-diraction:column ; and in the desktop veiw make it's flex-diraction:row ;
Marked as helpful
Everything looks right. The only thing I couldn't figure out was getting the eye or view icon to show in the middle of the image when hovering over it. If anyone can help with this, let me know.
@alsir
Posted
you can insert the image as element to the html and make it's opacity:0; and position it absolute and make it at the top of the first image then at a: hover and in it make the opacity higher . don't forget to keep the good work.
Marked as helpful
@alsir
Submitted
The project need resizing to be more responsive . any other advice ??
@alsir
Posted
Did you click in the number?
@rsrclab
Submitted
Any feedback is welcome here!
@alsir
Posted
There are some issues with the positioning of the crew imgs and the nav doesnot work when you are in the crew page and resizing will be good .
Marked as helpful
@WildTsunami
Submitted
Not sure about my Flexboxes for the Desktop cards part, but it works so...
I'd like to improve about the semantic, because I found myself rarely using the good elements (for exemple, I used <p> for the second line, but maybe a <h2> or something like that would be better).
Any ideas on that subject ? (and of course I'm still taking suggestions about the rest).
@alsir
Posted
hi , I tell what i know from while ago when i first start learning about html in course from coursera . h1 is used once as the main header of the page for the main subject of the page. h2 is used for the main branch of the h1 and h3 for the branch of h2 and so on but really a have not ever used the h5 or h6 . The p is used for paragraph or more details about the header of it. hopefully you found the answer.
@jsmeyring
Submitted
I am a beginning developer, so this challenge was very difficult for me.
@alsir
Posted
Do not make is challenge slow down as practice and build another projects you well develop and sharping your skill . keep up the good work.
@DragostinH
Submitted
This took me like half a day to complete and i think it should have been much sooner for such a simple page.
How long would it typically take to make?
@alsir
Posted
as beginner it takes lot of time at the beginning but with time and practice it takes less and less , after while you can code it in less then 10 minutes , and develop your ability to analysis the design from the first look until then I do not recommend using any css framework
@AymaneDarih
Submitted
My Only Question is how did you guys got that color above the svg backgroud of the Desktop ?
@alsir
Posted
do you mean the color of the svg ? if you mean the svg there are filter property can be applied to the svg to change it's color
Marked as helpful
@AliHaroon
Submitted
@alsir
Posted
to stop the background image from repeat use the background-repeat: no-repeat; then add background-size:cover ; to cover the background of all the targeted area,
@omiras
Submitted
Practicing SASS.
@alsir
Posted
if you add margin-top to the first section it will give you better lay out , try to get the images in the cards to be rounded by border-radius ,it's better look .
Marked as helpful
@surphury
Submitted
:) I really liked this challenge! I would like feedback on my code... Thanks in advance!
@alsir
Posted
hi , you don't need to set background color to the box of the heading and paragraph in the intro . just position the background image like (background-position: 50% 60%;) to give you the same layout as the design
Marked as helpful
@Shubhang-Kulkarni
Submitted
I am struggling with responsive design using css grid, any tips on it would be appreciated. Feedback is welcomed.
@alsir
Posted
if you struggling with grid I recommend using flexbox it's super easy or you can check freecodecamp to learn more about grid and flex
@suansen
Submitted
Using CSS and HTML. Not sure if I'm using too many divs ...
Any comments are most welcomed.
@alsir
Posted
I don't think that you need to put the img tag in div tag when you use display: flex ; the img tag will get the same treat in or out the div tag . if you put opacity in the number you will get better layout.
Marked as helpful
@Xonn
Submitted
I really got some problems with the responsive design, and i appreciate comments who help me to improve it !
@alsir
Posted
I believe that the only way to make progress is by trying out I seriously recommend trying freecodecamp ,it's very helpful and easy to gain experience in coding
