पेज टेम्प्लेट. लैंडिंग पृष्ठ टेम्पलेट. लैंडिंग पृष्ठ: ऑफ़र, लंबन और काउंटर वाले कोड के उदाहरण

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

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

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

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

फ़ॉन्ट, रंग, लेआउट, चित्र और अन्य विवरणों को अनंत और उससे आगे तक संशोधित करें और अनुभव को निजीकृत करें। अपनी ऑनलाइन उपस्थिति के अनुकूलन और संगठन को सुव्यवस्थित करने के लिए विजेट एकीकृत करें। सॉफ़्टियस 100% कुशल और प्रलेखित है इसलिए कोई भी आसानी से इसका अधिकतम लाभ उठा सकता है।

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

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

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

इस साफ़ सुथरे टेम्पलेट की अतिरिक्त विशेषताओं में मूल्य निर्धारण तालिकाएँ, हिंडोला, नियमित अपडेट और नेविगेशन तक स्क्रॉल शामिल हैं। एंगुलर लैंडिंग में आपके चुनने के लिए दो मूल विविधताएँ हैं जिनमें से दोनों उच्चतम गुणवत्ता की हैं। एंगुलर लैंडिंग के स्वच्छ डिजाइन और शानदार उपस्थिति का आनंद लें जो आपको उन लक्ष्यों तक पहुंचने में मदद करेगा जो आप हमेशा अपने लिए देखना चाहते थे।

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

एजेंसी के पास सोलह अलग-अलग घर हैं, जो दो समूहों में विभाजित हैं: क्लासिक और फॉर्म संस्करण। छवि और स्लाइडर पृष्ठभूमि से लेकर सर्दी, पानी, बारिश, कण और ढाल जैसे सभी प्रकार के विभिन्न प्रभावों तक। स्क्रॉल एनिमेशन, SEO-तैयार, एकीकृत MailChimp, व्यावहारिक संपर्क फ़ॉर्म और रेटिना-तैयार फ़ॉन्ट विस्मयकारी आइकन, यह सब और एक टन अधिक संपत्ति एजेंसी आपके साथ व्यवहार करती है।

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

अपने उच्च अनुकूलन योग्य अनुभागों, हेडर, स्लाइडर्स, रंगों और पूर्व-निर्मित तत्वों के साथ, ऐपिनो को अपने मोबाइल ऐप लीड कैप्चर के रूप में उपयोग करना सुविधाजनक और कुशल है। केक पर आइसिंग के रूप में काम करते हुए, ऐपिनो आजीवन अपडेट प्रदान करता है जो निःशुल्क हैं। इसके अलावा, प्रत्येक ऐपिनो उपयोगकर्ता को छह महीने का मुफ्त समर्थन भी मिलता है जो आपके सभी सवालों और चिंताओं का जवाब देगा।

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

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

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

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

ऐप्स क्राफ्ट एक विशेष लैंडिंग पेज HTML टेम्पलेट है। अपनी आधुनिक, आकर्षक अवधारणा के साथ, ऐप्स क्राफ्ट दुनिया के जिज्ञासु क्लिकर्स को आकर्षित करता है। आपको इसमें +10 अनुकूलन योग्य होमपेज मिलेंगे और इसमें लंबन प्रभाव भी शामिल होगा। ऐप्स क्राफ्ट गर्व से सबसे प्रतिक्रियाशील टेम्पलेट में से एक है। यह किसी भी ब्राउज़र के माध्यम से जाने और अधिक से अधिक लोगों तक पहुंचने के लिए क्रॉस-ब्राउज़र संगत भी है। आपके व्यवसाय के लिए विशेष रूप से किए गए एसईओ सुधारों के साथ आसानी से अपनी बिक्री बढ़ाएं। ऐप्स क्राफ्ट MailChimp सदस्यता फॉर्म और Ajax वर्किंग दोनों प्रदान करता है संपर्क करें प्रपत्र. उनमें से किसी एक के साथ आपको ग्राहकों के साथ शानदार फीडबैक कनेक्शन मिलेगा। सोशल मीडिया शेयरिंग कई प्रसिद्ध प्लेटफार्मों के लिए भी उपलब्ध है।

ऐप्स क्राफ्ट में बहुत अच्छे अनुकूलन बनाने के लिए स्तरित PSD फ़ाइलें भी शामिल हैं। इसके अलावा, यह बूटस्ट्रैप के साथ संगत है और इसमें भव्य लंबन प्रभाव शामिल है। सुंदर त्वचा के रंग, Google वेब फ़ॉन्ट और उच्च गुणवत्ता वाले फ़ॉन्ट आइकन भी पेशकश का हिस्सा हैं। इसके अलावा, ऐप्स क्राफ्ट आपको आसानी से डाउनलोड करने के लिए पर्याप्त दस्तावेज़ फ़ाइलें प्रदान करता है। उपरोक्त सभी कारण इसे बेहद बहुमुखी बनाते हैं और इसे मोबाइल और टैबलेट के अनुकूल बनाने का विचार किया गया है। यदि आप ऐप्स के प्रति इसके झुकाव पर विचार करते हैं, तो आपको इसकी अनुकूलन क्षमता पर कोई संदेह नहीं होगा। कुछ गतिशील और बेहतरीन विशिष्ट सुविधाओं से युक्त कुछ चुनें! ऐप्स क्राफ्ट प्राप्त करें!

