0 1 00:00:02,890 --> 00:00:06,700 In this video, we're going to build that author and date row below the headline. 1 2 00:00:06,910 --> 00:00:11,800 I think the simplest approach would be to use a flexbox for this. Let's add a new empty div block and 2 3 00:00:11,800 --> 00:00:12,850 give it a class - 3 4 00:00:12,880 --> 00:00:13,990 author and date. 4 5 00:00:22,610 --> 00:00:24,670 Then let's add an image. 5 6 00:00:38,970 --> 00:00:40,530 Next, we need a name for the author. 6 7 00:00:40,710 --> 00:00:43,290 Add a regular text block, give it a new class. 7 8 00:00:47,870 --> 00:00:49,320 Style it just like Figma. 8 9 00:01:22,460 --> 00:01:25,930 We need to change the Justify property to something like 9 10 00:01:25,950 --> 00:01:27,210 Center. 10 11 00:01:27,390 --> 00:01:28,870 Next, we have this divider. 11 12 00:01:28,910 --> 00:01:34,910 We could use like a line bracket for this. Or just style a div block with width and a background color. 12 13 00:01:35,030 --> 00:01:37,150 But I think line bracket is easier. 13 14 00:01:37,160 --> 00:01:40,290 I think that's what we are doing inside Figma anyways. 14 15 00:01:40,310 --> 00:01:44,550 We just need a different color for it. 15 16 00:01:55,920 --> 00:02:02,860 And then the date. Let's just reuse the same author text block and even keep the same class. The date is 16 17 00:02:02,860 --> 00:02:05,440 the published date of this particular blog post. 17 18 00:02:05,440 --> 00:02:11,320 We can already bind this to the CMS. We didn't have to create the date field, because every CMS item 18 19 00:02:11,320 --> 00:02:14,740 comes with it. We even have three different date options here. 19 20 00:02:14,770 --> 00:02:16,870 In this case, Published On, is what we need. 20 21 00:02:17,470 --> 00:02:19,600 But as you can see, it disappears. 21 22 00:02:19,600 --> 00:02:23,400 That's because we haven't published our website or any of the blog posts yet. 22 23 00:02:23,410 --> 00:02:25,090 So that date field is empty. 23 24 00:02:25,150 --> 00:02:30,290 Let's use a different date field. Maybe created on or updated on. And later we can switch it back to 24 25 00:02:30,290 --> 00:02:31,630 publish. Or keep it that way. 25 26 00:02:31,630 --> 00:02:34,630 Updated on is a pretty decent date indicated too. With dates 26 27 00:02:34,630 --> 00:02:37,350 we even have an ability to change the date format. 27 28 00:02:37,360 --> 00:02:40,490 This will matter based on where our target audience lives. 28 29 00:02:40,500 --> 00:02:40,800 All right. 29 30 00:02:40,810 --> 00:02:43,780 The distance between divider and text block is 30 pixels. 30 31 00:02:43,810 --> 00:02:45,820 We can adjust that on the divider itself. 31 32 00:02:50,630 --> 00:02:55,910 Actually, on the right side, we only need 15 pixels, because there is already a 15 pixel margin on the left 32 33 00:02:55,910 --> 00:02:56,680 of the date. 33 34 00:02:56,690 --> 00:03:01,390 And lastly, let's add a margin on top of the whole thing to separate it from the headline. 34 35 00:03:07,790 --> 00:03:09,300 All right. All that's looking great. 35 36 00:03:09,310 --> 00:03:10,590 Now here's the thing. 36 37 00:03:10,600 --> 00:03:16,420 This author that we just created, this the static content. When we publish our blog posts, all of them will 37 38 00:03:16,420 --> 00:03:17,530 have the same author. 38 39 00:03:17,560 --> 00:03:18,590 But that's not right, 39 40 00:03:18,600 --> 00:03:20,290 is it? For an independent blogger, 40 41 00:03:20,290 --> 00:03:20,920 sure. 41 42 00:03:20,950 --> 00:03:26,200 It's always the same author. But for a company website, there is always going to be more than one person 42 43 00:03:26,200 --> 00:03:27,940 creating blogs for the website. 43 44 00:03:27,940 --> 00:03:33,420 We need this author information to be dynamic as well. But we haven't created CMS fields for this, 44 45 00:03:33,420 --> 00:03:37,470 so we cannot bind it to the database yet. We're going to do that in the next video.