WHAP Project

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

Thumbnail
This awesome code was written by SamrajM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright SamrajM ©
  • HTML
  • CSS
  • JavaScript
    <div class="section">
  <div class="slider">
    <div class="container slidercontent">
      <h1 class="hero">INDIA</h1>
      <h2 class="hero">India Isn’t Controlled By Her Leaders.</h2>
  </div>
</div>

<div class="section bg">
  <div class="container">
    <h1>Visuals</h1>
    <div class="col three bg nopad pointer">
      <div class="imgholder"><img src="https://s-media-cache-ak0.pinimg.com/736x/87/70/f5/8770f523f2080ebe6f33efb33ba06c4b.jpg" alt="British Flag" style="width:366px;height:567px;"></div>
    </div>
    
    <div class="col three bg nopad pointer">
      <div class="imgholder"><img src="https://lh3.googleusercontent.com/-qZhHfbAngjE/WOWOxJGC5rI/AAAAAAAAezs/APrjHUl-h-EAKKZe2V-y5uyX4rDOyj5NQCL0B/h799/political%2Bcartoon.png" alt="Political Cartoon" style="width:366px;height:567px;"></div>
      <h1 class="feature">Political Cartoon</h1>
      <p>This cartoon depicts the British controlling the viceroys of India while also gaining a foothold in the subcontinent. Underneath the viceroys, the commoners are shown producing goods for exporting.</p>
    </div>
    <div class="col three bg nopad pointer">
      <div class="imgholder"><img src="https://s-media-cache-ak0.pinimg.com/736x/c9/f3/d2/c9f3d242a5c8b00e6899390e4898a154.jpg" alt="Indian Flag" style="width:366px;height:567px;"></div>
    </div>
    <div class="group"></div>
  </div>
</div>
<div class="section">
  <div class="container">
    <h1>Research Topics</h1>
    <div class="col three">
      <h1 class="feature side">1757 Battle of Plassey</h1>
      <p class="side">The Battle of Plassey was a victory of the British East India Company over the Nawab of Bengal and his French allies on the 23rd of June, 1757. The victory gave Britain a stronger foothold in Bengal and helped them conquer India. The battle took place at Palashi next to the Bhagirathi River. Before the battle, the Nawab of Bengal, Siraj-ud-daulah had been betrayed by Mir Jafar, who was bribed by the British. Along with this, the battle was preceded by the attack on British-controlled Calcutta by the Nawab and the Black Hole Massacre. After this, the British recaptured Calcutta and then fought the Nawab and the French East India Company for control of Bengal. The battle was a large contributing factor to the control of the Indian subcontinent by the colonial powers.
</p>
    </div>
    <div class="col three">
      <h1 class="feature side">1857 Sepoy Rebellion</h1>
      <p class="side">The Sepoy Rebellion or Indian Rebellion of 1857, was a major, but unsuccessful, uprising in mainly Northern India from 1857 to 1858. Nearly a century after the Battle of Plassey and the beginning of the control of India by colonial powers, many sepoys committed mutiny in the garrison tower of Meerut. The initial action erupted into many mutinies and revolts which led to a large threat to the British power in the region. The British gave amnesty to those who had not killed, but did not declare the hostilities formally to have ended until July of 1859. The whole revolution was based on the resentment of the British social reforms, taxes, skepticism of improvements of British control, and unfair treatment between various classes. The huge problem with the revolt was that although many Indians rose up against the British, many also chose to fight for them. The whole event was filled with cruel acts, horrifying violence, and much more caused by a century of near hatred.
</p>
    </div>
    <div class="col three">
      <h1 class="feature side">Viceroys</h1>
      <p class="side">Viceroys are representatives of a sovereign from another nation. The Viceroys in this case represented the King and queen of England. From the mid 18th century onwards, the Viceroys had some councilmen and formed a bureaucracy to stabilize the situation of India. The problem was that the viceroy could overrule the councilmen anytime. For example Viceroy Lytton (ruled 1876 to 1880) felt that it was necessary to overrule his councilmen to not collect taxes from the  British cotton manufacturers which could have helped Indian revenue.
        <br> <br>