LeadGen एक लचीला और उत्तरदायी HTML मार्केटिंग बहुउद्देशीय वेबसाइट टेम्पलेट है। यह जीवन के सभी क्षेत्रों के वेबमास्टरों के लिए परिणाम प्राप्त करने के लिए एक संसाधनपूर्ण ढांचा है। लीडजेन कई प्रकार के उद्योगों और अनुप्रयोगों के लिए आदर्श है जिनसे लाभ उठाया जा सकता है। चुनने के लिए लैंडिंग पेज डेमो वेबसाइटों की विशाल श्रृंखला के साथ, विकल्प असीमित हैं। पेशेवर गुणवत्ता वाली वेबसाइटें प्राप्त करने के लिए LeadGen को किसी कोडिंग की आवश्यकता नहीं है। लीडजेन डिजाइनरों, आर्किटेक्ट्स, क्रिएटिव और पेशेवरों के लिए एक उद्देश्यपूर्ण समाधान है। एक सहज ज्ञान युक्त प्रीमियम पेज बिल्डर के माध्यम से 300 से अधिक परिष्कृत तत्वों को तैनात करें।

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

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

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

मैसिव बेहद महत्वाकांक्षी, व्यापक रूप से अच्छी तरह से डिज़ाइन किया गया, तकनीकी रूप से स्पष्ट और अत्याधुनिक, कार्यात्मक रूप से संसाधनपूर्ण और बेहद फीचर-सघन, चतुर और अच्छी तरह से सोचा गया, आधुनिक और वर्तमान, सौंदर्यपूर्ण रूप से आकर्षक और पॉलिश उत्तरदायी HTML5 एक पृष्ठ और बहुउद्देशीय बहुउद्देशीय वेबसाइट टेम्पलेट है। एक सशक्त ऑल-इन-वन वेबसाइट समाधान बनाने के लिए इस टेम्पलेट को समय के साथ सावधानीपूर्वक और व्यापक रूप से विकसित किया गया है। यह पर्याप्त मात्रा और पेशेवर गुणवत्ता के माध्यम से, किसी वेबसाइट की आवश्यकता वाले लगभग हर और किसी भी कार्य को संभालने में सक्षम है। 50 से अधिक अद्भुत डेमो वेबसाइटों को आंतरिक पृष्ठों, 260 से अधिक व्यक्तिगत HTML5 टेम्पलेट पृष्ठों और दर्जनों उद्देश्य-विशिष्ट पृष्ठों के साथ तैनात करना, मैसिव वास्तव में जबरदस्त है। यही कारण है कि मैसिव आसानी से लैंडिंग पेज वेबसाइट की मांगों को पूरा कर सकता है।

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

JANGO एक तकनीकी रूप से परिष्कृत, दृश्य रूप से विस्तृत और अच्छी तरह से डिज़ाइन किया गया, अविश्वसनीय रूप से ग्राफिक रूप से अनुकूलन योग्य और आश्चर्यजनक रूप से सहज, शक्तिशाली और तेज़ लोडिंग, फुर्तीला और उपयोग में आसान है। खोज इंजनअनुकूलित और डेवलपर अनुकूल उत्तरदायी HTML5 बहुउद्देशीय वेबसाइट टेम्पलेट। यह टेम्प्लेट बाज़ार में सबसे कुशलता से कोडित, मोबाइल फ्रेंडली, डेवलपर फ्रेंडली और उपयोग में आसान टेम्प्लेट बनाया गया है। JANGO आपकी सुविधा के लिए एक ठोस और विश्वसनीय HTML5 फ्रेमवर्क का उपयोग करता है। इसे परिष्कृत SASS CSS3 स्टाइलशीट के माध्यम से स्टाइल किया गया है जो आसानी से अनुकूलन योग्य और तेज़ लोडिंग है। इसे ट्विटर के बूटस्ट्रैप पर आधारित पूरी तरह से मॉड्यूलर फैशन में डिज़ाइन किया गया है। यह इसे सभी ब्राउज़रों, प्लेटफार्मों और स्क्रीन आकारों के साथ विशेष रूप से प्रतिक्रियाशील और क्रॉस-संगत बनाता है।

