I'm learning js so I decided. to make this simple project in html and css but with a small touch of difficulty for my level.
it's not perfect but for a start, I'm pretty proud of it
I'm learning js so I decided. to make this simple project in html and css but with a small touch of difficulty for my level.
it's not perfect but for a start, I'm pretty proud of it
congratulation on your attempt it's a really nice one, my advice is to use variables to change from light mode to dark mode,
if you don't know how,
I hope that will help you, happy coding
this is the first time I do a challenge with HTML, CSS, and JS. and I put my first logo model
I think nothing complicated in this challenge but I think I wrote a lot of not necessary code.
and I may need help in the side of the animation, I think the animations are not good enough
I make a job for the Learn More button I hope u like it
I added EventListener that when u click on the background it will remove any button action u click ( like the Learn More button or Logo Button )
It always takes me some time to choose a proper font-size, especially when I use rem to set element's width. I write css according to "mobile first". I want just to rewrite the html's font-size to change others width. It looks fine on the phone, however it looks not perfect on the desktop. So that I have to rewrite margin or padding on the desktop. Can you give me some tips to choose font-size between different devices? Thanks very much!
I use the sass function to divide the px /16 so it returns as rem like that : rem(1200) == 31.25rem I write the first syntax and its returns to my CSS file as the second syntax, happy coding
I have done the same challenge a moment ago, nice job @blahking
just some changes are needed as the background put the same as the design, and try to put max-width to the paragraphs = 21.5ch.
I think those will help u enough happy coding
I hope you like my solution. Is there a more effective way of setting different images for different displays and how do I use the picture element? Also, please what is linear gradient is and how do I set it for image overlay?
**congratulation on finishing this challenge **
and look at this site if u wanna know about [picture tag] (https://www.w3schools.com/tags/tag_picture.asp)
if u wanna make the img like the design make the background the color that u want then
img {
opacity: 0.75;
mix-blend-mode: multiply;
}
and this site can help with making [linaer gradient colors] (https://cssgradient.io/)
1- how to stack them in mobile view
Putting the cards in the center was a challenge for some reason I don't know the margin: 0 auto did not work.
I am not sure why the vertical space between the two cards in the center has that big space as compared to the original design. Any pointers will highly be appreciated.
Enjoyed solving the challenge with tailwind I have learned a lot....any feedback as to how I can improve my work will highly be appreciated..... Many thanks
you did a nice job, bro!
but I think if you delete this line, will reduce the margin between them
.lg:grid-rows-5 { grid-template-rows: repeat(5,minmax(0,125px));
and make the p element on the header in CSS like that p { max-width: 34ch; margin-inline: auto; } that will make the words on the header the same as the design and change the color too