🔥 Deadpool Website Project by Code Craft Arhum - Dailymotion

Code Craft Arhum

🔥 Welcome to the *Deadpool Website Project* — **Creative Frontend Series**!

Transcript

00:00:00Let's create a hero box.

00:00:14First of all, we will see what we can see here.

00:00:21First of all, I will start from the top section.

00:00:26First of all, I will start from the top section.

00:00:33First of all, I will focus on this part.

00:00:41We will see how to create and how to create.

00:00:48First of all, we will see how to create.

00:00:55First of all, we will see how to create.

00:00:58First of all, we will see how to create.

00:01:02First of all, I will see how to create a new logo.

00:01:12and

00:01:14this is

00:01:16the

00:01:18one

00:01:20one

00:01:22one

00:01:24one

00:01:26one

00:01:28one

00:01:30one

00:01:32one

00:01:34one

00:01:36one

00:01:38one

00:01:40one

00:01:42one

00:01:44one

00:01:46one

00:01:48one

00:01:50one

00:01:52one

00:01:54one

00:01:56two

00:01:58one

00:02:00I will set up my mic here.

00:02:04Okay.

00:02:06Okay.

00:02:08Okay.

00:02:10Okay.

00:02:12Okay.

00:02:14Okay.

00:02:16Okay.

00:02:18Okay.

00:02:20Okay.

00:02:22Okay.

00:02:24Okay.

00:02:28Okay.

00:02:30Okay.

00:02:32Okay.

00:02:34Okay.

00:02:36Okay.

00:02:38Okay.

00:02:40Okay.

00:02:42Okay.

00:02:44Okay.

00:02:46Okay.

00:02:48Okay.

00:02:50Okay.

00:02:52Okay.

00:02:54Okay.

00:02:56say transform translate x minus fifty percent

00:02:59करके इसको देखूंगा के अभी है यहां पे ना मैं एक बैक्राइड वाइड बे लगा दूँ दाके मुझे नजर आए

00:03:05यह मेरा बोक्स बन गया तो यह देख रहो कि यहां पर बेसिकली यह जो वाइड वोक्स है इसके अंदर मेरा जो करेक्टर है

00:03:12वो आएगा जैसे कि आप रैफरेंस में भी देख रहे हैं तो इस क्रेक्टर को आप हम मैं एक सा कि यह वीडियो बंद कर लूँ आप सही है तो यहां पर अपना जो क्रेक्टर है वो यहां पर हम

00:03:22simple as it लगा सकते हैं तो उसके लिए मैं यहां पर एक image टैग लूँगा

00:03:27dot slash images में जाओंगा और एक मेरी image of one png के नाम से और यह जो old है ना old पेशे का आप ऐसे

00:03:35empty रहने तो यहां इसमें कुछ लिख लो यह बिसकली इसलिए होता है कि ना अगर आपकी किसी ना किसी वज़ा से image

00:03:41load नहीं हो रही तो उसकी जगा क्या दिखाना बस simple यह इसका यह मकसद होता है

00:03:46अच्छा तो यह image तो मैंने लगा ली लेकिन अभी कुछ यह इस तरीके से आई है

00:03:51तो let's पहले इसको ना पहले मैं इसको सही कर लूँ

00:03:54पहले मैं इसको कुँँगा कि overflow जो है इसके अंदर जो भी चीज इससे बाहर जाए इसे div के वो empty मतब के hidden होजे

00:04:02और उसके बाद जी अब हम क्या करेंगे इसमें जो dot character है इसके अंदर जो img tag मैंने लगाया है

00:04:09उसको मैं width height देकर ऐसे 100% और जो object fit है वो मैं करूँगा cover ऐसे करके और जो object position है वो भी मैं करूँगा center

00:04:24तो इस दिके से यह बिल्कुल exact मेरा center में आजेगा लेकिन आप हमने क्या करना है इसको

00:04:31थो रहा था ना उपर लाना है पहली चीज ठीक है तो उसके लिए सबसे पहले हम क्या कर सकते हैं यहां पर

00:04:41यह bottom zero है ना यह मैं क्या करूँगा कि इसकी जो height आपो मैं increase करूँगा जैसे के 600 pixels कर रहा हूं मैं

00:04:51देखता हूं हां जी अब सही है 600 काफी रहेगा अगर मैं 650 तो और आसा और बढ़ा कर लूँ तन में ज्यादा अच्छा लग गया ना this is nice

00:05:03तो यह scene हो गया मेरे पास set यहां पर ठीक है अच्छा लग रहा है और यह जबकि यह अच्छा लग रहा है अब हम क्या करेंगे इसके background पर यह जो red color का

00:05:14जो circle है यह हम create करेंगे तो यहां पर मैं एक div लूँगा जिसका नाम मैं रुखूँगा जी red circle circle ठीक है और इस red circle को भी मैं यहां पर style कर लूँगा

00:05:27red circle को मैं करूँगा यहां पर style कैसे करेंगे के width रहेगी वो रहेगी 300 pixels height रहेगी height height भी मैं 300 दूँँगा

00:05:42ठीक है और जो border radius है वो मैं दूँगा 50 pixels का और जो background है वो मैं दूँगा red color में

00:05:50red मतब कि bright red नहीं होगा यह basic लिए तो रासा dim red होगा

00:05:55कुछ ऐसे तो यह अभी कुछ इस तरीके का यह चीज़ बनी लेकिन अब इसको पूरा circle बनाना यहां तो मैं क्या करूँ

00:06:02पिक्जल की जगह percent दे दूँ तो फूरा exact circle की शेप में आ जाएगा और जिद्दर 300 की जगह मैं इसको करूँगा

00:06:10फूर हंडर्ड पिक्जल्स तो इस तीके जिए फूर अंडर्ड पिक्जल्स आ जाएगा ठीके मुझे इसका जो color है ना color मैंने इसका करना है यह वाला जो भी इसमें पड़ा हुआ है ठीक है तो क्या कर सकते हैं पिसको फुदी try कर लेते हैं यहां पर ना पोड़ा सा पिं�

00:06:40लाइंगे मैं यहीं से कुछ ना red का sample उठागे ना और यहां पर पेस कर लूँगा कुछ यूँ तो में पास बहुत चीज आजीगे लेकिन इसको तो रहा सा मैं reddish shade के अंदर ले जाएंगे ऐसे करके

00:06:55अब सही है ठीक है अब यह हो गया scene होके अब मैं जी इसको position absolute दूँगा और इसको left से 50% और top से भी 50% करूँगा उसके बाब मैं करूँगा जी transform translate इदर minus 50% यह basically होगा x के लिए और जो अगली value जो मैं दूँगा वो होगी मेरी

00:07:19stop और bottom के लिए ठीक है तो यह exact zero box के exact center में आ जाएगा अब जब कि यह आ गया है मैं करूँगा यह जो character वाली div है इसको कहूँगा कि यह z index का

00:07:34z index इसका two है तो यह इसके उपर आजएगा और circle इसके पीछे चला जाएगा ठीक है यह basically यह चीज़ बनेगी लेकिन मुझे जो circle है वो थोड़ा बढ़ा करना है क्योंके मेरे reference में थोड़ा सबढ़ा तो मैं इसको 500 के करीब करके इस दीके से यह set हो जाएगा ठीक होगे अ�

00:08:04और यहां फोर्टे पर्सेंट करते थे अब मैं करूँगा कि इसके पीछे जो text लिखा है यह वाला डैड़ बूल यह मैं लिखूँगा तो यहां पर मुझे क्या चाहिए होगा यहां पर मुझे simple as it is h1 चाहिए

00:08:19ठीक है तो मैं एक h1 लिखूँगा जिसको एक class दूँगा यह मेरी hero box की main heading है ठीक है और यहां पर मैं लिखकर यहां पर मैं लिखूँगा जी dead pool इस तरीके से मैंने यह लिख दिया अब मैं करूँगा इस को इस class को मैं करूँगा जी copy कोपी करने के बाद जी यहां पर मैं �

00:08:49font size है font size इसको दूँगा 32 VW का और जो color रहेगा वो रहेगा white color ठीक है और यहां पर ना इसका structure कुछ ऐसे रखूँगा के hero box के अंदर ना hero box के अंदर

00:09:06ऐसे एक h1 है जिसकी class का नाम है hero box main heading उसके साथ यह काम करना है हमने तो यह scene अभी इस तरीके से आ ठीक है अभी यह इदर जा रहे है लेकिन अभी इसको एड़ेस्ट करेंगे सबसे पहले जो font family लेगे की वह मेरी लगे की variable में primary font ठीक है वह मेरा font आगे है

00:09:26आप मैं करूंगे इसका जो z index है ना मतलब जो circle है circle का जो z index होगा वो मुझे करना होगा minus one मतलब यह सबसे back पर आ जागा यह back पर आगे मतलब यह hero box की भी back side पर चलागे अगर मैं यहां पर background

00:09:41empty कर दूँगा यह चीज नजर आजएगी ठीक है circle तो है लेकिन काफी पीछे चला गया अब जो भी चीज़ हमें create करूँगा वो circle के ओपर ही आएगी ठीक हो के यह समझ आगी आप लोगों को अब जी हमने क्या करना है कि इसमें डो तिन चीज़े इसमें add करनी है जैसे के your text

00:10:11phone थोड़ा जाद ही बड़ा हो गया है जिसको मैं करीब कर रहा हूं काफी है और उसके बाद मैं जी position absolute करके top से 50% and left से 5% करके

