NGO Website Template Development using HTML, CSS, and JavaScript

Faraz

By Faraz -

Learn how to create a compelling NGO website using HTML, CSS, and JavaScript. Empower your nonprofit cause with a user-friendly and visually appealing online presence.

Join us on Telegram
Crafting a Powerful NGO Website HTML, CSS, and JavaScript Essentials.jpg
Read AlsoCreate a Shooting Star Rating System with HTML, CSS & JavaScript.jpgCreate a Shooting Star Rating System with HTML, CSS & JavaScript

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Preview
  6. Conclusion

In today's tech-driven world, establishing a robust online presence is crucial for NGOs to effectively communicate their mission and connect with their audience. In this blog series, we will delve into the intricacies of NGO website template development using the trifecta of web development languages: HTML, CSS, and JavaScript. Whether you're a nonprofit organization looking to revamp your digital footprint or an aspiring web developer eager to contribute to meaningful causes, join us on this journey as we explore the fundamentals and best practices to create engaging and functional NGO websites. Let's harness the power of code to amplify the impact of noble endeavors!

Join My Telegram Channel to Download the Project Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our NGO website.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let me break it down for you:

1. Document Type Declaration (DOCTYPE):

  • <!DOCTYPE html>: Declares the document type and version of HTML being used.

2. HTML Element:

  • <html lang="en">: The root element of the HTML document, with the language attribute set to English.

3. Head Section:

  • Contains meta-information about the document, links to external stylesheets, scripts, and more.
  • Meta tags for character set, viewport settings, and compatibility.
  • Links to Font Awesome, Bootstrap, and AOS (Animate On Scroll) libraries via Content Delivery Networks (CDNs).
  • Links to custom CSS (styles.css) and a favicon.
  • The title of the webpage is set to "NGO Website."

4. Body Section:

  • Navigation bar (nav element) using Bootstrap classes.
  • Carousel (div with id carouselExampleCaptions) for displaying images with captions.
  • Section with a welcome message (section with id welcome).
  • Section describing what the NGO does (section with id t-cards) with cards for different activities.
  • Section about the NGO's vision and mission (div with id vision).
  • Section displaying achievements in the form of cards (section with id achieve).
  • Upcoming events section (div with id event).
  • Team and testimonials section (section with id team).
  • Section about helping hands (section with id helping_hand).
  • Section encouraging people to become volunteers (section with id help).
  • Footer section (section with id footer) containing logo, page links, and some information.

This is the basic structure of our NGO website using HTML, and now we can move on to styling it using CSS.

Read AlsoCreating an Autoplay Carousel with HTML, CSS, and JavaScript A Comprehensive Guide.jpgCreating an Autoplay Carousel with HTML, CSS, and JavaScript: A Comprehensive Guide

Step 2 (CSS Code):

Once the basic HTML structure of the NGO website is in place, the next step is to add styling to the NGO website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our NGO website.

Let me break down some key parts for you:

1. Font Imports: It imports two fonts from Google Fonts: 'DM Sans' and 'Fredoka One'.

2. Universal Styles:

  • It sets margin, padding, and box-sizing properties to 0 for all elements.
  • It sets the default font-family to 'DM Sans'.

3. Background Styles: It sets a light gray background color for the HTML and body elements.

4. Heading Styles: It sets the font-family for h1 to h6 to 'Fredoka One', a cursive font.

5. Scrollbar Styles:

  • It styles the scrollbar for webkit browsers (Chrome, Safari).
  • It defines the width, track, thumb, and hover styles.

6. Navbar Styles:

  • It styles a navigation bar with various hover and animation effects.
  • It defines styles for the navigation items, their hover states, and the active state.
  • It uses keyframe animations for some navigation items.

7. Carousel Styles: It styles a carousel with specific animations for sliding elements.

8. Welcome Section Styles: It styles a welcome section with background images and specific font styles.

9. Panel Cards Styles:

  • It styles panel cards with hover effects, background color changes, and transitions.
  • It uses keyframe animations for some panel card elements.

10. Our Vision Section Styles: It styles a vision section with images and hover effects.

11. Counter Section Styles: It styles a counter section with background images and animations.

