Build an animated split-screen landing page

Sep 14, 2025

कैसे करना है

आपका लैंडिंग पृष्ठ आपके एक महत्वपूर्ण तत्व है वेबसाइट लेआउट । यह पहला वास्तविक अवसर है जिसे आपको अपना व्यवसाय, या आपके द्वारा बेचे जाने वाले उत्पाद को पेश करना होगा, इसलिए इसका डिज़ाइन महत्वपूर्ण है। लैंडिंग पृष्ठों को एक एकल केंद्रित उद्देश्य के साथ डिजाइन किया गया है जिसे कॉल टू एक्शन (सीटीए) के रूप में जाना जाता है। कार्रवाई करने के लिए कॉल के पूरक के लिए रंगों और छवियों का उपयोग प्रयोगकर्ता का अनुभव बिलकुल ज़रूरी है।

[2 9] इस ट्यूटोरियल के लिए वर्किंग कोडेपेन देखें

इस ट्यूटोरियल में, हम एक काल्पनिक फैशन ब्रांड के लिए एक आकर्षक लैंडिंग पृष्ठ बनाने के तरीके के माध्यम से चलेंगे। यह एक स्प्लिट-स्क्रीन डिज़ाइन के आसपास केंद्रित होगा जिसमें बड़ी छवियों और एनिमेटेड संक्रमण हैं जो होवर पर होते हैं। इस पृष्ठ में एक्शन बटन पर दो स्पष्ट कॉल होंगे और हम एचटीएमएल का उपयोग करेंगे, सास स्टाइलिंग और वेनिला जावास्क्रिप्ट का स्पर्श जो ईएस 6 सिंटैक्स का उपयोग करता है (अपने सुनिश्चित करना याद रखें वेब होस्टिंग आपकी वेबसाइट की जरूरतों के लिए उपयुक्त है)। बहुत जटिल? कोड की आवश्यकता के बिना एक वेबसाइट बनाएं, एक सरल प्रयास करें वेबसाइट निर्माता ।

01. सेट अप करें

यदि आप कोडपेन का उपयोग कर रहे हैं, तो सुनिश्चित करें कि सीएसएस पेन सेटिंग्स में 'एससीएसएस' पर सेट है। आप सेटिंग टैब पर क्लिक करके यह परिवर्तन कर सकते हैं, 'सीएसएस' चुनें और सीएसएस प्रीप्रोसेसर को ड्रॉप-डाउन विकल्पों में एससीएसएस में बदलें।

फिर हम अपने एचटीएमएल में जोड़ना शुरू कर सकते हैं। हम 'बाएं' नामक एक अनुभाग को लपेटने जा रहे हैं और एक कंटेनर वर्ग के भीतर 'दाएं' नामक एक अनुभाग को लपेटने जा रहे हैं, दोनों खंडों ने 'स्क्रीन' की कक्षा दी गई।

[6 9] & lt; div class = "कंटेनर" & gt; & lt; अनुभाग वर्ग = "स्क्रीन बाएं" & gt; & lt; / खंड & gt; & lt; अनुभाग वर्ग = "स्क्रीन दाएं" & gt; & lt; / खंड & gt; & lt; / div & gt;

02. HTML को समाप्त करें

[7 9]

हमारे HTML को अंतिम रूप देने के लिए, हम एक का उपयोग करके प्रत्येक अनुभाग के लिए एक शीर्षक जोड़ देंगे एच 1 टैग। इसके नीचे हमें एक बटन में जोड़ना होगा, जो एक वास्तविक दुनिया से जुड़ा होगा यदि यह एक वास्तविक दुनिया प्रोजेक्ट था। हम इसे एक वर्ग देंगे बटन चीजों को अच्छी और सरल रखने के लिए।

[6 9] & lt; div class = "कंटेनर" & gt; & lt; अनुभाग वर्ग = "स्क्रीन बाएं" & gt; & lt; h1 & gt; पुरुषों फैशन & lt; / h1 & gt; & lt; बटन & gt; & lt; a href = "#" वर्ग = "बटन" & gt; अधिक जानें & lt; / a & gt; & lt; / बटन & gt; & lt; / खंड & gt; & lt; अनुभाग वर्ग = "स्क्रीन दाएं" & gt; & lt; h1 & gt; महिला फैशन & lt; / h1 & gt; & lt; बटन & gt; & lt; a href = "#" वर्ग = "बटन" & gt; अधिक जानें & lt; / a & gt; & lt; / बटन & gt; & lt; / खंड & gt;