00:10:27इस तरीके से adjust करूंगा और जो transform translate y है वहाँ पे मैं minus 50% लगा दूँगा तो इस तरीके से यह में पस इदर आ गया है अब जब कि यह आ गया है इसको left side से तो रहा साना कम कर लेंगे तो 2% के करीब या 3% के करीब मुझे set लग रहा कि यार यह center में है और लग भी रहा है ठी

00:10:57नहीं है letter spacing में minus three pixels का कर रहा हूँ ठीक है यह minus five pixels का this is nice और इसको मैं left से 12% कर दूँगा ताके थोड़ अब वो जरा left right से जरा देखने में center लगे

00:11:15अच्छा यह see in हो गया मारे पास set अब हमने क्या करना है अब हमने कर रहा है कि यह वाली जो चीज है इसको हम करेंगे इसके उपर वाली तो इसके उपर वाली चीज को create करने के लिए आप हम क्या कर सकते हैं वो देख लेते हैं तो यहां पर सबसे पहले आप हमें क्या चाहि

00:11:45If I want to make it, if I want to make it clear, I will put it in a container and put it in two divs.

00:11:54One div is the two elements and one div is the two elements.

00:11:59Then I will put it in a grand patent.

00:12:02I will put it in a grand patent.

00:12:04I will put it in a grand patent.

00:12:06.herobox content container

00:12:13.

00:12:17.

00:12:20.

00:12:21.

00:12:23.

00:12:28.

00:12:30.

00:12:32.

00:12:33.

00:12:34.

00:12:35.

00:12:36.

00:12:37.

00:12:39.

00:12:40.

00:12:42.

00:12:43.

00:12:44.

00:12:45.

00:12:47.

00:12:48.

00:12:49.

00:12:50.

00:12:51.

00:12:52.

00:12:54.

00:12:55.

00:12:56.

00:12:57.

00:12:58.

00:12:59.

00:13:00.

00:13:01.

00:13:02.

00:13:03.

00:13:10.

00:13:11.

00:13:12.

00:13:13.

00:13:14.

00:13:15.

00:13:16.

00:13:17.

00:13:18.

00:13:19.

00:13:20.

00:13:21.

00:13:22.

00:13:23.

00:13:24.

00:13:25.

00:13:26.

00:13:27.

00:13:28.

00:13:29.

00:13:39.

00:13:40.

00:13:41.

00:13:42.

00:13:43.

00:13:44.

00:13:45.

00:13:46.

00:13:47.

00:13:48.

00:13:49If I do this, I'll go back with my image.

00:13:58My image is got 100%

00:14:01It's good.

00:14:02If I do this, I'll go back with my image.

00:14:05Red Purple

00:14:06It's good.

00:14:07Content 2

00:14:08Content 2

00:14:10I'll also apply the same style.

00:14:14Apply the background is the main, I'll go from it.

00:14:17क्योंकि इसका काम कमल हो गया तो इस देख रहे हो यह चीज आगी आप मैं करूंगे यह कुंटेनर है इसको मैं पुजीशन एपसिलूट करके टॉप से इतना थैटी परसंट ले जाओंगा नीचे और ज्यादा आगे ट्वैंटी फाइफ ले जाते हैं भी भी ज्यादा है तो

00:14:47मैं 16 पे इसको रख रहा हूं यह सीन हो गया जी अब हमने क्या करना है कि यह जो कॉंटेंट वन और कॉंटेंट टू है इसकी हाइड को हमने कर देना इंक्रीज करीबन 400 के सम्थिंग ठीक है और जो इनके अंदर का जो पेरेंट है ग्रेंड पेरेंट इसके अंदर मैं एक प

00:15:17ठीक है ओके और अभी भी चाहिए मैं 80 पीक्जल्स करीब इसको विर्थे दे रहा हूं मतब कि सौरी पैडिंग दे रहा हूं और ठीक है यह को है कर लिया हमने काम क्रियेट अब हमने क्या करना है कि इनके अंदर जो कॉंटेंट अब हमने डान तो सबसे पहले इसको भी मैं �

00:15:47लाइन आइटम लाइन कॉंटेंट नहीं लाइन अइटम सेंटर और जिस्टिफाइ कॉंटेंट स्पेस बिट्वीन तो सेम चीजे मैं यह कोपी करके यहां पर अपलाई करूंगा और फॉर्मिट लाजमी कर लूँगा इससे यह होगा कि जो फुदू स्पेसिंग आ रही थ

00:16:17ज्यंकर्स हैं प्रडीयुस है इस तरीके कर नाम ठीक है तो यहां पर मैं हेच में ही इसका नाम रखूंगा और नाम रखूंगा जी इसका जो भी इसका लिखाया जी डियांक रे नोल्ड्स रे नॉल्ड्स ठीक है यह कर दिया और एक और हुट् Wed還 Nein क्रेट करूंगा बड़

00:16:47I mean I'm writing

00:16:50Corinne

00:16:52and then I'm writing

00:16:55Huge

00:16:56Hug Jackman

00:16:57Hug Jackman

00:17:00This will be set

00:17:01The scene is set

00:17:03Now we need

00:17:05This content will be done

00:17:08First of all

00:17:09H1

00:17:10Whichever

00:17:12H1

00:17:13Color

00:17:14White

00:17:15ھیک ہے جو فونٹ فیملی ہے وہ ہم ویریبل میں ہم نے

00:17:19اوریڈی سیٹ کی ہوئی ہے پرائمری فونٹ تو وہ یہاں پر

00:17:22پرائمری فونٹ آ گیا ہے ٹھیک ہو گیا یہ سین ہو گئے جی سیٹ

00:17:26اب میں کہ کروں گے یہ جو کونٹین ون ہے اس میں بھی چاہوں

00:17:29تو مزید پیڈنگ دے سکتا ہوں سیرو پکزلز اور لیفٹ رائٹ

00:17:32سے ٹوینٹی پکزلز تاکہ یہ جو لائن ہے یہ بیسیکلی

00:17:38کریٹ ہو سکے اس کے بعد جو فونٹ سائز ہے وہ میں کروں گا

00:17:42ففٹین وی و دیکھتے ہیں ابھی کتنا ہے پاہ میں ہم چھوٹا

00:17:45کر لیں گے پائیف وی و یا تری وی و یا تو وی و

00:17:54بلکہ اس کو کر لیتے ہیں ہاں ٹو پائنٹ فائیف کافی

00:17:59رہے گا اس اس نائس اور اس کی جو ہائٹ ہے وہ سوری ویٹھ

00:18:04ہے وہ میں کروں گا اور ففٹی پکزلز اس طریقے سے یہ چیز

00:18:10آجے گی اب مجھے سیم یہاں پر بھی کوئی چیز اپلائے

00:18:13کرنی ہے تو میں یہاں پہ کوپی کروں گا پیس کروں گا

00:18:16لکھ دوں گا تو یہاں پر یہ چیز آجے گی اور یہاں پر

00:18:20مجھے ایک چیز لگانی ہوگی ٹیکسٹ ٹھیک ہے تو یہ جو

00:18:26چھوٹے لیٹرز تھے اب یہ یہ بھی کیپٹل ہو گئے ہیں اور اس

00:18:29کے سے یہ چیز ریٹ ہو کر ریڈی ہو چکی ہے جیسے کہ ریفرنس میں تھا

00:18:34اور ایک اور چیز یہاں پر ایڈ کرنی ہے وہ یہ ہے کہ اس کی بھی

00:18:38ہائٹ جو ہے وہ میں نے فور ففٹی پکزلز کرنی ہے ٹیک ہو گیا

00:18:43this is nice اچھ ہے اب جی آگے چلتے ہیں اور آگے چلنے کے

00:18:47بعد یہاں پر اب ایک نیا بار چاہیے مدرک یہ جو لائن نظر آ

00:18:53رہی ہے اس کو ہم ایک ڈیپ دیں گے جس کے اندر ہم رکھیں گے اس کا

00:18:57نام نام کیا رکھیں گے ایک ڈیپ لیں گے جس کا نام رکھوں گا میں آہ گریڈ ٹیک ہے

00:19:04اور اس گریڈ میں اس گریڈ کو بھی میں سٹائل کروں گا ٹیک ہے تو گریڈ کو

00:19:10میں سٹائل کر لیتے ہیں رکھونا ذرا بس ایک گریڈ سے دوں گا ایٹی

00:19:15پنگزلز اور ہائٹ دوں گا ہنڈرڈ پنگزلز بیگ روڈ دوں گا وائٹ کلر

00:19:22تو یہ سی نہ آگے ٹیک ہے اس کو اب میں کروں گا یہاں پر

00:19:26سٹائل کرنا ہے ٹیک ہے تو پوزیشن ایپسلوٹ دے کر میں لیفٹ سے

00:19:34ففٹی پرسنٹ اور ٹاپ سے فائی پرسنٹ پر کر کے ٹرانس فارم میں کروں گا

00:19:45اس کو ٹرانسلیٹ صرف ایکس والی سائیڈ پر مائنس ففٹی پرسنٹ تو

00:19:49ایکزیکٹ یہ یہاں پر آگیا ہے ٹیک ہے لگیا سمجھ اب مجھے یہ جو میرا

00:19:54ڈیڈ بھول جو کریکٹر ہے وہ دیکھ رہے ہو ریفرنس میں اگر دیکھو تو اس

