'Reproduce HTML footer

I'm having a problem with a footer in HTML: I want to do a footer like this:

enter image description here

Does anyone have a suggestion?

htmlcss


Solution 1:[1]

I have created this using CSS Grid one of the most powerful ways to create layouts. It is similar to the image of the footer you wish to have. Hope this will resolve your problem

footer {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  background-color: #1d1d1d;
  color: #fff;
  padding: 10px;
  min-height: 150px;
  justify-items: center;
  align-items: center
}

footer h2, footer p{
padding: 0px;
margin: 0px
}
<footer>
  <div class='columns'>
    <h2>First Column</h2>
    <p>Sub-Heading</p>
  </div>
  <div class='columns'>
    <h2>Second Column</h2>
    <p>Sub-Heading</p>
  </div>
  <div class='columns'>
    <h2>Third Column</h2>
    <p>Sub-Heading</p>
  </div>
</footer>

Solution 2:[2]

First step: Analize the structure. It seems to be 3 or 4 columns with text centered vertically in the middle. You could use a cssgrid or a horizontal flexbox for that.

Second step: Do the same for each column. The general idea is 2 lines of text on top of each other with an image on the left. That can be achieved with an <img> and a <div> sticked to each other with float: left;.

The rest is just changing the style of the elements so it has nice aesthetics.

Solution 3:[3]

Try using bootstrap grid. Divide the row into three columns of equal width and then customise according to your needs

Solution 4:[4]

<div class="footer"></div>
<div class="js">John Smith<br>Creative 
Entrepreneur</div>
<div class="ld"</div>


.footer {width: 300px; height: 100px; background-color: 
black;}
.js {position:relative; top:-50px; color: white; font-size: 6px; 
left: 20px;}
.ld {background-color: white; position: relative; top: -80px; 
height: 40px; width: 1px; z-index: 100; left: 100px;}

It's a start for you...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 MD M Nauman
Solution 2 Flutterish
Solution 3 ExpressHermes
Solution 4 Stackinnerflow

Related Questions