Greetings, fellow humans! I'm Abdellatif Aghla, a frontend explorer who just discovered the magical realms of HTML, CSS, and JavaScript. Armed with a sense of curiosity and a never-ending supply of coffee, I'm diving headfirst into the pixelated universe of web development.
I’m currently learning...🔹 C && 🔹C++
Latest solutions
Latest comments
- @YahyobekRahimov@AghlaAbdo
Great job
Hey, I just have some notes for you to consider, I noticed that you're trying to handle the dates yourself, setting the current dates, checking how many days in the month and if its a leap year or not.
You don't have to do all of that, you can just use the Date object to access the current date and validate whether the date is valid or not and much more, search for the Date object in Javascript to learn more.
Another thing, you need to remove the error when the user correct their input.
You can check my solution if you want to know how I handled that. Happy coding ;)
Marked as helpful - @Olagunju9148@AghlaAbdo
Hi, great job, you did excellent work.
However, there are few things to note on your code. First of all, you used Fontawesome to import some icons, and the challenge is focused to create everything only with CSS.
You could create those arrow using:
.arrow { border: solid white; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; width: 12px; height: 12px; border-radius: 3px; } .left-arrow { transform: rotate(135deg); } .right-arrow { transform: rotate(-45deg); }
And you could create those 3 dots menu by creating 3 divs inside a another div container:
<div class="dots"> <div></div> <div></div> <div></div> </div> .dots { margin-left: auto; display: flex; flex-direction: column; gap: 2px; } .dots div { background-color: rgba(255, 255, 255, 0.76); width: 4px; height: 4px; border-radius: 50%; }
Another thing to note in the .msg-input section; there is no need to add any input, it supposed to be just like a screenshot but made with CSS, shouldn't interact with it. And also for the radio input, it should be just like an icon.
In general you did great work by finishing this intermediate challenge. I also went through this challenge you can see my solution on my profile. I wish you happy coding ;-)
Marked as helpful - @Mharvel13@AghlaAbdo
Great job, you did very nice
I have some notes for you to consider to further improve your design:
- You forgot to set the background color as in the image, colors are very important in web design.
- You need to make the shadow more blur and more transparent to reach the same effect.
- To center
<main>
on the page, you can use flexbox or grid instead of margin. T use flexbox you need to set body desplay:flex:
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
But also .attribution will be set as flex, to avoid that you can set it's position to absolute and position it at the bottom of the page, Like so:
.attribution { position: absolute; bottom: 15px; left: 0; right: 0; margin: 0 auto; }
I hope you got something from this. Good luck on your journey
- @rileydevdzn@AghlaAbdo
That's awesome, you really did a great job
I cannot differentiate between you solution and the origin image. If you could just make some small changes to the font size and match it with origin image so you can't see the small dance of the text when you scroll between your solution and the design😅.
There is nothing else to say. Good Luck for your coding Journey 😊
- @ahmbarreiros@AghlaAbdo
Very nice, you did great job
The only thing I will mention though is that you need to make the colored divs background color more transparent as in the image because those shining colors don't really look great.
And another thing for the drop shadow you also need to make it less visible to reach the same effect as in the image. But overall, you did great job I wish you happy coding 😊.
- @VictorDEV1301@AghlaAbdo
Great job, you did very well.
The only thing I will mention is that you didn't use the same colors given in the style-guide.md
And for the div that contains 76 of 100, you should make the background linear-gradient from color to transparent to reach the same effect like this:
background: linear-gradient(180deg, rgb(77,34,200), rgba(77,34,200, .05));
And also you need to make the drop shadow less visible and use the color as in the image because its not a dark shadow, and add more padding to the text to make it go to 3 lines. Good Luck for your coding Journey 😊
Marked as helpful