00:19:58کا جو ہر یہ سر ہے سر اس کا یہ ٹیکس کے ایج پر ہے میرا اوپر

00:20:05جا رہا ہے پہلے میں اس کو ایڈجس کرتا ہوں اس کے بعد میں آگے

00:20:09چلوں گا پہلے تو ٹیک ہے تو اس کی جو ہائٹ وہ میں کروں گا

00:20:13600 pixels یا 6 580 pixels ٹیک ہے 580 نہیں کرنا تو 560

00:20:23کر لو تو یہ تھوڑا ہونی چاہے گا ٹیک ہے تو اس تکے سے یہ

00:20:27چین سین میرے پاس set hole کر ready ہو چکا ہے very nice this is

00:20:35very very nice اچھا لگ رہا ہے کہ نہیں اچھا لگ رہا ہے اچھا

00:20:41لگ رہا ہے ہاں جی

00:20:45دیکھے نا مجھے

00:20:49620 بھی اچھا لگ رہا یہاں پر

00:20:51this is nice

00:20:53ہاں ایسا کرتے ہیں اس کو یہیں پہ ایسا رکھ لیتے ہیں ٹیک ہے اس

00:21:07کو ایسا ہی یہاں پر رکھ لیں گے اور اگر آپ نے کرنا بھی ہے

00:21:11مطلب کہ جو ابھی ہم نے 580 یا 560 جیتنا بھی ہم نے کیا تھا

00:21:15اتنا بھی آپ کر سکتے ہو no problem at all

00:21:18اور یہ جو circle ہے اس کی height width سے تھوڑی سے کام کر لوگے تو

00:21:21400 کے something اس طریقے سے set ہو جائے گا یہاں

00:21:25450 کافی رہے گا ٹیک ہے تو اچھا لگ گئے گا اور اس کے بعد جی

00:21:31اب چلتے ہیں جی آگے continue کرتے ہیں کام اپنا تو یہاں پہ جی میں

00:21:35بات کر رہا تھا کہ جو tops ہے 5% اس کو میں کروں گا جی 8% پر

00:21:39یہاں 10% پہ ٹیک ہے 10% this is nice

00:21:45okay very nice دوستو اب یہ یہاں پر کیا کرنا ہے یہاں پر آپ

00:21:51میں لکھنا ہے display flex align item میں دے رہا ہوں center center

00:21:57line item center جو justify content وہ میں دوں گا جی space between

00:22:02ایسا کیوں میں بتاتا ہوں کیوں کہ بھائی صاحب اس کے اندر اس

00:22:06grade میں میں 3 span tag لکھوں ٹیک ہے آہ ایسے کر کے اس

00:22:13طریقے سے میں 3 span tag لکھ لی ہاں میں ان grade کے اندر جو

00:22:17بھی span tag ہو گئے یہ والا اس کو ایک ویرت دوں گا مطبکہ 5

00:22:22pixels کی اور height میں دوں گا اپنے parent کے 100% background

00:22:26background دوں گا white color کا تو دیکھ لو کہ یہ میرے پاس

00:22:29grade grade ہوگی اب اس کی width جو ہے وہ آپ increase کر لو

00:22:33گے یا 10 pixels کر لو یا 20 pixels

00:22:40according to reference اگر چلیں تو مجھے تھوڑی سی جو width ہے

00:22:45آہ یہ اس کو 15 کرنا ہے اور اس کو مجھے 60 pixels کر دینا

00:22:52تاکہ تو اسا شرنک ہو جائے تو this is nice result آ چکا ہے

00:22:57تو 80 pixels کر کے اس کو top سے اور 15% نیچے لے ہوں گا

00:23:03this is nice yes or not yes

00:23:08اس کو میں کر رہا ہوں 12% پہ

00:23:12okay this is perfect

00:23:14اچھا یہ structure ہو گیا جی اب رہتا ہے ہمارا یہ والا جو

00:23:18top bar نظر آ رہا ہے نا آپ کو اس top bar کو ہم نے

00:23:21grade کرنا ہے ٹھیک ہے جی اور اس top bar کو ہی ہم create

00:23:28کریں گے سے پہلے جو main thing رہے گی وہ یہ رہے گی اب

00:23:32دیکھو یہاں پر نا alignment کا ایک دو چیزوں کا آپ

00:23:35نے لازمی دیان رکھنا ہے دیکھو اب جو nap bar کے اندر جو

00:23:38padding دی ہے وہی padding ہم نے total website پر چلانی ہے ٹھیک ہے تو

00:23:43اس حساب سے اب ہم کیا کریں گے جو میرا h1 ہے جس کو نام

00:23:47دیا تھا یہ والا اس کو میں کروں گا left سے نا left

00:23:51سے 2% پہ لے کر رہا ہوں گا

00:23:54یا 3% پہ

00:23:57ٹھیک ہے اور left پہ 3% پہ لے کر

00:24:00یا میں ایسا کرتا ہوں left پہ 50%

00:24:03کر کے یہاں پہ میں کرتا ہوں

00:24:07transform translate minus 50%

00:24:11اور minus 50% کر رہا ہوں

00:24:14تو یہ exact center میں آ جائے گا

00:24:18اوکے نائس

00:24:20اچھا لگ رہا ہے

00:24:21ہاں جی اچھا لگ رہا ہے

00:24:22اب اگر میں اس کا جو font size

00:24:24ہے تو اساں increase کر رہا ہوں

00:24:2532W

00:24:26کر رہا ہوں

00:24:27زیادہ ہو گیا

00:24:2831 کافی

00:24:29ہاں

00:24:30اور اس کے بعد یہ

00:24:32container

00:24:33content container

00:24:34اس کے اندر جو padding دی ہے وہ

00:24:36میں کم کر دوں اگر

00:24:3750 pixels کی

00:24:38یا 48 pixels کی

00:24:42تو اسی اور 45 کر کے دیکھیں

00:24:45ٹھیک ہے

00:24:4845

00:24:49اور جو content ہے اس کے اندر بھی padding

00:24:51دی ہوئی ہے

00:24:52وہ بھی میں کم کر رہا ہوں

00:24:5310 pixels

00:24:54یا 15 pixels

00:24:56so this is perfect

00:24:58اب صحیح ہے

00:24:59ٹھیک ہے آپ جو دیکھ رہا ہوں

00:25:01کہ left side پہ بھی جو line ہے نا

00:25:03مطبکہ فاصلہ اس میں

00:25:05وہ بھی equal نظر آ رہا ہے

00:25:07اب آگے آج ہو جی آگے اپنا کام آجتا ہے

00:25:09ہمارا top bar کا

00:25:11یہ create ہوگی ہے ہماری

00:25:12اب top bar میں کس کو کہہ رہا ہوں

00:25:14top bar میں کہہ رہا ہوں یہ دیکھ رہا ہوں

00:25:15یہ والی چیز کو

00:25:16ایک اور یہ والی چیز ٹھیک ہے اس کو

00:25:18میں top bar کہہ رہا ہوں

00:25:19تو اس کو create کرنے کے لیے

00:25:21simple as it is top bar لکھ لو

00:25:24مطلب نام کچھ بھی دے سکتے ہیں میرے

00:25:26ذہن میں ابھی یہ آگے ہیں اس لیے میں نے

00:25:27یہ والا دے دیا

00:25:29اور اس top bar کو اب

00:25:31ویٹ سے دیں گے ہنڈر پٹسنٹ

00:25:34height دیں گے height ہے

00:25:37height دیں گے یہی کوئی

00:25:3950 pixels background دیں گے white

00:25:42ٹھیک ہے اور اب بھی دیکھتے ہیں کہ کہ

00:25:45کہاں پر آجو اب یہ یہ یہاں پر آجو

00:25:47ٹھیک ہے اس کو اب تھو رہا تھا نا

00:25:49ہم نے لانا جی نیچے

00:25:51position absolute کر کے

00:25:53top سے اس کو میں لا رہا ہوں

00:25:558% کے قریب

00:25:56تھوڑا سا یہ آجے گا میرا

00:25:57نیچے زیادہ ہی آگے

00:25:59top سے 5 کر رہا ہوں

00:26:02this is perfect

00:26:04یہ آگے

00:26:06اور جو padding ہے padding

00:26:08بعد میں adjust کریں گے

00:26:09لیکن ابھی ہم نے کیا کرنا ہے

00:26:10یہاں پر

00:26:11main thing ہے وہ ہے

00:26:12display flex

00:26:13وی یہ کیا ہوا ہے

00:26:15display flex

00:26:16اور align item

00:26:19میں کروں گا

00:26:20center

00:26:21justify content

00:26:22space between

00:26:23ٹھیک ہے

00:26:24اب اس space between

00:26:25کے بعد

00:26:26آپ ہم تین

00:26:27یہاں پر

00:26:28تو میں ایک ڈیو لوں گا

00:26:29جس کا نام میں

00:26:30رکھوں گا جی

00:26:31top bar

00:26:32buttons

00:26:33ٹھیک ہے

00:26:34اس ڈیو کندہ

00:26:35میرے تین

00:26:36buttons ہوں گے

00:26:37مطلب button

00:26:38کی طرح دکھنے والے

00:26:39element ہوں گے

00:26:40تو میں width

00:26:41لے رہا ہوں

00:26:42اس کی

00:26:43300 pixels

00:26:44and height

00:26:45لے رہا ہوں

00:26:46اس کی 100%

00:26:47background

