हेल्लो दोस्तों, आज हम अपने इस आर्टिकल के माध्यम से लेकर आये है Web Page Designing सम्बंधित HTML एवं CSS Code जिसके माध्यम से आप अपने ब्लॉगर या वेबसाइट के Main Page को इस पोस्ट में दिए गए कोड को कॉपी अपने ब्लॉग में लगा के अपने ब्लॉग को एक Professional Type का लुक दे सकते है Responsive Main Page Intro With Image
Responsive Main Page Intro with Image इसका नाम दिए है इस Project की खासियत यह है की यह किसी भी स्क्रीन साइज़ में adjust हो जाता है आप इसमें अपने ब्लॉगर के niche के अनुसार शब्द को लिखे तथा Read More के बटन पर अपने किसी पेज का URL Add कर सकते है इसे आप अपने वेबसाइट के सबसे ऊपर वाले Section में Set करे इस HTML एवं CSS को ब्लॉगर या वेबसाइट में लगाने के बाद आप देखेंगे की आपकी वेबसाइट बहुत ही अच्छे तरह से दिखने लगेगा
Responsive Main Page Intro With Image Demo
नीचे दिए गए Demo में आप देख सकते है की इसका लुक कैसा रहेगा
Responsive Main Page Intro With Image CSS Code
नीचे दिए गए CSS कोड में आप अपने अनुसार Customization कर सकते है
#intro-wrap{
display:none;
position:relative;
float:left;
width:100%;
z-index:2;
margin:0
}
#main-intro{
position:relative;
float:left;
width:100%;
height:450px;
background-repeat:no-repeat;
background-size:cover;
background-position:center;
background-color:#ffffff;
}
#main-intro:before {
content: '';
background: rgba(0, 0, 0, 0.4);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#main-intro .widget{
height:100%;
width:100%;
display:block;
overflow:hidden
}
.intro-content{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
text-align:center;
margin:0
}
.intro-title{
font-size:4vw;
color:#ffffff;
font-weight:700;
text-shadow: 0px 0px 10px rgb(0 0 0 / 50%);
margin:0 0 30px
}
.intro-snippet{
font-size:2vw;
line-height:25px;
color:#888888;
margin:0
}
.intro-action a{
display:inline-block;
height:40px;
background-color:#19ddc4;
font-size:2vw;
color:#fff;
line-height:40px;
padding:0 25px;
margin:30px 0 0;
border-radius:3px;
transition:background .17s ease
}
.intro-action a:hover{
background-color:#1f2024
}
उपरोक्त दिए गए CSS Code में आप intro-wrap, main-intro,.intro-title, .intro-content तथा .intro-action a के बैकग्राउंड कलर,फॉण्ट साइज़, heading Read More बता आदि सभी के style को कस्टमाइज कर सकते है
Responsive Main Page Intro With Image HTML Code
नीचे दिए गए HTML Code में आप अपने Main Heading, Heading Description, Read More बटन तथा Background Image को Customize कर सकते है
<div id='intro-wrap'>
<div class='section' id='main-intro' name='Main Intro'><div class='widget Image' data-version='2' id='Adviser sathi'>
<div class='widget-content'>
<style type='text/css'>
#intro-wrap{display:block}
#main-intro{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqydLpMYU_UXIAKfHHjN9NtaP9wCRdPb834BvlPxOSs8vd8YKRpezPxsbwIhFDZrNhdsHVH-tbQxVmAZMQ6-4imaEjosXy8cDnJM52cYUfc0B6KKhTkSTa76A60kIruGhuWZsvr6oMvDo/w640-h114/Background+image.PNG)}
</style>
<div class='intro-content'>
<h3 class='intro-title'>HTML Web Page Design Demo.</h3>
<p class='intro-snippet'>Design your blogger's theme through this HTML code.</p>
<div class='intro-action'>
<script type="text/javascript">
var ilc = "https://advisersathi.blogspot.com/#Read More",
ima = ilc.split("#"),
ili = ima[0].trim(),
ilt = ima[1].trim(),
kod = "<a href="+ ili +">"+ ilt +"</a>";
document.write(kod)
</script>
</div>
</div>
</div>
उपरोक्त Code में जहाँ पर Image का URL दिया गया है वहां पर अपने Image का URL Paste करे तथा जहाँ पर मेरे ब्लॉग का URL है वहां पर अपने पेज का URL Paste करे
Responsive Main Page Intro With Image Source Code
दिए गए Source Code के नीचे Copy Code के बटन पर Click करके उपरोक्त सभी Code को Copy कर सकते है