I want to put the line under the image tag as image below but pseudo-elements doesn’t work with <img> tag
Here is my code
http://codepen.io/thehung1724/pen/roGhl
Hope anyone can help me out. Thank in advance.
You’ll need to clarify, as it’s not clear what you are asking.
Style the <img> tag in your CSS. If you want every image to be underlined then use a .class. If you want only one image underlined then use an #id. ID’s must be unique, classes can be used many times…
As Ralph said, we will need more information to understand what you wish to do.
It is possible to simply apply a colored border to the bottom of an image in CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>template</title>
<!--
http://www.sitepoint.com/forums/showthread.php?1208329-How-do-I-put-the-text-line-under-an-image-tag
May 10, 2014, 04:11
thehung1724
-->
<style type="text/css">
img {
border-bottom:2px solid red;
}
</style>
</head>
<body>
<img src="http://placehold.it/300x300" width="300" height="300" alt="">
</body>
</html>
Hi,
If you are talking about the vertical line between the round images then you could do something like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin:0;
padding:0
}
body {
background:#000;
color:#fff;
}
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after { clear: both; }
.cf { *zoom: 1;
}
p {
margin:0 0 1em;
padding:10px;
}
.line {
position:relative;
width:80%;
margin:auto;
}
.line:after {
content:" ";
width:1px;
background:#fff;
position:absolute;
z-index:1;
top:0;
bottom:0;
left:50%;
}
.fl { float:left; }
.fr { float:right; }
.block {
width:50%;
position:relative;
padding:0 50px 0 0;
clear:both
}
.fr { padding:0 0 0 50px; }
.circle {
width:50px;
height:50px;
border-radius:50%;
background:red;
float:right;
margin-right:-85px;
margin-top:1em;
position:relative;
z-index:2;
}
.fr .circle {
float:left;
margin-left:-85px
}
</style>
</head>
<body>
<div class="line">
<div class="row cf">
<div class="block fl">
<p><span class="circle"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper risus consequat mauris dapibus, ut aliquet odio posuere. Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo</p>
</div>
<div class="block fr">
<p><span class="circle"></span>Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo</p>
</div>
<div class="block fl">
<p><span class="circle"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper risus consequat mauris dapibus, ut aliquet odio posuere. Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="block fr">
<p><span class="circle"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper risus consequat mauris dapibus, ut aliquet odio posuere. Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo</p>
</div>
</div>
</div>
</body>
</html>
That’s just a rough idea.
Hi @Paul-O-B
As method you mentioned, how can I remove the top and bottom line?
Hi,
That’s a little awkward 
Here’s my attempt:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
margin:0;
padding:0
}
body {
background:#000;
color:#fff;
}
.cf:before, .cf:after {
content: " ";
display: table;
}
.cf:after { clear: both; }
.cf { *zoom: 1;
}
p {
margin:0 0 1em;
padding:10px;
}
.line {
position:relative;
width:80%;
margin:auto;
overflow:hidden;
}
.line:after {
content:" ";
width:1px;
background:#fff;
position:absolute;
z-index:1;
top:0;
bottom:0;
left:50%;
}
.fl { float:left; }
.fr { float:right; }
.block {
width:50%;
position:relative;
padding:0 50px 0 0;
clear:both
}
.fr { padding:0 0 0 50px; }
.circle {
width:50px;
height:50px;
border-radius:50%;
background:red;
float:right;
margin-right:-85px;
margin-top:1em;
position:relative;
z-index:2;
}
.fr .circle {
float:left;
margin-left:-85px
}
.circle.first:before,.circle.last:before{
content:" ";
position:absolute;
width:4px;
left:50%;
margin:0 0 0 -2px;
background:#000;
bottom:100%;
height:99em;
z-index:3;
background:#000;
}
.circle.last:before{
bottom:auto;
top:100%;
}
</style>
</head>
<body>
<h1>Testing joined images (circles) in fluid layout</h1>
<div class="line">
<div class="row cf">
<div class="block fl">
<p><span class="circle first"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper risus consequat mauris dapibus, ut aliquet odio posuere. Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo</p>
</div>
<div class="block fr">
<p><span class="circle"></span>Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo</p>
</div>
<div class="block fl">
<p><span class="circle"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper risus consequat mauris dapibus, ut aliquet odio posuere. Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
<div class="block fr">
<p><span class="circle last"></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper risus consequat mauris dapibus, ut aliquet odio posuere. Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo</p>
</div>
</div>
</div>
</body>
</html>
It basically rubs out the line on top and bottom but relies on overflow:hidden to be available on the wrapper. It does however produce a fully fluid layout effect with a stretchy line. I’m not sure if it’s robust enough for your actual situation so you will need to test. Note that your images (my red circles) would need to not have any transparent parts of the line will show underneath. As you have a black background you should be able to include this on your image or indeed your image would need to be placed in the spans and that span can have the black background instead.
As you can see image I attached below:
In “Service provided” area. The border line under image, I tried but don’t know why can’t under the border line under image. Here my code:
http://codepen.io/thehung1724/pen/iykFu
Hope anyone can help me out. Thank in advance.
You’ve already been helped out. See above.
Hi @ralph-m
Please see image for more details
Hi @Paul-O-B
If I replace <span> tag with <img> tag, there seem to be your class doesn’t work. Top and bottom line still appearing.
Put the image in the span
If you are talking abut the horizontal line that passes through the image then there are a number of ways to do this. The easiest way would be to repeat a background image on the container and then place the image on top. You could rub out the background around the image by using the current background colour or indeed including a solid background match on your image.
Or you could use:after and draw a line much in the same way as I did with your vertical line and again rubbing it out with the image or the background as required.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.line {
margin:0 auto 1em;
height:2em;
line-height:2em;
color:#f00;
font-size:1.5em;
position:relative;
width:50%;
overflow:hidden;
text-align:center;
}
.line:before {
content:" ";
height:5px;
left:0;
right:0;
background:green;
position:absolute;
top:1em;
}
.line span {
background:#fff;
position:relative;
z-index:2;
padding:0 20px;
}
</style>
</head>
<body>
<h1 class="line"><span>Heading Goes here</span></h1>
</body>
</html>
Hi @Paul-O-B
Thank for your code. If I change the text with image (transparent background), the line can be under the image.
The line will go under the image but of course any transparent parts of the image will show the line underneath (unless you shim a background colour under there to match the existing background).
Hi @Paul-O-B
Is there any ways to put span tag out side p tag?
It almost complete, but there are somethings hope you can help me out:
-
I putted image in the span but why top and bottom line still appearing.
-
How can I break line the <h2>, I tried with word-wrap but nothing changed.
-
As image I attached above, there 2 circle around image. How can I create 2nd circle.
Thank in advance.
http://codepen.io/thehung1724/pen/GpomL
Hi @Paul-O-B
Hope you can help me.
Sorry I was away for a while I’ll take a look later today when I get back
Hi,
You need to rub the line out with the background-color and you also missed the class of .last on the last circle in the group.
You already have a circle line around the image so just match the background-color and align the image centrally.
e.g.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
#section-service {
background: #222;
padding: 98px 0 87px 0;
}
.line {
padding-top: 66px;
margin: 0 auto;
position: relative;
width: 80%;
overflow: hidden;
}
.line:after {
content: " ";
width: 1px;
background: #fff;
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 50%;
}
.fl {
float: left;
}
.fr {
float: right;
}
.block {
width: 50%;
position: relative;
padding: 0 60px 0 0;
clear: both;
}
.block h2 {
margin-bottom: 28px;
color: #fff;
line-height: 49px;
}
.block p {
line-height: 26px;
color: #bbb;
font-family: 'Raleway';
}
.fr {
padding: 0 0 0 60px;
}
.circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid #393939;
float: right;
margin-right: -85px;
margin-top: 1em;
position: relative;
z-index: 2;
background:#222;
}
.fr .circle {
float: left;
margin-left: -85px;
}
.circle.first:before, .circle.last:before {
content: " ";
position: absolute;
width: 4px;
left: 50%;
margin:-1px 0 0 -2px;
bottom: 102%;
height: 99em;
z-index: 3;
background: #222;
}
.circle.last:before {
bottom: auto;
top: 100%;
margin: 1px 0 0 -2px;
}
.circle{text-align:center;line-height:45px}
.circle img {display:inline;vertical-align:middle}
</style>
</head>
<body>
<div id="section-service">
<div class="container">
<div class="row text-center">
<h3 class="section-title section-title-white">Services we provided</h3>
<div class="line">
<div class="row cf">
<div class="block fl text-right">
<h2>Powerful Scalability</h2>
<p> <span class="circle first"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAgCAYAAACRpmGNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0QxNkZEQkRERDIzMTFFMzk3MTBDMjUwQ0FBQkRCRjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0QxNkZEQkVERDIzMTFFMzk3MTBDMjUwQ0FBQkRCRjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDRDE2RkRCQkREMjMxMUUzOTcxMEMyNTBDQUFCREJGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDRDE2RkRCQ0REMjMxMUUzOTcxMEMyNTBDQUFCREJGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnlvklcAAAL/SURBVHjazJhraI1xHMfPsFlibiOX1hIiL8gll8wLmqbWKCIkQiSvkJPLNsMIK7wRZXOdhISYRWqieDNLXtDsqJGYjLmNctn4/Ot76pzHuTzPc87Ozq8+7Wx7zv//fX63/+95Utpzcz3Jat3ivF42TIch8At8cA9+dKa4LDgE86ENmqAHZErYMdgNX50s2iUOwqbAYxgLC6GnPDgABkMRrIBHMNLJwikx5txwqIN6MAu1hrnOCK2GQTAR3ifCc0fgNxREEGasGfKhKxxMRFjHwRwo1ebRzHhrByxV2DtU3AJV5GkH36mE7/puh4obr3xzUoE/1VrmwYRo+8ciro/6mFO7BP2gFhphA3R30+cyYC7MhKHwCV7CXUiFLy7EVQrTqNcoZ1fBEnhqx3NpUAhv4CSMgg+6frKqdJLyx629hV0wBlrgvkId0XN94ar60X44Ko9ZrRf0j0MTfw15cBmq1AWaQzVhE6oauTxfzTVRlqFTpE4h/i+sfjfnJViYR1W/ERbBaKs4cw5ugi3wopOmpGqFeZlV3Er46LCpxtv+wi2d00HiTChvwp8YN9iqY8qtNcAwa7WOUJXGYtthr3/iUQ47tW+aA4PEZSqssQjbA++0bokiU+JwHdMpPlvFtWjucmNFmnTXwwzoDVegXB50EuZp8NwqzlToVBfCihW+dXBc4jw6WUyCV0hgsY21TMeYBQes4m6DV2N2q01hxiM7A4RZ7ZR+livEhVHW2xdwY0HVekInhNemsM0StjaMsECBq9U/t0W4zjwcLZewRqvnmjQhlGqcqYoirkrJf87GjZzROP8kzP/Ng9FZtRFvuKmkTJteU46kRtiw3qYwv523jkSaCQ/DRVVogVpJSHFtuosKVV+DKjEn3EDowtI0dpVpWDXD5kP9zWf30XC2Ej5Hv7drpotULNdhoFqJT4NqqD6Wrs8PNJJd0Pq2J+E7Ilu9J8vGWP8MFutzjXIyXErUauCM6XXEK2HX/OJuiKR5keMXlZ6Mb5k8yp+42D8BBgAyYKtMzQd0JwAAAABJRU5ErkJggg==" alt="" /> </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper risus consequat mauris dapibus, ut aliquet odio posuere. Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo </p>
</div>
<div class="block fr text-left">
<h2>Boosting feature</h2>
<p> <span class="circle last"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACcAAAAgCAYAAACRpmGNAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0QxNkZEQkRERDIzMTFFMzk3MTBDMjUwQ0FBQkRCRjAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0QxNkZEQkVERDIzMTFFMzk3MTBDMjUwQ0FBQkRCRjAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDRDE2RkRCQkREMjMxMUUzOTcxMEMyNTBDQUFCREJGMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDRDE2RkRCQ0REMjMxMUUzOTcxMEMyNTBDQUFCREJGMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PnlvklcAAAL/SURBVHjazJhraI1xHMfPsFlibiOX1hIiL8gll8wLmqbWKCIkQiSvkJPLNsMIK7wRZXOdhISYRWqieDNLXtDsqJGYjLmNctn4/Ot76pzHuTzPc87Ozq8+7Wx7zv//fX63/+95Utpzcz3Jat3ivF42TIch8At8cA9+dKa4LDgE86ENmqAHZErYMdgNX50s2iUOwqbAYxgLC6GnPDgABkMRrIBHMNLJwikx5txwqIN6MAu1hrnOCK2GQTAR3ifCc0fgNxREEGasGfKhKxxMRFjHwRwo1ebRzHhrByxV2DtU3AJV5GkH36mE7/puh4obr3xzUoE/1VrmwYRo+8ciro/6mFO7BP2gFhphA3R30+cyYC7MhKHwCV7CXUiFLy7EVQrTqNcoZ1fBEnhqx3NpUAhv4CSMgg+6frKqdJLyx629hV0wBlrgvkId0XN94ar60X44Ko9ZrRf0j0MTfw15cBmq1AWaQzVhE6oauTxfzTVRlqFTpE4h/i+sfjfnJViYR1W/ERbBaKs4cw5ugi3wopOmpGqFeZlV3Er46LCpxtv+wi2d00HiTChvwp8YN9iqY8qtNcAwa7WOUJXGYtthr3/iUQ47tW+aA4PEZSqssQjbA++0bokiU+JwHdMpPlvFtWjucmNFmnTXwwzoDVegXB50EuZp8NwqzlToVBfCihW+dXBc4jw6WUyCV0hgsY21TMeYBQes4m6DV2N2q01hxiM7A4RZ7ZR+livEhVHW2xdwY0HVekInhNemsM0StjaMsECBq9U/t0W4zjwcLZewRqvnmjQhlGqcqYoirkrJf87GjZzROP8kzP/Ng9FZtRFvuKmkTJteU46kRtiw3qYwv523jkSaCQ/DRVVogVpJSHFtuosKVV+DKjEn3EDowtI0dpVpWDXD5kP9zWf30XC2Ej5Hv7drpotULNdhoFqJT4NqqD6Wrs8PNJJd0Pq2J+E7Ilu9J8vGWP8MFutzjXIyXErUauCM6XXEK2HX/OJuiKR5keMXlZ6Mb5k8yp+42D8BBgAyYKtMzQd0JwAAAABJRU5ErkJggg==" alt="" /> </span> Quisque enim quam, semper quis dui sed, pellentesque consectetur augue. Nam convallis diam lacus, vel posuere lacus adipiscing et. Nulla venenatis dui quis laoreet blandit. Phasellus pulvinar lectus vel turpis varius, et ultrices tortor eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce blandit tellus nec semper gravida. Nunc faucibus enim non dolor eleifend commodo </p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not sure what you meant abut the h2?