03. सैस चर का अन्वेषण करें

एक बात जो हम सभी को सैस के बारे में प्यार करते हैं वह चर का उपयोग है। भले ही देशी सीएसएस चर अधिक समर्थन प्राप्त कर रहे हैं, हम सैस का उपयोग करके चीजों को सुरक्षित रखेंगे। हम इन्हें हमारे ऊपर रखेंगे .scss , और आप जो भी रंग चाहते हैं उसे चुन सकते हैं, लेकिन उपयोग कर सकते हैं आरजीबीए मूल्य हमें अधिक लचीलापन देंगे।

 / ** चर ** /

$ कंटेनर-बीजीकोलर: # 444;
$ बाएं-बीजीकोलर: आरजीबीए (136, 226, 247, 0.7);
$ बाएं बटन-होवर: आरजीबीए (94, 226, 247, 0.7);
$ राइट-बीजीकोलर: आरजीबीए (227, 140, 21 9, 0.8);
$ राइट-बटन-होवर: आरजीबीए (255, 140, 21 9, 0.7);
$ होवर-चौड़ाई: 75%;
$ छोटी चौड़ाई: 25%;
$ animatespeed: 1000ms; 

04. बॉडी स्टाइल समायोजित करें

सबसे पहले, हम शरीर के लिए सभी डिफ़ॉल्ट पैडिंग और मार्जिन को साफ़ करेंगे और फिर फ़ॉन्ट परिवार को एसएएन खोलने के लिए सेट करेंगे। यह केवल बटन को प्रभावित करेगा, इसलिए इससे कोई फर्क नहीं पड़ता कि हम किस फ़ॉन्ट का उपयोग करते हैं। फिर हम चौड़ाई और ऊंचाई निर्धारित करेंगे 100% और सुनिश्चित करें कि एक्स अक्ष पर बहती हुई कुछ भी छिपी हुई है।

[6 9] एचटीएमएल, बॉडी { पैडिंग: 0; मार्जिन: 0; फ़ॉन्ट-परिवार: 'खुले सैन्स', सैन्स-सेरिफ़; चौड़ाई: 100%; ऊंचाई: 100%; ओवरफ्लो-एक्स: छुपा; }

05. स्टाइल सेक्शन टाइटल

यह अनुभाग शीर्षक के लिए Google फ़ॉन्ट लेने का समय है - हमने प्लेफ़ेयर डिस्प्ले चुना है। फिर उपयोग कर ट्रांसलेटेक्स हम सुनिश्चित कर सकते हैं कि अनुभाग शीर्षक हमेशा एक्स अक्ष पर केंद्रित हैं।

 एच 1 {
  फ़ॉन्ट आकार: 5rem;
  रंग: #fff;
  स्थिति: पूर्ण;
  बाएं: 50%;
  शीर्ष: 20%;
  ट्रांसफॉर्म: अनुवादक्स (-50%);
  सफेद अंतरिक्ष: नोप्रैप;

  फ़ॉन्ट-परिवार: 'प्लेफेयर डिस्प्ले', सेरिफ़;
} 

06. सीटीए को बाहर खड़ा करें

हमारे बटन कार्रवाई करने के लिए हमारी कॉल के रूप में कार्य करेंगे, इसलिए इन्हें बड़ा, बोल्ड और स्थान दिया जाना चाहिए जहां वे क्लिक करना आसान हो। दोनों बटनों में एक सफेद सीमा और एक दिलचस्प संक्रमण प्रभाव होगा। दोनों बटन के लिए डिफ़ॉल्ट शैलियों वही होंगे, हालांकि हम अपने रंगों को होवर पर बदल देंगे।