JANGO बिना किसी कोडिंग के आपके सपनों की लैंडिंग पेज वेबसाइट बनाने के लिए एकदम सही है। इसके घटक-आधारित फ्रेमवर्क में सुव्यवस्थित, 3-चरणीय पृष्ठ निर्माण प्रक्रिया के साथ 300 से अधिक कस्टम निर्मित घटक शामिल हैं। शीर्ष लेख से घटकों और क्रम से पादलेख तक जाएँ, और हो गया! पेशेवर और परिष्कृत लैंडिंग पृष्ठ वेबसाइटें क्लिक करने और खींचने जितनी आसान, मिनटों में तैयार, बिल्कुल बॉक्स से बाहर। JANGO अपने कोडबेस में अपने मॉड्यूलर डिज़ाइन को भी तैनात करता है, जिसमें अत्यधिक सुपाठ्य, डेवलपर अनुकूल कोड होता है जो अच्छी तरह से एनोटेट किया जाता है, आपकी विशिष्ट आवश्यकताओं के लिए JANGO के संशोधन और अनुकूलन को आसान बनाने के लिए व्यापक दस्तावेज़ीकरण के साथ।

प्रकटीकरण: इस पृष्ठ में बाहरी संबद्ध लिंक शामिल हैं जिसके परिणामस्वरूप यदि आप उल्लिखित उत्पाद खरीदना चुनते हैं तो हमें कमीशन प्राप्त हो सकता है। इस पृष्ठ पर राय हमारी अपनी हैं और हमें सकारात्मक समीक्षाओं के लिए अतिरिक्त बोनस नहीं मिलता है।

नमस्कार, मेरे प्रिय पाठकों। आज हम उन तकनीकी पहलुओं के बारे में बात करेंगे जिनकी मदद से हम अपने सामान या सेवाओं का बिक्री रूपांतरण बढ़ा सकते हैं। महत्वपूर्ण बिंदुओं में से एक सुविचारित है लैंडिंग पृष्ठमाल के साथ. तथाकथित लैंडिंग पृष्ठ, जिसके निर्माण के बारे में हम बाद में बात करेंगे और तैयार पृष्ठ कोड प्राप्त करेंगे।

लैंडिंग पृष्ठ क्या है? यह वह पृष्ठ है जिस पर लोग आमतौर पर किसी विज्ञापन पर क्लिक करने के बाद पहुंचते हैं। एक प्रस्ताव के लिए बनाया गया: उत्पाद, सेवा या सदस्यता। एक प्रभावी लैंडिंग पृष्ठ सफल ऑनलाइन मार्केटिंग की आधारशिला है। उत्पाद बाज़ार में सर्वोत्तम हो सकता है, विज्ञापन उत्तम हैं, लेकिन एक अच्छे लैंडिंग पृष्ठ के बिना, प्रयास 100% परिणाम नहीं देते हैं। यह आगंतुकों को बताता है कि क्या पेशकश है और उन्हें यह क्यों चाहिए। तात्कालिकता की भावना त्वरित निर्णय लेने और उपयोगकर्ता को ग्राहक की श्रेणी में बदलने में योगदान देती है।

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

इसलिए लैंडिंग पृष्ठ बनाने से पहले, अपने आप से पूछें:

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

आपको सभी आवश्यक जानकारी प्रदान करने की आवश्यकता है, लेकिन इतनी नहीं कि आप अपने संभावित ग्राहक पर हावी हो जाएं और उसे दूर कर दें।

आरंभ करने से पहले, आइए HTML और CSS पर एक नज़र डालें। यह समझने से कि वे कैसे काम करते हैं, आपको लैंडिंग बनाने में मदद मिलेगी।

HTML वेबसाइट विज़ुअलाइज़ेशन के लिए एक ब्राउज़र मार्कअप भाषा है। सामग्री को परिभाषित करने वाले कोण कोष्ठक में संलग्न टैग का उपयोग करके लिखा गया है।

टैग भरने के आसपास () खुलता है और () बंद करता है:

सामग्री

फ़ाइन-ट्यूनिंग के लिए, नाम के बाद विशेषताएँ जोड़ी जाती हैं:

सामग्री

सीएसएस - HTML तत्वों को व्यवस्थित करने का तरीका परिभाषित करता है। चयनकर्ताओं, गुणों और मूल्यों से मिलकर बनता है:

#चयनकर्ता (संपत्ति: मूल्य;)

चयनकर्ता html में किसी विशिष्ट टैग के नाम से मेल खाता है। मान बदलना और गुण जोड़ना इसे नियंत्रित करता है उपस्थिति. आप एक ही HTML पर विभिन्न CSS शैलियों को लागू करके ऐसे पेज बना सकते हैं जो एक-दूसरे से भिन्न दिखते हैं।

त्वरित लेआउट के लिए, हम बूटस्ट्रैप पर आधारित न्यूनतम डिज़ाइन वाले टेम्पलेट का उपयोग करेंगे। यह अपने स्वयं के चयनकर्ताओं के साथ एक प्रणाली है, जिसका उपयोग दुनिया भर में लेआउट को गति देने के लिए किया जाता है।