00:26:48اس کا رول دوں گا

00:26:49background

00:26:50color

00:26:51white color

00:26:52ٹھیک ہے

00:26:53اور یہ جو top

00:26:54bar ہے اس کا

00:26:55background ختم کر رہا ہوں

00:26:56یہاں پر میرے بھی

00:26:57وہ تین buttons

00:26:58آنے والے ہیں

00:26:59nice

00:27:00اور جو padding

00:27:01ہے وہ padding

00:27:02بھی میں یہاں پر

00:27:03adjust کر سکتا ہوں

00:27:040 pixels

00:27:05اور

00:27:0660 pixels

00:27:07this is perfect

00:27:09nice

00:27:10اب اس کے اندر جی

00:27:11اب ہم نے

00:27:12جو buttons

00:27:13ہیں اس کے اندر

00:27:14اب ہم نے

00:27:15ایک ڈسپلی بنا لینا ہے

00:27:16flex

00:27:17لکھ لو

00:27:18ڈسپلی

00:27:19flex

00:27:20اور

00:27:21align item

00:27:22بھی اس کا center

00:27:23اور justify content

00:27:24بھی

00:27:25center کر دوں

00:27:26یہاں

00:27:27phase between

00:27:28ٹھیک ہے

00:27:29اس طریقے سے یہ

00:27:30کر لو

00:27:31at the end

00:27:32بھی کیا کرنا

00:27:33آپ نے

00:27:34اس کو

00:27:35span tag میں بھی

00:27:36لکھ سکتے ہو

00:27:37اس طریقے سے

00:27:38ایسے

00:27:39ایک دو

00:27:40تین

00:27:41اور اس

00:27:42span tag کے اندر

00:27:43ایک ایک جو content

00:27:44وہ لکھ سکتے ہو

00:27:45جیسے کہ

00:27:46پہلے میں لکھا جی

00:27:47action

00:27:48دوسرے میں لکھا جی

00:27:49comedy

00:27:50comedy

00:27:51ڈیسے میں لکھا جی

00:27:52sci-fi

00:27:53sci-fi

00:27:56ڈھیک ہے

00:27:57تو اس لکھے جی

00:27:58content

00:27:59بھی آگے

00:28:00اب اس content

00:28:01کو style کر سکتے ہو

00:28:02آپ

00:28:03اس content

00:28:04کو style

00:28:05کرنے کے لیے

00:28:06ایک ہی ہم style

00:28:07use کریں گے

00:28:08وہ ہے جس

00:28:09span کے اندر

00:28:10جو width

00:28:11ہم دیں گے

00:28:12100 pixels

00:28:13hide

00:28:14دیں گے

00:28:1550 pixels

00:28:17ٹھیک ہے

00:28:18اور جو border

00:28:20ہے وہ ہم دیں گے

00:28:21one pixel

00:28:22solid white

00:28:23جو color

00:28:24ہے وہ بھی ہم

00:28:25white color دیں گے

00:28:26جو font

00:28:27family ہے وہ

00:28:28ہم دیں گے

00:28:29variable میں

00:28:30secondary font

00:28:31secondary font

00:28:32کرنے کے بعد

00:28:33یہ سینہ آگیا

00:28:34اب میں کروں گا

00:28:35اس میں

00:28:36display flex

00:28:37align item

00:28:38center

00:28:39justify content

00:28:40center

00:28:41border

00:28:4250 pixels

00:28:43کا

00:28:44تو

00:28:45اس کے سینہ

00:28:46create

00:28:47ready

00:28:48ہو جائے گا

00:28:49جبکہ یہ ready

00:28:50ہو گیا ہے

00:28:51اب ہم نے اس کا

00:28:52font size

00:28:53وہ ہم نے کرنا ہے

00:28:5412 pixels

00:28:55تاکہ کافی

00:28:56چھوٹا ہو جائے

00:28:57اور اس کی جو height

00:28:58اور width

00:28:59ہم نے دی ہوئی ہے

00:29:00وہ بھی کم ہو جائے

00:29:0150 pixels کی

00:29:02نہیں

00:29:03کافی زیادہ نہیں

00:29:04کرنی

00:29:0530 pixels

00:29:06اور جو height

00:29:07ہے وہ بھی ہم کریں گے

00:29:0840 pixels

00:29:0930

00:29:10یا

00:29:1130

00:29:12یا 35

00:29:13صحیح

00:29:15صحیح

00:29:17صحیح

00:29:18صحیح

00:29:19صحیح

00:29:20اب ان کے درمیان میں

00:29:21جو space

00:29:22اگر کم کرنا

00:29:23تو اس کا جو

00:29:24ویٹی پکزز مطل

00:29:26کم کر لوگا

00:29:27تو automatically

00:29:28اس کے اندر کی جو

00:29:29spacing ہے وہ بھی

00:29:30automatically

00:29:31کم ہو جائے گی

00:29:32ٹھیک ہے

00:29:33اب یہ سین ہو گیا

00:29:34یہاں پر یہ معاملہ

00:29:35set ہو گیا

00:29:36دیکھ رہے ہیں

00:29:37لیکن یہاں پر جی ایک چیز

00:29:39جو لکھنی ہے

00:29:40وہ ہم نے یہ لکھنی ہے

00:29:41کہ جو span

00:29:43ہے

00:29:44اس پین میں نا

00:29:45جو ٹیکس ٹرانس فارم

00:29:46ہیں

00:29:47وہ ہم نے رکھ رہا ہے

00:29:49اپر case

00:29:50تو یہ جتنے بھی وہ

00:29:51جو چھوٹی چھوٹی چیز

00:29:52ہے تھی وہ اپر case میں

00:29:53convert ہو جائیں گے

00:29:54اور جو دوسری

00:29:56سائٹ پہ ہے ہمارے پاس

00:29:57top bar buttons

00:29:58کے بعد

00:29:59یہاں پر میں ایک پی ٹیک

00:30:00لکھوں گا اور پی ٹیک

00:30:01اندر میں لکھنے کیا

00:30:02والا ہوں وہ میں بتا دیتا ہوں

00:30:03وہ لکھنے لگا ہوں

00:30:04یہ والا

00:30:05release

00:30:06three twenty twenty five

00:30:08میں یہی لکھوں گا

00:30:10release

00:30:12ٹھیک ہے

00:30:15اور

00:30:16three

00:30:18twenty

00:30:20twenty twenty five

00:30:21مطبع آج کی

00:30:22میں ڈیٹ ڈالوں

00:30:23مطبع یہ آج کی

00:30:24تو نہیں ہے لیکن

00:30:25رینڈم ہے

00:30:26کوئی مسئلہ نہیں ہے

00:30:27اچھا یہ کرنے کے بعد

00:30:28جی ہمیں اس کو کہوں گا

00:30:29کہ جو top bar ہے

00:30:31یہ ہے جی top bar

00:30:33جس کے اندر پی ٹیک پڑا ہوا ہے

00:30:36جس کا کلر رکھ لے

00:30:37کوئی کولم کیا رکھ دیا ہے

00:30:40کلر

00:30:41وائٹ کٹ دے

00:30:42جو فونٹ

00:30:43فیملی ہے ویریبل میں

00:30:45سیکنڈری فونٹ رکھ لے

00:30:47تو ابھی

00:30:48کدھر آئیے

00:30:49آیا نہیں ہے

00:30:52مدھا کہ گلتے تو نہیں ہو گیا

00:30:53ہاں جی گلت ہو گیا بھائی صاحب

00:30:56ہم نے اس کو کہنا ہے یہ ہے جی class

00:30:58سب آئے گا نظر

00:30:59ٹھیک ہے یہ آگے نظر

00:31:00اور

00:31:01this is nice

00:31:02اچھا لگ رہا ہے

00:31:03دیکھیں تھوڑا سا اس کو

00:31:04بھی چھوٹا کریں گے

00:31:05اکوڈنگ

00:31:06مدھا یہ جو فونٹ سائز

00:31:07میں نے

00:31:08بٹن کے ٹیکس کو دیا

00:31:09نا سیم وحی دونگا

00:31:10تھا کہ تھوڑا سا چھوٹا ہو جے

00:31:12تو اس طرح سے یہ چیز آئے

00:31:13تو اوہ

00:31:14main structure

00:31:15یہ والہ

00:31:16اوپر والہ ready ہوگے

00:31:17اب آج ہو جی

00:31:18نیچے والے

00:31:19container

00:31:20مدھا کہ

00:31:21یہاں پہ

00:31:22دیکھ رہے ہو

00:31:23ایک سائٹ پہ لکھا ہوا جی

00:31:242024

00:31:25یہ بھی ہم create

00:31:26کرتے ہیں

00:31:27ٹھیک ہے اس کو بھی create

00:31:29کر لیتے ہیں

00:31:30یہاں اگر نہ بھی کرو تو مسئلہ

00:31:31کوئی نہیں ہے

00:31:32یہ ایک optional thing ہے

00:31:33اگر آپ نے کرنا

00:31:34کر لو نہیں کرنا

00:31:35نہ کرو کوئی مسئلہ

00:31:36نہیں ہے

00:31:37ہمارے پاس

00:31:38اچھا جی

00:31:39اب جو main thing آگیا ہے

00:31:40وہ بھی ہمارے پاس

00:31:41same thing

00:31:42یہ ہی ہے

00:31:43یہ والی چیز ہے

00:31:44ٹھیک ہے جی

00:31:46اس کو upgrade کرنا ہے

