IONIC - 3.8 Creation of a to do list (4)

Click here for more videos available on our youtube channel !

Now that we're done with the formatting, let's move on to our background with our “home.page.scss” stylesheet. First of all in the ion-content I will modify the “background-color” so I will put a white color a little broken with this reference “#f9f9f9” which will give us a fairly neutral white. Subsequently, I will go take the “tasks” class, and I'm going to insert a fairly light 10 pixel padding, I'm also going to change the “background-color” and I put white with the reference “#ffffff” neutral to obtain luminosity. In the class “task-title” I will define a “margin” and a “padding” to 0 which will both have the value null like this, here it is, to make an inline-block display, which will also allow us to create a little more volume in our shape, and I'm going to add a "margin-left" at 14 pixels, so we'll have a little shift from left to right, I'm also going to put a font with "font-weight" so in bold which will allow me to have a little bold like this, and therefore "font-size" also where I'm going to put a value at 15 so a character size and with a font color a little electric blue thanks to this reference #3880ff, after it is obviously according to your preferences it is not obligatory to do like me, on the contrary, it is personalization. For the “task-date” class, I will also put a “margin” and a null “padding”, bold font with bold font-weight and 11px font size with font-site is sufficient. I am going to insert a “margin-top” this one will be a little bigger at 28 pixels. Perfect. And for the “empty” class, I will also insert a "padding" at 10 pixels, 10px, I'm going to put a "text-align" center, that's to properly center the text, I'm going also insert a “margin-top” therefore with a value equal to 50 pixels and a character color in black, basic. And that's about my customization, we're going to look at the result, and it's much better than at the start with the white background for the spots clearly distinguish the differences. I'm going to insert a task "eat a fruit", and here is the task displayed like this, I'm staying on the basic but you can take brighter colors according to your personal tastes. And that's it for these to-do list project videos, see you for a next video, I'll see you in a next video where I advise you to revise a little, we're going to do a little quiz. See you soon !