यह मामूली दिखता है.

इस मछली से कई चरणों में हर स्वाद के लिए एक वेबसाइट बनाई जाती है।

फ़ोल्डर में निर्देशिका संरचना:

• Index.html: यह मुख्य फ़ाइल है जिसे हम संपादित करेंगे।
• /assets: सहायक फ़ाइलें यहां स्थित हैं:
• /css: निर्देशिका में बूटस्ट्रैप और आइकन शैलियाँ शामिल हैं। हम जिस फ़ाइल को संपादित करेंगे वह main.css है।
• /img: साइट छवियों के लिए फ़ोल्डर.
• /फ़ॉन्ट: आइकन फ़ॉन्ट.
• /js: बूटस्ट्रैप जावास्क्रिप्ट फ़ाइलें।

चरण 1: हेडर का उपयोग करना

शीर्षक और उपशीर्षक प्रमुख स्थान हैं जो ऑफ़र के मूल्य को स्पष्ट तरीके से बताने में मदद करते हैं।

आइए साइट का शीर्षक और नाम बदलें। यहां आपको टाइपिंग कौशल की आवश्यकता नहीं है - आप स्क्रीन पर पीले रंग में हाइलाइट किए गए स्थानों पर अपना टेक्स्ट लिखते हैं।

चरण 2. ब्रेविटी रूपांतरण की बहन है। लाभ और दरें जोड़ना

आपको 4 अनुभागों की आवश्यकता होगी:

• फायदे;
• दरें;
• समीक्षाएँ;
• कार्यवाई के लिए बुलावा।

आइए मुख्य सामग्री "मुख्य" का एक अनुभाग बनाएं, जिसमें हम आवश्यक अनुभाग सम्मिलित करेंगे:

…..
…..
…..
…..

बिन्दुओं के स्थान पर फिलिंग भरें।

लाभ अनुभाग के लिए आपको इस कोड की आवश्यकता होगी:

लाभ
तेज़

भरोसेमंद

सेड डायम नॉनमी

एलीट, सेड डायम नॉनमी

लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम नॉनमी

लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम नॉनमी

लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम नॉनमी

लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग

लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग

लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग

स्पष्टता के लिए सामग्री:

यह अभी भी मैला दिखता है, लेकिन घबराने की कोई बात नहीं है, चलिए जारी रखते हैं।

हम कीमतें लिखते हैं. सामग्री पहले चरण की तरह ही बदलती है। "टैरिफ" वर्ग और तीन टैरिफ के साथ सामान्य विवरण।

टैरिफ योजनाएँ

लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम नॉनमी निभ यूइस्मोड टिनसीडंट यूटी लॉरेट डोलोर मैग्ना अलिकम एराट वोलुटपैट। यूट विसि एनिम एड मिनिम वेनियम, क्विस नोस्ट्रुड एक्सरसाइज उल्लामकॉर्पर ससिपिट लोबॉर्टिस निस्ल यूटी एलिक्विप एक्स ईए कमोडो कॉन्सक्वेट।

प्रति माह/प्रति व्यक्ति

• लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट


• लोरेम इप्सम डोलर


• 10 लोरेम इप्सम

प्रति माह/प्रति व्यक्ति

• लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट


• लोरेम इप्सम डोलर


• 10 लोरेम इप्सम

प्रति माह/प्रति व्यक्ति

• लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट


• लोरेम इप्सम डोलर


• 10 लोरेम इप्सम

ऐसा लगता है.

हालाँकि हमें भविष्य के लैंडिंग पृष्ठ की उपस्थिति में कोई दिलचस्पी नहीं है, हम नीचे बदलती शैलियों के उदाहरणों पर विचार करेंगे।

चरण 3: सिग्नल पर भरोसा करें और कार्रवाई के लिए कॉल करें

लक्षित संकेतों का उपयोग आगंतुकों को इंगित करता है कि ब्रांड भरोसेमंद है। सिग्नल मिल सकते हैं विभिन्न प्रकार, लेकिन क्लासिक्स ग्राहक समीक्षाएँ हैं।

ग्राहक समीक्षा

लोरेम इप्सम डोलोर सिट अमेट, कंसेक्टेचर एडिपिसिंग एलीट, सेड डू ईयसमॉड टेम्पोर इंसिडिडंट यूट लेबोर एट डोलोर मैग्ना अलिका। यूटी एनिम एड मिनिम वेनियम, क्विस नोस्ट्रूड एक्सर्सिटेशन उल्लामको लेबोरिस निसी यूटी एलिक्विप एक्स ईए कमोडो:

आइए कॉल टू एक्शन सेट करें।

आज ऑर्डर करते समय लाभ

लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम नॉनमी निभ यूइस्मोड टिनसीडंट यूटी लॉरेट डोलोर मैग्ना अलिकम एराट वोलुटपैट। यूट विसि एनिम एड मिनिम वेनियम, क्विस नोस्ट्रूड एक्सरसाइज उल्लामकॉर्पर ससिपिट लोबॉर्टिस निस्ल यूटी एलिक्विप एक्स ईए कमोडो परिणाम:

समीक्षाओं से संभावित ग्राहकों को उत्पाद खरीदने का निर्णय लेने में मदद मिलेगी। स्पष्टता के लिए, हमें अवतारों की आवश्यकता है, इसलिए हम उन्हें तुरंत प्रत्येक उद्धरण के नीचे रख देंगे।

ग्राहक नाम।

चरण 4: ग्रिड और मोबाइल अनुकूल एकीकरण

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

"मुख्य" की सामग्री को एक कंटेनर में लपेटा जाएगा। ऐसा करने के लिए, शीर्ष पर निम्नलिखित लिखा है:

… .

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

हम उन सभी तत्वों को लाइन विभाजकों के साथ लपेट देंगे जिन्हें एक दूसरे के ऊपर रखने की आवश्यकता है।

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

हम कॉलम क्लास col-lg-4 का उपयोग करके एक पंक्ति में कीमतें निर्धारित करते हैं। पंक्ति पंक्तियों के अंदर, रैपिंग के लिए अलग-अलग डिव लिखना अब आवश्यक नहीं है; उन्हें एक स्थान से अलग करके मौजूदा डिव के साथ जोड़ा जा सकता है।

सादृश्य से, हम समीक्षा और लाभ अनुभाग के लिए कॉलम स्थापित करते हैं। यदि आपको किसी तत्व को किनारे पर ले जाने की आवश्यकता है, तो ऑफ़सेट कॉलम वर्ग col-lg-offset-2 का उपयोग करें। अंत में संख्या यह निर्धारित करती है कि कितने आधार स्तंभों में बदलाव होगा।

चरण 5. फ़ॉन्ट और चिह्न

हम Google फ़ॉन्ट शीर्षक फ़ॉन्ट लागू करते हैं। चयनित होने पर, आयात टैब खोलें और उसमें से डेटा को main.css फ़ाइल में कॉपी करें। हम उस फ़ाइल में शीर्षक चयनकर्ता भी जोड़ते हैं जिसके लिए नए फ़ॉन्ट का उपयोग किया जाता है।

@आयात "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* शीर्षकों के लिए फ़ॉन्ट आयात करें */
.नेवबार-ब्रांड,
h1,
h2,
h3,
h4,
h5,
h6 (
फ़ॉन्ट-फ़ैमिली: "रोबोटो कंडेंस्ड", सैन्स-सेरिफ़; /* Googlefont आउटपुट */
}

स्पष्टता के लिए, बूटस्ट्रैप सेट से स्व-व्याख्यात्मक नाम टेक्स्ट-सेंटर और फ़ॉन्टऑसम आइकन के साथ एक वर्ग द्वारा लाभों का वर्णन किया गया है।

फिलहाल तैयारी पूरी हो चुकी है.

हम तीन सबसे लोकप्रिय प्रकारों का उपयोग करते हैं: एक वाक्य के साथ, एक रूप के साथ और एक उलटी गिनती काउंटर के साथ। जैसे-जैसे लेआउट आगे बढ़ेगा, टेम्पलेट को प्रभावों के साथ पूरक किया जाएगा।

आइए मुख्य भाग की पृष्ठभूमि और पैडिंग सेट करें ताकि पहली स्क्रीन कवर हो जाए।

जंबोट्रॉन (
पृष्ठभूमि: #f5f5f5 url(../img/fon.jpg) शीर्ष केंद्र नो-रिपीट;
अधिकतम-चौड़ाई: 100%;
पैडिंग-टॉप: 250px;
पैडिंग-बॉटम: 200px;
पाठ-संरेखण: केंद्र;
}

आइए जंबोट्रॉन हेडर का आकार h2 से h1 में बदलें। इसके बाद, हम उन तत्वों के लिए शैलियाँ लिखते हैं जिन्हें बदलने की आवश्यकता है।

आइए आइकनों से शुरू करें।

लाभ मैं(
रंग: #cac4c4;
}

हैश चिन्ह के बाद, एक रंग निर्दिष्ट किया जाता है। आप HTML रंग तालिकाओं या छवि संपादक का उपयोग करके अपना स्वयं का विकल्प चुन सकते हैं।

अनुभाग शीर्षकों के लिए इंडेंटेशन

अनुभाग h2 (
पैडिंग-टॉप: 30px;
मार्जिन-बॉटम: 25px;
}

हम टैरिफ के स्वरूप को व्यवस्थित कर रहे हैं। सुविधा के लिए, हम उन तत्वों के लिए अपनी स्वयं की कक्षाएं बनाते हैं जिन्हें हम विशेष रूप से उजागर करना चाहते हैं।

