Welcome back boys and girls. In this video, we're going to design the single party screen. As mentioned before, in this screen, we're going to put the details about the selector party, such as the name of the DJ, the party location, the date, the time, the DJ starts up, as well as the ticket price. We're also going to put a sample video of the DJ so the user can get a better feeling of what kind of music that DJ plays. From user experience perspective. This is an important feature for our application.

Finally, in this screen, we're going to put a call to action button so the user can buy tickets for this party. Okay, let's get started. First things first, we're going to use the full screen image so we can enhance the background visually and give it a dark white, which is complimentary with the mood of our application. As usual, I downloaded this image from unsplash.com. I'm going to provide it in the assets panel. More assets panel, select the image and move it back over to our canvas.

Drag it down into the layer stack and position it accordingly to your liking. Let's add another field to this image, which is going to be a linear gradient. And we're going to use the same color for both our color stops, the color is going to be 071923 and let's change the opacity of the car stops. The first color stop is going to be 66% opacity and the second one is going to be something like make it we move the gradient bar until you like it. Next, we're going to use the hair component from our previous lesson. Copy the header component by selecting holding ALT dragging it onto our canvas.

Now since the single party screen is a sub screen from the party we screen, we need to provide our user a way to navigate back to the previous screen. So the way to do this is to add a back button. Now, since we cannot modify our components installed, we're going to have to modify our masters component. In our assets panel, I provided a back icon, select it and drag it on to our masters component. change its color white and position it accordingly on top of the data. As you can see, into our components instance, we can see the back icon.

Now the only thing left for us is to hype the date. Click off the eyeball next to the date in order to hide it. Great. We now have the Back button for our screen. Next, let's add the title to go to the asset. panel, select the declaration graphic which I provided and move it over to our cameras.

Now open up your title and type in Nina Kravitz change the font size to 50 pixels. The font weight is bold and the color is white. align this to the equation graphic and move it something like five pixels from the bottom of it. select them both, group them and change this to title. Select the title group, move it over to the header and moving 50 pixels from the bottom of the hill. Let's create our detail screen.

Select the type tool again and typing they change the font size to 18 pixels aligned to the left. Change the color to white change the opacity 40% align this with the title hold and drag it down and change this for a specified date, which is 17th of November 2018. change the opacity of this field 100% and change the font size to 24 pixels. align them and move it something like five pixel from Obama today. select them both and group them together. Make a copy of this group by holding hold and drag it to the right. Move this group something like 25 pixels to the right.

Change this to occasion change this to Burke Hein panorama bar, change the width of this work, so the bar work will go underneath. Select both groups and copy them by holding ALT and dragging down. Move them something like 10 pixels to the bottom. Let's change this info accordingly to reflect the one of our previous screen. So start which is going to be one past midnight and ticket price, which is going to be 18 euros movies, so it will match here. Let's move the bomb to groups for about five pixels more Okay, Right, let's group them all together and call this group info and moving something like 30 pixels from the bottom of our title.

Now let's add the video sample. Copy one group from the info group by holding ALT and dragging it down. Move it outside from the info group and call it video with something like 40 pixels from the bottom of the info group. Let's change the opacity of the paperwork to 100%. Let's delete the lower work. Now move forward to our assets panel.

Select this image which I provided and move it over to our cameras. Drag it inside our video group. adjusted like five pixels to the bottom of the ticket price. Change the ticket price to sample gym session just the width of the image to 210 pixels, the height to 120 pixels, the corner radius for pixel app another feel to it, which is going to be a solid color black by 50% opacity. The final thing is to add an effect to his image which is going to be a drop shadow. The blur will be 10 pixels.

The y value will be five pixels and the Opacity will be 60%. This will make the image stand out from the background. The final thing to add here is the play button. Move over to our assets file. So Let the play button which is provided and drag it over to our cameras, put it inside the video group. Let's center it by selecting the play button and image and center it using our alignment icon.

Great, we now have our video sample. By clicking this, the user will be taken to a new screen called the video screen. Now, the only thing missing to our design is the call to action button. Copy a button from our login screen and move it over to our canvas. align it to the bottom of the screen and move it something like 15 pixels from above. Now, let's rename this to CTA for call to action.

Let's delete this icon. change this to get tickets. Let's change The color of it to 071923. Let's change also the color of this background to this pink color, which is ed to the AC. Now, the final thing to do here is to create a component out of our call to action in order to use it. On other screens, click the Create component icon.

Let's drag it over outside copy it by holding ALT and dragging back onto our cameras. Let's position it accordingly. 15 pixels from the bottom of it that's it guys. This concludes our lesson. I will see you in the next one.