Like the King, the Viceroys had limitations when it came to power. Other colonial officials in India could overthrow the Viceroy since the colonial officials were also appointed by the King of England.
</p>
    </div>
    <div class="group margin"></div>
    <div class="col three">
      <h1 class="feature side">Making Indians Happy</h1>
      <p class="side">From 1857, Britain agreed to respect the culture and religion of India but the the religious leaders were to be kept under British control. The British improved infrastructure to make it more suitable for more industries. Irrigation also improved and the the education system changed due to the introduction of English as a mandatory and official language. This process only made Indians more vulnerable to famine and disease. This also didn’t stop Britain exploiting and stealing resources from India. Child marriages and child labor was abolished as well as other social reforms. 
</p>
    </div>
    <div class="col three">
      <h1 class="feature side">Economic Policies</h1>
      <p class="side">The British influenced the economy of India by expanding trade with other nations. The Indian industry exported Indian goods like jute, tea, oilseeds, wheat, cotton, and others. They imported new European goods into India. The trade with other European countries and the Americas increased; however, the imports to India declined over time. Cotton was one of the main product exported from India. The British imported exported cotton into Britain in large amounts in order to supply the rest of the world with cheap fabrics. The weavers usually moved to the regions established mainly for cotton export. (Bombay, Madras, and Calcutta). In addition, the British taxed the Indians with various dues which drained large amounts of money from India. <br><br>
	The British also monopolized goods from India in order to be ahead of the other trade nations. They would sell cash crops at lower prices to outside nations, earning a lot of revenue; however, they would make the farmers and laborers pay higher prices for the same goods. 
</p>
    </div>
    <div class="col three">
      <h1 class="feature side">1885 National Congress</h1>
      <p class="side">The Indian National Congress was formed by people in regions who were dissatisfied by the exploitive nature of the British. The initial objectives of the congress was to promote personal friendship among workers from all parts of India, to eradicate prejudice from the minds of all Indians towards other people, and to promote unity among everyone living in India. It was also an assembly for individuals who wanted reform. Congress was not initially interested in campaigning for independence or self-rule but for greater political autonomy within empire. Congress became more vocal and active in demanding substantial political reform, and eventually demanded for full independence from Britain.
<br><br>
Congress had a British committee which acted as a lobby group in Britain, founded in 1889. In 1890, the committee began to print a free monthly journal summarising Indian news for the British press and politicians.
</p>
    </div>
    <div class="group margin"></div>
  </div>
</div>
<div class="section bg">
  <div class="container">
    <h1>Multiple-Choice Quiz</h1>
    <h3>1) Which situation best relates to the religious tolerances of Britain to India?</h3>
    <p>a) Mughal Emperor Akbar holding religious seminars with Hindu scholars.</p>
    <p>b) The Safavid Empire giving higher taxes to the Sunni Muslims.</p>
    <p>c) Delhi Sultanate taking control of India but flourished syncretism.</p>
    <p>d) The Nazi Party killing millions of Jews in the Holocaust.</p>
<h3>2) All of the following about the Indian economy during the British rule is true except:</h3>
    <p>a) Britain monopolized goods from India to have higher revenue than other countries.</p>
    <p>b) Exported Indian goods included jute, tea, oilseeds, wheat, cotton, and others.</p>
    <p>c) Trade with the Americas and European countries improved Indian imports.</p>
    <p>d) Cotton was the main Indian cash crop that Britain used for fine fabrics.</p>
<h3>3) The initial main objective of the Indian National Congress of 1885 was to:
</h3>
    <p>a) Campaign for Indian independence from Britain.</p>
    <p>b) Reclaim lost land and goods from the British and to expand trade to western nations.</p>
    <p>c) Partition Pakistan and Bangladesh from India and eradicate western influences.</p>
    <p>d) Promote friendship in India, to eradicate prejudice towards other people, and to promote unity.</p>
<h3>4) The Battle of Sepoy was intentionally meant to:</h3>
    <p>a) The Battle of Sepoy was caused by the resentment of the British social reforms, taxes, skepticism of improvements of British control, and unfair treatment between various classes.</p>
    <p>b) The battle allowed Pakistan and Bangladesh to separate from the Indian sub-continent and escape British rule.</p>
    <p>c) The battle lead to many reforms including India to gain it’s independence.</p>
    <p>d) The battle led to the downfall of the British and created power vacuum in the area. This lead to the military dictator, Bahadur Shah Zafar, to take over all of Hindustan.</p>    
  <h3>5) What did the Battle of Plassey accomplish?</h3>
    <p>a) It gave Indians more rights under the control of the British.</p>
    <p>b) It lead to Indian forces driving out colonial powers.</p>
    <p>c) It gave the colonial powers a foothold in taking control of India.</p>
    <p>d) It allowed more trade to flow through India due to the British Blockade formed by the Revolt of Calicut in 1737.</p>

    
  </div>
</div>
<div class="section">
  <div class="container">
    <div class="col two">
      <h1 class="icon">N</h1>
      <h1 class="service">Our Notes</h1>
      <p>
      <a href="https://bit.ly/2o7jzbc">https://bit.ly/2o7jzbc</a></p>
    </div>
    <div class="col two">
      <h1 class="icon">WC</h1>
      <h1 class="service">Works Cited</h1>
      <p>
      <a href="https://bit.ly/2o7fX9h">https://bit.ly/2o7fX9h</a></p>
    </div>
    <div class="group"></div>
  </div>
</div>
<div class="section">
  <div class="footer">
    <div class="container white">
      <div class="col four left">
        <h1>Quiz Answers</h1>
        <p>1) c (choice a can be argued for)</p>
        <p>2) c</p>
        <p>3) d</p>
        <p>4) a</p>
        <p>5) c</p>
      </div>
      <div class="col four left">
        <h1></h1>
        <p></p>
      </div>
      <div class="col four left">
        <h1></h1>
        <p>View the full code by clicking "Change View" and then "Editor View".</p>
      </div>
      <div class="col four left">
        <h1></h1>
        <p>Samraj Moorjani</p>
        <p>Arun Sarma</p>
        <p>Viswa Reddy</p>
        <p>Period 2B WHAP</p>
      </div>
      <div class="group"></div>
    </div>
  </div>
</div>

/*Downloaded from https://www.codeseek.co/SamrajM/whap-project-VpJrbr */
    

html,
body {
  margin: 0;
  padding: 0;
}

.section {
  width: 100%;
}

.container {
  position: relative;
  width: 1170px;
  margin: 0 auto;
  color: #444;
  font-size: 14px;
  font-weight: 300;
  font-family: Roboto, 'Open Sans', Arial, sans-serif;
  overflow: hidden;
}

.section .container {
  padding: 30px 0 50px 0;
}

.section.bg {
  background: #f7f7f7;
}
/*
  Header
*/

.hold {
  height: 80px;
}

.header {
  line-height: 80px;
  width: 100%;
  transition: line-height 0.2s linear, box-shadow 0.2s linear;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  background: rgba(245, 245, 245, 0.97);
}

.header.small {
  line-height: 50px;
  box-shadow: 0px 1px 3px 0px rgba(50, 50, 50, 0.8);
}

.header.small > .container > #logo {
  height: 40px;
}

#logo {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: red;
  float: left;
  height: 40px;
  width: 170px;
  margin-left: 5px;
}