टैरिफ नंबर 1
$10

प्रति माह/प्रति व्यक्ति

• लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट


• लोरेम इप्सम डोलर


• 10 लोरेम इप्सम

और बहुत सी सीएसएस. अनुभाग किन स्थानों के लिए जिम्मेदार हैं, यह टिप्पणियों में बताया गया है - /* तारक के साथ स्लैश के बीच */

/* ========= टैरिफ शैलियाँ ======== */
/* सामान्य फ़ॉर्मटैरिफ */
.pricing_item(
पृष्ठभूमि: #f2f2f2;
स्थिति: सापेक्ष;
प्रदर्शन: -वेबकिट-फ्लेक्स;
प्रदर्शन: फ्लेक्स;

फ्लेक्स-दिशा: स्तंभ;

संरेखित-आइटम: खिंचाव;
पाठ-संरेखण: केंद्र;
-वेबकिट-फ्लेक्स: 0 1 330px;
फ्लेक्स: 0 1 330px;
पैडिंग: 2em 3em;
मार्जिन: 1em;
रंग: #262बी38;
कर्सर: डिफ़ॉल्ट;
ओवर फलो हिडेन;

}
/* क्लिक करने पर पृष्ठभूमि बदलें */
.pricing_item:होवर (
रंग: #444;
पृष्ठभूमि: #daebef;
}
/*प्रत्येक टैरिफ में व्यक्तिगत मूल्य टैग पृष्ठभूमि*/
.pricing_item:पहला बच्चा .price (
पृष्ठभूमि: #9बीए9बी5;
}
.pricing_item:nth-child(2).price (
पृष्ठभूमि: #1f6098;
}
/* चौड़ी स्क्रीन पर मध्य टैरिफ कॉलम इंडेंट और हाइलाइट किया गया है */
@मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 66.250em) (
.pricing_item(
मार्जिन: 1.5em 0;
}
.विशेष रुप से प्रदर्शित(
z-सूचकांक: 10;
मार्जिन: 0;
फ़ॉन्ट-आकार: 1.15em;
}
}
/* शीर्षक */
.pricing_item h3 (
फ़ॉन्ट-आकार: 2em;
मार्जिन: 0.5em 0 0;
रंग: #1d211f;
}
/* मूल्य टैग पृष्ठभूमि */
।कीमत (
फ़ॉन्ट-आकार: 2em;
फोंट की मोटाई: बोल्ड;
रंग: #fff;
स्थिति: सापेक्ष;
z-सूचकांक: 100;
लाइन-ऊंचाई: 95px;
चौड़ाई: 100px;
ऊंचाई: 100px;
मार्जिन: 1.15em ऑटो 1em;
सीमा-त्रिज्या: 50%;
पृष्ठभूमि: #77a5cc;
-वेबकिट-संक्रमण: रंग 0.3s, पृष्ठभूमि 0.3s;
संक्रमण: रंग 0.3s, पृष्ठभूमि 0.3s;
}
/* मुद्रा */
।मुद्रा(
फ़ॉन्ट-आकार: 0.5em;
लंबवत-संरेखण: सुपर;
}
/*प्रस्ताव का स्पष्टीकरण*/
।वाक्य (
फोंट की मोटाई: बोल्ड;
मार्जिन: 0 0 1em 0;
पैडिंग: 0 0 0.5em;
रंग: #2a6496;
}
/* सूची */
.pricing_item उल (
फ़ॉन्ट-आकार: 0.95em;
मार्जिन: 0;
पैडिंग: 1.5em 0.5em 2.5em;
पाठ-संरेखण: बाएँ;
}
/* सूची आइटम */
.pricing_item ली (
पैडिंग: 0.15em 0;
}
/* दर आदेश बटन */
.pricing_item बटन(
फोंट की मोटाई: बोल्ड;
मार्जिन-टॉप: ऑटो;
पैडिंग: 1em 2em;
रंग: #fff;
बॉर्डर-त्रिज्या: 5px;
पृष्ठभूमि: #428बीसीए;
-वेबकिट-संक्रमण: पृष्ठभूमि-रंग 0.3s;
संक्रमण: पृष्ठभूमि-रंग 0.3s;
}
/*बटन दबाने पर रंग बदलें*/
.pricing_item बटन: होवर,
.pricing_item बटन: फोकस (
पृष्ठभूमि-रंग: #285e8e;
}
/* टैरिफ पृष्ठभूमि*/
.बीजी-2(
पृष्ठभूमि: #dddddd;
}

परिणाम

ग्राहक समीक्षा। आइए उन्हें एक साफ-सुथरा रूप दें और उनका स्थान बताएं।