00:31:48اب اس کو create کرنا ہے

00:31:51اور اس سے اس کے بعد

00:31:53ہم یہ والا جو slider

00:31:54نظر آرہا نا

00:31:55اس slider کو بھی create کریں

00:31:57اس کے اندر صرف یہ جو image ہے نا

00:31:59اس image

00:32:00کی duplication ہم لیں گے

00:32:02لیکن اس کو بھی آپ کو میں بتا دوں گا

00:32:03کیسے میں کروں گا

00:32:04تو جیسے میں کروں گا اس کو دیکھ دیکھ کے آپ بھی

00:32:07اپنے صاحب سے کر لینا

00:32:09تو سب سے پہلے میں کرتا ہوں کہ نا یہ والا جو content ہے

00:32:12میں کرتا ہوں اس کو چلوں گا جی

00:32:15screenshot

00:32:16screenshot لینے کے بعد جی میں آؤں گا

00:32:18اپنے google پہ

00:32:19یا جونسا بھی browser آپ نے ان کیا ہوگا

00:32:21ابھی تو میں نے google ہی کیا

00:32:22تو یہاں پہ میں جیمینائی کے پاس جاؤں گا

00:32:24chat gpt کے پاس نہیں جا رہا

00:32:25اس لئے کیونکہ اس کے اندر وہ push limitation آ جاتی ہیں

00:32:28تو وہ کہتا ہے کہ بھئی آج کے دن آپ اتنی ہی images upload کر سکتے ہو

00:32:32فلانا ڈپ گانا

00:32:33لیکن جیمینائی میں نہیں ہوگا

00:32:35اس لئے میں جیمینائی

00:32:36آپ نے بعض اوقات ویڈیوز میں دیکھا ہوگا

00:32:38میں جیمینائی کے تھرو

00:32:40جو بھی picture ہے اس میں سے content نکال رہا ہوتا ہوں

00:32:42اور اس میں بھی وہ ہی میں کروں گا

00:32:44اس کو سیم command کروں گا

00:32:46مطلب کہ command وہ ہی ہوگی کہ اس picture میں جو بھی content

00:32:48ہے وہ مجھے لکھ کر دے دو

00:32:50وہ مجھے simple as it is

00:32:51وہ لکھ کر دے دے گا

00:32:52تو میں وہ ہی لکھنے لگوں گا

00:32:54picture میں

00:32:56جو بھی content ہے

00:32:58وہ مجھے

00:33:00لکھ کر دے دو

00:33:02تو یہ کہ کرے گا

00:33:04مجھے جو بھی picture ہے اس کے اندر کا جو بھی content رہے گا

00:33:07وہ مجھے

00:33:08اس طریقے سے لکھ کر دے دے گا

00:33:10اس سے یہ چھوٹی سی help ہو جاتی ہے

00:33:12یار کہ

00:33:13مزید content ہمیں لکھنا نہیں پڑتا

00:33:15ٹھیک ہو گیا

00:33:16اچھا جی اب باری آجتی ہے

00:33:18کہ ہم نے اب آگے create کرتے ہیں

00:33:20تو آگے create کرنے کیا

00:33:22آگے گاری کو چلانے کے لیے

00:33:24سب سے پہلے ہم اس چیز کو

00:33:26اس slider کو style کر لیتے ہیں

00:33:28اس slider کو style کرنے کا simple اور

00:33:30آسان طریقے کا آ رہا ہے کہ ہم یہاں پر ایک

00:33:32div لے لیں گے simple

00:33:34جس کا نام میں رکھوں گا جی hero

00:33:36slider

00:33:38اور اس hero slider کو پہلے style کر لیں گے

00:33:40copy کریں گے class

00:33:42اور یہاں پر

00:33:44اس طریقے سے اس کی class کا نام paste کر کے

00:33:46width دے دینے 100%

00:33:48and the height will be

00:33:50یہی کوئی 40 یا 50

00:33:52پی پلز ٹھیک ہے

00:33:54اور جو background ہے وہ ہم دیں گے white

00:33:56اور position ہے

00:33:58وہ ہم دیں گے absolute اور bottom سے اس کو ہم دیں گے

00:34:00آہ

00:34:0215% ٹھیک ہے

00:34:04اس کے بعد میں transform rotate

00:34:06لکھ رہا ہوں

00:34:08اس کو rotate دیں گے تو ابھی result

00:34:10آپ کے سامنے کچھ اس طریقے سے نظر آ جائے

00:34:12ٹھیک ہے

00:34:13یہ جو bar نظر آ رہی ہے

00:34:14یہ basically میری جو slider ہے

00:34:16وہ slider میرا

00:34:18basically یہ bar ہے ٹھیک ہے

00:34:20اب یہ جو white ہے

00:34:22میں اس کو میں

00:34:23minus five degree

00:34:24میں لے کر اس کو تھوڑا سا

00:34:25کم کر دوں گا

00:34:26this is perfect

00:34:28ٹھیک ہے

00:34:30اور

00:34:31i think

00:34:32اچھا ہے

00:34:33اور جو width

00:34:34ہے وہ میں کروں گا

00:34:35width

00:34:37کتنی کروں گا percent age

00:34:38کی جگہ

00:34:39اگر percent age

00:34:40تگا بھی رہنے دیں

00:34:41اس کو میں

00:34:42150% کے قریب کروں

00:34:43اب اس سے کرنے کے یہ ہوگا

00:34:45کہ یہ horizontal scroll

00:34:46بھی آپ کو نظر آ رہا ہے

00:34:47تو میں simple کیا کروں گا

00:34:49یہاں پر اوپر آؤں گا

00:34:50سب سے اوپر

00:34:51یہ جو میرا body

00:34:52ہے نا body

00:34:53تیک اندر صرف میں

00:34:54ایک چیز لکھ لوں گا

00:34:55کہ overflow

00:34:56x

00:34:57مطبع

00:34:58x

00:34:59axis پہ

00:35:00مطبع

00:35:01یہ جو horizontal scroll

00:35:02یہ مجھے نظر نہ آئے

00:35:03اس لئے میں

00:35:04overflow x

00:35:05کیا کروں گا

00:35:06یہ hidden

00:35:07تو یہ میرا

00:35:08of course

00:35:09گائب ہو جائے گا

00:35:10جب کہ گائب ہو گیا

00:35:11اب ہم نے کیا کرنا ہے

00:35:12یہاں پر اس کا جو

00:35:13background ہے

00:35:14black کی طرف لے جانا

00:35:17مطبع پورا black نہیں کرنا

00:35:18صرف اتنا

00:35:19کر دینا ہے

00:35:20black ہے

00:35:21crepe crepe

00:35:22ٹھیک ہے

00:35:23یہ میں نے کر لیا

00:35:24اب اس کے اندر

00:35:25بیسکلی جو چیزیں آئیں گی

00:35:26وہ بعد میں

00:35:27add کریں گے

00:35:28لیکن اب یہ ہم کری لیتے

00:35:29کوئی مسئلہ نہیں ہے

00:35:30ٹھیک ہے

00:35:31یہ بیسکلی میری ایک

00:35:32ڈیپ ہے

00:35:33اگر میں اس کا z index

00:35:34برہا دوں

00:35:35999 کر دوں

00:35:36تو یہ سب سے اوپر آجے گی

00:35:37خوشی ہوں

00:35:38اچھا جی بھائی

00:35:39مدہ

00:35:40اور

00:35:41کام اس میں ایک

00:35:42ہے کہ ہم یہ کروں گا

00:35:43یہ جو images

00:35:44ہیں نا دیکھ رہے ہو

00:35:45اس images کو ایک

00:35:46group میں ڈالوں گا

00:35:47اور

00:35:48at the end

00:35:49کیا کروں گا اس group

00:35:50کو میں کروں گا جی

00:35:51slide

00:35:52تو سب سے پہلے

00:35:53مجھے کیا کرنا ہوگا

00:35:54مجھے یہ جو image

00:35:55آپ کو نظر آ رہی ہے

00:35:56اس image کو مجھے

00:35:57generate

00:35:58کروانا ہوگا

00:35:59یہاں میں خود generate

00:36:00کرتا ہوں

00:36:01خود بناتا ہوں

00:36:02اور خود بنانے کے بعد

00:36:03آپ کو دوبارہ سے

00:36:04اس کام کو میں continue کرتا ہوں

00:36:06دو منٹ کا بس

00:36:07gap مجھے دے دو

00:36:10اوکے دوستو

00:36:11تو یہاں پر میں دوبارہ سے

00:36:12folder میں آگئے ہوں

00:36:13ٹھیک ہے

00:36:14اور یہاں پر میں نے

00:36:15یہ جو eyes

00:36:16وہ میں نے

00:36:17نکال کے

00:36:18png میں

00:36:19save کر دیا

00:36:20اب میں کیا کروں گا

00:36:21اس کو اب

00:36:22group کے اندر add کروں گا

00:36:23تو میں کیا کروں گا

00:36:24یہ جو

00:36:25hero slider

00:36:26اس hero slider میں

00:36:27میں ڈیو لوں گا

00:36:29اور اسے

00:36:30div کے اندر میں

00:36:31رکھوں گا

00:36:32slider

00:36:33ٹھیک ہے

00:36:34اس طریقے سے

00:36:35اور اس slider

00:36:36مطبع یہ ایک slider

00:36:37basically کیا ہوگا

00:36:38کہ ایک group ہے

