Bonaparte

In this example below you will see how to do a Bonaparte with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by cubus33, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright cubus33 ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <head>
  
  <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
  
  </head
<body>
<div id="bigbody" class="container">

  <h1 >
    <span>Napoleon Bonaparte</span> <br>tribute page
   
    </h1>
  
 
  <div id="photobody">
    <img src="https://s-i.huffpost.com/gen/1273002/images/o-NAPOLEON-BONAPARTE-facebook.jpg" class="img-responsive center-block" alt="napoleon on horse">
    <p id="horse">Napoleon on a horse.<br> <i> &nbsp Author unknown.</i></p>

  </div>

  <div calss="container" id="text">

    <h3>Important dates</h3>
    <ul>
      <li><b>Born</b> - 15 August 1769 Ajaccio, Corsica, France</li>
      <li><b>Regin</b> - 18 May 1804 – 6 April 1814</li>
      <li><b>French invasion of Russia</b> - 24 June 1812 – 14 December 1812</li>
      <li><b>Died</b> - 5 May 1821 (aged 51) Longwood, Saint Helena</li>
    </ul>
    <div class="text-center"><br>
    <h2 >Important quotes:</h2><br>
    <q>Impossible is a word to be found only in the dictionary of fools.
      </q><br>
    <q>Never interrupt your enemy when he is making a mistake.</q>
    </div>
    
  </div>
  <p style="margin-left: 60%;font-size:130%; margin-top:25px  padding-bottom:60px">Find out more at <a href="https://en.wikipedia.org/wiki/Napoleon" target="_blank">Wikipedia page link</a></p>
</div>

<!-- Author -->
  <footer style="text-align:center">JB Kvba &copy;</footer>
  
</body>

/*Downloaded from https://www.codeseek.co/cubus33/bonaparte-NwVwNO */
    
h1{
  padding-top:40px;
  text-align:center;
  padding-bottom:20px; 
   
  line-height:130%;
}
q{
  text-height:111%;
  font-size:150%;
  font-family:sans-seriff;
  margiin-bottom:28px;
}

#text{
  
  margin:auto;
  max-width:65%;
}



span{
  font-family:Sofia;
  font-weight:bold;
  font-size:130%;  
}

#bigbody{
  
  background-color:#c2c2bc;
  display:block;
  margin:auto;
  
}

#photobody{
  background-color:yellow;
  margin-left:10%;
  margin-right:10%;

}
img{
  padding-top:3%;
  max-width:90%;
  margin:auto;
  display:block;
}

#horse{
  padding-top:2%;
padding-bottom:1%;
  max-width:90%;
text-align:center;
font-size:1em;
display:block;
}




/*Downloaded from https://www.codeseek.co/cubus33/bonaparte-NwVwNO */
    

Comments