12. Event Section Styles: It styles an event section with card elements, hover effects, and transitions.

13. Team or Testimonials Section Styles: It styles a team or testimonials section with background images, hover effects, and a review carousel.

14. Helper Section Styles: It styles a helper section with background images and animations.

15. Become Volunteer Section Styles: It styles a section for becoming a volunteer with background images and hover effects.

16. Footer Styles: It styles the footer section with background images and various link styles.

17. Media Queries: It includes some responsive styles for smaller screens.

This will give our NGO website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

@import url('https://fonts.googleapis.com/css2?family=DM+Sans&family=Fredoka+One&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif;
}

html,body{
    background-color: #F7F7F7;
}

h1,h2,h3,h4,h5,h6{
    font-family: 'Fredoka One', cursive;
}


/******************** scrollbar ********************/

::-webkit-scrollbar {
    width: 5px;
}
  
  /* Track */
::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8); 
    border-radius: 10px;
}
   
  /* Handle */
::-webkit-scrollbar-thumb {
    background: black; 
    border-radius: 5px;
}
  
  /* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    width: 5px;
}

/******************** navbar ********************/

#nav_bar{
    background-color: white;
    box-shadow: 0px 2px 10px 4px rgba(0,0,0,0.1);
}

#navbarNav li{  
    margin: 0 2px;
    width: 110px;
    transition: all .5s ease;
}


#navbarNav li:hover{
    border-radius: 10px;
    background-color: red;
}

#navbarNav li a{
    color: black;   
    transition: all .5s ease;
}

#navbarNav li a:hover{
    color: white;
    font-weight: bold;
}

#navbarNav .active{
    background-color: red;
    color: white;
    font-weight: bold;
    border-radius: 10px;
}

#nav_img{
    position: relative;
    animation-name: nav_img;
    animation-duration: 2s;
    animation-timing-function: ease;   
}

#nav_a1{
    position: relative;
    animation-name: nav_a1;
    animation-duration: 2s;
    animation-timing-function: ease;   
}

#nav_a2{
    position: relative;
    animation-name: nav_a2;
    animation-duration: 2.5s;
    animation-timing-function: ease;   
}

#nav_a3{
    position: relative;
    animation-name: nav_a3;
    animation-duration: 3s;
    animation-timing-function: ease;   
}

#nav_a4{
    position: relative;
    animation-name: nav_a4;
    animation-duration: 3.5s;
    animation-timing-function: ease;   
}

#nav_a5{
    position: relative;
    animation-name: nav_a5;
    animation-duration: 4s;
    animation-timing-function: ease;   
}

@keyframes nav_img {
    0%{
        left: -100px;
        transform: rotate(180deg);
    }

    100%{
        left: 0;
        transform: rotate(0deg);
    }
}

@keyframes nav_a1 {
    0%{
        top: -150px;
    }

    100%{
        top: 0;
    }
}

@keyframes nav_a2 {
    0%{
        top: -150px;
    }

    100%{
        top: 0;
    }
}

@keyframes nav_a3 {
    0%{
        top: -150px;
    }

    100%{
        top: 0;
    }
}

@keyframes nav_a4 {
    0%{
        top: -150px;
    }

    100%{
        top: 0;
    }
}

@keyframes nav_a5 {
    0%{
        top: -150px;
    }

    100%{
        top: 0;
    }
}


/******************** carousel ********************/

.top_carousel .carousel-item{
    min-height: 30vh;
    position: relative;
}
.top_carousel .carousel-item .row > img{
    position: absolute;
    z-index: -2;
}

.top_carousel .carousel-item .row h5{
    color: red;
}

.anime-2{
    position: relative;
    animation-name: anime-2;
    animation-duration: 1.3s;
    animation-timing-function: ease-out;
    overflow: hidden;
}

@keyframes anime-2 {
    0%{
        left: -500px;
    }
    100%{
        left: 0;
    }
}


.anime-3{
    position: relative;
    animation-name: anime-3;
    animation-duration: 1.3s;
    animation-timing-function: ease-out;
    overflow: hidden;
}

@keyframes anime-3 {
    0%{
        right: -500px;
    }

    100%{
        right: 0;
    }
}

