href=" https://fonts.googleapis.com/css2?family=Rubik: wght@400;500;600;700&display=swap"
 rel = "स्टाइलशीट"
 />

पावफेक्ट🐾










 उत्तरी कैरोलिना में पेट होम ग्रूमिंग सर्विस







instagram viewer



 समय से बाहर चल रहे? और मत बोलो। वेनिओम पावफेक्ट और फ्यूगियाट इटैक, और उसके बाद राशन वेनिअम इप्सम टेम्पोरीबस कम सन निमो असेंडा फेसरे?

उत्पादन:

अब नेविगेशन मेनू और हीरो सेक्शन को स्टाइल करने का समय आ गया है।

सामान्य सीएसएस

अपने शीर्ष पर सामान्य CSS स्टाइल जोड़ें स्टाइल.सीएसएस फ़ाइल। नायक अनुभाग में एक पृष्ठभूमि छवि है। आप ऐसा कर सकते हैं GitHub पर छवियों सहित पूरा कोड एक्सेस करें, या अपनी स्वयं की छवि का उपयोग करें।

* {
 मार्जिन: 0;
 पैडिंग: 0;
 बॉक्स-साइज़िंग: बॉर्डर-बॉक्स;
}
एचटीएमएल {
/* 10पीएक्स / 16पीएक्स = 0.625 =62.5*/
 फ़ॉन्ट-आकार: 62.5%;
 अतिप्रवाह-एक्स: छिपा हुआ;
 स्क्रॉल-व्यवहार: चिकना;
}
तन {
 फ़ॉन्ट-परिवार: 'रुबिक', बिना सेरिफ़;
 लाइन-ऊंचाई: 1.5;
 फ़ॉन्ट-आकार: 1.5rem;
 फ़ॉन्ट-वजन: 400;
 अतिप्रवाह-एक्स: छिपा हुआ;
 रंग: #523414;
 पृष्ठभूमि-रंग: #e9be5a;
}
.शीर्षक-प्राथमिक,
.शीर्षक-माध्यमिक,
.शीर्षक-तृतीयक {
 फ़ॉन्ट-वजन: 700;
 रंग: #523414;
 लेटर-स्पेसिंग: -0.5px;
}
.शीर्षक-प्राथमिक {
 फ़ॉन्ट-आकार: 5.2rem;
 लाइन-ऊंचाई: 1.05;
 मार्जिन-बॉटम: 3.2rem;
}
.शीर्षक-माध्यमिक {
 फ़ॉन्ट-आकार: 4.4rem;
 लाइन-ऊंचाई: 1.2;
 मार्जिन-नीचे: 5.6rem;
 पाठ-संरेखण: केंद्र;
}
.शीर्षक-तृतीयक {
 फ़ॉन्ट-आकार: 3rem;
 लाइन-ऊंचाई: 1.2;
 मार्जिन: 1.2rem;
}
ए {
 पाठ-सजावट: कोई नहीं;
}
.फर्स्ट-फोल्ड {
 पृष्ठभूमि-छवि: यूआरएल (img/पावफेक्ट-bg.png);
 न्यूनतम ऊंचाई: 80rem;
}

नेविगेशन बार को स्टाइल करना

उपयोग सीएसएस फ्लेक्सबॉक्स लोगो और नेविगेशन मेनू को एक पंक्ति में समायोजित करने के लिए। सेट पृष्ठभूमि का रंग पारदर्शी और देने के लिए a बॉर्डर-त्रिज्या का 9px कॉल-टू-एक्शन (सीटीए) बटन पर।

नेविगेशन बार सीएसएस

