Create tile with title, content and footer - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer

Description

Create tile with title, content and footer

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Fixed border issue</title> 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> 
  <style>

.my_container {<!--from w w w.jav a  2 s .  c  om-->
   border: 1px solid black;
   display: flex;
   flex-direction: column;
   width: 300px;
   margin: 10px auto;
   align-items: stretch;
   color: #333333;
}
.my_header {
   background-color: blue;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 1px;
}
.my_header h1 {
   font-size: 2rem;
}
.my_value {
   align-self: center;
   padding: 50px 0;
   color: hotpink;
   font-size: 2rem;
}
.my_footer {
   padding: 10px;
   font-family: Arial;
   font-style: italic;
   font-size: .8rem;
   background-color: blue;
   margin: 1px;
}


      </style> 
 </head> 
 <body translate="no"> 
  <section class="my_container"> 
   <header class="my_header"> 
    <h1>Title</h1> 
   </header> 
   <div class="my_value">
     850 
   </div> 
   <footer class="my_footer">
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
   </footer> 
  </section>  
 </body>
</html>

Related Tutorials