I'm having difficulties in aligning these elements side by side, anyway this—
—is how it looks so far, but I want it look like this:
.reviewprofile {
background-color: transparent;
border: none;
margin-top: 5em;
}
.reviewentry {
display: inline-block;
font-family: 'Abhaya Libre', Times, Serif;
font-size: 0.8em;
font-weight: 400;
color: #5e5e5e;
text-align: left;
padding-left: 3.5em;
margin: 0;
}
.commbutton button {
float: left;
}
.starsrev {
padding-left: 2.8em;
}
<div class="commsec">
<div class="commbutton">
<button class="reviewprofile"><img src="img/reviewprofile.png"> </button>
</div>
<div class="commentry">
<p class="reviewentry">Cras ultricies dolor ac justo scelerisque, sit amet imperdiet<br> purus placerat.</p>
<img class="starsrev" src="img/stars.png" alt="stars" />
</div>
</div>
flex on the parent will create this layout with your existing markup. Here's a visual guide for help with syntax/options https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.reviewprofile {
background-color: transparent;
border: none;
}
.reviewentry {
font-family: 'Abhaya Libre', Times, Serif;
font-size: 0.8em;
font-weight: 400;
color: #5e5e5e;
text-align: left;
margin: 0;
}
.commsec {
display: flex;
align-items: center; /* this will affect vertical alignment */
}
<div class="commsec">
<div class="commbutton">
<button class="reviewprofile"><img src="http://cdn.quilt.janrain.com/2.1.2/profile_default.png"> </button>
</div>
<div class="commentry">
<p class="reviewentry">Cras ultricies dolor ac justo scelerisque, sit amet imperdiet<br> purus placerat.</p>
<img style="max-width: 100px" class="starsrev" src="http://www.moviesmacktalk.com/news/wp-content/uploads/2013/11/2.5-Stars.jpg" alt="stars" />
</div>
</div>
you can try floating them. thats what i usually do.
.commbutton{
float:left;
}
.commentry{
float:left;
}
Apply float:left to the div which you want to show on the left and apply float: right for the one to be shown on the right. That's the starting point. Based on results you may have to change them to be inline too.
Please add under CSS & check
img {
float: left;
}
I didn't run the code.
Related
This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 2 years ago.
I have a question how can I fix the block with likes,comments,author,inside another block,cause if I make less text it will go up
.post {
display: block;
height: 200px;
width: 800px;
background-color: rgba(63, 63, 63, 0.11);
margin: 20px 20px;
}
.title-block {
font-family: Calibri;
font-weight: 100;
font-size: 40px;
background-color: rgba(63, 63, 63, 0.09);
}
.title {
margin-left: 5px;
}
.post-categorie-block {
margin-top: 10px;
font-family: Calibri;
}
.postcat {
font-weight: 600;
}
.text-block {
font-family: Calibri;
padding: 10px 10px 10px 10px;
font-size: 28px;
}
.bottom-post-panel {
font-family: Calibri;
background-color: #cccccc;
width: 800px;
text-align: left;
margin-top: 10px;
}
.misc {
margin-left: 10px;
margin-right: 10px;
font-size: 20px;
}
<section class="blocks">
<div class="post-blocks">
<section class="post">
<article class="title-block">
<a class="title">Lorem Ipsum</a>
</article>
<div class="post-categorie-block">
<a class="cat">Категория:</a>
<a class="postcat">Lorem Ipsum</a>
</div>
<article class="text-block">
<a>Lorem ipsum dolor sit ametamet, ornare sed tellus. Quisque vel elementum dolor, non eleifend nulla. Donec ut volutpat dui, porttitor pellentesque magna.</a>
</article>
<div class="bottom-post-panel">
<a class="misc">Likes: 50</a>
<a class="misc">Comments: 10</a>
<a class="misc">Author: Lorem</a>
</div>
</section>
If I make position fixed, it will fix that block on whole page, I know that it is calculating margin from text block, but how do I make another way to fix it inside post block
You can set the position property of the wrapper div to relative and then in your child div set the position property to absolute and the bottom to 0px;
This will make it stick to the bottom in your wrapper div
.post {
display: block;
height: 200px;
width: 800px;
background-color: rgba(63, 63, 63, 0.11);
margin: 20px 20px;
}
.title-block {
font-family: Calibri;
font-weight: 100;
font-size: 40px;
background-color: rgba(63, 63, 63, 0.09);
}
.title {
margin-left: 5px;
}
.post-categorie-block {
margin-top: 10px;
font-family: Calibri;
}
.postcat {
font-weight: 600;
}
.text-block {
font-family: Calibri;
padding: 10px 10px 10px 10px;
font-size: 28px;
}
.bottom-post-panel {
position: absolute;
font-family: Calibri;
background-color: #cccccc;
width: 800px;
text-align: left;
bottom: 0px;
}
.post-blocks {
position: relative;
}
.misc {
margin-left: 10px;
margin-right: 10px;
font-size: 20px;
}
<section class="blocks">
<div class="post-blocks">
<section class="post">
<article class="title-block">
<a class="title">Lorem Ipsum</a>
</article>
<div class="post-categorie-block">
<a class="cat">Категория:</a>
<a class="postcat">Lorem Ipsum</a>
</div>
<article class="text-block">
<a>Lorem.</a>
</article>
<div class="bottom-post-panel">
<a class="misc">Likes: 50</a>
<a class="misc">Comments: 10</a>
<a class="misc">Author: Lorem</a>
</div>
</section>
I'm trying to center an image gallery with a lists background symmetrically. No matter the size of the browser. What are some ways I can symmetrically align content
I tried setting a wrapper around the list and the gallery and setting a fixed width but it only changes my image size and not the list background size. I also tried having a float but it changes around everything.
.months {
display: inline-block;
text-align: justify;
color: #808080;
width: 44.4%;
margin-top: 25px;
}
.months ul {
list-style-type: none;
}
.months li {
background-color: #ffffff;
padding: 16px;
border-bottom: 1px solid #808080;
}
.tourCities {
display: inline-block;
width: 260px;
margin: 15px;
background-color: #ffffff;
}
.tourCities img {
width: 100%;
height: auto;
}
http://jsfiddle.net/xza7g439/
I have included a jsfiddle of the code to keep everything neat.
https://imgur.com/a/PnIzxnp This is what I wanted to achieve
https://imgur.com/a/dDt27UE but this is what I get and it doesn't look right hurts my OCD.
You can do this:
CSS
body {
background-color: #000;
box-sizing: border-box;
}
.wrapper{
display: inline-block;
width: 500px; //Set the size here what you want (px, %)
position: relative;
left: 50%;
transform: translateX(-50%);
}
.months {
display: inline-block;
text-align: justify;
color: #808080;
width: 100%;
margin-top: 25px;
}
.months ul {
list-style-type: none;
margin:0;
padding:0;
}
.months li {
background-color: #ffffff;
padding: 16px;
border-bottom: 1px solid #808080;
}
.tourCities {
display: inline-block;
width: calc(50% - 8px);
background-color: #ffffff;
vertical-align: middle;
float: left;
margin: 16px 0px;
}
.cities .tourCities:nth-child(2n+0) {
margin-right:0;
margin-left: 16px; //pixel perfection
}
.tourCities img {
width: 100%;
height: auto;
}
.desc {
text-align: justify;
padding: 5px;
}
.date{
font-weight: 100;
color: #808080;
}
.smlBtn {
color: #ffffff;
background-color: #000000;
border-style: none;
padding: 14px;
}
HTML
<div class="wrapper">
<div class="months">
<ul>
<li>September</li>
<li>October</li>
<li>November</li>
</ul>
</div>
<div class="cities">
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="New york" width="245" height="184">
<div class="desc">
<p>
<b>New York</b>
</p>
<p class="date">Fri 27 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="Paris" width="245" height="184">
<div class="desc">
<p>
<b>Paris</b>
</p>
<p class="date">Sat 28 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
<div class="tourCities">
<img src="https://crunchwear.com/wp-content/uploads/2013/07/shop-imgs-front-full.jpg" alt="San Francisco" width="245" height="184">
<div class="desc">
<p>
<b>San Francisco</b>
</p>
<p class="date">Sun 29 Nov 2019</p>
<p>Praesent tincidunt sed tellus ut rutrum sed vitae justo.</p>
<button class="smlBtn">Buy Tickets</button>
</div>
</div>
</div>
</div>
DEMO HERE
I am trying to place 2 div elements containing background-image on the top of each other using the z-index property, but I'm struggling to make this work.
Ideally, I would like the div banner-image element to sort of slide underneath the div banner-image-overlay element as the screen is going smaller.
Here is my fiddle
HTML:
<div id="banner-container">
<div class="banner-image-overlay"></div>
<div class="banner-image"></div>
<div class="banner-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
</p>
<p>
Lorem ipsum dolor sit amet
</p>
<button class="banner-button" onclick="location.href='http://www.example.com'">
Button
</button>
</div>
</div>
CSS:
#banner-container {
width: 100%;
position:relative;
}
.banner-image {
height: 375px;
background-image: url('http://via.placeholder.com/502x375');
background-repeat: no-repeat;
background-position: left top;
}
.banner-image-overlay {
height: 375px;
background-image: url('http://via.placeholder.com/399x375');
background-repeat: no-repeat;
background-position: right top;
z-index: 99;
}
.banner-text {
max-width: 240px;
font-family: 'Helvetica Neue Light', arial;
color: #fff;
font-size: 1.6em;
float: right;
position: absolute;
right: 35px;
top: 15px;
z-index: 199;
}
.banner-button {
max-width: 240px;
font-size: 0.9em;
background-color: #fff;
border: none;
border-radius: 4px;
font-family: 'Helvetica Neue Light', arial;
color: #000;
text-decoration: none;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
}
I just can't figure out how to position them on the top of each other.
I've already had this working with the regular img tag and then using the position: absolute property, but this doesn't seem to work with the background-image: url
Any ideas?
You need to have position: absolute for z-index work.
I have a better solution by using flex box:
.banner{position:relative; display:flex;width:375px;height:500px; background:left top url(https://picsum.photos/300/300) no-repeat}
.banner-bg{flex:1 1;background:right top url(https://picsum.photos/200/280) no-repeat}
.banner-title{font-size:30px}
<div class="banner">
<div class="banner-bg">
<div style="position:absolute;width:150px;right:10px;top:100px">
<div class="banner-title">HERE IS LONG TEXT...</div>
<button>GET IN TOUCH</button>
</div>
</div>
</div>
As you see right background is placed above left background.
div elements by default are positioned relatively which means they will be next to each other. z-index will not change their positioning. If you want to stack them you'll have to change their positions. Positioning one of them absolutely with left and top set to 0 will stack them.
add position:absolute to .banner-image-overlay.
I've got this irritating horizontal scroll on my bootstrap page. Can't figure out what is making it behave like this or what to do about it?
JsFiddle link: http://jsfiddle.net/FatAlbert/cd1syrd9/2/
HTML:
<body>
<div class="wrapper">
<div class="row">
<div class="header">
<div class="container">
<!-- navigation-->
<nav class="navbar navbar-default">
<div class="container-fluid">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">Meny</button>
<a class="navbar-brand" href="#"><img src="xxx" /></a>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Start <span class="sr-only">(current)</span></li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</nav><!-- / navigation-->
</div>
</div><!-- / header-->
</div><!-- / container-->
<div class="row">
<div class="first-page-content">
<div class="container">
<img class="img-responsive img-big" src="xx" />
<p>
Lorem ipsum dolor sit amet, arcu nulla. Maecenas congue, felis leo et, pulvinar sollicitudin lacinia libero rhoncus, nam dolor, velit leo ullamcorper massa. Risus netus facilisis tempus mollis, nullam nibh ridiculus potenti donec pulvinar proin. Sit in ultrices sed orci pellentesque, nunc tempor fusce fusce ultrices felis molestie. Lorem nam pellentesque integer urna nam.
</p>
</div>
</div>
</div><!--/first-content-->
</div>
<div class="footer">
<div class="container">
<p class="pull-right">
Some<br />
Info<br />
</p>
</div>
</div><!-- /footer-->
</body>
CSS:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 160px;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.5em;
}
p {
font-family: Verdana,Arial,sans-serif;
font-size: 1.05em;
line-height: 1.8;
text-align: justify;
}
a {
color: #0071BB;
font-weight: bold;
}
.wrapper {
}
.footer {
position: absolute;
padding-top: 25px;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 160px;
background-color: #5FC8FF;
}
.header .glyphicon-wrench {
margin: 0 3px;
}
.header h4 {
margin-right: 3px;
}
.img-responsive {
display: block;
margin: auto;
}
.img-responsive.img-big {
margin-top: 75px;
}
.navbar {
border: none;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
.navbar-default .navbar-nav > li {
width: 150px;
margin-right: 2px;
}
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a:hover {
color: #fff;
font-weight: bold;
background-color: #92C7E1;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #98CEE5;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #98CEE5;
}
a.navbar-brand {
padding: 5px;
}
.row {
}
.alert {
}
.well {
}
.footer p {
font-weight: bold;
color: #FDFDFB;
}
#media (min-width: 992px) {
}
#media (min-width: 768px) {
.first-page-content p {
margin: 75px auto 25px auto;
width: 524px;
}
}
As per Bootstrap 3 documentation:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
Therefore, add the class container to your .wrapper element.
Updated Example
<div class="wrapper container">
<div class="row">
...
</div>
</div>
As for an explanation, the .row class has -15px margins on each side.
.row {
margin-right: -15px;
margin-left: -15px;
}
The .container class effectively displaces that with the following:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
In addition to reading the Bootstrap 3 docs, I'd suggest reading the article "The Subtle Magic Behind Why the Bootstrap 3 Grid Works".
Just copy this code to your CSS, it will disable your horizontal scroll bar.
body {overflow-x: hidden;}
Writing:
html, body {
max-width: 100%;
overflow-x: hidden;
}
in your CSS, is a way to solve this issue
Copy and paste this in CSS code
html, body {
overflow-x: hidden;
}
Setting overflow-x: hidden; works but it will affect scrolling events. Putting rows within the container worked for me.
The issue is basically caused due to the parent .container is missing. The solution is that you can add a .no-container class to the row and add margin: 0 to compensate the negative margin of the row class.
See the below CSS and HTML markup code:
.no-container {
margin-left: 0 !important;
margin-right: 0 !important;
}
.row {
border: 1px solid #999;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--<div class="container"> Container is commented -->
<div class="row no-container">
<div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
<div class="col-md-6 col-xs-6 col-sm-6">column-6</div>
</div>
<!--</div> Container ends here -->
In my case, I had one container-fluid class div tag in another container-fluid class div tag. Removing one of them fixed the issue.
Try this! It works for me.
.col-12{
padding-right: 0!important;
padding-left: 0!important;
}
.row{
margin-right: 0px;
margin-left: 0px;
}
Site: http://tripleo.biz/test/index.html
Please shrink browser to mobile view.
Header:
I have problems with the alignment. They don't seem to align all to the middle of the header. The Android logo seems ot be the only thing aligned. The text and dash image aren't. :/
Navigation:
The Navigation Drop Down is in effect when you mouse-over "ALL" but the links after Link 2 are hidden behind the image. I tried to use z-index to fix this issue but nothing still.
Content Area:
Another problem with Vertical align. For some reason there is more space at the bottom of the content.
Index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
<link rel="stylesheet" href="css/styled.css">
<!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<div class="image_carousel">
<img src="images/menu.png" style="width: 15px; height: 22px;" />
<img src="images/android_icon.png" style="margin-top: 10px; width: 26px; height: 46px;" />
<div class="nav">
ALL
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</header>
<section>
<img src="images/headerimg.jpg" />
<div class="bround">
<img src="images/logo.jpg" class="imgleft" width="75px" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
<div class="bround">
<img src="images/logo.jpg" class="imgleft" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
</section>
<footer>
<p>Copyright Confidential</p>
</footer>
</body>
</html>
CSS
img {
width: 100%;
}
header {
background: #83aa01;
width: 100%;
height: 76px;
/*position: fixed;*/
top: 0;
left: 0;
vertical-align:middle;
}
.image_carousel {
padding: 5px 0 1px 1px;
vertical-align: middle;
text-align: left;
}
.image_carousel img {
border: 0px;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: middle;
bottom:0px;
}
.clearfix {
float: none;
clear: both;
}
div.bround {
background-color: #FFF;
color: #000;
padding: 20px;
margin-top: 10px;
margin-right: 0px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
img.imgleft {
position:relative;
float: left;
margin: 0px 5px 5px 0px;
width: 60px;
}
.bauthor {
color: #D3D3D3;
}
.bauthor a {
color: #83aa01;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
font-size: 20px;
}
div.nav {
border: 0px;
padding: 0px;
margin: 0px;
display: inline-block;
vertical-align: middle;
bottom:0px;
color: #FFF;
}
div.nav ul, div.nav:active ul {
display: none;
position: absolute;
padding: 0px;
background: #444;
color: #FFF;
top: 50px;
width: 20%;
border-radius: 4px 0 4px 4px;
}
div.nav li {
text-align: center;
width: 100%;
padding: 5px 0;
margin: 0px;
border-bottom: 1px dotted #FFF;
z-index:1000;
}
div.nav:hover ul {
display: block;
}
div.nav ul, div.nav a {
color: #FFF;
font-size: 17px;
font-weight: normal;
letter-spacing:2px;
}
ul {
list-style: none;
}
li {
display: inline-block;
float: left;
padding: 10px
}
-
Please Help!
Thanks.
For Header :
set your .image_carousel padding-top value to 15px and remove margin-top from your android icon. which looks like this
.image_carousel {
padding: 15px 0 1px 1px;
vertical-align: middle;
text-align: left;
}
Content Area :
You have Given margin-bottom :20px to your p tag Just remove that .
Regarding the Navigation issue, You need to add z-index for the dropdown menu. Update your css like below it will resolve.
div.nav ul, div.nav a
{
color:#fff;
font-size:17px;
font-weight:normal;
letter-spacing:2px;
z-index:10;
}
Regarding the Content Area padding is coming from the following class
section
{
margin:80px auto 40px;
max-width:980px;
position:relative;
padding:20px;
}
If you remove the margin bottom 40px, it will work fine in mobile. But the problem is you wont get enough space on bigger screens. So you can use media query and apply this class only on mobile versions.
#media all and (max-width: 399px)
{
section
{
margin-bottom:0px;
}
}
Test css copy code
header {
background: none repeat scroll 0 0 #83AA01;
height: 76px;
position: relative;
width: 100%;
z-index: 10;
}
.image_carousel {
text-align: center;
vertical-align: middle;
}
.image_carousel img, .image_carousel > .nav {
border: 1px solid #DDDDDD;
display: inline-block;
height: 74px;
line-height: 74px;
padding: 0 30px;
position: relative;
vertical-align: middle;
}
.image_carousel > .nav:hover {
background-color: #FF0000;
}
.image_carousel > .nav ul li {
line-height: normal;
}
.clearfix {
clear: both;
float: none;
}
div.bround {
background-color: #FFFFFF;
border-radius: 15px;
color: #000000;
margin-right: 0;
padding: 20px;
}
img.imgleft {
float: left;
margin: 0 5px 5px 0;
position: relative;
width: 60px;
}
.bauthor {
color: #D3D3D3;
}
.bauthor a {
color: #83AA01;
}
#menu-icon {
display: inline-block;
font-size: 20px;
height: 40px;
width: 40px;
}
div.nav ul, div.nav:active ul {
background: none repeat scroll 0 0 #444444;
border-radius: 4px 0 4px 4px;
color: #FFFFFF;
display: none;
left: 0;
padding: 0;
position: absolute;
width: 100px;
margin-top:30px;
}
div.nav li {
border-bottom: 1px dotted #FFFFFF;
margin: 0;
padding: 5px 0;
text-align: center;
width: 100%;
z-index: 1000;
}
div.nav li:hover{
background-color:red;
}
div.nav:hover ul {
display: block;
top: 43px;
}
div.nav ul, div.nav a {
color: #FFFFFF;
font-size: 17px;
font-weight: normal;
letter-spacing: 2px;
}
ul {
list-style: none outside none;
}
li {
display: inline-block;
float: left;
padding: 10px;
}
//yes test html
<header>
<div class="image_carousel">
<img src="images/menu.png" />
<img src="images/android_icon.png" />
<div class="nav">
ALL
<ul>
<li>LINK1</li>
<li>LINK2</li>
<li>LINK3</li>
<li>LINK4</li>
<li>LINK5</li>
</ul>
</div>
</div>
<div class="clearfix"></div>
</header>
<section>
<img src="images/headerimg.jpg" />
<div class="bround">
<img src="images/logo.jpg" class="imgleft" width="75px" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
<div class="bround">
<img src="images/logo.jpg" class="imgleft" />
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat quam vitae mauris lacinia, id tincidunt eros lobortis.</b>
<p class="bauthor">Olajide Olaolorun | 1 Comment</p>
</div>
<div class="clearfix"></div>
</section>
<footer>
<p>Copyright Confidential</p>
</footer>