00:36:39ٹھیک ہے

00:36:40جس کے اندر کچھ

00:36:415 یا 6 یا 10 item

00:36:42میں group کر کے

00:36:43رکھوں گا

00:36:44اب اس کا use

00:36:45کیسے کریں گے

00:36:46وہ میں آپ کو دکھانے لگوں

00:36:47مطبع میں کیسے use

00:36:48کر رہا ہوں

00:36:49وہ میں دکھا رہا ہوں

00:36:50اور یہاں پر میں

00:36:51اس slider کو

00:36:52میں ایک width دوں گا

00:36:53200 pixels کی

00:36:55اور hide دوں گا

00:36:56100% کی

00:36:58background دوں گا

00:37:00red color

00:37:01ٹھیک ہے

00:37:02ابھی دیکھ لو

00:37:03کیا ہوگا

00:37:04یہ ایک ڈیو آگی

00:37:05آپ کو نظر

00:37:06اب میں کیا کروں گا

00:37:07جی اس سے

00:37:08slider میں

00:37:09simple

00:37:11ایک چیز

00:37:12ایڈ کروں گا

00:37:13وہ یہ ایڈ کروں گا

00:37:14یہاں پہ

00:37:15image tag

00:37:16یہاں پہ کیوں کہہ رہا ہوں

00:37:17کیسے باتیں

00:37:18میں

00:37:19یہاں پہ

00:37:20display

00:37:21کسی use کروں گا

00:37:22ٹھیک ہے

00:37:23align item

00:37:24میں اس کو کہوں گا

00:37:25جی اس

00:37:26align content

00:37:27align

00:37:28align

00:37:29center

00:37:30ٹھیک ہے

00:37:31justify content

00:37:32جو ہے وہ بھی

00:37:33میں کروں گا

00:37:34یہی کوئی

00:37:35space between

00:37:36ٹھیک ہے

00:37:37اس دیکھ سے یہ

00:37:38اب میں نے کہا کرنا

00:37:39کہ اس slider کے

00:37:40نام کے اندر

00:37:41images ڈال دی

00:37:42ڈال سلیش

00:37:43images میں

00:37:44جو

00:37:453 والی

00:37:46image

00:37:47ڈال دی

00:37:48آگئی ہے

00:37:49میرے پاس

00:37:50اب اس image

00:37:51کو بھی ہم نے

00:37:52style کرنا ہے

00:37:53یہاں تو میں کیا کروں گا

00:37:54کہ

00:37:55کر لیتے ہیں

00:37:56کوئی مسئلہ نہیں ہے

00:37:57اس کے اندر جو

00:37:58tag

00:37:59یہ میں کیا لکھی جا رہا ہوں

00:38:01یہاں پہ میں

00:38:02اس کی

00:38:03transform

00:38:05scale

00:38:06zero point

00:38:10اچھا یہاں پہ میں

00:38:11یہاں پہ میں

00:38:12یہ کیا ہو رہا ہے

00:38:13oh sorry

00:38:14میں نے نم

00:38:15log off

00:38:16کر دیا تھا

00:38:17zero point

00:38:18five

00:38:19zero point

00:38:21five

00:38:22zero point

00:38:23two

00:38:24کروں گا

00:38:25یا one

00:38:26کروں گا

00:38:27اس طریقے سے

00:38:28یا

00:38:29zero point

00:38:30zero

00:38:31five

00:38:32zero point

00:38:33zero

00:38:34eight

00:38:35this is nice

00:38:36اب

00:38:37جی

00:38:38یہاں پر

00:38:39ہم نے کیا کرنا ہے

00:38:40اس

00:38:42image

00:38:43کو اس کے اندر لانا ہے

00:38:44اسی کے اندر ہے

00:38:45لیکن اس سے باہر نظر آ رہی ہے

00:38:46دو منٹ دو بس

00:38:47دو تین چار

00:38:48چار

00:38:49چار

00:38:50امیجز لگائیں تو

00:38:51اب یہ چار آ گئیں اس طریقے سے

00:38:52ٹھیک ہے جی

00:38:53اب مجھے کیا کرنا ہے کہ میں نہیں کیا کرنا ہے اس کے اندر کا جو بھی آور فلو ہے وہ ہم نے لگا دینا ہی ڈن ٹھیک ہو گیا اس طریقے سے ہی ڈن لگانے کے بعد اب میں کیا کروں گا بلکہ میں ایک کام نہ کروں میں ایک کام یہ کرتا ہوں لکھو دو منٹ دو بس

00:39:07ان امیجز کو میں کر رہا ہوں ختم کیوں کیوں کیونکہ اس کے اندر میں ایک ڈپ لوں گا جس کے اندر میری آہ امیج بلوک آئے گا ٹھیک ہے اور اس امیج بلوک کو پہلے میں سٹائل کر لیتا ہوں پہلے تو اس کے پاس دیکھیں گے کیا کرنا ہے

00:39:22ایک ورث لیں گے ٹین پیکزلز ہائٹ لیں گے ہنڈرڈ پرسنٹ ٹھیک ہے بیگراؤنڈ لوں گا ریڈ اور یہاں سے یہ بیگراؤنڈ میں کروں گا ختم

00:39:37اور اس کو میں ففٹی پیکزلز کا دوں گا اور اس ففٹی پیکزلز میں میں آور فلو لگا دوں گا ہیڈن اور اس آور فلو ہیڈن کے بعد میں یہاں پر ایک امیج بلوک لوں گا دور سلیش

00:40:04ڈری والی امیج تو یہاں پہ میری وہ امیج تو آگی لیکن بہت بڑی ہے پہلے تو مجھے اس کو ایڈجیسٹ کرنا ہے ٹھیک ہے تو اس کے اندر جو بھی امیج

00:40:13ٹیگ ہے اس کو ہم نے ایک ورث دے دینا ہے ہنڈر پرسنٹ ہنڈر پرسنٹ اور آبجیکٹ فٹ کور کونٹین نہیں کور

00:40:21آگیا ہے ہمارے پاس اب میں کروں گا اس میں جو ٹرانس فارم ہے سکیل پروپٹی زیرو پوائنٹ

00:40:38کر رہا ہوں تاکہ تھوڑا سا چھوٹا ہو جائے سکیل this is perfect ٹھیک ہے تو اس طریقے سے ایک بلوک

00:40:44میں نے کریٹ کر لیا اب اسی طریقے سے اگر میں یہی بلوک کو آ یہی بلوک کو چار دفعہ

00:40:50کوپی کروں یا پانچ دفعہ دو تین چار پانچ میں پاس پانچ امیجز آگے ٹھیک ہے کچھ ایسی اور

00:41:00اور اگر میں چار کوپی کروں تو چار بلوک آئیں گے ٹھیک ہوگے اس طریقے سے میں نے یہ

00:41:07چیز کر دی ہے اب ہم نے کہہ کرنا ہے کہ بیسیکلی اب آپ کو اگر میں یہاں پہ سلائٹر

00:41:12نام کی جو ڈیو ہے اس کا بیگراؤنڈ یہ کر کے دکھاؤں تو ابھی یہ ایک یہ بلوک

00:41:18ہے ٹھیک ہے جی اب میں نے کہہ کیا ہوئے کہ اس کا جو پیرنٹ ہے وہ ہے جی ہیرو سلائٹر

00:41:23اس کو میں نے کہہ دیا ہوئے جی کچھ بھی نہیں اب میں یہاں پر وہ چیز ایڈ کروں گا ٹھیک ہے تو یہاں پہ

00:41:30پھکا ٹھیک ہے دسپلے فلیکس کالی اور دسپلے دسپلے سلائٹر HiPay

00:41:36کے بات کرgus بھی یہاں پر آئٹر اللہ متے سینٹر کردئوں گا اور اس کے بعد یہ جو

00:41:41میرا کام کیونکہ ہارک ہے اب ہ starting کر رہا ہے اس کو اس کپی کرنا ہے

00:41:43پھٹ سے کریں گے پھٹ سے کرنے گے پھٹ سے کریں گے پھٹ سے کرے گے پھٹ سے کریں گے پھٹ سے کریں گے دسپلے

00:41:49and then I will copy it.

00:41:53I will copy it.

00:41:55I will copy it.

00:41:58I will copy it.

00:42:01Is it?

00:42:03This way I will copy it.

00:42:05I will copy it.

00:42:08If I go here

00:42:10I will copy it.

00:42:14If I will show it.

00:42:17Okay?

00:42:19I will copy and paste the core and paste it in the same way.

00:42:27This is a charge card group.

00:42:30Okay.

00:42:32This is the same thing.

00:42:34Nice.

00:42:36Now I will use the overflow x.

00:42:38Hidden.

00:42:39Done.

00:42:40Okay.

00:42:41Now I will listen to you later.

00:42:45This is the hero slider.

00:42:48This is a slider.

00:42:50You can see.

00:42:52This is a small group.

00:42:54There are 4 divs.

00:42:56In the image block.

00:42:57In the image block.

00:42:59Now I will create another div.

00:43:02This is a container.

00:43:07I will copy the divs.

00:43:09Cut the divs.

00:43:11I will use a div.

00:43:13Slider.

00:43:17This is a container.

00:43:18Okay.

00:43:19This is a slider container.

00:43:20I will use a div.

00:43:21I will use a div.

00:43:22This is a slider container.

00:43:23This is a slider container.

00:43:24I will style it.

00:43:25So, here we will do.

