Paul Bogle

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

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

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Paul Bogle</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="main-container">
  
        <!-- NAVIGATION BAR -->
  <ul>
  <li><a class="active" href="https://codepen.io/Jussic/pen/bpqWLy?editors=1000">Nanny of Marooons</a></li>
  <li><a href="https://codepen.io/Jussic/pen/bpqZyg?editors=1000">Paul Bogle</a></li>
  <li><a href="https://codepen.io/Jussic/pen/reyRgK">Sam Sharpe</a></li>
  <li><a href="https://codepen.io/Jussic/pen/XdMGwB">Sir Alexander Bustamante</a></li>
    <li><a href="https://codepen.io/Jussic/pen/zqZbQJ">Marcus Garvey</a></li>
    <li><a href="https://codepen.io/Jussic/pen/EKWMzd">Norman Washington Manley</a></li>
    <li><a href="https://codepen.io/Jussic/pen/aNJMrQ">George William Gordon</a></li>
</ul>
  
    <h1 id = "title" class="text-primary"> <center> Jamaica's National Heroine: <br>Nanny of the Maroons </center> </h1>
  <div> <img src="http://jis.gov.jm/media/paulbogle.jpg"> </img>
  
 <!-- FIRST HALF -->
        <div id = "info" style="position:relative; left:0px; top: -250px; background-color:gold;">
          <h2 style = "text-align: left";> QUICK FACTS </h2>      
      <p style ="font-size:px"; >She is remembered for the inspiration she gave to her people in fighting the English Oppressors in the early 18th Century. <br><br>
      Nanny was a leader of her village, Nanny Town in the parish of Portland, Jamaica. <br><br>
      According to Beverley Carey -
    "The Maroon Story", Nanny died sometime between 1758 - 1762. <br><br>
        Legend has it that she possesses super human power <br><br>
      </p>
  </div>
  
<!-- SECOND  HALF -->
    <div id ="three" class= "secondary-con">
      <div id= "two-rr">
        <h2> MAROON HISTORY </h2>
        <p> Paul Bogle, it is believed, was born free about 1822. He was a Baptist deacon in Stony Gut, a few miles north of Morant Bay, and was eligible to vote at a time when there were only 104 voters in the parish of St. Thomas. He was a firm political supporter of George William Gordon. <br><br>
          Poverty and injustice in the society and lack of public confidence in the central authority, urged Bogle to lead a protest march to the Morant Bay courthouse on October 11, 1865.
        <br><br>
        Bogle was captured and hanged on October 24, 1865; but his forceful demonstration achieved its objectives. It paved the way for the establishment of just practices in the courts and it brought about a change in official attitude, which made possible the social and economic betterment of the people.
<br><br>
In recognition of his efforts, Bogle was conferred with the Order of the National Hero in 1969</p>
      </div>
    </div>
    <div class= "black-line"> </div>

<!-- THIRD  HALF -->
   <div id ="three" class= "secondary-con">
      <div id= "two-rr">
               <h1 style = "font-size: 72px";> <a href ="http://jis.gov.jm/heroes/nanny-of-the-maroons/" style="color: rgb(255,0,0)"><font color="#FF0000	"> LEARN MORE</font></a></h1>
             
        </div>
        
        
        
      </div>
    </div>
    <div class= "black-line"> </div>

</div>
<!-- main div -->
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Jussic/paul-bogle-bpqZyg */
/* NAV BAR */
ul {
    list-style-type: none;
    overflow: hidden;
    background-color: #333  
}
li {    float: right;}
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 8px 8px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #111;
}
.active {
    background-color: #4CAF50;
}
/* NAV BAR */ 

/* QUICK INFO */
#info {
margin-left: 8cm;
margin-bottom: -3cm;
padding: 5px 8px 150px 10px; 
background-color: gold;
  max%;
  max-height:250px;


}


#three {
margin-left: 1cm;
padding: 20px 80px 10px 40px; 
border: 5px solid black;
background-color: gold;
}
#two-rr {
margin-top: 1cm;
padding: 20px 80px 10px 40px; 
background-color: gold;
float: left;
max-width:100%;
}
#two-r {
padding: 20px 80px 10px 40px; 
background-color: gold;
float: right;
max-width:50%;
}

/* ABOUT BAR */
#one-l {  
  padding: 20px 70px 10px 40px; 
  background-color: gold;
  float: left;
  font-size: 14px;
  max-width:50%;
}

#title {
  font-size: 55px;
}

.black-line {
margin-left: 1cm;
border: 5px solid black;
background-color: green;
height:350px;
}
.text-primary {
 color: green;
}
.secondary-con {
  padding: 20px 80px 10px 40px; 
}

.main-container {
  padding: 1px 8px 10px 8px; 
  background-color: black;
  max-width:100%;
}

.top {
  border: 5px solid black;
  float:right;
  background-color: gold;  
  padding: 170px 245px 50px 805px; 
  background-color: gold;
  font-size: 14px;
  max-width:25%
}
img {
   margin-left: 1cm;
  position: relative;
  max-width:18%
}

Comments