Year-end giving ends December 31. Be there for the next diagnosis. Give now →
टेस्टिकुलर कैंसर फाउंडेशन की दृश्य भाषा में प्रयुक्त रंग, टाइपोग्राफी और घटक पैटर्न। किसी भी हेक्स या आरजीबी मान पर क्लिक करके उसे कॉपी करें।
तीन भूमिकाएँ: ब्रांड पहचान के लिए प्राथमिक , टाइप और सतहों के लिए स्याही , और रंग और बॉर्डर के लिए संकेत । किसी भी हेक्स या आरजीबी कोड को कॉपी करने के लिए उस पर क्लिक करें।
ब्रांड। कॉल टू एक्शन (CTA), एक्सेंट, लिंक, आइब्रो टेक्स्ट और प्रमुख दृश्य क्षण।
प्राथमिक सियान रंग के लिए टैग पिल्स, इनलाइन लिंक टेक्स्ट और होवर स्टेट्स। रंगीन पृष्ठभूमि पर उच्च कंट्रास्ट।
डीप सियान रंग में पहले से मौजूद किसी भी चीज़, सेकेंडरी बटन, लेजर लिंक, कार्ड लिंक के लिए होवर स्थिति।
टैग, कॉलआउट और फीचर्ड कार्ड बैकग्राउंड। कंटेंट से प्रतिस्पर्धा किए बिना सूक्ष्म ब्रांड उपस्थिति।
यह बॉर्डर सियान रंग के फिल के साथ मिलकर काम करता है। इससे टिंटेड कार्ड सफेद पेज पर भी स्पष्ट रूप से पढ़े जा सकते हैं।
शीर्षक, हीरो कार्ड, CTA ब्लॉक, फ़ूटर, फ़ोकस आउटलाइन। यह हर जगह मौजूद शुद्ध काले रंग को बदल देता है।
हल्की सतहों पर डिफ़ॉल्ट बॉडी टेक्स्ट। नेवी ब्लू की तुलना में कम कंट्रास्ट, लंबे टेक्स्ट को पढ़ने में आसानी।
उप-अनुच्छेद, सूची विवरण, शीर्षक के नीचे द्वितीयक पाठ।
कैप्शन, स्पेसिफिकेशन लेबल, फुटनोट, आउटलेट के नाम, EIN लाइनें। शांत लेकिन पठनीय।
गहरे नीले रंग की पृष्ठभूमि के ऊपर बॉडी टेक्स्ट, हीरो, हीरो कार्ड, सीटीए और फुटर।
डिफ़ॉल्ट पेज बैकग्राउंड। कार्ड और सामग्री की सतहें।
वैकल्पिक अनुभाग पृष्ठभूमि, निष्क्रिय टॉगल अवस्थाएँ, इनलाइन कोड चिप्स।
कार्ड बॉर्डर, हेडिंग के नीचे हेयरलाइन, लेजर और लिस्ट रो डिवाइडर।
सेकेंडरी बटन की आउटलाइन और कोई भी बॉर्डर जिसे स्लेट 100 सतह के ऊपर पढ़ने की आवश्यकता हो।
मीडिया के लिए आरक्षित (लोगो लॉकअप, फोटोग्राफी मास्क)। टाइपिंग के लिए उपयोग न करें, डीप नेवी फॉन्ट का उपयोग करें।
काले रंग पर बालों की लकीरें: गहरे नौसेना की सतहों पर, विभाजक और सीमाएँ उपयोग की जाती हैं rgba(255,255,255,0.08) को rgba(255,255,255,0.12) स्लेट हेक्स के बजाय।
एक सियान रंग उपलब्ध है: #00B4DB , और डीप और होवर के लिए #0091B0 उपलब्ध है। ये पुराने वेरिएंट अभी भी पुराने पेजों और कस्टम CSS में दिखाई देते हैं। इन्हें देखते ही बदल दें, नए काम में इन्हें दोबारा शामिल न करें।
शीर्षकों के लिए सेरिफ़ फ़ॉन्ट, बाकी सभी के लिए सैन्स फ़ॉन्ट। DM सेरिफ़ डिस्प्ले गर्माहट और संपादकीय गंभीरता प्रदान करता है; इंटर लंबे लेखों को पढ़ने और बिना किसी रुकावट के बेहतर उपयोगकर्ता अनुभव प्रदान करता है।
सेरिफ़ फ़ॉन्ट · केवल 400 अक्षर · शीर्षक, उद्धरण चिह्न, अंक
सैंस · 400 / 600 / 700 · बॉडी, यूआई, बटन
डीएम सेरिफ डिस्प्ले एक ही वजन में भेजा जाता है। कभी आवेदन न करें <strong>, <b>, या फ़ॉन्ट-वज़न: 600/700 सेरिफ़ फ़ॉन्ट के लिए, ब्राउज़र एक नकली बोल्ड बनाता है जो भारी और धुंधला दिखाई देता है, खासकर सफ़ारी में। यदि किसी सेरिफ़ पंक्ति पर ज़ोर देने की आवश्यकता है, तो <em>: इटैलिक प्लस टीसीएफ सियान हाउस एम्फेसिस पैटर्न है।
दो तराजू। लेख यह विस्तृत सामग्री, ब्लॉग पोस्ट और प्रोग्राम पेज के लिए है। प्रदर्शन यह हीरो सेक्शन, लैंडिंग पेज और मार्केटिंग इवेंट्स के लिए है जहाँ टाइप को अधिक काम करने की आवश्यकता होती है। नीचे दिए गए आकार डेस्कटॉप की अधिकतम सीमा हैं, हेडिंग अपने आप ही प्रदर्शित हो जाएंगी। क्लैम्प() इसलिए वे फोन पर इसका आकार छोटा कर देते हैं।
विश्वास का निर्माण मापने योग्य जवाबदेही और निरंतर पारदर्शिता के माध्यम से होता है, और हमारी तृतीय-पक्ष रेटिंग ठीक यही दर्शाती है।
2009 में स्थापित, टेस्टिकुलर कैंसर फाउंडेशन एक 501(c)(3) गैर-लाभकारी संस्था है और देश में पूर्णकालिक कर्मचारियों वाला एकमात्र टेस्टिकुलर कैंसर समूह है। हम कैंसर से बचे लोगों, देखभाल करने वालों और अधिवक्ताओं की एक टीम हैं जो शिक्षा और जागरूकता बढ़ाने के लिए प्रतिबद्ध हैं।
इंटर 16 / 600, पैडिंग: 1रेम 2रेम8px त्रिज्या, 0.18s रंग संक्रमण। Squarespace लिंक शैलियाँ कोड ब्लॉक में फैल जाती हैं, इसलिए बटन एंकर हमेशा सेट होते हैं। रंग और text-decoration साथ !महत्वपूर्ण.
मुख्य क्रिया के लिए प्राथमिक सियान; जब बटन बॉडी टेक्स्ट के बगल में हो और कंट्रास्ट की आवश्यकता हो तो गहरा सियान; किसी भी गौण कार्य के लिए आउटलाइन।
नेवी ब्लू पर सियान। सियान पर नेवी ब्लू। डोनेट बैंड पेज के एकमात्र बड़े सियान रंग पर हावी है, इसलिए इसका बटन बाकी रंगों से अलग दिखने के बजाय गहरा रंग का हो जाता है।
पुन: उपयोग योग्य बिल्डिंग ब्लॉक्स। ये ब्लॉग पोस्ट, प्रोग्राम पेज और दानदाताओं के लिए तैयार की गई सामग्री में दिखाई देते हैं। नया पैटर्न बनाने से पहले किसी मौजूदा पैटर्न का उपयोग करें, ब्रांड की निरंतरता पुनरावृत्ति से बनी रहती है, न कि नवीनता से।
H1 बॉक्स के ऊपर श्रेणी लेबल। हल्के रंग की पृष्ठभूमि, गहरे सियान रंग का टेक्स्ट।
संक्षिप्त सारांश या मुख्य निष्कर्ष। 3 पिक्सेल की प्राथमिक बाईं सीमा के साथ सियान रंग।
संक्षेप में: कैंडिड प्लैटिनम, चैरिटी नेविगेटर पर 93% रेटिंग के साथ 4-स्टार, ग्रेटनॉनप्रॉफिट्स पर टॉप-रेटेड, ट्रस्टपायलट पर स्वतंत्र समीक्षाएं।
गहरे रंग की सतह पर भौंहें, शीर्षक, सहायक पैराग्राफ और वैकल्पिक उद्धरण चिह्न शामिल हैं।
दानदाताओं और भागीदारों के लिए
हमारी श्रेणी में आने वाले अधिकांश गैर-लाभकारी संगठन इनमें से एक या दो प्लेटफार्मों पर मौजूद हैं। टीसीएफ को चारों प्लेटफार्मों पर रेटिंग प्राप्त है।
"स्वतंत्र सत्यापन न्यूनतम स्तर है, अधिकतम स्तर नहीं।"
क्रमबद्ध सूचियाँ, रेटिंग, प्रोग्राम बीट्स। प्राथमिक सियान रंग में सेरिफ़ अंक, बारीक विभाजक, कार्ड पर क्रोम फिनिश नहीं।
बिना किसी भेदभाव के शिक्षा के माध्यम से युवाओं तक पहुंचें।
नए निदान वाले मरीजों को उन लोगों से जोड़ें जो इस स्थिति से उबर चुके हैं।
उपचार समाप्त होने के बाद दीर्घकालिक देखभाल, समुदाय और संसाधन।
एंकर पंक्तियों के रूप में प्रथम-पुरुष सेरिफ़ वाले वाक्य। किसी पंक्ति पर माउस ले जाने से उसकी सहवर्ती पंक्तियाँ धुंधली हो जाती हैं, इटैलिक में लिखा वाक्यांश सियान रंग का हो जाता है और तीर खिसक जाता है। इसका उपयोग नेविगेटर विषयों और किसी भी "अपनी स्थिति चुनें" सूची के लिए किया जाता है।
प्रेस आइटम, संसाधन और डाउनलोड के लिए समान ऊंचाई वाले हेयरलाइन कार्ड। माउस ले जाने पर एक सियान बॉर्डर और 1px का एक छल्ला उभरता है, ट्रांसलेट लिफ्ट नहीं होता।
एक उत्तरजीवी ने आत्म-निरीक्षण के महत्व पर प्रकाश डाला है और पाठकों को टीसीएफ के आत्म-परीक्षण संसाधनों की ओर निर्देशित किया है।
लेख पढ़ें →एक सहकर्मी-समीक्षित अध्ययन जिसमें यह जांच की गई है कि हास्य-आधारित अभियान युवा पुरुषों को कैसे आकर्षित करते हैं।
अध्ययन पढ़ें →पीड़ित, देखभालकर्ता, समर्थक और चिकित्सक एक सप्ताहांत के शैक्षिक सत्र के लिए एक साथ इकट्ठा होंगे।
लेख पढ़ें →बड़े अंक डीएम सेरिफ़ फ़ॉन्ट में सेट किए गए हैं। ऊपर माइक्रो-लेबल और नीचे सरल भाषा में स्पष्टीकरण दिया गया है। अंक को कभी भी बोल्ड न करें।
हर डॉलर का कुछ हिस्सा सीधे कार्यक्रम सेवाओं पर खर्च होता है।
देश में पूर्णकालिक कर्मचारियों वाला एकमात्र वृषण कैंसर समूह।
स्वतंत्र दान संस्थाओं के मूल्यांकनकर्ता, सभी सार्वजनिक रूप से प्रकाशित।
पीड़ित और उनके साथियों की आवाज़ें। सेरिफ़ इटैलिक, माइक्रो-लेबल एट्रिब्यूशन, हेयरलाइन कार्ड।
"मुझे किसी ने जांच करने के लिए नहीं कहा। हम यहां उस चुप्पी को तोड़ने के लिए आए हैं।"24 साल की उम्र में निदान होने के बाद जीवित बची महिला
लेख के अंत में दान या पंजीकरण ब्लॉक। गहरा नेवी ब्लू रंग, जिसमें सियान रंग का प्रमुख प्रभाव है, एक ही कॉलम बीच में स्थित है, अधिकतम चौड़ाई लगभग 720px है।
हमारे स्वतंत्र मूल्यांकन में परिलक्षित समान मानकों के तहत प्रत्येक डॉलर का प्रबंधन किया जाता है।
TCF को दान करेंगति एक संकेत है, प्रदर्शन नहीं। सब कुछ एक ही छोटे वक्र पर चलता है, और जो आवश्यक न हो वह नहीं चलता।
0.18 सेकंड से 0.2 सेकंड तक आसानी रंग, पृष्ठभूमि, बॉर्डर और अपारदर्शिता पर ही निर्भर करता है। इससे ज़्यादा लंबा या लचीला कुछ नहीं।
बॉर्डर टीसीएफ सियान रंग का है जिसमें 1px का मैचिंग रिंग है (बॉक्स-शैडो: 0 0 0 1px #00B4DB)। नहीं translateY नए काम में कार्ड लिफ्ट का उपयोग किया जा रहा है, पृष्ठों के पुनर्निर्माण के दौरान पुरानी लिफ्टों को हटाया जा रहा है।
किसी पंक्ति पर माउस ले जाने से उसकी संबंधित पंक्तियाँ नीचे आ जाती हैं। अपारदर्शिता: .55यह इटैलिक वाक्यांश को सियान रंग में बदल देता है और तीर को 4px खिसका देता है। माउस ले जाने वाली पंक्ति पूरी अपारदर्शिता के साथ बनी रहती है।
प्रत्येक इंटरैक्टिव तत्व को मिलता है :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }फोकस रिंग को बिना वापस लगाए कभी न निकालें।
इसमें कोई पल्स, ग्लो, बाउंस, पैरेलेक्स या ऑटो-प्लेइंग मोशन नहीं है। पेज के निष्क्रिय रहने पर कोई एनीमेशन नहीं दोहराया जाता है।
यह साइट Squarespace 7.1 पर चलती है, इसलिए अधिकांश नए डिज़ाइन कार्य एक स्व-निहित कोड ब्लॉक के रूप में भेजे जाते हैं जिन्हें फ़्लूइड-इंजन सेक्शन में डाला जाता है। ये नियम उन ब्लॉकों को आपस में या प्लेटफ़ॉर्म के साथ टकराव से बचाते हैं।
प्रत्येक नया ब्लॉक इसका उपयोग करता है टीसीएफएक्स- उपसर्ग। टीसीएफ- यह पुराने कस्टम सीएसएस से संबंधित है और इसमें टकराव होगा।
.tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } और इससे चौड़ा कुछ नहीं। एक पृष्ठ जितना चौड़ा। * रीसेट करने से पहले भी साइट क्रैश हो चुकी है।
प्रत्येक नियम को ब्लॉक के मूल वर्ग के अंतर्गत रखें। कोड ब्लॉक को बिना किसी दुष्प्रभाव के किसी भी पृष्ठ पर पेस्ट करना सुरक्षित होना चाहिए।
यदि एक <style> उपयोग @आयात फ़ॉन्ट के लिए, यह उस टैग की पहली पंक्ति होनी चाहिए अन्यथा ब्राउज़र इसे हटा देगा।
प्रोडक्शन HTML और CSS में कमेंट्स नहीं होते हैं। कृपया प्रोजेक्ट नोट्स में इस ब्लॉक का उल्लेख करें।
टेक्स्ट, अंक या इनलाइन एसवीजी। इमोजी विभिन्न प्लेटफॉर्म पर असंगत रूप से प्रदर्शित होते हैं और अनौपचारिक लगते हैं।
यूजर इंटरफेस में हर जगह गहरे नीले रंग को काले रंग के स्थान पर इस्तेमाल किया गया है। शुद्ध काला रंग केवल मीडिया के लिए आरक्षित है।
फ़ोन लेआउट को आधार बनाकर उसमें जोड़ें न्यूनतम-चौड़ाई क्वेरी ऊपर की ओर। एकल-स्तंभ स्टैक, क्लैम्प() टाइप, 640px से कम आकार में कम पैडिंग, टैप-फ्रेंडली टारगेट।
लक्ष्य="_खाली" हमेशा साथ भेजता है rel="noopener noreferrer".
किसी मौजूदा पेज को रीस्टाइल करते समय, हेडलाइन, बॉडी टेक्स्ट, यूआरएल और यूटीएम पैरामीटर को हूबहू वैसे ही रखें। किसी भी बदलाव को चुपचाप करने के बजाय उसे चिह्नित करें।
SEO के लिए, पुनर्निर्मित हीरो टेक्स्ट में मूल शब्दों के साथ केवल एक H1 भाग रखा जाता है। Squarespace के विकल्पों से बचें। sqsrte-scaled-text रैपर, इसका इनलाइन आकार रनटाइम पर गायब हो सकता है और हेडिंग को सिकोड़ सकता है।
किसी ब्लॉक के सेक्शन को गहरा रंग देने के लिए, सेक्शन बॉक्स के बजाय बैकग्राउंड लेयर को टारगेट करें और पेंट करें। ।पृष्ठ भाग किसी भी क्लिप-पाथ डिवाइडर को वर्गाकार कर देता है।
.page-section:has(.tcfx-block) .section-background { background: #0F172A !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }