🔥 Deadpool Website Project | Part 01 | New Creative Frontend Series Start Ho Gayi! - video Dailymotion

Code Craft Arhum

🔥 Welcome to the *Deadpool Website Project* — Part 01 of our brand-new **Creative Frontend Series**!    In this video, we’ll start building a **Deadpool-inspired website** using **HTML, CSS, and GSAP animations**.   Each part will cover exciting sections step by step — from layout design to smooth scroll animations and creative UI ideas.  📅 *This is a daily series!*   👉 Don’t forget to check the **Complete Playlist:** https://www.youtube.com/playlist?list=PLc6nH0aBaCGv_JgeGrc4q2Dz9op68AqcH  🎯 In this Part: - Focusing on Build the Structure of Navbar  ---  🧠 **Technologies Used:** HTML | CSS | GSAP | JavaScript | UI/UX Design    ---  ⚡ **Stay Connected:** 📺 Subscribe for the complete series   💬 Comment your feedback or next part suggestion   ❤️ Like & Share to support more creative frontend projects!  #frontend #webdesign #deadpool #frontendtutorial #creativedesign

Transcript

00:00So, let's start with making this website.

00:21Okay, now I will show you what I'm going to do again.

00:25So, I will show you the results of this website.

00:31And you can see it in the video.

00:34So, here it is the result.

00:39Okay.

00:41Now I will show you the results of this website.

00:45Now, I will show you the results of this video.

00:50I will show you the results of this website.

00:53This means that we can follow this, so we can follow this and what we don't do, we don't do it.

01:00But the final output we have seen in the start of the video, we don't have time waste.

01:05First of all, we start with an empty folder.

01:08First of all, we put some images together.

01:12We set the images together.

01:15Now, we will do this again.

01:24Now, we will do this again.

01:30We will do this again.

01:32First of all, we will do this again.

01:35SHTML.

01:37Index.html

01:42We create file style.css

01:46We create file script.js

01:50Now, we will create 3 files and phase 2.

01:53Videstore.

01:54We will do this again.

01:56Here I will use the HTML.

01:59Here I will use the website.

02:02tax

02:27xx

02:29xx

02:34xx

02:36xx

02:37xx

02:42xx

02:44xx

02:45zoom

02:47xx

02:50xx

02:52Now we are going to start creating a new font.

02:59First of all, the main thing is that we will use the font.

03:05If you look at the whole website,

03:09there are 2 fonts that are used.

03:15First of all, the main thing is that we will use the font.

03:20We will use the font.

03:23I will use the font.

03:27I will use the font.

03:30But I will skip the font.

03:34I will use the font.

03:36Then I will add the font.

03:402 minutes.

03:45All right.

03:46I will choose 2 fonts.

03:48One is my new Pro Bold.

03:51One is my lemon milk light.

03:54These are 2 fonts which I will use.

03:58This is the landing page.

04:01This is the 2 fonts which I will use.

04:05Okay?

04:06The font also finns.

04:08The font is coming together.

04:09We are also using the font so I will leave.

04:10I will add font to this one.

04:12From here itamy.

04:13And the context is the font name.

04:14The font zer одну.

04:15And the second part is its entire name.

04:16I will type in the font.

04:18This webpage i will have.

04:19This size zweet two colors.

04:21The third has very large information.

04:22The font raise me with font face.

04:28Then the family counselor saving me.

04:29Lemon milk life.

04:31Okay?

04:32ुv÷તમ મજ ચૂસાક ફરાગદ તીહ૪રામ સામજ ઉામજ ઉઝતાભયજ તથ્તામ છામજ જોત્મ ફરાં કવાંજ ખેવમ ત્ત�

05:02primary phone, okay? And it will be my value, okay? And it will be my value, okay? And

05:17the second one is secondary phone. So, here is secondary phone, and I will give it to

05:24the value. Lemon Milk Live. This is the way it will be. Now, why not

05:32you will be and what puts it, okay? V.A.

05:36And here, it is valid.

05:36Let me put it that way. If you want, I can write it.

05:39To accept it, the results of 1.

05:44But 지금ではなく, you know, font anyone will have two what just

05:52that should be, or not? Then, if you want, these variables will be the same.

05:56So, if you want, if you want font size, if I come to 32VW,

06:01So, here we go to live extension on this one.

06:06This one is here.

06:08Yes, this one is here.

06:10The variables are correct.

06:12So, this means that we have created variables.

06:15They are correct.

06:17Now, let's go to the structure of which we have created.

06:23Okay, nice.

06:24If we see here, we have a hero books.

06:30First of all, we have created variables.

06:36So, let's make sure to my system that we are going to create.

06:44But, here, we will create a new one in order.

06:49So, I will create a new one.

06:51So, I will create a new one in the previous video.

06:55So, I will create a new one,

06:58this way.

07:02ڈیچھے اور یہی کومیٹ اٹھاؤں گا میں