00:43:26What do we do?

00:43:27What do we do?

00:43:28What do we do?

00:43:29The hero slider.

00:43:30I will style it.

00:43:31The width is 100%.

00:43:34The height is 100%.

00:43:35And the height is 100%.

00:43:37Okay?

00:43:38And then the display.

00:43:40This is a display.

00:43:42Display.

00:43:43Display.

00:43:44Display.

00:43:45Flex.

00:43:46And the display.

00:43:47This is a display.

00:43:48This is a display.

00:43:49This is a display.

00:43:50Now what I want to do?

00:43:51If this is a display,

00:43:53I can bolt.

00:43:54This is a display.

00:43:55As well,

00:43:56can I do here.

00:43:58Well,

00:43:59I need to click the graph,

00:44:00and I will change the path.

00:44:02I will change the path.

00:44:03This is a display.

00:44:04So,

00:44:05I am showing you a system.

00:44:06I will change the fita,

00:44:07which I will change the right path.

00:44:08ھیک 60 percent پوری کے پوری ڈیو جائے گی ھیک ہے

00:44:12ھیک ہے

00:44:13ھیک ہے

00:44:27اگ ھیک ہے ہے

00:44:29ہمارا سیٹ

00:44:30اب ہم نے کیا کرنا ہے

00:44:31یہ جو ہیرو سلائٹر ہے

00:44:32اس کا ہم نے یاد ہے

00:44:34ابھی تھوڑی دیر پہلے ہی

00:44:35روٹیشن دی جے

00:44:36minus three degree

00:44:38or

00:44:41z index

00:44:42so

00:44:43slider

00:44:46create

00:44:47now

00:44:48we have

00:44:50content

00:44:51we have

00:44:52created

00:44:53now

00:44:53content

00:44:56we have

00:44:56where

00:44:57we have

00:44:58so

00:44:59we have

00:45:00what

00:45:00we have

00:45:00hero

00:45:01box

00:45:01is

00:45:01overhaul

00:45:02is

00:45:03।

00:45:33This is deadbull, we will increase the value of this deadbull.

00:45:41This deadbull character will also be available.

00:45:46600

00:45:49650

00:45:55680

00:45:59This is nice.

00:46:00We will increase on the bottom of the screen, and the bottom will increase the value of this.

00:46:05This is all 0.

00:46:08We will increase the value of this.

00:46:10And we will increase the value of this.

00:46:13650 or 680 pixels.

00:46:16This is nice.

00:46:18The slider is so much higher per screen.

00:46:22So the main thing is set.

00:46:25The slider is above 1.

00:46:28percent है ना इसको हम करेंगे 20% यहां 25% के कर लेते हैं इस

00:46:37नाइस यहां 28% भी कर सकते हूं ठीक है ना 25 करके इसको

00:46:45minus का 2 degree का rotation दे रहा हूं इसको बस उस्यूं यहां अगर

00:46:513 भी कर लेते हैं कोई मसला नहीं आएगा ठीक होगे दोस्त अब यहां

00:46:58पर जो है मेरी वह चीज़े आजएंगे जो मैं चाहता हूं यह वाली ठीक है इसको

00:47:03upgrade कर लो तो यहां पर मैं इस पूरी के पूरी hero slider को collapse कर

00:47:10रहा हूं क्योंकि यह बहुत सी जगा गेर रहा मेरी देखने की अच्छा जी आप

00:47:14चलते हैं जी आगे और यह वाला जो content है यह upgrade करते हैं let's make

00:47:20this यहां मैं एक div लोंगा जिसका ना में रोकूंगा hero

00:47:23footer और hero footer को आप करेंगे हम style इस hero footer में सबसे पहले

00:47:34width आएगी वह एगी 100% जो height आएगी वह आएगी तकरीमें यह कोई

00:47:40200 के something background मैं white कर रहा हूं ठीक है position absolute करूंगा

00:47:49absolute और bottom से इसको मैं दूँगा 2% का gap और अब भी तो फिला जाहिए तो

00:47:57यह scene आगे है ठीक है और इसके अंदर मुझे क्या करना है के background की

00:48:06जगह मैंना यहां पर border one pixels solid यह वाला color दे रहा हूं तो यह मेरा hero

00:48:14का footer है खीक हो गया अब इस hero footer में ना मैंने यह वाली चीज़े आड़ करना है

00:48:19के नाइस की कर लेते हैं अभी मसला कोई नहीं है दीरे दीरे आप हम यहां पर करेंगे

00:48:30करेंगे और उसके बास किताब लगाएंगे कि क्या करना मुझे ना क्या करना है दो मिंट दो यहां पर न यह करना है कि यह करना है कि क्या करना है

00:48:48मैं इसको जो है ना थोरी बहुत स्थोरी और और उपर करना है

00:48:55जैसे के मतब कजा मतरकर के बाद राट फबर गर्टीपर कड करना मैं है और चल्चार के बाद रेंद ती जो और

00:49:01headings main heading content container

00:49:05top 16

00:49:06top 10

00:49:1012%

00:49:13main heading

00:49:16this is the main heading

00:49:17this is the main heading

00:49:19top 30

00:49:2225%

00:49:25this is the main heading

00:49:27this is the main heading

00:49:29span tag grid

00:49:31top 12

00:49:3312%

00:49:358%

00:49:37push

00:49:39here

00:49:41here

00:49:43here

00:49:45bottom

00:49:4730%

00:49:4930%

00:49:5130%

00:49:53here

00:49:55here

00:49:57here

00:49:59here

00:50:01this is

00:50:03nice

00:50:05okay

00:50:07nice

00:50:09here

00:50:11here

00:50:13here

00:50:15here

00:50:17here

00:50:19here

00:50:2150

00:50:27here

00:50:29here

00:50:31here

00:50:33here

00:50:35here

00:50:37here

00:50:39here

00:50:41here

00:50:43here

00:50:45here

00:50:47here

00:50:49here

00:50:51here

00:50:53here

00:50:55here

00:50:57here

00:50:59here

00:51:01here

00:51:03here

00:51:05here

00:51:07here

00:51:09here

00:51:11here

00:51:13here

00:51:15here

00:51:17here

00:51:1920

00:51:21here

00:51:23here

00:51:25here

00:51:27here

00:51:29here

00:51:31there

00:51:33here

00:51:35here

00:51:37What can we do?

00:51:39Seven hundred

00:51:43Top bottom

00:51:4515%

00:51:4710%

00:51:515%

00:51:57T

00:52:01Set

00:52:03Make the image

00:52:05To change the image

00:52:071.1

00:52:09Just add

00:52:11This is the new image

00:52:15That will be enough

00:52:17But

00:52:18This is the new image

00:52:20Do not let it go

00:52:22This is the new image

00:52:24Do not

00:52:25So

00:52:27Bottom

00:52:28Is it

00:52:29This is the new image

00:52:31we will open it

00:52:33now

00:52:35now

00:52:37here

00:52:39now

00:52:41now

00:52:43now

00:52:45now

00:52:47now

00:52:49now

00:52:51now

00:52:53now

00:52:57now

00:52:59I will give space between justify content

00:53:02with space between

00:53:04I will give this footer

00:53:07left hero

00:53:10content

00:53:12I will give it

00:53:15right

00:53:17content

00:53:20left hero content

00:53:22I will give it

00:53:24width

00:53:27height

00:53:29100%

00:53:32background

00:53:33white color

00:53:35this scene

00:53:37width

00:53:39width

00:53:41width

00:53:43this

00:53:44text

00:53:45we can create

00:53:47this

00:53:48this

00:53:49rocket science

00:53:51here

00:53:53here

00:53:54inside

00:53:55we will give a

00:53:56name

00:53:57which I will give it

00:53:58right

00:53:59copy

00:54:00face

00:54:01left hero

00:54:06left hero

00:54:07heading

00:54:11heading

00:54:12and

00:54:13this

00:54:14div

00:54:15style

00:54:16this

00:54:17width

00:54:18hundred

00:54:19percent

00:54:20height

00:54:21height

00:54:23pixels

00:54:25background

00:54:26white

00:54:27color

00:54:28that's nice

00:54:30and

00:54:31here

00:54:32I will give a

00:54:33display

00:54:34flex

00:54:35and

00:54:36then

00:54:37I will give a

00:54:38display

00:54:39which I will give a

00:54:40name

00:54:41which I will give a

00:54:42name

00:54:430

00:54:44left

00:54:45footer

00:54:46image

00:54:47image

00:54:48box

00:54:49image

00:54:51image

00:54:52box

00:54:53here

00:54:54logo

00:54:55logo

00:54:56here

00:54:57and

00:54:58here

00:54:59what

00:55:00we will give a

00:55:01width

00:55:02here

00:55:0320

00:55:04pixels

00:55:05height

00:55:0620

00:55:07pixels

00:55:0850

00:55:09pixels

00:55:10background

00:55:11color

00:55:12we will give

00:55:13this

00:55:14small

00:55:15circle

00:55:16now

00:55:17here

00:55:18footer

00:55:19left

00:55:20is

00:55:21padding

00:55:2220

00:55:23pixels

00:55:24top

00:55:25bottom

00:55:26left

00:55:274

00:55:28sides

00:55:2930

00:55:30pixels

00:55:3140

00:55:32out

00:55:33here

00:55:34border

00:55:35is

00:55:36not

00:55:37here

00:55:38here

00:55:39here

00:55:40here