/* =========प्रशंसापत्र शैलियाँ======== */
प्रशंसापत्र (
पैडिंग: 4em 0;
पाठ-संरेखण: केंद्र;
}
.प्रशंसापत्र .अवतार img (
सीमा-त्रिज्या: 50%;
नाव छोड़ी;
प्रदर्शन: इनलाइन;
मार्जिन-दाएं: 1em;
चौड़ाई: 65px;
ऊंचाई: 65px;
मार्जिन-बॉटम: 30px;
}
.प्रशंसापत्र .अवतार पी (
पाठ-संरेखण: बाएँ;
पैडिंग-टॉप: 1em;
रंग: #5d5d5d;
फ़ॉन्ट-भार: 900;
}

जो कुछ बचा है वह अंतिम कॉल टू एक्शन और फ़ूटर को सजाना है।

/* कार्रवाई */
।कार्रवाई(
पृष्ठभूमि: #476177;
न्यूनतम-ऊंचाई: 180px;
चौड़ाई: 100%;
पैडिंग: 4em 0;
पाठ-संरेखण: केंद्र;
}
.कार्रवाई h2 (
रंग: #fff;
फ़ॉन्ट-भार: 300;

}
.कार्रवाई पी(
रंग: #fff;
टेक्स्ट-छाया: 0 1px 2px rgba(0, 0, 0, .2);
फ़ॉन्ट-आकार: 1.2em;
}
.कार्रवाई .कंटेनर (
मार्जिन-टॉप: 3em;
}
/* पादलेख*/
पादलेख(
पृष्ठभूमि: #333333;
पैडिंग: 1em 0;
पाठ-संरेखण: दाएँ;
}
पादलेख पी(
रंग: #fff;
लाइन-ऊंचाई: 1;
पाठ-परिवर्तन: अपरकेस;
फ़ॉन्ट-आकार: 0.7em;
मार्जिन-टॉप: 0.5em;
}

फ़ुटर बटन को अंतर्निहित बूटस्ट्रैप क्लास btn-डिफ़ॉल्ट असाइन किया गया है।

टेम्पलेट को जीवंत बनाना. हम अनुभागों के लिए सहज स्क्रॉलिंग और बटन, साथ ही पहली स्क्रीन पर टेक्स्ट एनीमेशन पेश करेंगे।

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

हम बटनों के लिए इंडेंट सेट करते हैं - जेबटन। दबाए जाने पर स्क्रॉल करना काम करता है, लेकिन बहुत अचानक से।

जब सहज परिवर्तन निर्मित होते हैं जावास्क्रिप्ट सहायताया jquery. बाद वाला डिफ़ॉल्ट रूप से बूटस्ट्रैप टेम्प्लेट से जुड़ा होता है।

स्क्रॉलिंग अब सुचारू है.

Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css) का उपयोग करके टेक्स्ट में एनीमेशन जोड़ना। ये तैयार है खुला स्त्रोत, इसका उपयोग किसी भी वेबसाइट पर किया जा सकता है। फ़ाइल को Github से CSS फ़ोल्डर में रखें और पथ निर्दिष्ट करें।

हम यहां प्रभावों का चयन करते हैं: https://daneden.github.io/animate.css/। हमने फ़ेडइनडाउन चयनित किया है। इसे कोड में इस प्रकार लिखा गया है:

अब जब पेज लोड या रिफ्रेश होगा, तो टेक्स्ट एनिमेटेड हो जाएगा। तैयार।

किसी विज़िटर के सामने जितने अधिक फॉर्म फ़ील्ड प्रस्तुत किए जाएंगे, उसके द्वारा उन्हें भरने की संभावना उतनी ही कम होगी। केवल न्यूनतम आवश्यक जानकारी ही माँगें।

इसे सादृश्य द्वारा एकत्रित किया जाता है। हम पृष्ठभूमि और रंग बदल देंगे. और, निःसंदेह, हम एक आकृति जोड़ देंगे।

आइए लंबन से शुरू करें।

आइए जंबोट्रॉन की पृष्ठभूमि को पारदर्शी में बदलें:

पृष्ठभूमि: पारदर्शी;

सिर के अंदर हम स्क्रिप्ट डालेंगे:

$(विंडो).स्क्रॉल(फ़ंक्शन(ई)(
लंबन();
});
फ़ंक्शन लंबन())(
var स्क्रॉल = $(विंडो).स्क्रॉलटॉप();
$("।bgparallax").css("शीर्ष",-(स्क्रॉल*0.2)+"px");
}

शरीर में पहली पंक्ति लंबन के लिए एक कंटेनर है:

और CSS में इसका व्यवहार है:

Bgparallax (
पृष्ठभूमि: url(/../img/fon.jpg) दोहराएँ;
स्थिति: निश्चित;
चौड़ाई: 100%;
ऊंचाई: 300%;
शीर्ष:0;
बाएँ:0;
z-सूचकांक: -1;
}

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

मेनू को गहरा बनाना:

नेवबार-डिफ़ॉल्ट (
पृष्ठभूमि-रंग: #333;
बॉर्डर-रंग: #444;
रंग: गहरा भूरा;
सीमा-त्रिज्या: 0;
}

