Skip to main content

Landing Page of a NGO Website using HTML and CSS | Non-responsive Web Design | Static Webpage

Problem Statement:- Landing Page of an NGO Website using HTML and CSS | Non-responsive Web Design | Static Webpage.

Image of Final Version of the website:-


Sources of Images and logo used in Website Design:

logo.png

bg2.jpg

HTML and CSS code:-
Note:- Scroll horizontally to see the full line of code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome to NGO</title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Oranienbaum&display=swap" rel="stylesheet">
</head>
<style>
    body{
        color: rgb(100, 5, 119);
        margin: 0px;
        padding: 0px;
        background: url('../img/bg2.jpg') repeat;
        background-size: cover;
        background-position: center fixed;
        /* height: 100vh;
        width: 100vw; */
        font-family: 'Oranienbaum', serif;
        font-weight: bolder;
    }
   
    .left{
        /* border: 2px solid rgb(27, 11, 248); */
        display: inline-block;
        position: absolute;
        top: 0px;
        margin: 10px 10px;
    }
    .left img{
        width: 100px;
    }
    .left div{
        text-align: center;
    }
    .mid{
        display: block;
        width: 55%;
        margin: 10px auto;
        /* border: 2px solid rgb(6, 243, 97); */
    }
    .right{
        display: inline-block;
        position: absolute;
        right: 0px;
        top: 0px;
        width: 243px;
        margin: 10px 10px;
        padding: 10px 10px;
        /* border: 2px solid rgb(241, 7, 202); */
    }
    .right .btn{
        display: inline-block;
        margin-left: 5px;
        margin-right: 5px;
    }
    .btn{
        border: 2px solid black;
        border-radius: 5px;
        background-color: rgb(0, 0, 0);
        color: rgb(253, 253, 253);
        padding: 2px 8px;
        font-size: 17px;
        font-weight: bolder;
        font-family: 'Oranienbaum', serif;
    }
    .btn:hover{
        background-color: rgb(122, 121, 121);
        cursor: pointer;
    }
    .navbar{
        display: inline-block;
    }
    .navbar li{
        display: inline-block;
    }
    .navbar li a{
        color: rgb(100, 5, 19);
        text-decoration: none;
        padding: 0px 55px;
        font-size: 20px;
        font-weight: bold;
    }
    .navbar li a:hover , .navbar li a.active{
        text-decoration: underline;
        color: yellowgreen;
    }
    .container{
        border: 2px solid rgb(5, 116, 33);
        width: 40%;
        background-color: yellowgreen;
        border-radius: 5px;
        margin: 70px 50px;
        padding: 20px 20px;
    }
    .form-group{
        margin: 25px 130px;
    }
    .form-group input{
        width: 100%;
        text-align: center;
        font-size: 25px;
        font-family: 'Oranienbaum', serif;
        border-radius: 4px;
        background-color: white;
    }
    .container button{
        display: inline-block;
        width: 30%;
        padding: 7px;
        font-size: 22px;
        margin: 5px 59px;
    }
    .container h1{
        text-align: center;
    }
</style>
<body>
    
    <header class="header">
        <div class="left" >
            <img src="../img/logo.png" alt="">
            <div class="tag">
                Non Govt Org
            </div>
        </div>
        <div class="mid" >
            <ul class="navbar">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Events</a></li>
                <li><a href="#">Contribute</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <div class="right" >
            <div >
                <button class="btn">Call Us Now</button>
                <button class="btn">Whatsapp Now</button>
            </div>
        </div>
        
    </header>
    <div class="container">
        <h1>Contribute to NGO</h1>
        <form action="noaction.php">
            <div class="form-group">
                <input type="text" name="name" id="" placeholder="Enter your Name">
            </div>
            <div class="form-group">
                <input type="number" name="age" id="" placeholder="Enter your age">
            </div>
            <div class="form-group">
                <input type="email" name="email" id="" placeholder="Enter your email">
            </div>
            <div class="form-group">
                <input type="tel" name="tele" id="" placeholder="Enter your mobile number">
            </div>
            <div class="form-group">
                <input type="text" name="locality" id="" placeholder="Enter your locality">
            </div>
            <button class="btn" type="reset">Reset </button>
            <button class="btn" type="submit">Submit</button>
        </form>
    </div>