/******************** welcome ********************/


#welcome{
    margin-bottom: 40px;    
}

#welcome .offset-md-2{
    background: url(assets/quote-1.png) left top no-repeat, url(assets/quote-2.png) right top no-repeat;
}


#welcome span{
    font-family: 'Fredoka One', cursive;
}

#welcome p{
    font-size: 1.1rem;
    line-height: 30px;
}

/******************** what we do ********************/

#t-cards {
    padding-top: 50px;
    padding-bottom: 30px;
    background: url(assets/background-2.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*** Panel cards ***/


.panel.panel-card {
    position: relative;
    height: 241px;
    border: none;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.2);
    margin-bottom: 15px;
    transition: all .5s ease;
    background-color: #F7F7F7;
}

.panel.panel-card:hover{
    background-color: white;
}

.panel.panel-card .panel-heading {
    position: relative;
    z-index: 2;
    height: 120px;
    border-bottom-color: #fff;
    overflow: hidden;
    transition: height 600ms ease-in-out;
    -webkit-transition: height 600ms ease-in-out;
}

.panel.panel-card .panel-heading img {
    position: absolute;
    top: 50%;
    left: 50%;
    filter: grayscale(100%);
    z-index: 1;
    width: 120%;
    transition: all .8s ease;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
}

.panel.panel-card .panel-figure {
    position: absolute;
    top: auto;
    left: 50%;
    z-index: 3;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
    box-shadow: 0 0 0 3px #fff;
    -webkit-box-shadow: 0 0 0 3px #fff;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
    transition: opacity 400ms ease-in-out;
    -webkit-transition: opacity 400ms ease-in-out;
}

.panel.panel-card .panel-figure i{
    font-size: 1.8rem;
    color: white;
}

.panel.panel-card .panel-body {
    padding-top: 40px;
    padding-bottom: 20px;
    transition: padding 400ms ease-in-out;
    -webkit-transition: padding 400ms ease-in-out;
} 

.panel.panel-card .panel-thumbnails {
    padding: 0 15px 20px;
}

.panel-thumbnails .thumbnail {
    width: 60px;
    max-width: 100%;
    margin: 0 auto;
    background-color: #fff;
} 

.panel h4{
    color: black;
    transition: all .8s ease;
}

.panel a{
    text-decoration: none;
    color: blue;
    font-weight: bold;
    transition: all .5s ease;
}

.panel a:hover{
    color: red;
}

.panel.panel-card:hover .panel-heading {
    height: 55px;
    transition: height 400ms ease-in-out;
    -webkit-transition: height 400ms ease-in-out;
}

.panel.panel-card:hover .panel-figure {
    opacity: 0;
    transition: opacity 400ms ease-in-out;
    -webkit-transition: opacity 400ms ease-in-out;
}

.panel.panel-card:hover .panel-body {
    padding-top: 20px;
    transition: padding 400ms ease-in-out;
    -webkit-transition: padding 400ms ease-in-out;
}

.panel.panel-card:hover h4{
    color: orangered;
}



/******************** Our Vision ********************/

#vision h1{
    color: black;
    margin: 20px;
}

#vision section{
    width: max-content;
    margin: auto;
    padding: 20px;
    border-radius: 50%;
    background-color: red;
    margin-bottom: 20px;
    transition: all 1s ease;
}

#vision img{
    transition: all 1s ease;
}

#vision div{
    cursor: pointer;
}

#vision div:hover img{
    transform: scale(1.10);
}

#vision div:hover section{
    box-shadow: 5px 5px 10px 3px rgba(0, 0, 0, 0.4);
}

/******************** Counter ********************/

#achieve{
    background: url(assets/background-3.png);
    background-position: bottom top;
    background-attachment: fixed;
    background-size: cover;
    
}

#achieve > div{
    background-color: rgba(0, 0, 0, 0.7);
    padding-bottom: 20px;
}

#achieve h1{
    font-size: 3rem;
    color: white;
}

#achieve img{
    animation-name: anime-4;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes anime-4 {
    0%{
        transform: scale(1.10);
    }
    25%{
        transform: scale(0.90);
    }
    75%{
        transform: scale(1.10);
    }
    100%{
        transform: scale(0.90);
    }
}