/* ****************** */
/* प्रतीक चिन्ह */
/* ****************** */
हेडर {
 प्रदर्शन: फ्लेक्स;
 औचित्य-सामग्री: अंतरिक्ष-बीच;
 संरेखित-आइटम: केंद्र;
 पृष्ठभूमि-रंग: पारदर्शी;
 ऊंचाई: 9.6rem;
 पैडिंग: 0 4.8rem;
}
।प्रतीक चिन्ह {
 ऊंचाई: 2.2रेम;
 फ़ॉन्ट-आकार: 3.6rem;
 पाठ-सजावट: कोई नहीं;
 पाठ-संरेखण: केंद्र;
 फोंट की मोटाई: बोल्ड;
 रंग: #462d12;
}
/* ****************** */
/* मार्गदर्शन */
/* ****************** */
.मेन-एनएवी-सूची {
 सूची-शैली: कोई नहीं;
 प्रदर्शन: फ्लेक्स;
 संरेखित-आइटम: केंद्र;
 अंतर: 4.8rem;
}
.मेन-एनएवी-लिंक {
 प्रदर्शन: इनलाइन-ब्लॉक;
 पाठ-सजावट: कोई नहीं;
 रंग: #462d12;
 फ़ॉन्ट-वजन: 400;
 फ़ॉन्ट-आकार: 1.8rem;
}
.मेन-एनएवी-लिंक.एनएवी-सीटीए {
 पैडिंग: 1.2rem 2.4rem;
 सीमा-त्रिज्या: 9px;
 रंग: #fff;
 पृष्ठभूमि-रंग: #523414;
}

उत्पादन:

सम्बंधित: HTML और CSS का उपयोग करके एक उत्तरदायी नेविगेशन बार कैसे बनाएं

हीरो सेक्शन को स्टाइल करना

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

हीरो सेक्शन सीएसएस

/* ****************** */
/* हीरो सेक्शन */
/* ****************** */
.सेक्शन-हीरो {
 पैडिंग: 15rem 0 9.6rem;
}
।नायक {
 अधिकतम-चौड़ाई: 75rem;
 पैडिंग: 0 9.6rem;
 संरेखित-आइटम: बाएं;
}
नायक-विवरण {
 फ़ॉन्ट-आकार: 2rem;
 लाइन-ऊंचाई: 1.6;
 मार्जिन: 4.8रेम 0;
}

उत्पादन:

सेवा अनुभाग का निर्माण

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

सेवा अनुभाग HTML

माता-पिता बनाएं वर्ग = "ग्रिड सेवाएं" और सभी चार सेवाओं का उपयोग करके जोड़ें. छवि, सेवा का नाम और उसका थोड़ा विवरण जोड़ें।

हमारी सेवाएँ






फुल ग्रूमिंग

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







सेल्फ सर्व डॉग वॉश

ओडिट अलिकम डोलर पूर्व डोलोरेमक्यू सेड इटैक।







वॉश एंड ब्लो ड्राई

वोलुप्टेटम सस्पिट और ओम्नीस क्वास सेपे।







शरीर और पंजा मालिश

सेपियंटे कोस क्वी हिक पोरो वॉलुप्टाटिबस इम्पेडिट।

सेवा अनुभाग सीएसएस

दो बराबर स्तंभों के साथ एक ग्रिड बनाएं और सेट करें अन्तर प्रति 4रेम. सभी समायोजित करें ग्रिड-आइटम केंद्र में और छवि सेट करें चौड़ाई मूल आकार का 80% तक।

/* ****************** */
/* हमारी सेवाएँ */
/* ****************** */
।हमारी सेवाएँ {
 पैडिंग: 9.6rem 0;
}
कंटेनर {
 अधिकतम-चौड़ाई: 120rem;
 मार्जिन: 0 ऑटो;
 पैडिंग: 1.5rem 3.2rem;
}
।ग्रिड {
 प्रदर्शन: ग्रिड;
 ग्रिड-टेम्पलेट-कॉलम: 1fr 1fr;
 गैप: 4रेम;
 संरेखित-आइटम: केंद्र;
 औचित्य-सामग्री: केंद्र;
 पाठ-संरेखण: केंद्र;
}
.सेवाएं img {
 चौड़ाई: 80%;
 सीमा-त्रिज्या: 9px;
}

उत्पादन:

के बारे में अनुभाग का निर्माण

संक्षिप्त विवरण अनुभाग में एक छवि और एक टेक्स्ट बॉक्स होगा जिसमें टीम के बारे में कुछ संक्षिप्त जानकारी होगी।