ul.nav {
  float: right;
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.nav li {
  float: left;
  position: relative;
}

ul.nav li a {
  transition: color 0.2s linear;
  font-size: 18px;
}

ul.nav li:hover a {
  color: red;
}

ul.nav li a {
  padding: 21px;
  color: initial;
  text-decoration: initial;
}
/*
  Slider
*/

.section .slider,
.section .footer {
  background: #333;
}

.slidercontent {
  text-align: center;
}

.hero {
  font-family: 'Roboto Slab', sans-serif;
  color: white;
  font-weight: normal;
  letter-spacing: 1px;
}

h1.hero {
  font-size: 54px;
}

h2.hero {
  font-size: 30px;
  margin-bottom: 60px;
}

h1.hero:after {
  content: "";
  width: 300px;
  position: relative;
  border-bottom: 1px solid #aaa;
  text-align: center;
  margin: auto;
  margin-top: 15px;
}

.call {
  color: white;
  display: block;
  margin-bottom: 20px;
}

.call span {
  display: inline;
  border: 1px solid white;
  padding: 8px 13px;
  font-size: 20px;
  transition: background 0.15s linear;
}

.call span:hover {
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}
/* 
  Columns 
*/

.col {
  float: left;
  padding: 0;
  margin: 0;
  position: relative;
}

.col.four {
  width: 23%;
  margin: 0 1%;
}

.col.three {
  width: 31.3%;
  margin: 0 1%;
}

.col.two {
  width: 40%;
  margin: 0 2.5%;
  padding: 0 2.5%;
}

.col.extrapad {
  padding-top: 20px;
  padding-bottom: 20px;
}

.col .service,
.col .feature {
  font-size: 21px;
  font-weight: 300;
  font-family: 'Roboto Slab', sans-serif;
}

.col .service:after {
  content: "";
  width: 50px;
  position: relative;
  border-bottom: 1px solid #eee;
  display: block;
  text-align: center;
  margin: auto;
  margin-top: 15px;
}

.col .feature {
  font-size: 19px;
}

.col h1.side,
.col p.side,
.col span.side:first-of-type {
  margin-left: 50px;
  text-align: left;
}

.col .icon {
  border-radius: 50%;
  height: 85px;
  width: 85px;
  line-height: 85px;
  text-align: center;
  margin: 0 auto;
  transition: background 0.25s linear, color 0.25s linear;
}

.col .icon.side {
  position: absolute;
  padding: 0;
  margin: 0;
  top: -15px;
  height: 50px;
  width: 50px;
}

.col:hover > .icon {
  background: #F44336;
  color: white;
}

.col:hover > .icon.side {
  background: initial;
  color: initial;
}

.responsivegroup {
  display: none;
}
/*
  Column specifics
*/

.col p,
.col h1 {
  padding: 0 1%;
  text-align: center;
}

.group.margin {
  margin-bottom: 20px;
}

.col .imgholder {
  height: 567px;
  width: 100%;
  background: #333;
  transition: background 0.3s linear;
}

.col.bg {
  background: #FFF;
}

.col.pointer {
  cursor: pointer;
}

.col.bg:hover .imgholder {
  background: #555;
}

.col span.feature {
  font-size: 20px;
}
/*
  Text
*/

.container > h1:not(.hero) {
  margin-bottom: 30px;
  text-align: center;
}

.container > h1:after {
  content: "";
  width: 30px;
  position: relative;
  border-bottom: 1px solid #aaa;
  display: block;
  text-align: center;
  margin: auto;
  margin-top: 15px;
}

h2 {
  font-family: 'Roboto Slab', sans-serif;
  text-align: center;
  font-weight: 400;
  font-size: 18px;
}

.left,
.left > h1,
.left > p {
  text-align: left;
}

.reset {
  text-align: left !important;
}

.reset:after {
  display: none !important;
}
/* 
  Slider with Content
*/

.white h1,
.white h2,
.white p,
.white div,
.white a {
  color: #fff;
}
/*
  Responsive
*/

.group:after {
  content: "";
  display: table;
  clear: both;
}

@media all and (max-width: 768px) {
  .container {
    width: 95%;
  }
  .col.four {
    width: 48%;
    margin: 1%;
  }
  .col.three {
    display: block;
    width: 95%;
    padding: 0;
    margin: 0 auto;
    float: none;
  }
  .header {
    height: auto;
    background: #eee;
  }
  #logo {
    position: initial;
    float: none;
    display: block;
    transform: none;
    margin: 10px auto 0 auto;
  }
  ul.nav {
    float: none;
    display: block;
    text-align: center;
    margin: 0 auto;
  }
  ul.nav li {
    float: initial;
    display: inline-block;
  }
  .responsivegroup {
    display: block;
  }
  .responsivegroup:after {
    content: "";
    display: table;
    clear: both;
  }
}

@media all and (min-width: 768px) {
  .container {
    width: 750px;
  }
}

@media all and (min-width: 992px) {
  .container {
    width: 970px;
  }
}

@media all and (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

@media all and (max-width:450px) {
  .col, .col.four, .col.three, .col.two {
    display: block;
    width: 95%;
    padding: 0;
    margin: 0 auto;
    float: none;
  }
  .col.extrapad {
    padding: 1%;
    margin-bottom: 10px;
  }
  .group {
    display: none;
  }
}


/*Downloaded from https://www.codeseek.co/SamrajM/whap-project-VpJrbr */
    window.onscroll = function() {
  var el = document.getElementsByClassName('header')[0];
  var className = 'small';
  if (el.classList) {
    if (window.scrollY > 10)
      el.classList.add(className);
    else
      el.classList.remove(className);
  }
};

Comments