Answer to Question #233427 in HTML/JavaScript Web Application for Her

Question

 A Homepage which welcomes users to the site and displays relevant information about the NGO, NPO or organisation.
An About Us page which discusses the organisation, its history, mission, and vision.
An Our Work page which outlines the work carried out by the organisation.
A Photo Gallery which showcases the organisation, its staff, its work and projects. For now, this may be a basic gallery which you will improve on in subsequent tasks.
A Get Involved page which contains a form that allows users to submit their details as a sponsor, volunteer or client. This form should collect information such as full name, email address, contact number and the enquiry that a user has. The form should also include submit and reset button. For this task, you need to build the form, but it does not need to be functional.
A Contact Us page which includes contacts details of the organisation (including physical address, telephone numbers, social media links, an embedded Google Map, and any other relevant details).

Answer 1

index.html

<!--<img src="https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/48.jpg" alt="" />-->
<header class="site-header">
  <span>Web Development</span>
  <h1>Art or Science?</h1>
  <a id="scrollToMain" href="#main" class="cta">Let's find out</a>
</header>
<nav class="main-nav">
  <a class="chosen" href="">Home</a>
  <a href="">About</a>
  <a href="">Gallery</a>
  <a href="">Contact</a>
</nav>
<section id="main" class="main-content">
    <section class="page-section group">
      <section class="webdesign">
        <h2>What is web design?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore nostrum et, iusto unde ratione! Voluptatum ducimus repellendus non asperiores qui voluptate possimus excepturi dolor, quis quibusdam nostrum ad, nulla nisi, a ipsum. Tempore optio perferendis distinctio iusto totam aperiam voluptatem esse ipsam eum maxime. Sunt nesciunt cupiditate nobis amet voluptatibus.</p>
        <a href="" class="readmore">Learn more.</a>
      </section>
      <section class="webdevelopment">
        <h2>What is web development?</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere accusamus sapiente, laborum, incidunt quam blanditiis alias mollitia repellat quibusdam, temporibus qui? Numquam quo recusandae asperiores velit, autem expedita delectus labore eveniet, hic itaque molestias commodi suscipit voluptatibus debitis architecto dignissimos atque. Placeat mollitia doloribus corporis consectetur commodi soluta, quo inventore!</p>
        <a href="" class="readmore">Learn more.</a>
      </section>
      <div class="group"></div>
      <h2>Interesting stuff.</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque laudantium maxime, atque esse, animi et, pariatur incidunt quaerat id quisquam iure odit ab impedit ullam. Voluptates nesciunt, tempora ex sapiente culpa, id quasi libero, accusantium, qui sit sed expedita? Iusto dolore provident illum optio expedita quisquam eveniet eaque consectetur animi.</p>
      <h3>Interesting facts about us.</h3>
      <ul>
        <li>Lorem ipsum dolor sit.</li>
        <li>Porro, eaque, quibusdam. Impedit!</li>
        <li>Modi non, itaque nostrum?</li>
        <li>Cumque nam quasi, unde?</li>
        <li>Ducimus iure ab suscipit.</li>
        <li>Sit quia ullam voluptatum.</li>
      </ul>
      <a href="" class="readmore">Learn more.</a>
</section>

style.css

* { box-sizing: border-box; }
.group:before,
.group:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}


.group:after {
    clear: both;
}


/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.group {
    *zoom: 1;
}




body{
  padding-top: 650px;
  font-family: "Roboto Condensed",sans-serif;
}
.site-header{
  /*background-image: linear-gradient(to top,transparent, rgba(0,0,0,.7) 1%), url("https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/99.jpg");*/
  background: #ccc url("https://s3.amazonaws.com/StartupStockPhotos/20140808_StartupStockPhotos/99.jpg");
  background-blend-mode: luminosity;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 650px;
  border-bottom: 1px solid #ccc;
  text-align:center;
  padding-top: 120px;
  font-family: "Oswald",sans-serif;
}


.site-header h1{
  font-size: 90px;
  color: ;
  text-transform: uppercase;
}


.site-header span{
  color: firebrick;
  display: inline-block;
  font-size: 34px;
  padding-bottom: 15px;
  border-bottom: 1px solid;
}


.site-header .cta{
  font-size: 1.5rem;
  background-color: dodgerblue;
  color: #fff;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.3);
  border-radius: 6px;
  font-weight: bold;
  padding: 10px 20px;
  text-decoration: none;
  margin-top: 25px;
}


.main-content,
.main-nav{
  position: relative;
}


.main-nav{
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  text-align:center;
  background-color: #fff;
  height: 60px;
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
  z-index: 100;
  font-family: "Oswald",sans-serif;
  margin-bottom: -60px;
}


.nav-fixed,
.site-header{
  position: fixed;
  top:0;
  left:0;
}


.main-nav a{
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 8px;
  border-bottom: 1px solid transparent;
  padding: 10px 0;
  color: #333;
  text-decoration: none;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 10px;
}
.main-nav a.chosen{
  border-color: indianred;
}


.main-content{
  padding-top: 80px;
  padding-bottom: 60px;
  background-color: #f7f7f7;
}


.main-content h2,
.main-content h3{
  font-family: "Oswald",sans-serif;
}


.main-content h2{
  font-size: 34px;
  margin-bottom: 50px;
}


.main-content h3{
  color: rgba(0,0,0,.76);
}


.main-content p, .main-content li{
  color: rgba(0,0,0,.6);
  line-height: 1.4;
}


.page-section{
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}


.page-section .readmore{
  color: steelblue;
  text-decoration: none;
  display: inline-block;
  margin-top: 15px;
  font-size: 16px;
  padding-bottom: 5px;
  border-bottom: 1px solid steelblue;
  text-transform: uppercase;
}




.webdesign,
.webdevelopment{
  width: 49%;
  height: 500px;
  background: linear-gradient(to bottom, #f7f7f7, #f6f6f6, transparent 60%), #f0f0f0;
  box-shadow: 0 3px 0 #ddd;
  padding: 5px 25px;
}


.webdesign{
  float: left;
}
.webdevelopment{
  float: right;
}

script.js

var mainnav = $('.main-nav');
var fixed = "nav-fixed";
var header = $('.site-header').outerHeight();


$(window).scroll(function(){
  if($(this).scrollTop() >= header){
    mainnav.addClass(fixed);
  }
  else{
    mainnav.removeClass(fixed);
  }
});


$("#scrollToMain").click(function(e){
  e.preventDefault();
  var target = $(this).attr('href');
  $('html,body').animate({
    scrollTop : $(target).offset().top
  },400);
});