.count_div{
    margin: auto;
}

.count_div p{
    font-size: 2rem;
    color: red;
    font-weight: bold;
}

.count_div span{
    font-size: 2rem;
    color: red;
    font-weight: bold;
}

.count_div h5{
    color: white;
}


/******************** event ********************/

#event .card{
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    background-color: rgb(242,240,236);
    position: relative;
    overflow: hidden;
    margin: 8px 15px;
    transition: all .8s ease;
}

#event .card:hover{
    background-color: white;
    box-shadow: 1px 16px 8px 8px rgba(0,0,0,0.1);
}

#event .card img{
    border-radius: 10px 10px 0px 0px;
    transition: all .8s ease;
    margin-bottom: 10px;
    filter: grayscale(100%);
}

#event .card:hover img{
    filter: none;
    transform: scale(1.05);
}

#event .card h5{
    transition: all .8s ease;
}

#event .card:hover h5{
    color: orangered;
}

#event .card span{
    position: absolute;
    top: 0;
    left: 0%;
    background-color: orangered;
    color: white;
    padding: 15px;
    font-weight: bold;
    border-radius: 10px 0px 10px 0px;
    z-index: 10;
}

#event .card a{
    text-decoration: none;
    color: blue;
    transition: all .5s ease;
}

#event .card a:hover{
    color: orangered;
    font-weight: bold;
}


/******************** Team or testimonials  ********************/

#team{
    background: url();
    background-attachment: fixed;
    background-size: cover;
    margin-bottom: 20px;
    background-color: white;
    border-radius: 10px 100px / 120px;
    border: 1px solid rgba(128, 128, 128, 0.26);
}

#team section img{
    width: 60px;
    border-radius: 50%;
    margin: 0 10px;
}

#team section div{
    margin: auto;
    margin-bottom: 15px;
}

#team section div span{
    font-size: 1rem;
}

#review_carousel{
    margin: 15px;
    background: rgba( 255, 255, 255, 0.4 );
    box-shadow: 0 5px 22px 0 rgba( 31, 38, 135, 0.2);
    backdrop-filter: blur( 11px );
    -webkit-backdrop-filter: blur( 11px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
}

#review_carousel h5{
    margin-bottom: 20px;
}

/* helper */

#helping_hand{
    background: url(assets/helping-hands-shape.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}

#helping_hand .row{
    background-color: rgba(0, 0, 0, 0.2);
}

#hh_img1{
    animation-name: anime-5;
    animation-duration: 1.2s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes anime-5{
    0%{
        transform: translateX(-20px);
    }
    100%{
        transform: translateX(20px);

    }   
}


#hh_img2 img{
    margin: 20px 10px;
    max-width: 350px;
    border-radius: 15px;
    transition: all .8s ease-in;
}

#helping_hand:hover #hh_img2 img{
    transform: scale(1.20);
}

/******************** become Volunteer ********************/

#help{
    background: url(assets/sketch-4.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}

#volunteer{
    background: url(assets/sketch-5.png);
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
}

#volunteer a{
    text-decoration: none;
    color: orangered;
    font-size: 1.1rem;
    padding: 10px;
    border-radius: 10px;
    transition: all .5s ease;
    background-color: white;
    font-weight: bold;
    border: 1px solid rgba(128, 128, 128, 0.4);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.24);
}

#volunteer a:hover{
    color: white;
    font-weight: normal;
    background-color: orangered;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.44);
}


/********************* footer ********************/

#footer{
    background: url(assets/footer.jpeg);
    background-size: contain;
    background-position: bottom;
    background-attachment: fixed;
}

#footer .row{
    background-color: rgba(0, 0, 0, 0.8);
}

#footer .row h4{
    margin: 20px 10px;
    color: white;
}


#footer .link a{
    text-decoration: none;
    color: white;
    display: block;
    padding: 5px 8px;
    margin: 5px;
    transition: all .5s ease;
}

#footer .link a:hover{
    color: red;
    transform: scale(1.10);
}

#footer .f_contact a{
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    display: block;
    margin: 15px;
}