नेवबार-डिफॉल्ट .नेवबार-नेव > .एक्टिव > ए, .नेवबार-डिफॉल्ट .नेवबार-नेव > .एक्टिव > ए:होवर, .नेवबार-डिफॉल्ट .नेवबार-नेव > .एक्टिव > ए:फोकस (
रंग: गहरा भूरा;
पृष्ठभूमि-रंग: आरजीबीए(0, 0, 0, 0.5);
}

हम जंबोट्रॉन में वाक्य को एक नए वाक्य से बदलते हैं - फॉर्म कोड के साथ:

लैंडिंग पृष्ठ आगंतुकों को ग्राहकों में बदल देता है
क्विस्क टिनसिडंट डुई ऑग सस्पेंडिस लोरेम वेल डायम कंसेक्टेचर पोसुएरे वेहिकल पोसुएरेट मौरिस वेहिकुला टॉर्चर रोन्कस वल्पुटेट मासा।

• 
  
  
  


• 
  

  लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम नॉनमी।

  
  

और हम उपस्थिति निर्धारित करते हैं

/* रूप */
.शीर्ष प्रपत्र-सूची(
सूची-शैली-प्रकार: कोई नहीं;
लाइन-ऊंचाई: 26px;
फ़ॉन्ट-भार: 400;
पैडिंग: 0px;
मार्जिन-बॉटम: 40px;
}
.हेडफॉर्म(
ओवर फलो हिडेन;
स्थिति: सापेक्ष;
पृष्ठभूमि-रंग: आरजीबीए(0,0,0,.4);
पैडिंग: 35px 40px;
बॉर्डर-त्रिज्या: 8px;
}
इनपुट, बटन, चयन, टेक्स्टक्षेत्र (
चौड़ाई: 100%;
मार्जिन-बॉटम: 10px;
}
.हेडफ़ॉर्म-सूची li .fa (
स्थिति: निरपेक्ष;
शीर्ष: 0px;
बाएँ: 0px;
चौड़ाई: 42px;
फ़ॉन्ट-आकार: 24px;
पाठ-संरेखण: केंद्र;
}
.हेडफ़ॉर्म-सूची ली(
स्थिति: सापेक्ष;
न्यूनतम-ऊंचाई: 38px;
पैडिंग-बाएं: 62px;
मार्जिन-बॉटम: 20px;
}
.जंबोट्रॉन पी (
रंग: #fff;
फ़ॉन्ट-आकार: 16px;
फ़ॉन्ट-शैली: इटैलिक;
}

जंबोट्रॉन का पाठ भी यहीं समाप्त हुआ, क्योंकि इसमें बदलाव की मांग थी।

हम टैरिफ बदल रहे हैं.

/* टैरिफ का सामान्य दृश्य */
.pricing_item(
पृष्ठभूमि-रंग: आरजीबीए(0,0,0,.4); /* पंक्ति परिवर्तित*/
सीमा-त्रिज्या: 4px; /* पंक्ति परिवर्तित*/
स्थिति: सापेक्ष;
प्रदर्शन: -वेबकिट-फ्लेक्स;
प्रदर्शन: फ्लेक्स;
-वेबकिट-फ्लेक्स-दिशा: कॉलम;
फ्लेक्स-दिशा: स्तंभ;
-वेबकिट-संरेखण-आइटम: खिंचाव;
संरेखित-आइटम: खिंचाव;
पाठ-संरेखण: केंद्र;
-वेबकिट-फ्लेक्स: 0 1 330px;
फ्लेक्स: 0 1 330px;
पैडिंग: 2em 3em;
मार्जिन: 1em;
रंग: #f2f2f2; /* पंक्ति परिवर्तित*/
कर्सर: डिफ़ॉल्ट;
ओवर फलो हिडेन;
बॉक्स-छाया: 0 0 15px आरजीबीए(0, 0, 0, 0.05);
}
/* क्लिक करने पर पृष्ठभूमि बदलें */
.pricing_item:होवर (
रंग: #444;
पृष्ठभूमि: #ddd; /* पंक्ति परिवर्तित*/
}

अब वे ऐसे दिखते हैं - पारदर्शी पृष्ठभूमिऔर गोल कोने.

टेम्पलेट तैयार है.

हम जंबोट्रॉन की फिलिंग को फिर से बदलते हैं और पिछले टेम्पलेट के समान, नई पृष्ठभूमि से मेल खाने के लिए टेम्पलेट को फिर से रंग देते हैं। काउंटर स्क्रिप्ट कनेक्ट करें:

एचटीएमएल





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

• 
  

  लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम नॉनमी।

  
  


• 
  

  लोरेम इप्सम डोलर सिट अमेट, कंसेक्टेट्यूअर एडिपिसिंग एलीट, सेड डायम नॉनमी।