। बटन {
  प्रदर्शन क्षेत्र;
  स्थिति: पूर्ण;
  बाएं: 50%;
  शीर्ष: 50%;
  ऊंचाई: 2.6rem;
  पैडिंग-टॉप: 1.2rem;
  चौड़ाई: 15rem;
  पाठ-संरेखण: केंद्र;
  सफ़ेद रंग;
  सीमा: 3px ठोस #fff;
  सीमा-त्रिज्या: 4 पीएक्स;
  फ़ॉन्ट-वजन: 600;
  पाठ-परिवर्तन: अपरकेस;
  पाठ-सजावट: कोई नहीं;
  ट्रांसफॉर्म: अनुवादक्स (-50%);
  संक्रमण: सभी .2s; 

मुख्य बटनों में एक अच्छा सरल होवर प्रभाव होगा और हम रंग के लिए निर्दिष्ट एसएएसएस चर का उपयोग करेंगे, जो पृष्ठ की पृष्ठभूमि के लिए एक समान रंग होगा।

 .Screen.left .button: होवर {
  पृष्ठभूमि-रंग: $ बाएं-बटन-होवर;
  सीमा-रंग: $ बाएं-बटन-होवर;
}

.screen.right .button: होवर {
  पृष्ठभूमि-रंग: $ राइट-बटन-होवर;
  सीमा-रंग: $ राइट-बटन-होवर; 

07. कंटेनर पृष्ठभूमि और स्क्रीन सेट करें

कंटेनर क्लास हमारे पेज रैपर के रूप में कार्य करेगा और हम इसकी स्थिति को रिश्तेदार के लिए सेट करेंगे, क्योंकि हम स्क्रीन को पूर्ण स्थिति में रखना चाहते हैं। हम कंटेनर को डिफ़ॉल्ट पृष्ठभूमि रंग देंगे, लेकिन निश्चित रूप से यह नहीं देखा जाएगा क्योंकि हम दोनों स्क्रीन पृष्ठभूमि में विभिन्न रंग सेट करेंगे।

। कंटेनर {
  स्थिति: रिश्तेदार;
  चौड़ाई: 100%;
  ऊंचाई: 100%;
  पृष्ठभूमि: $ कंटेनर-बीजीकॉलर;
  
    .स्क्रीन {
      स्थिति: पूर्ण;
      चौड़ाई: 50%;
      ऊंचाई: 100%;
      बहुत ज्यादा गोपनीय;
    }
} 

08. पृष्ठभूमि छवियां जोड़ें

बाएं और दाएं दोनों खंड एक छवि प्रदर्शित करेंगे, और आप वेबसाइटों से रॉयल्टी मुक्त स्टॉक छवियों को पा सकते हैं जैसे कि unsplash , पिक्साबे या पेक्सेल (जो मैंने इस ट्यूटोरियल में उपयोग किया है)। चीजों को आसान बनाने के लिए, मैंने आईएमजीबीबी नामक एक मुफ्त छवि होस्टिंग और साझाकरण सेवा का उपयोग किया है जिसे हम अपने सीएसएस में लिंक कर सकते हैं।

 .Screen.left {
  बाएं: 0;
  पृष्ठभूमि: यूआरएल ('https://preview.ibb.co/cpabrm/pexels_photo_450212_1.jpg') केंद्र केंद्र नो-रिपीट;
  पृष्ठभूमि आकार: कवर;
  
    & amp;: पहले {
       स्थिति: पूर्ण;
      सामग्री: "";
      चौड़ाई: 100%;
      ऊंचाई: 100%;
      पृष्ठभूमि: $ बाएं-बीजीकॉलर;
    }
} 

पृष्ठ का दाहिना हाथ आईएमजीबीबी का उपयोग करके पृष्ठभूमि छवि भी प्रदर्शित करेगा, और हम पृष्ठभूमि रंग को गुलाबी रंग देंगे। फिर, हमने पृष्ठभूमि का आकार सेट किया आवरण । यह हमें पूरे युक्त तत्व को कवर करने की अनुमति देगा, जो हमारे मामले में है .स्क्रीन कक्षा।

 .Screen.Right {
  सही: 0;
  पृष्ठभूमि: यूआरएल ('https://preview.ibb.co/mtopcr/seth_doyle_82563_1.jpg') केंद्र केंद्र नो-रिपीट;
  पृष्ठभूमि आकार: कवर;
  
   & amp;: पहले {
      स्थिति: पूर्ण;
      सामग्री: "";
      चौड़ाई: 100%;
      ऊंचाई: 100%;
      पृष्ठभूमि: $ राइट-बीजीकॉलर;
    }
} 

09. संक्रमण और होवर प्रभाव जोड़ें

दोनों स्क्रीन पर हमारे मंडर प्रभाव के लिए एनीमेशन गति एक संक्रमण द्वारा नियंत्रित की जाएगी जो हमारे चर का मान रखती है $ animatespeed , जो 1000ms (एक सेकंड) है। फिर हम एनीमेशन को कुछ आसान बनाकर समाप्त कर देंगे, जो आसानी से और बाहर है जो हमें एक चिकनी एनीमेशन देने में मदद करेगा।

 .screen.left, .screen.right, .screen.right: पहले, .screen.left: पहले {
  संक्रमण: $ EMATATESPEED सभी आसानी से इन-आउट;
} 

अब हम क्या करना चाहते हैं कि जब आप बाएं स्क्रीन पर होवर करते हैं, तो जावास्क्रिप्ट का उपयोग करके उस अनुभाग में एक वर्ग जोड़ा जाएगा (जिसे हम बाद में चरण में लिखेंगे)। जब यह वर्ग जोड़ा जाता है, तो वह स्क्रीन जिसे हमने निर्दिष्ट चर की चौड़ाई पर फैलाया जाएगा - जो 75% होगा, और फिर दाएं तरफ छोटी चौड़ाई चर (25%) पर सेट किया जाएगा।

 .होवर-बाएं .left {
  चौड़ाई: $ होवर-चौड़ाई;
}

.होवर-बाएं। राइट {
  चौड़ाई: $ छोटी चौड़ाई;
}
.होवर-बाएं .Right: पहले {
  जेड-इंडेक्स: 2;
} 

यह वही काम करता है जैसे बाईं तरफ, जहां जावास्क्रिप्ट का उपयोग करके माउस होवर पर एक नई कक्षा जोड़ा जाएगा, और सही स्क्रीन तदनुसार फैल जाएगी। हमें यह भी सुनिश्चित करने की आवश्यकता है Z- सूचकांक इस पर लगा है 2 तो सीटीए बटन अधिक प्रमुख हो जाता है।

 .होवर-राइट .Right {
  चौड़ाई: $ होवर-चौड़ाई;
}

.होवर-राइट .left {
  चौड़ाई: $ छोटी चौड़ाई;
}

.होवर-राइट .left: पहले {
  जेड-इंडेक्स: 2;
} 

10. जावास्क्रिप्ट में जाएं

हम सीएसएस कक्षाओं को जोड़ने और हटाने में हमारी सहायता के लिए वेनिला जावास्क्रिप्ट का एक स्पर्श का उपयोग करेंगे और हम कुछ नई ES6 सुविधाओं का भी उपयोग करेंगे। पहली चीज जो हमें करने की ज़रूरत है वह कुछ निरंतर चर घोषित करना है।

क्योंकि हम उपयोग करेंगे डाक्यूमेंट एक से अधिक बार, हम एक निरंतर चर नामक सेट करेंगे दस्तावेज़ और उस दस्तावेज़ को उसमें स्टोर करें ताकि हम 'दस्तावेज़' शब्द को अच्छा और छोटा रख सकें।

 कॉन्स डॉक = दस्तावेज़; 

अब हमें तीन और स्थिरांक सेट करने की आवश्यकता है जो स्टोर करेगा ।सही , ।बाएं तथा .container चयनकर्ता। हम स्थिरांक का उपयोग कर रहे हैं क्योंकि हम जानते हैं कि हम इनके मूल्य को बदलना नहीं चाहते हैं, इसलिए स्थिरांक का उपयोग करना समझ में आता है। इनमें अब सेट के साथ, हम आगे बढ़ सकते हैं और उन्हें कुछ माउस ईवेंट जोड़ सकते हैं।

 राइट = डॉक. क्विरील्टर ("सही");
const बाएँ = doc.queryellecter ("बाएं");
कॉन्स कंटेनर = डॉक्टर। QuereSelector ("कंटेनर"); 

का उपयोग बाएं निरंतर चर हमने अंतिम चरण में घोषित किया, अब हम इसमें एक ईवेंट श्रोता जोड़ सकते हैं। यह घटना होगी माउसेंटर घटना और कॉलबैक फ़ंक्शन का उपयोग करने के बजाय, हम एक और ES6 सुविधा का उपयोग करेंगे तीर कार्य '() = & gt;) ।

 // होवर पर कंटेनर तत्व में एक वर्ग जोड़ता है
Left.addeventListener ("माउसेंटर", () = & gt; {
  कंटेनर। classlist.add ("होवर-बाएं") जोड़ें;
}); 

11. एक वर्ग जोड़ें और निकालें

अंतिम चरण में, हमारे ईवेंट श्रोता ने एक जोड़ा माउसेंटर घटना जो मुख्य कंटेनर वर्ग को लक्षित करती है और जिसे एक नई कक्षा कहा जाता है मंडर बाएं खंड तत्व के लिए। इसके साथ जोड़ा गया, अब हमें इसे हटाने की आवश्यकता है जब हम इसे बंद कर देते हैं। हम इसका उपयोग करके ऐसा करेंगे मूसलेव घटना और ।हटाना() तरीका।

 // उस वर्ग को हटा देता है जो होवर पर जोड़ा गया था
Left.addeventListener ("Mouseleave", () = & gt; {
  कंटेनर। classlist.remove ("होवर-बाएं");
}); 

अब तक हमने बाएं स्क्रीन पर सबकुछ किया है। अब हम जावास्क्रिप्ट को समाप्त कर देंगे और दाएं अनुभाग तत्वों पर कक्षाओं को जोड़ और हटा देंगे। फिर से हमने अच्छी और साफ दिखने के लिए यहां तीर समारोह वाक्यविन्यास का उपयोग किया है।

 right.addeventlistener ("माउसेंटर", () = & gt; {
  contenter.classlist.add ("होवर-राइट") जोड़ें;
});

right.addeventlistener ("mouseleave", () = & gt; {
  contuner.classlist.remove ("होवर-राइट");
}); 

12. इसे उत्तरदायी बनाएं

कोई परियोजना नहीं - कोई फर्क नहीं पड़ता कि कितना बड़ा या छोटा - उत्तरदायी होने से बचना चाहिए। इसलिए, इस चरण में हम अपने सीएसएस में कुछ मीडिया क्वेरी जोड़ देंगे, और इस छोटी परियोजना को मोबाइल उपकरणों के अनुकूल बनाने के रूप में सबसे अच्छा बना सकते हैं। यह देखने लायक है मूल कोडपेन यह देखने के लिए कि यह कैसे काम करता है।

 @media (अधिकतम चौड़ाई: 800px) {
  H1 {
    फ़ॉन्ट आकार: 2rem; }

  .बटन {
    चौड़ाई: 12 रेम;
  } 

हमने यह सुनिश्चित किया है कि जब हमारे पृष्ठ की चौड़ाई 800px तक पहुंच जाती है, तो फ़ॉन्ट और बटन आकार में कम हो जाएंगे। तो, चीजों को खत्म करने के लिए हम ऊंचाई को भी लक्षित करना चाहते हैं और सुनिश्चित करें कि पृष्ठ की ऊंचाई 700px से नीचे हो जाती है जब हमारे बटन पृष्ठ को नीचे ले जाते हैं।

 @media (अधिकतम ऊंचाई: 700px) {
  .बटन {
    शीर्ष: 70%;
}} 

अपने पृष्ठों को सहेजना चाहते हैं? उन्हें पीडीएफ के रूप में निर्यात करें और उन्हें सुरक्षित में सहेजें घन संग्रहण ।

[2 9 3] [2 9 4] [2 9 5]

वेब डिजाइन घटना लंदन जेनरेट करें 1 9 -21 सितंबर 2018 को रिटर्न, उद्योग के प्रमुख वक्ताओं, कार्यशालाओं का पूरा दिन और मूल्यवान नेटवर्किंग अवसरों का एक पैक कार्यक्रम प्रदान करता है - इसे याद मत करो। अब अपना टिकट प्राप्त करें ।

यह लेख मूल रूप से नेट पत्रिका में प्रकाशित किया गया था मुद्दा 305 । अभी ग्राहक बनें ।

अधिक पढ़ें:

[2 9] 5 सनसनीखेज नई वेबसाइटें से प्रेरित होने के लिए

[2 9] एनिमेटेड 3 डी टेक्स्ट प्रभाव बनाएं [2 9] 19 महान लंबन स्क्रॉलिंग वेबसाइटें

---

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to clean paintbrushes: The definitive guide

कैसे करना है Sep 14, 2025

(छवि क्रेडिट: सनी फ्लानगान) [1 9] पेंटब्रश को ठी..

---

Build adaptive layouts without media queries

कैसे करना है Sep 14, 2025

लंबे समय तक मैं वेब पृष्ठों पर एक आदर्श दृश्य संरचना तक पहुंचने की कोशिश �..

---

How to create a photorealistic room scene

कैसे करना है Sep 14, 2025

जानना चाहते हैं कि एक यथार्थवादी 3 डी आर्किटेक्चर..

---

Master the Bridge tool

कैसे करना है Sep 14, 2025

पुल उपकरण क्या है? यदि आप सीजीआई के लिए नए है�..

---

वैन गोग की तरह एक चित्र पेंट

कैसे करना है Sep 14, 2025

डच पोस्ट-इंप्रेशनिस्ट पेंटर विन्सेंट वैन गोग (1853-18..

---

स्केलेबल उत्तरदायी घटक बनाएं

कैसे करना है Sep 14, 2025

जब भी हम रखरखाव और स्केलेबल वेबसाइटों के निर्माण ..

---

Discover underpainting and how to make best use of it

कैसे करना है Sep 14, 2025

अंडरपेंटिंग एक है पेंटिंग तकनीक पुनर्जागर�..

---

How to create a winter environment

कैसे करना है Sep 14, 2025

इससे पहले कि मैं एक व्यक्तिगत छवि पर काम करना शुर�..

---

श्रेणियाँ

• एआई और मशीन लर्निंग
• AirPods
• वीरांगना
• अमेज़ॅन एलेक्सा और अमेज़ॅन इको
• अमेज़न एलेक्सा और अमेज़न इको
• अमेज़न आग टीवी
• अमेज़न प्रधानमंत्री वीडियो
• एंड्रॉयड
• Android फ़ोन और टेबलेट
• Android फोन और टैबलेट
• Android टीवी
• एप्पल
• Apple App स्टोर
• एप्पल HomeKit और एप्पल HomePod
• एप्पल संगीत
• एप्पल टीवी
• एप्पल घड़ी
• एप्लिकेशन और वेब Apps
• ऐप्स और वेब ऐप्स
• ऑडियो
• Chrome बुक और क्रोम ओएस
• क्रोमबुक और क्रोम ओएस
• Chromecast
• बादल और इंटरनेट
• बादल और इंटरनेट
• क्लाउड और इंटरनेट
• कंप्यूटर हार्डवेयर
• कंप्यूटर इतिहास
• गर्भनाल काटने और स्ट्रीमिंग
• कॉर्ड कटिंग और स्ट्रीमिंग
• कलह
• डिज्नी +
• DIY
• बिजली के वाहन
• EReaders
• अनिवार्य
• व्याख्यार
• फेसबुक
• जुआ
• जनरल
• Gmail
• गूगल
• गूगल सहायक और गूगल नेस्ट
• Google सहायक और Google नेस्ट
• गूगल क्रोम
• गूगल डॉक्स
• को Google डिस्क
• गूगल मैप्स
• गूगल प्ले स्टोर
• Google शीट
• Google स्लाइड
• गूगल टीवी
• हार्डवेयर
• एचबीओ मैक्स
• कैसे करना है
• Hulu
• Instagram
• इंटरनेट स्लैंग और लघुरूप
• IPhone और IPad
• Kindle
• लिनक्स
• मैक
• रखरखाव और अनुकूलन
• माइक्रोसॉफ्ट एज
• माइक्रोसॉफ्ट एक्सेल
• माइक्रोसॉफ्ट ऑफिस
• माइक्रोसॉफ्ट आउटलुक
• Microsoft PowerPoint
• ​​माइक्रोसॉफ्ट टीमें
• माइक्रोसॉफ्ट वर्ड
• मोज़िला फ़ायरफ़ॉक्स
• Netflix
• Nintendo स्विच
• पैरामाउंट +
• पीसी गेमिंग
• मयूर
• फोटोग्राफी
• फ़ोटोशॉप
• प्लेस्टेशन
• गोपनीयता और सुरक्षा
• निजता एवं सुरक्षा
• गोपनीयता और सुरक्षा
• उत्पाद मवेशियों को इकट्ठा
• प्रोग्रामिंग
• रास्पबेरी Pi
• Reddit
• Roku
• सफारी
• सैमसंग फ़ोन और टेबलेट
• सैमसंग फोन और टैबलेट
• स्लैक
• स्मार्ट होम
• Snapchat
• सामाजिक मीडिया
• अंतरिक्ष
• Spotify
• Tinder
• समस्या निवारण
• टीवी
• ट्विटर
• वीडियो गेम
• आभासी वास्तविकता
• के VPN
• वेब ब्राउज़र
• WhatsApp
• वाईफ़ाई और रूटर
• वाईफाई और राउटर
• विंडोज
• Windows 10
• विंडोज 11
• विंडोज 7
• एक्सबॉक्स
• यू ट्यूब के यूट्यूब टीवी
• YouTube और YouTube टीवी
• ज़ूम
• Explainers