07:05ڈیچھے اس میں بھی یہی پیس کر دوں اور اس کو کومیٹ کر دیں گے

07:09ڈیچھے اب اس کے نیچے جو جو سی چیزیں اب ہم نے کریٹ کرنی ہے

07:13وہ آگئے کریٹ ہو جائیں گی.

07:15اب جی سب سے پہلے اب ہم کیا کریں گے جی یہاں پر نئے بار میں

07:18ایک ڈیو لے لیں گے یا ایک ڈیوز کر سکتے ہیں

07:22اور اس ڈیوز ٹیگ کے اندر ہم چیزیں لگائیں گے

07:25If you want to see a reference to a reference

07:29First of all, I will show you the font.

07:32The library is called CDN Link.

07:35The icons that you can see here.

07:392 minutes.

07:41For this, we will show you the font awesome.

07:45Font awesome.

07:47CDN Link.

07:49CDN Jays is a popular website.

07:51This is a popular website.

07:53I will show you the font awesome link.

07:57I will paste on CSS.

08:01If you want to change the icons,

08:05we will apply the icons.

08:11If we want to apply the icons,

08:15we will apply the icons.

08:19It is simple.

08:21I will use the icons.

08:23I will use the icons.

08:25I will use the icons.

08:27Font awesome.com

08:29It is a website.

08:31I will use the icon.

08:33If you want to change the icon,

08:35we will use the icon.

08:37First of all, the main thing is the structure.

08:39The structure is simple.

08:41The structure is simple.

08:43It is simple.

08:45I will show you the logo.

08:47This is a unique icon.

08:49Here, I will select the map.

08:51One, two, three, four items.

08:53I will put a icon in this case.

08:55I will choose the icon.

08:57Then I will select the icon.

08:59There are few items in this case.

09:01After I will show you the name.

09:03Here I will press the icon in this case.

09:05Looks like the icon in the box office.

09:07Now I will re-check the ending.

09:09This is an icon icon.

09:11dot com.

09:13Type ofный box office,

09:15we have box office,

09:18and we have iMac blue,

09:21iMac blue.

09:24Here we have list items created.

09:27Now, I want the icons to try.

09:32I have a div create.

09:34Icones or Nab icons.

09:38okay

09:40and

09:42there are three icons

09:46iqn

09:48iqn

09:50iqn

09:52iqn

09:54iqn

09:56iqn

09:58iqn

10:00iqn

10:02iqn

10:04iqn

10:06iqn

10:07je

10:10iqn

10:12is

10:14its

10:17iqn

10:19which

10:21this

10:22would

10:24be

10:25to

10:27the

10:30the

10:30yes

10:32hard

10:34here in the nav, we will set 100 percent.

10:38We will set 100 percent.

10:40We will set 100 pixels.

10:43I will set 100 pixels.

10:46And the background color,

10:49I will set dark gray.

10:52We will remove this.

10:55This is created.

10:57What we will do here?

10:59We will set display flags.

11:02We will set center and justify space between.

11:09So, this is how we will set the space between.

11:12Now, the nav, the list style,

11:18I will set none.

11:21I will set display flags.

11:24This is how we will set off.

11:28So, this is how we will set off.

11:30This is how we will set the space between.

11:32Now, the nav, the ul, the ul, the ul tag.

11:35This is how we will set the margin.

11:38The bottom is 0 pixels.

11:40But the left, right, the 30 pixels.

11:43This is how we will set the gap.

11:45If we set the gap,

11:47we will set the gap.

11:49So, if we set the gap however,

11:51I will select the

11:55and the add there.

11:56Now, the fund family is available.

11:58This is how we are in secondary.

11:59This is how we will set the first time to make it,

12:01and this is how we will set theifs.

12:02After the nav,

12:03the ul, the ul.

12:04The anchor tag that we have on top and left.

12:05So, we will set the text decoration for only.

12:08Test that we put further.

12:10and the font size will be 1VW

12:17or 0.5VW

12:20.8

12:23and the letter spacing will be 8

12:282 pixels

12:31this is nice

12:33let's do this

12:365 feet

12:41here

12:43here

12:45here

12:47there

12:48there

12:50There

12:51there

12:56hundred percent of these

13:14iosis.

13:15width.

13:16width with width.

13:18width.

13:20width.

13:22distance.

13:24Lasce.

13:29space.

13:31between theЛ byN put the Leระogues button in فلیکس button.

13:37We will put the display in the next step.

13:42Then I will center the line item.

13:45Justify content center.

13:47Then I will give it to you.

13:49I will give it to you.

13:51I will give it to you.

13:53I will give it to you.

13:55I will give it to you.

13:57I will give it to you.

13:59Okay.

13:59So some results are in this way.

14:01But I will give it to you.

14:03I will give it to you.

14:09Okay.

14:11Okay.

14:13Nice.

