Member Avatar for PF2G

hi,

i want to do a footer like the one on this website:
http://www.templatemonster.com/demo/36943.html

but i never worked with css...
can someone help me?

thank you,
PF2G

  • 2 Contributors
  • 2 Replies
  • 87 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by PF2G

Dani AI

Generated

— below is a simple, Bootstrap-friendly pattern that produces a full-width black footer with a slightly slanted top band. It keeps the footer content inside a .container so it lines up with the rest of your page. This is a clean, CSS-only approach; if you also implement the tooltip idea from , keep tooltips in the document flow (or on body) and give them a higher z-index so they sit above the slanted band.

<footer class="site-footer">
  <div class="container">
    <div class="footer-inner">
      <div>© Your Company</div>
      <div>social icons / links</div>
    </div>
  </div>
</footer>

.site-footer {
  position: relative;
  background: #0b0b0b;
  color: #fff;
  padding: 40px 0 20px;
  overflow: visible;
}

.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -30px;          /* height of slant */
  height: 30px;
  background: #111;    /* slightly lighter band */
  transform: skewY(-3deg);
  transform-origin: 0 100%;
  pointer-events: none; /* don't block links */
  z-index: 0;
}

.footer-inner {
  position: relative;
  z-index: 1;          /* keep content above the pseudo-element */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container { max-width: 1140px; margin: 0 auto; padding: 0 15px; }

Troubleshooting notes: change top and height or the skewY angle to match the exact shape you want. If the footer must stick to the bottom of the viewport, use a flexbox page layout (min-height:100vh; display:flex; flex-direction:column; main{flex:1}) rather than absolute positioning. For details on pseudo-elements and transforms see MDN: ::before and transform.

Member Avatar for sufyan2011

If you are talking about that Facebook and other links on footer and mouse over tooltip. I can guide you regarding this. You can have one Div with absolute position with label in it. Write a javascript function to show DIV in mouse position (you have to get x,y cordinates of mouse). Call this function on "OnMouseover" (or resembling) of each link with tooltip text. This is the way I did it in my application.

Sorry, I don't want to give exact code, you can better search on internet and hopefully find more.

Member Avatar for PF2G

If you are talking about that Facebook and other links on footer and mouse over tooltip. I can guide you regarding this. You can have one Div with absolute position with label in it. Write a javascript function to show DIV in mouse position (you have to get x,y cordinates of mouse). Call this function on "OnMouseover" (or resembling) of each link with tooltip text. This is the way I did it in my application.

Sorry, I don't want to give exact code, you can better search on internet and hopefully find more.

Sorry i wasn't clear. i want the black background on the footer. Just the code so it has the same shape.

Thank you

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.