All solutions

Hi guys !

I looked over a challenging exercice to pratice my newbie Javascript skills, but on this one I finally managed to used only CSS and get a good result that I'm proud of :)

There are few things I wanted to fix, but I couldn't find any solution for them, maybe because I don't have enough experience for it... I would be grateful if you would give me some leads on those :

1. I used checkbox hack with radio buttons to have only one field opened at a time. The problem with this solution is that it seems a radio button cannot be unchecked using only CSS... Means I can't close all the fields once I opened one of them.

2. I had to set a maximum height: 400px; to avoid fields from going over the div they are located in. I wonder if there is a better way to do it, for example by extending my div when it happens. I don't know if it's possible using only CSS.

3. I had to play with selectors to put labels in bold and rotate arrows, but I didn't manage to do it without putting my checkbox before my label. I therefore had to set checkbox width: 0;, but this leaves a little space before my label.

Anyways, this taught me few things, but unfortunately not in JS !

For my next challenge, I will try to use SCSS for the first time, and still work on my JS skills :)

Thanks for your feedback. Peace !

Hi to everyone reading my post and probably checking my creation !

For this one I had to learn a bit about Javascript. In fact, I started this challenge like 2 months ago, and I learned Javascript basics when I had free time not working.

My first mistake was to trying to handle everything with Javascript (because, you know, it seems so powerful and when you get a new tool you want to use it everywhere !). I ended editing the input fields styles and creating the elements containing error messages only by using JS, but I quickly understood it's not the best way to get this job done...

Finally, after having such a bad time for so long, I got motivated again and I could end this challenge being happy of my result :)

The only little thing that bothers me is this Try it free button... I have 2 issues I couldn't resolve on it :

1. First, I used flexbox to center the text but I had troubles with the spacing between my emphased text and my normal text. I have an <em> inside an <a> element.
2. Then when I worked on responsive, I noticed that using flexbox wasn't getting me a good result for 2-lines text. Maybe I should have played with flexbox-shrink property or something ? I ended up using padding to center it, but it becomes sadly ugly around 570px width...

Anyways, thanks if you took some time to read my comments, and I would fell very happy to get your comments and advices on the solution provided. :)

Peace ! Ozan

Hi everyone !

I've completed my third challenge during my holidays so I was a little bit lazy but I managed to train whenever I got a moment. This one was a bit more complicated due to an issue I had on my viewport width which was shrinking when using low responsive resolutions (like with 375px). I found out how to resolve it and this helped me better understanding how viewport works so it's good :)

And honestly, I couldn't find the right filter for my image to look like the example one, so I checked on @Tomi-pter 's code provided in solutions, thank you for that mate ;)

Hi guys !

Already my second challenge here, but this time coding on an old laptop having a really low resolution that didn't help me adjust all box and text sizes perfectly... However still learned a lot of things that I sometime added as comments to follow my learning.

Again, if you have any recommendation regarding my code organisation or whatever, please don't hesitate to share your thoughts with me as this will help me a lot !

Have a nice day ;)

Hi I'm Ozan,

It's my first exercice to use what I recently learned about HTML/CSS. I'm trying to get good habits starting now, for example by trying to use SMACSS methodology.

I'm pretty satisfied with the result I get, but I didn't manage to stick my footer line to the bottom of my box without moving it when resizing my window in landscape mode...

I will take any advice on this, every remark you can do will help me !

Thank you