Answer in Web Development for Princess #236033

Question #236033

The website should incorporate a minimum of 6 webpages that contain several types of content.
These are the minimum requirements:
 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.


Expert's answer

Homepage.html:

<html>
<title>HomePage</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
.nav-flex-row {
   display: flex;
   flex-direction: row;
   justify-content: center;
   position: absolute;
   z-index: 100;
   left: 0;
   width: 100%;
   padding: 0;
}

.nav-flex-row li {
   text-decoration: none;
   list-style-type: none;
   padding: 20px 15px;
   background-color:lightblue;
}

.nav-flex-row li a {
   font-family: 'Big Shoulders Text', cursive;
   color: #000;
   font-size: 1.5em;
   text-transform: uppercase;
   font-weight: 300;
}
.nav-flex-row li a:hover{
   background: #E7E7E7;
}
h1{
padding-top:50px;
}
</style>
<body>
<nav>
       <ul class="nav-flex-row">
           <li class="nav-item">
               <a href="AboutUs.html">About Us</a>
           </li>
           <li class="nav-item">
               <a href="OurWork.html">OurWork</a>
           </li>
           <li class="nav-item">
               <a href="OurTeam.html">Our Team</a>
           </li>
           <li class="nav-item">
               <a href="Contact.html">Contact</a>
           </li>
       </ul>
       </nav>
       <center>
       <div class="container">
       <div class="row">
      
       <h1>Welcome</h1>
       <p> We are providing the best service</p>
       </div>
       </div>
       </center>
       <div id="carouselExampleControls"
       class="carousel slide" data-ride="carousel">
       <div class="carousel-inner">
           <div class="carousel-item active">
               <img src="images\img1.png"
                   class="d-block w-50" alt="food">
           </div>
              
</body>
</html>

About Us.html:

<html>
<title>About Us</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
.nav-flex-row {
   display: flex;
   flex-direction: row;
   justify-content: center;
   position: absolute;
   z-index: 100;
   left: 0;
   width: 100%;
   padding: 0;
}

.nav-flex-row li {
   text-decoration: none;
   list-style-type: none;
   padding: 20px 15px;
   background-color:lightblue;
}

.nav-flex-row li a {
   font-family: 'Big Shoulders Text', cursive;
   color: #000;
   font-size: 1.5em;
   text-transform: uppercase;
   font-weight: 300;
}
.nav-flex-row li a:hover{
   background: #E7E7E7;
}
h1{
padding-top:50px;
}
</style>
<body>
<nav>
       <ul class="nav-flex-row">
           <li class="nav-item">
               <a href="AboutUs.html">About Us</a>
           </li>
           <li class="nav-item">
               <a href="OurWork.html">OurWork</a>
           </li>
           <li class="nav-item">
               <a href="OurTeam.html">Our Team</a>
           </li>
           <li class="nav-item">
               <a href="Contact.html">Contact</a>
           </li>
       </ul>
       </nav>
       <center>
       <div class="container">
       <div class="row">
       <h1>Our History</h1>
       <p>American Express Global Business Travel American travel company.</p>
       </div>
       </div>
       <div class="container">
       <div class="row">
       <h1>Our Mission</h1>
       <p>Our mission is simply to help people save time, save money.</p>
       </div>
       </div>
       <div class="container">
       <div class="row">
       <h1>Our Vision</h1>
       <p>At our company, we too have evolved to take advantage of new technology.</p>
       </div>
       </div>
       </center>
       </body>
       </html>

Our Team.html:

<html>
<title>Our Team</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
.nav-flex-row {
   display: flex;
   flex-direction: row;
   justify-content: center;
   position: absolute;
   z-index: 100;
   left: 0;
   width: 100%;
   padding: 0;
   padding-bottom:50px;
}

.nav-flex-row li {
   text-decoration: none;
   list-style-type: none;
   padding: 20px 15px;
   background-color:lightblue;
  
}

.nav-flex-row li a {
   font-family: 'Big Shoulders Text', cursive;
   color: #000;
   font-size: 1.5em;
   text-transform: uppercase;
   font-weight: 300;
}
.nav-flex-row li a:hover{
   background: #E7E7E7;
}
h1{
padding-top:50px;
}
img{
padding-top:50px;
}
</style>
<body>
<nav>
       <ul class="nav-flex-row">
           <li class="nav-item">
               <a href="AboutUs.html">About Us</a>
           </li>
           <li class="nav-item">
               <a href="OurWork.html">OurWork</a>
           </li>
           <li class="nav-item">
               <a href="OurTeam.html">Our Team</a>
           </li>
           <li class="nav-item">
               <a href="Contact.html">Contact</a>
           </li>
       </ul>
       </nav>
       <p> We are very happy to providing the answers......</p>
       <div class="container">
       <div class="row">
       <img src="images\b2.jpg" style="width:500px;height:500px;">
       <img src="images\EmployeeResources_callout.png" style="width:500px;height:500px;">
       </div>
       </div>
       </body>
       </html>

Contact.html:

<html>
<title>Contact Us</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
.nav-flex-row {
   display: flex;
   flex-direction: row;
   justify-content: center;
   position: absolute;
   z-index: 100;
   left: 0;
   width: 100%;
   padding: 0;
}

.nav-flex-row li {
   text-decoration: none;
   list-style-type: none;
   padding: 20px 15px;
   background-color:lightblue;
}

.nav-flex-row li a {
   font-family: 'Big Shoulders Text', cursive;
   color: #000;
   font-size: 1.5em;
   text-transform: uppercase;
   font-weight: 300;
}
.nav-flex-row li a:hover{
   background: #E7E7E7;
}
.container{
padding-bottom:-50px;
}
</style>
<body>
<nav>
       <ul class="nav-flex-row">
           <li class="nav-item">
               <a href="AboutUs.html">About Us</a>
           </li>
           <li class="nav-item">
               <a href="OurWork.html">OurWork</a>
           </li>
           <li class="nav-item">
               <a href="OurTeam.html">Our Team</a>
           </li>
           <li class="nav-item">
               <a href="Contact.html">Contact</a>
           </li>
       </ul>
       </nav>
       <body>
      
       <div class="container">
<div class="row">
<div class="offset-md-3 col-md-6">
<form>
<label>First Name</label>
<input type='text' name='fname' class='form-control'>
<label>Last Name</label>
<input type='text' name='mname' class='form-control'>
<label>Address</label>
<input type='text' name='lname' class='form-control'>
<label>Gender</label>
<input type='text' name='gname' class='form-control'>
<label>Zipcode/Pincode</label>
<input id="zip" name="zip" type="number"class='form-control'>
<label>Email</label>
<input type="email" id="email" name="email"class='form-control'>
<label>Cell Phone number</label>
<input type="number" name="cell" class="form-control">
<center>
<input type='submit' value='Register' class='btn-success'>
<input type='Reset' value='clear' class='btn-danger'>
</center>
</form>
</div>
</div>
</div>

</body>
</html>