14:14So now you think that we have to give it to you.

14:17We will give it to you.

14:21But we will give it to you.

14:23Because we have to give it to you.

14:25Because we have to give it to you.

14:29To be sure.

14:31If we have to give it to you.

14:33We will give it to you.

14:35And if we have to give it to you.

14:37Then we will give it to you.

14:39See that you will see.

14:41So now we will see.

14:43We will close the circle.

14:45Of course, we will reduce it.

14:47So we will reduce it.

14:49Yes.

14:50We will do it.

14:51Then we will change the menu.

14:54So we will change the menu.

14:57hamburger menu

15:00and this hamburger menu

15:03same style

15:05icons

15:07look at this

15:09this

15:12hamburger menu

15:15here

15:18dip

15:20or

15:21spend tag

15:23spend tag

15:24here

15:26class

15:28here

15:30menu

15:32here

15:34class

15:36here

15:38here

15:40here

15:42here

15:44here

15:46here

15:48here

15:50width

15:5220 pixels

15:54height

15:565 pixels

15:58background

16:00white

16:02here

16:04border

16:06area

16:0810 pixels

16:10here

16:12again

16:14here

16:16here

16:18here

16:20here

16:22we

16:22use

16:24here

16:26this

16:27here

16:28here

16:29here

16:30here

16:31here

16:32here

16:34here

16:36here

16:38left right

16:390 pixels

16:42this is the hamburger

16:44here is the logo

16:47here is the height

16:5010VW

16:5210VW

16:5415VW

16:57this is the logo

17:00now I have a padding

17:03which is the space

17:06here is the location

17:10here is the space

17:1230 pixels

17:14here is the space

17:16here is the

17:17space

17:20here is the logo

17:22here is the image tag

17:24set

17:26image tag

17:28image tag

17:29image tag

17:30that weight is 100%

17:35hide is 100%

17:37object fit

17:40cover

17:41and object position

17:43center

17:45and this overflow

17:47that is hidden

17:49okay

17:50this back button

17:52and now

17:54there is no image

17:56but this image

17:58here is the logo

18:00we can create

18:02here

18:04is the screenshot

18:06here

18:08here

18:10here

18:12here

18:13here

18:15here

18:16here

18:19here

18:20here

18:22here

18:23here

18:24here

18:25Alright, welcome!

18:30No, 3,2,1

18:32Let's start

18:34Alright, I created the logo

18:37I created the logo

18:39I created the white logo

18:41I said why not?

18:43Let's create the logo

18:45I will put it in the end

18:47I will put it in a little while

18:49I will put a hero box

18:51Great

18:53Here we go

18:57The creator of the parent

18:59Here we go

19:01Ok, so

19:03I 건 back

19:05The logo

19:07I can press the logo

19:09Next I will put it in the logo

19:11I will put it in a little while

19:13I will put it in the black background

19:17After that, I will go across

19:19can be done.

19:20So here we are going to take a look at the div.

19:23I will take a look at the hero box.

19:26This is the hero box.

19:28We will take a comment to create a copy.

19:33Here we go.

19:36Hero box.

19:40Okay.

19:41So.

19:42Hero box.

19:44Okay.

19:46Here we will take a look at this.

19:51Here we will take a look at this.

19:54100%

19:56This is the height.

20:00We will take a look at this.

20:03Background color.

20:05Black.

20:06Totally black.

20:08Yes totally black.

20:10This is the black.

20:12After we will take a look at this.

20:15This is the height.

20:16You can see,

20:17asking us.

20:18Yes.

20:19Basically.

20:20Body.

20:21When

20:22You have to rest the left.

20:23Background.

20:24So.

20:25This is the color.

20:26It is the color that is black.

20:29You can see white.

20:30This is the color is the color.

20:32You can see the color.

20:34And here we have to select.

20:36we need to create

20:38first change

20:42anchor tag

20:44color

20:46white color

20:48and the other

20:50icons

20:52color

20:54white

20:56color

20:58color

21:00white

21:02background

21:04white

21:06color

21:08white

21:10color

21:12the logo

21:14adjust

21:16the logo

21:18the logo

21:20the logo

21:22is

21:24contained

21:26the logo

21:28the

21:30color

21:32the

21:34color

21:36the

21:38color

21:40the

21:42color

21:44the

21:46color

21:48the

21:50color

21:52the

21:54color

21:56the

21:58color

22:00the

22:02color

22:04the

22:06color

22:08the

22:10color

22:24the

22:26color

22:28the

22:30color

22:32the

22:34color

22:36Black color

22:38This thing

22:40And

22:42This scene is set

22:44Let's go to the hero box

22:46Let's go to the hero box

22:48Because we have created

22:50The next thing is

22:52Hero box

22:54Let's get started

🔥 Deadpool Website Project | Part 01 | New Creative Frontend Series Start Ho Gayi!

Category

Transcript

Be the first to comment

Recommended