00:55:42here

00:55:43here

00:55:44here

00:55:45here

00:55:46here

00:55:47here

00:55:48here

00:55:49here

00:55:50here

00:55:51here

00:55:52here

00:55:53here

00:55:54here

00:55:55here

00:55:56here

00:55:57here

00:55:58here

00:55:59here

00:56:00here

00:56:01here

00:56:02here

00:56:03here

00:56:04here

00:56:05here

00:56:06here

00:56:07here

00:56:08here

00:56:09here

00:56:10here

00:56:11here

00:56:12here

00:56:13here

00:56:14here

00:56:15here

00:56:16here

00:56:17here

00:56:18here

00:56:19here

00:56:20secondary font

00:56:22font size

00:56:26font size

00:56:28small

00:56:3012 pixels

00:56:3215 pixels

00:56:36letter spacing

00:56:403 pixels

00:56:42this way

00:56:44set

00:56:46font weight

00:56:48font weight

00:56:50200

00:56:52create

00:56:54create

00:56:56add

00:56:58padding

00:57:0050 pixels

00:57:02alignment

00:57:04maintain

00:57:06alignment

00:57:0860 pixels

00:57:1060 pixels

00:57:12okay

00:57:1460 pixels

00:57:16that's nice

00:57:18that's nice

00:57:20paragraph

00:57:22that's nice

00:57:24that's nice

00:57:26gap

00:57:285 pixels

00:57:30gap

00:57:328 pixels

00:57:34that's nice

00:57:36that's nice

00:57:38logo

00:57:40that's nice

00:57:42that's nice

00:57:44that's nice

00:57:46that's nice

00:57:48we're gonna add

00:57:50now

00:57:52basically

00:57:54we'll add

00:57:56a

00:57:58p tag

00:58:00paste

00:58:02paste

00:58:04here

00:58:06is

00:58:08here

00:58:10Let's do this

00:58:13Where is it?

00:58:14My left hero content

00:58:18What will happen?

00:58:21Left hero content

00:58:22The p tag

00:58:23The color is white

00:58:25Font family variable

00:58:28Secondary font

00:58:30Font size

00:58:3210 or

00:58:3412 pixels

00:58:37Content

00:58:41Let's take him

00:58:42Step 2

00:58:45Flair

00:58:47Follow

00:58:49Step 1

00:58:53Step 2

00:58:55Step 3

00:58:57Step 2

00:58:59Step 2

00:59:01Step 2

00:59:05.

00:59:15.

00:59:20.

00:59:25.

00:59:30.

00:59:34Now, I will show you a way to the top of 60 pixels and the right of 0 pixels, bottom of 0 pixels and the left of 60 pixels.

00:59:45Okay, now I understand.

00:59:49Okay, nice.

00:59:54This is our set.

00:59:57And the font size is less than 11 pixels.

01:00:03That's nice or not.

01:00:08That's nice or not.

01:00:11Okay.

01:00:12The text transform is lowercase.

01:00:18It's lowercase.

01:00:20But the font size is better.

01:00:24It's nice.

01:00:26Very nice.

01:00:28Very nice.

01:00:31The font size is better.

01:00:34I am doing a lot of work.

01:00:36I'm doing a lot of work.

01:00:38I'm doing a lot of work.

01:00:40I'm doing a lot of work.

01:00:42I'm doing a lot of work.

01:00:45I'm doing a lot of work.

01:00:47I am doing a lot of work.

01:00:51So, I will put it on an angle to the other one.

01:00:56eighty pixels

01:00:56I will give you

01:00:58my

01:01:00here

01:01:01now

01:01:03section

01:01:04section

01:01:05section

01:01:06two things

01:01:07so

01:01:08my book now

01:01:09let's make the first

01:01:11book now button

01:01:12right hero

01:01:14content

01:01:15trial

01:01:16we have not done

01:01:18I will copy

01:01:22copy

01:01:25here

01:01:26paste

01:01:29paste

01:01:30paste

01:01:31left

01:01:32right

01:01:33here

01:01:35here

01:01:36border

01:01:37here

01:01:38here

01:01:40here

01:01:42here

01:01:44here

01:01:45here

01:01:46here

01:01:47here

01:01:48here

01:01:49this

01:01:50here

01:01:51here

01:01:52here

01:01:53it

01:01:54here

01:01:58here

01:01:59here

01:02:00here

01:02:01here

01:02:02here

01:02:04here

01:02:06here

01:02:07I

01:02:09I

01:02:11I

01:02:13I

01:02:15I

01:02:31I

01:02:33I

01:02:37I

01:02:39I

01:02:41I

01:02:47I

01:02:49I

01:02:51I

01:02:53I

01:02:55I

01:02:57I

01:02:59I

01:03:01I

01:03:03I

01:03:05I

01:03:07I

01:03:09I

01:03:11I

01:03:13I

01:03:15I

01:03:17I

01:03:19I

01:03:21I

01:03:23I

01:03:25I

01:03:27I

01:03:29I

01:03:31I

01:03:33I

01:03:35I

01:03:37I

01:03:39I

01:03:41I

01:03:43I

01:03:45I

01:03:47I

01:03:49I

01:03:51I

01:03:53I

01:03:55I

01:03:57I

01:03:59I

01:04:01I

01:04:03I

01:04:05I

01:04:07I

01:04:09I

01:04:11I

01:04:13I

01:04:15I

01:04:17I

01:04:19I

01:04:21I

01:04:23I

01:04:25I

01:04:27I

01:04:29I

01:04:31I

01:04:33I

01:04:35I

01:04:37I

01:04:39I

01:04:41I

01:04:43I

01:04:45I

01:04:47I

01:04:49I

01:04:51I

01:04:53I

01:04:55I

01:04:57I

01:04:59I

01:05:01I

01:05:03I

01:05:05I

01:05:07I

01:05:09I

01:05:11I

01:05:13I

01:05:15I

01:05:17I

01:05:19I

01:05:21I

01:05:23I

01:05:25I

01:05:27I

01:05:29I

01:05:31I

01:05:33I

01:05:35I

01:05:37I

01:05:39I

01:05:41I

01:05:43I

01:05:45I

01:05:47I

01:05:49I

01:05:51I

01:05:53I

01:05:55I

01:05:57I

01:05:59I

01:06:01I

01:06:03I

01:06:05I

01:06:07I

01:06:09I

01:06:11I

01:06:13I

01:06:15I

01:06:17I

01:06:19I

01:06:21I

01:06:23I

01:06:25I

01:06:27I

01:06:29I

01:06:31I

01:06:33I

01:06:35I

01:06:37I

01:06:39I

01:06:41I

01:06:43I

01:06:45I

01:06:47I

01:06:49I

01:06:51I

01:06:53I

01:06:55I

01:06:57I

01:06:59I

01:07:01I

01:07:03I

01:07:05I

01:07:07I

01:07:09I

01:07:11I

01:07:13I

01:07:15I

01:07:17I

01:07:19I

01:07:21I

01:07:23I

01:07:25I

01:07:27I

01:07:29I

01:07:31I

01:07:33I

01:07:35I

01:07:37I

01:07:39I

01:07:41I

01:07:43I

01:07:45I

01:07:47I

01:07:49I

01:07:51I

01:07:53I

01:07:55I

01:07:57I

01:07:59I

01:08:01I

01:08:03I

01:08:05I

01:08:07I

01:08:09I

01:08:11I

01:08:13I

01:08:15I

01:08:29I

01:08:31I

01:08:33flex

01:08:34and then

01:08:35what happened

01:08:37here

01:08:38align item

01:08:39center

01:08:40justify content

01:08:41center

01:08:42scene

01:08:43history

01:08:44border

01:08:45area

01:08:46font

01:08:48family

01:08:49font

01:08:50font

01:08:53font

01:08:54size

01:08:55font

01:08:56position

01:08:59position

01:09:00center

01:09:01right

01:09:0220

01:09:03percent

01:09:04i

01:09:05yeah

01:09:07i

01:09:08i

01:09:09i

01:09:10i

01:09:12i

01:09:13i

01:09:14i

01:09:15i

01:09:16i

01:09:17i

01:09:18i

01:09:19i

01:09:20i

01:09:21i

01:09:22i

01:09:23i

01:09:24i

01:09:25i

01:09:26i

01:09:27i

01:09:28i will press 10 degree

01:09:33over 10 degree

01:09:36over 25 percent

01:09:39on the same page

01:09:41cd

01:09:44see it

01:09:45see it

01:09:50the hinder

01:09:52box.

01:09:54If I show you a reference, I will show you a link in the description.

01:09:59Deadpool website.

01:10:01This is the website.

01:10:03Okay.

01:10:06Okay.

01:10:09Okay.

01:10:11We have set.

01:10:13Now, one thing is adjustable.

01:10:16It's an option.

01:10:18I am going to say that you are going to be above the fold.

01:10:23Above the fold, I can say that you are going to be above the fold.

01:10:25At least, I am going to look at the mirror box.

01:10:30I am going to look at the mirror box.

01:10:33Above the fold.

01:10:36But if you will see here, it is an option.

01:10:39If there is a image for this image,

01:10:42then we will put the image on the image.

01:10:44I like the other thing.

01:10:46I also like the new design.

01:10:52This is a very nice section.

01:10:56We will create this section.

01:10:58Now we will start this section.

01:11:14You

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

Category

Transcript

Be the first to comment

🔥 Deadpool Website Project

Recommended