अनुभाग HTML के बारे में

बनाओ 
 और इसके अंदर इमेज और टेक्स्ट को रखें। 








हमारे बारे में


 लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। क्वासो
 ऑफिसिस, परफेरेंडिस आईयूर पॉसिमस डोलर एस्परनेचर इंसिडंट रेम
 ipsa, consectetur temporibus dolor ea? तेनेतुर नोबिस लेबरिओसा
 डोलोर पर्सपिसियाटिस एस्परनाटुर इंसिडंट रेम प्लेसैट क्विस असेंडा
 हुक्म!

धारा सीएसएस के बारे में

CSS ग्रिड का उपयोग करके छवि और टेक्स्ट-बॉक्स को स्टाइल करें और एक जोड़ें परछाई डालना इसे और आकर्षक बनाने के लिए। का उपयोग करो नकारात्मक मार्जिन छवि के ऊपर टेक्स्ट बॉक्स सेट करने के लिए।

/* ****************** */
/* हमारे बारे में */
/* ****************** */
.ग्रिड-के बारे में {
 ग्रिड-टेम्पलेट-कॉलम: 1.2fr 0.8fr;
 अंतराल: 0;
}
।के बारे में {
 पैडिंग: 2rem 0 7rem 0;
}
आईएमजी के बारे में {
 चौड़ाई: 98%;
 औचित्य-स्व: अंत;
 सीमा-त्रिज्या: 9px;
}
.के बारे में पी {
 फ़ॉन्ट-आकार: 2.2rem;
}
।मूलपाठ {
 अधिकतम-चौड़ाई: 45rem;
 पृष्ठभूमि-रंग: #e7ac21;
 पैडिंग: 10rem 5rem;
 मार्जिन-बाएं: -5rem;
 सीमा-त्रिज्या: 9px;
}
.पाठ्य h2 {
 मार्जिन-बॉटम: 4.5rem;
 पाठ-संरेखण: केंद्र;
}

उत्पादन:

एक वेबसाइट का पाद लेख आगंतुकों के मन में एक स्थायी छाप छोड़ता है, इसलिए सुनिश्चित करें कि यह साफ और सुव्यवस्थित है।

आगंतुकों को धन्यवाद कहते हुए एक प्राथमिक शीर्षक जोड़ें। © के लिए एक HTML इकाई है © प्रतीक।

फ़ुटर को अलग देकर स्टाइल करें पृष्ठभूमि का रंग और उपयुक्त सेटिंग गद्दी.

/* ****************** */
/* पादलेख */
/* ****************** */
पादलेख {
 पाठ-संरेखण: केंद्र;
 पृष्ठभूमि-रंग: #e7ac21;
 पैडिंग: 2.5 रेम;
}

उत्पादन:

आप अंतिम Pawfect वेबसाइट देख सकते हैं इस लिंक का अनुसरण करके.

अपनी वेबसाइट प्रकाशित करें

बधाई हो, आपने HTML और CSS का उपयोग करके एकदम से एक पूरी वेबसाइट बना ली है! यह आपकी वेबसाइट को प्रकाशित करने और समुदाय से प्रतिक्रिया प्राप्त करने का समय है। हमें उम्मीद है कि आपने साइट बनाने की प्रक्रिया का आनंद लिया है। यदि आप होस्टिंग के लिए नए हैं, तो GitHub पेज का उपयोग करके किसी वेबसाइट को निःशुल्क होस्ट करने के तरीके पर एक नज़र डालें।

नैंसी मौर्य (19 लेख प्रकाशित)

नैंसी अत्यधिक प्रतिक्रियाशील वेबसाइटों और वेब प्रतियों के साथ कुशल सामग्री रणनीति बनाने में माहिर हैं। वह एक स्वतंत्र तकनीकी लेखिका हैं, जो ट्रेंडिंग तकनीकों पर पैनी नज़र रखती हैं।

नैंसी मौर्य की और फ़िल्में या टीवी शो