</body>
</html>
Labels:

Comments

Post a Comment

Popular posts from this blog

SET THEORY USING LIST IN PYTHON

Problem Statement :- In second-year computer engineering class, group A student's play cricket, group B students play badminton and group C students play football.  Write a Python program using functions to compute the following:-     a) List of students who play both cricket and badminton     b) List of students who play either cricket or badminton or both     c) Number of students who play neither cricket nor badminton     d) Number of students who play cricket and football but not badminton. (Note- While realizing the group, duplicate entries should be avoided, Do not use SET built-in functions) Note :- Scroll horizontally to see the full line of code. def   Addelem ( A ,  a ):      for   i   in   range  ( a ):          elem = input ( "Enter the name of student:" )          if ( elem   ...
Post a Comment
Read more

Uninstalling AnyDesk from Ubuntu: A Step-by-Step Guide

If you're an Ubuntu user looking to remove AnyDesk from your system and reclaim valuable space, this straightforward guide will walk you through the uninstallation process with easy-to-follow steps. Step 1: Launch the Terminal To initiate the uninstallation process, open the Terminal on your Ubuntu system by simultaneously pressing "Ctrl + Alt + T." Step 2: Verify AnyDesk Installation Confirm that AnyDesk is installed on your system by typing the following command in the Terminal and pressing "Enter": dpkg -l | grep anydesk The relevant information will be displayed if AnyDesk is installed. Step 3: Uninstall AnyDesk Remove AnyDesk from your Ubuntu system using the following command in the Terminal: sudo apt-get remove anydesk Enter your user password when prompted (characters won't be visible as you type) and press "Enter" to authorize the uninstallation. Step 4: Confirm Unins...
Post a Comment
Read more

Implementations of Search Algorithms using Python | Linear Sequential Search | Sentinel Sequential Search | Binary Search | Fibonacci Search

  Problem Statement:-  a) Write a Python program to store roll numbers of student in array who attended training program in random order. Write function for searching whether particular student attended training program or not, using Linear search and Sentinel search. b) Write a Python program to store roll numbers of students array who attended training program in sorted order. Write function for searching whether particular student attended training program or not, using Binary search and Fibonacci search. Note:-  Scroll horizontally to see the full line of code. def linear_search ( a , target ):     for i in range ( len ( a )):         if ( a [ i ]== target ):             print ( "Roll no." , target , "is present at index" , i )             break     else :         print ( "Roll no." , target , "not found in list" ) def binary_search ( a , targ...
Post a Comment
Read more

C++ Program for storing Appointments Schedule for day using Linked list | Display Free Slots | Book Appointment | Cancel Appointment | Sort Appointments

  Problem Statement: Write C++ program for storing appointment schedule for day. Appointments are booked randomly using linked list. Set start and end time and min and max duration for visit slot. Write Functions for-     A) Display free slots     B) Book appointments     C) Sort list based on time     D) Cancel appointment ( check validity, time bounds, availability )     E) Sort list base on time using pointer manipulation. Note: Scroll Horizontally to see the full line of code. #include < iostream > using namespace std ; class slot { public :     int startTime , endTime , min , max ;     bool status ;     slot * next ;     slot ( int start , int end , int min , int max )     {         startTime = start ;         endTime = end ;         this -> min = min ;         this ->...
Post a Comment
Read more

Complete Guide: Uninstalling Steam from Ubuntu - Step-by-Step

Steam is widely favored among gamers for its seamless game distribution and vibrant community engagement. However, excessive game installations can burden your PC, leading to sluggish performance and potential system crashes. If you're facing such issues, a thorough uninstallation of Steam from your Ubuntu system might be the solution. Simply removing Steam using standard methods may leave residual files and directories on your device, potentially causing lingering issues. This comprehensive guide will walk you through the process of completely removing Steam from your Ubuntu system. Steps to Fully Uninstall Steam from Ubuntu: Before proceeding, ensure to back up any important data as uninstalling Steam will also remove all associated games, DLCs, and saved data. Follow these steps to uninstall Steam from Ubuntu: Step 1: Open the terminal by right-clicking or pressing “ctrl...
Post a Comment
Read more