हेल्लो दोस्तों, Web Designing के इस पोस्ट में आज हम लेकर आये है की आप अपने ब्लॉगर या वेबसाइट के मैंन Page में अपने बारे में कुछ भी लिख सकते है
जिसका हमने About me on website home page का नाम दिया है इसको वेबसाइट पर लगाने के बाद वेबसाइट का लुक बदल जायेगा हम अपने इस आर्टिकल में About me on website home page का HTML एवं CSS Code नीचे दे रहे है तथा कैसे कस्टमाइज करना है use भी बताएँगे
जिसका हमने About me on website home page का नाम दिया है इसको वेबसाइट पर लगाने के बाद वेबसाइट का लुक बदल जायेगा हम अपने इस आर्टिकल में About me on website home page का HTML एवं CSS Code नीचे दे रहे है तथा कैसे कस्टमाइज करना है use भी बताएँगे
About me on Website Home Page Demo
नीचे दिखाए गए Demo में आप देख सकते है
About me on Website Home Page CSS Code
नी चे दिए गए CSS Code में आप content के एरिया कलर तथा text color में अपने अनुसार कस्टमाइज कर सकते है
#intro-author-heading {
padding: 34px 30px 35px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 35px auto;
text-align: center;
color: #7b7b7b;
position: relative;
text-align: center;
border-bottom-width: 5px;
border-bottom-style: solid ;
border-bottom-color:#ffc107;
background-color: #fff;
-webkit-box-shadow: 0px 0px 20px rgb(0 0 0 / 7%);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.07);
box-shadow: 0px 10px 20px rgb(0 0 0 / 7%);
}
उपरोक्त Code में आप border-bottom-color, padding,position text कलर तथा box shadow के style को बदल सकते है
#intro-author-heading {
width: 100%;
float: left;
}
#intro-author-heading .button {
float: none;
display: inline-block;
padding: 8px 30px;
background: #ffc107;
border-radius: 25px;
margin: 15px 20px 20px;
}
.button.medium {
font-size: 16px;
padding: 6px 15px;
}
a.button {
color: #fff;
text-decoration: none;
font-weight: 400;
}
.author-title {
display: block;
font-size:27px;
color: #222222;
font-weight: 700;
margin: 15px 0 20px;
}
.author-snippet {
font-size: 14px;
line-height: 24px;
margin: 0;
}
About me on Website Home Page HTML Code
नीचे दिए गए HTML Code में आप Heading तथा Paragraph को अपने According लिख सकते है
<div class="section" id="intro-author-heading" name="Main Author Intro Heading"><div class="widget HTML" data-version="2" id="HTML1">
<div class="author-content">
<style type="text/css">
#intro-author-wrap{display:block}
</style>
<h3 class="author-title">About Auther</h3>
<p class="author-snippet">My aim is to be able to present information related to web designing & Customization and blogger in simple language of Hindi to you. So that all those young people who want to get this field information can get help from this effort.
</p>
नीचे दिए गए बटन पर आप अपने Page का URL दर्ज करे एवं बटन का नाम बदल सकते है
<div class="small-button">
<a class="button medium" href="#">Download Resume</a>
<a class="button medium" href="#">Contact Me</a>
</div><p></p>
</div>
</div></div>
About me on Website Home Page Source Code
उपरोक्त सभी Code को compile करके नीचे दिया जा रहा है आप चाहे तो Source Code area के नीचे दिए गए Copy Code बटन पर click करके Code को कॉपी कर सकते है