@media screen and (max-width: 400px) {
  #navbarNav li {
    margin: auto;
  }

  .top_carousel .carousel-item img {
    margin: 40px 0;
  }

  .top_carousel .carousel-item h1 {
    font-size: 1rem;
  }

  .top_carousel .carousel-item h5 {
    font-size: 0.7rem;
  }

  #welcome .offset-md-2 {
    background: none;
  }

  #achieve h1 {
    font-size: 1.5rem;
  }

  .count_div p {
    font-size: 1rem;
  }

  #volunteer {
    background: none;
  }

  #help {
    background: none;
  }

  #hh_img2 img{
    margin: 0;
    margin-bottom: 20px;
  }

  #helping_hand:hover #hh_img2 img{
    transform: scale(0.90);
  }

  #footer{
    background-size: cover;
    background-repeat: no-repeat;
  }

}

Step 3 (JavaScript Code):

Finally, we need to create a function in JavaScript. This JavaScript code is creating four separate counters that increment at intervals of 10 milliseconds. Each counter is associated with a different HTML element identified by its ID (number1, number2, number3, and number4). Here's a breakdown of each counter:

1. Counter 1 (num1 and projectDone function):

  • Starts at 3100 and increments every 10 milliseconds.
  • Displays the count in the HTML element with ID "number1".
  • Stops when the count reaches 3500.

2. Counter 2 (num2 and projectDone2 function):

  • Starts at 1500 and increments every 10 milliseconds.
  • Displays the count in the HTML element with ID "number2".
  • Stops when the count reaches 1850.

3. Counter 3 (num3 and projectDone3 function):

  • Starts at 1800 and increments every 10 milliseconds.
  • Displays the count in the HTML element with ID "number3".
  • Stops when the count reaches 2100.

4. Counter 4 (num4 and projectDone4 function):

  • Starts at 12 and increments every 10 milliseconds.
  • Displays the count in the HTML element with ID "number4".
  • Stops when the count reaches 350.

5. The setInterval function is used to repeatedly call the corresponding projectDoneX function at the specified interval. The clearInterval function is used to stop each counter when its stop condition is met.

Create a JavaScript file with the name script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.

// counter

var num1 = setInterval(projectDone, 10)
var count1 = 3100;

function projectDone(){
    count1++;
    document.querySelector("#number1").innerHTML= count1;
    // stop condition
    if(count1 == 3500){
        clearInterval(num1);
    }
};

var num2 = setInterval(projectDone2, 10)
var count2 = 1500;

function projectDone2(){
    count2++;
    document.querySelector("#number2").innerHTML= count2;
    // stop condition
    if(count2 == 1850){
        clearInterval(num2);
    }
};

var num3 = setInterval(projectDone3, 10)
var count3 = 1800;

function projectDone3(){
    count3++;
    document.querySelector("#number3").innerHTML= count3;
    // stop condition
    if(count3 == 2100){
        clearInterval(num3);
    }
};


var num4 = setInterval(projectDone4, 10)
var count4 = 12;

function projectDone4(){
    count4++;
    document.querySelector("#number4").innerHTML= count4;
    // stop condition
    if(count4 == 350){
        clearInterval(num4);
    }
};

Final Output:

Crafting a Powerful NGO Website HTML, CSS, and JavaScript Essentials.gif
Read AlsoCreate Sticky Navbar with Tailwind CSS.jpgCreate Sticky Navbar with Tailwind CSS

Conclusion:

Congratulations on completing the journey of NGO website development! By now, you've equipped your nonprofit organization with a powerful online platform, ready to positively impact the world.

In NGO website development, innovation and inspiration go hand in hand. Stay inspired by exploring new design trends, incorporating feedback, and adapting to the needs of your audience. Your website is a reflection of your dedication—let it inspire others to join your cause.

As you launch your NGO website, know that your efforts contribute to a brighter, more connected future. Thank you for choosing to make a difference, one website at a time. Here's to the success of your nonprofit organization and the positive impact it will undoubtedly have on the world. Best of luck!

Full NGO Website Template Source Code: Download Here

Code by: Vinay Singh

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: ngo website, html, css, javascript, website template, web development, source code, landing page, responsive ngo website template, user-friendly html templates
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post