Body element with two background colors - HTML CSS CSS Property

HTML CSS examples for CSS Property:background-color

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. background-color

Description

Body element with two background colors

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>  Niels</title> 
  <style>

html,<!-- w ww  .j ava 2s  . co  m-->
body {
   margin: 0;
   padding: 0;
   height: 100%;
   background-color:white;
}
.red {
   background-color: red;
}
.background{
   background-color: red
}
.outer-wrapper {
   padding-top: 200px
}
#wrapper{
   width: 650px ;
   min-height: auto;
   background-color: blue;
   margin: 0 auto;
   border-radius: 10px;
}
.btn{
   position: relative;
   left:6px;
   margin: 10px;
}
#text{
   overflow: hidden;
   padding: 10px;
   margin:30px;
   padding-top: 20px;
}
#icon{
   font-size:35px;
   margin:5px;
   padding-top:20px;
}
#twitter{
   background-color: pink;
}
#author{
   position: relative;
   left :400px;
   font-weight: bold;
   font-size: 20px;
}


      </style> 
 </head> 
 <body translate="no" class="red"> 
  <div class="outer-wrapper"> 
   <div id="wrapper"> 
    <p id="text"> <i id="icon" class="fas fa-quote-left"> test test test</i> </p> 
    <span id="author">test test</span> 
    <button id="twitter" class="btn"> <i class="fab fa-twitter"></i> </button> 
    <button class="btn btn-success">New Quote</button> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials