हेल्लो दोस्तों, आज हम आपके लिए लेकर आये है Responsive Intro with round Image का HTML एवं CSS Code जिसके माध्यम से आप अपने ब्लॉगर के किसी भी Page पर आप अपने अनुसार लगा सकते है जिसमे आपको Image लगाना है तथा Description लिखना है जो की आप अपने अनुसार लिख सकते है Responsive Intro with round Image का Source Code इसी पोस्ट के अंत में दिया गया है
Responsive Intro with round Image Demo
उपरोक्त बताये गए प्रोजेक्ट का Demo आप नीचे देख सकते है
Responsive Intro with round Image CSS Code
नीचे दिए गए CSS Code में आप अपने अनुसार उपरोक्त Project के style को change कर सकते है
.skt-builder-testimonial-carousel-content {
background-color: #f1f1f1;
padding: 90px 30px 40px;
}
.skt-builder-testimonial-carousel-image {
position: absolute;
width: 120px;
height: 120px;
top: 0px;
z-index: 99;
left: 0;
right: 0;
margin: 0 auto;
overflow: hidden;
border-radius: 50%;
border: solid 5px #fff;
}
.box {
margin-left: auto;
margin-right: auto;
margin-top:70px;
}
नीचे दिए गए CSS Code में आप अपने अनुसार उपरोक्त Project के style को change कर सकते है .skt-builder-testimonial-carousel-content इस style में आप लिखे गए Description को ऊपर नीचे कर सकते है तथा .skt-builder-testimonial-carousel-image इस वाले सेक्शन में आप इमेज के साइज़ को कम ज्यादा कर सकते है तथा Image के border को कलर दे सकते है
उपरोक्त के अलावा हमने एक box नाम का CSS Add किया है जिसके माध्यम से हम अपने box को नीचे के तरफ Move किये है इस तरह से हमारा CSS Code तैयार हो चूका है
Responsive Intro with round Image HTML Code
अब हम HTML Code को Add करेंगे जैसे की नीचे दिखाया गया है
<div class="box">
<div class="skt-builder-testimonial-carousel-content" style="background-color: #f9be00; text-align: center;">
<div class="skt-builder-testimonial-carousel-image" style="border:solid 4px #fff;"><img src="Paste image Code Here" style="width:100%"></div>
उपरोक्त HTML Code में आप Image के URL को अपने Image के URL से Replace करे
<div class="about-customer">
<div class="skt-builder-testimonial-carousel-description" style="color: #585858;">अपने Description को यहाँ लिखे </div>
<h4 class="skt-builder-testimonial-carousel-title" style="color: #3a3a3a; font-size:18px;">Pawan Kumar</h4></div><h6 style="color:#222;">Founder - Adviser Sathi</h6></div>
उपरोक्त HTML Code में आप Description, नाम तथा अपने वेबसाइट सम्बंधित जानकारी को Add कर सकते है
Responsive Intro with round Image Source Code
उपरोक्त बताये गए Project का Source Code नीचे दिया जा रहा है यदि आप चाहे तो दिए गए Source Code के नीचे Copy Code का बटन दिया गया है आप उस बटन पर Click करके Code को Copy कर सकते है