Design A Modern Responsive Musician Portfolio Website Using HTML, CSS & JS (Part 4)

Design A Modern Responsive Musician Portfolio Website Using HTML, CSS & JS (Part 4) Hi everybody Welcome To Live blogger in this tutorial series we are creating this website using HTML CSS and JavaScript now in this video I'll show you how to design these two sections.

Design A Modern Responsive Musician Portfolio Website Using HTML, CSS & JS (Part 4)

Over here we have the latest releases and live performances so we will Design these sections in this video let's get [Applause] [Music].

Started right here I'm in my source code so let's go to the HTML file and let's go out inside this collaborations section and let's create a section with an ID of.

Releases and we need to have all the content inside a fixed width so let's add it inside the container Division and we need to have left division and on the left division we.

Need to have this image so let's create an IMG tag and in the source list app images for Slash and I have this image called thumb 1. jpg and let's create a right Division and in the right division.

We will have an H2 and let's type latest releases and let's create a paragraph and let's copy this and paste it over here right now let's create another.

Section and let's give it an ID of performances or performance and uh in this also we will have the container Division and and uh here let's create a.

Left division and in this left division we need to have the hed2 and we need to type live performances and let's create a.

Paragraph and let's copy this and let's paste it over here let's create a right Division and let's create an IMG tag let's tab images SL Thum 2.jpg so we have written the HTML of both these.

Sections now let's go to the CSS and let's start start in this so this is how it looks right now let's create a comment and let's typ releases now we need to have the same type of styling.

For both these sections so let's add a class over here and uh let's set it to split we need to split these sections into two parts and let's add the same split class.

Over here as well for performances and now here we can simply go ahead and type split container and uh for the container let's set the display to flex align items to the Center and let's set a gap.

Posts Related:

    Of 30 pixels and now if you go back here

    We can see that the content are displayed one next to the other right now let's style this image so let's tap Split Image and let's set the height to.

    300 pixels and let's set a border radius of 10 pixels for rounded corners and object fit to cover so that it has the correct proportions and we need to set the same width for these two divisions.

    So let's select both the divisions so let's stop split left and split right and let's set the flex to one and both of them will have the same width so with that we have styled our latest releases.

    And live performances section all right so that's basically it for this video if you have any doubts you can ask in the comments below and if you like this video please click on the like button.

    And subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day a [Music].

    DISCLAIMER: In this description contains affiliate links, which means that if you click on one of the product links, I'll receive a small commission. This helps support the channel and allows us to continuetomake videos like this. All Content Responsibility lies with the Channel Producer. For Download, see The Author's channel. The content of this Post was transcribed from the Channel: https://www.youtube.com/watch?v=0SF15PCOrWY
Previous Post Next Post