Education Technology
Published: 2022-10-27 04:32:46

**Problem Statement**
In the COVID-19 crisis, all over world was affected by mental heath issues, job losses, financial issues and the growth of the economy has slowed down due to shutdown of different productions channels. 

So, the major problem is students were affected badly due to school, colleges closures at the onset of lockdown induced by COVID-19. The pandemic posed several challenges in schools and colleges which included an expected rise in dropouts, learning losses, and increase in digital divide. And peoples have no work and they are unemployed. So this Ed-Tech Web Application platform for learners with an opportunity to learn the in-demand technology skills and work, courses for free so they will read and learn them. It solves the problem of unemployment because after learning the skills they open their own work and do something for them and others.

**Solution**
  Using Microsoft Azure Services, Azure Web Apps, Static Web Apps.

So the solution is to develop a system which can perform the major role in the Educational Sector by providing the in-demand technology skills, courses, general knowledge, daily skills, other different types of resources and its freely accessible for everyone. 
By using Azure service I develop a portal where easily equip your teachers with tools, resources and professional development so that they can focus on their students. Web Apps gives a virtual classrooms which can accessible at any time from anywhere. Web Apps create a static website which support different educational sectors by providing access to relevant information and tool served to each group.




so its solves the problem and gives the new ideas of learning to think innovative, it's a responsive websites your Windows 10 PC can do that job.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m417l9hwhuis8km5nerj.png)


Lets Look into Technical details and implementation of Solution

You need following software/Azure Account, please find the details below

Azure Account :- To get the Azure account by clicking on the following link

https://azure.microsoft.com/en-us/free/

There is free credit for students and 200 usd credit if you want to get started to Azure

https://azure.microsoft.com/en-us/free/students/

Visual Studio 2019 Community

https://visualstudio.microsoft.com/downloads/

Community edition is free for student and open source contributor for non commercial use.

Visual Studio Code(Optional)

https://code.visualstudio.com/download

Microsoft Azure services for Visual Studio:- Please install Azure service, if you have already installed and missing azure service please use Modify option in visual studio, please check the required part of installation

Ed-Tech has project as below

1. Azure Services

**Azure Services**
If you not aware what is azure service is all about then visit link below from Microsoft Azure and Docs

https://azure.microsoft.com/en-in/services/functions/

https://docs.microsoft.com/en-us/azure/azure-functions/functions-overview

it stats as below

"Develop more efficiently with Resource Group, a container that holds related resources for an Azure solution. The resource group can include all the resources for the solution, or only those resources that you want to manage as a group.
And App Service Static Web Apps is a streamlined, highly efficient solution to take your static app from source code to global high availability. Pre-rendered content is distributed globally with no web servers required that can solve problems.
Build and debug locally without additional setup, deploy and operate at scale in the azure cloud and integrate services using triggers and  bindings."

Start visual studio code, New Project then code it after that setup a Azure cloud to integrate the code. 

Go to the Create resources then choose Web app to create a website and fill the details like your subscription, create new resource group name, runtime stack, storage and when you filled all details just click Review+create button.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hl58k5fzyz1dotwoijgs.png)

Now the Resource group is created and you can see overview by clicking on the resource group name.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kus8ll915lvuknn59m2v.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3brf10h9pp65g3h3u81n.png)

Check the basic information

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ept2caigx5azzqlcj4l.png)

Create a Static Web App then click on the create resources and deploy it by adding your code through the GitHub account.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj4d1xsfmv99q445y029.png)

Go to the Overview by clicking on the resource group name, you can see the deployments in your essentials after that in your App Service Essentials. Here you can see URL of your created of your azure website, now connect your code through GitHub account by following such steps:-

Open Project Settings>GitHub Connections.
Sign into Azure Boards for the project you want to connect to GitHub repositories. Choose (1) Project Settings> (2) GitHub connections. If it's the first time making a connection from the project, choose Connect your GitHub account to use your GitHub account credentials.

Here I attach my (.html) files. 

Default function 1 will be created replace it with below code:

index.html
```
<!------------------------------- Website for Educational purpose by Meenakshi saini ---------------------->
<!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>Ed-Tech</title>

<!------------------ IMPORTING THE ICONSCOUNT CDN ---------------->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<!-------------------- IMPORTING THE GOOGLE FONT ------------------->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-------------------- IMPORTING SWIPER JS LIBRARY ------------------------->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>

<!---------------------------- LINKING CSS FILES -------------------------->
    <link rel="stylesheet" type="text/css" href="./CSS/index.css">

<!---------------------------- WEBSITE FAVICON -------------------------->
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">

</head>

<!---------------------------- BODY SECTION -------------------------->
<body>

<!----------------------- NAVIGATION BAR --------------------------------->
    <nav>
        <div class="container nav__container">
            <a href="index.html"><h3> Ed-Tech </h3></a>
                <ul class="nav__menu">
                    <li> <a href="index.html">Home</a></li>
                    <li> <a href="about.html">About Us</a></li>
                    <li> <a href="event.html">Course</a></li>
                    <li> <a href="team.html">Learning Path</a></li>
                    <li> <a href="contact.html">Contact Us</a></li>
                    <li> <a href="login.html">Sign Out</a></li>
                </ul>
                <button id="open-menu-btn"><i class="uil uil-bars"></i> </i></button>
                <button id="close-menu-btn"><i class="uil uil-multiply"></i> </button>
        </div>
    </nav>
<!------------------------ END OF NAVIGATION BAR --------------------------------->
    
<!--------------------------- HEADER PART ---------------------------------->
    <header id="particles-js">
        <div class="card">
            <div class="header__container">
                <div class="header__left">
                    <h1>Education</h1>
                    <p> has an important role to play in making INDIA self-reliant.</p>
                    <h3>- Narendra Modi</h3>
                </div> 
                
                <div class="header__right">
                    <div class="box-container">
                        <div class="box-item">
                            <div class="flip-box">
                                <div class="flip-box-front text-center" style="background-image: url('img/index-front.jpg');">
                                    <div class="inner color-white">
                                        <h3 class="flip-box-header"></h3>
                                        <img src="https://s25.postimg.cc/65hsttv9b/cta-arrow.png" alt="" class="flip-box-img">
                                    </div>
                                </div>
    
                                <div class="flip-box-back text-center" style="background-image: url('img/index-back.jpg');">
                                    <div class="inner color-white">
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
<!--------------------------- END OF HEADER PART ---------------------------------->
    
<!---------------------------- ABOUT SECTION -------------------------------------->
    <section class="aboutall">
        <div class="container aboutall__container">
            <div class="aboutall__left">
                <h1> Who we are? </h1>
                <p> Ed-Tech is the official tech website. This website help make the process of learning entertaining and attractive to the student, especially in today's age.
                    This website support different educational sectors by providing access to relevant information and tools to each group served.
                     Instructors can find valuable educational resources to develop their teaching, and by using this portal, they enhance student-centered learning. </p>
                <a href="event.html" class="btn btn-primary">Learn more</a>
            </div>
                
            <div class="aboutall__right">
                <article class="about">
                    <span class="about__icon"><i class="uil uil-icons"></i></span>
                    <h5> Hard Skills</h5>
                    <p>Science, Art, Commerce...</p>
                </article>
                            
                <article class="about">
                    <span class="about__icon"> <i class="uil uil-icons"></i> </span>
                    <h5> Soft Skills </h5>
                    <p>Communication, Personal Development...</p>
                </article>
                    
                <article class="about">
                    <span class="about__icon"> <i class="uil uil-notebooks"></i> </span>
                    <h5> General Knowledge </h5>
                    <p>Encylopedia, Current Affairs...</p>
                </article>
                    
                <article class="about">
                    <span class="about__icon"> <i class="uil uil-box"></i> </span> 
                    <h5> Daily Life Skills </h5>
                    <p>Fitter, Plumber, Electronics...</p>
                </article>
                                        
                <article class="about">
                    <span class="about__icon"><i class="uil uil-music"></i></span>
                    <h5> Curriculum Activites </h5>
                    <p>Sports, Music, Dance...</p>
                </article>
                                            
                <article class="about">
                    <span class="about__icon"> <i class="uil uil-newspaper"></i> </span>
                    <h5> Resource Library </h5>
                    <p>PDFs, Books, Articles, Blogs, Podcast...</p>
                </article>
            </div>
        </div>
    </section>
<!---------------------------- END OF ABOUT SECTION ---------------------------------->
    
<!--------------------------- OTHER SECTION ----------------------------->
    <section class="events">
        <h2>Equip your school with tools for success</h2>
        <div class="container events__container">
                
            <article class="event">
                <div class="event__image">
                    <img src="img/c1.JPG">
                </div>
                <div class="event__info">
                    <h3> Education Leaders </h3>
                    <p>

                    </p>
                    <h4> Bring flexible innovation to your school at scale </h4>
                    <p> Spend less time on administrative tasks and more time making an impact on student education. Equip your teachers with tools, resources and professional development so that they can focus on their students.</p>
                    <a href="event.html" class="btn btn-primary">Learn More</a>
                </div>
            </article>
    
            <article class="event">
                <div class="event__image">
                    <img src="img/c2.JPG">
                </div>
                    
                <div class="event__info">
                    <h3> IT Admins </h3>
                    <p>

                    </p>
                    <h4> Easily deploy educational tools across your institution</h4>
                    <p> Get diverse tools in the hands of students and educators with minimal effort. Maintain all of your institution's tech from one place. Monitor info-sec, control access and quickly make changes across your network using the centralised Admin console.</p>
                    <a href="event.html" class="btn btn-primary">Learn More</a>
                </div>
            </article>
    
            <article class="event">
                <div class="event__image">
                    <img src="img/c3.JPG">
                </div>
                    
                <div class="event__info">
                    <h3> Educators </h3>
                    <p>

                    </p>
                    <h4> Save time and enrich student learning with easy-to-use tools </h4>
                    <p> Streamline class management while providing every student with individualised learning experiences. Create, customise and collaborate on lessons to help learners grow their skills. Use virtual classrooms to promote learning any time, anywhere. Keep meetings, documents and reports all within reach. </p>
                    <a href="event.html" class="btn btn-primary">Learn More</a>
                </div>
            </article>
        </div>
    </section>
<!-------------------------- END OF SECTION ---------------------------------->
    
<!-------------------------------- FAQ SECTION ------------------------------->
    <section class="faqs">
        <h2> Have questions? We've got answers. </h2>
        <div class="container faqs__container">
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4>How can I be a part of this team?</h4>
                        <p>Become an Ed-Tech alumnus or else contact to any of the members of the club.</p>
                    </div>
            </article>
    
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4>What is the fee to join the Team?</h4>
                        <p>There is no membership fee to join the team.</p>
                    </div>
            </article>
    
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4>What is the cost of participating in course?</h4>
                        <p>All the courses are free of cost.</p>
                    </div>
            </article>
    
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4>Anyone can be contribute thier knowledge?</h4>
                        <p> Yes, contribution to knowledge means creating new knowledge based on the previous available knowledge by doing extensive and innovative reasearch. You can mail your valuable information which is mention below:
                            Your area of study / topic, methodology, problems identified and solved among others are your contribution to knowledge.
                             Writing a Statement about research contribution should indicate the new findings with contrast to the existing works.
                             The significance of the research work done should be indicated.
                        </p>
                    </div>
            </article>
    
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4> How to suggest anything?</h4>
                        <p>If you have anything to suggest, then you can mail us at support@educationtechnology.in.</p>
               </div>
            </article>
        
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4> Any doubt still unanswered?</h4>
                        <p>For any more clarification, contact to the Support team.</p>
                    </div>
            </article>   
        </div>
    </section>    
<!------------------------------ END OF FAQ --------------------------------------->
    
<!--------------------------------------- FOOTER SECTION ------------------------------------->
    <footer>
        <div class="container footer__container">
            <div class="footer__1">
                <a href="index.html" class="footer__logo"><h4> Ed-Tech</h4></a>
                <p> Ed-Tech (Educational technology) is the combined use of computer hardware, software, and educational theory and practice to facilitate learning. 
                    When referred to with its abbreviation, ed-tech, it is often referring to the industry of companies that create educational technology. </p>
            </div>
    
            <div class="footer__2">
                <h4> Permalinks</h4>
                <ul class="permalinks">
                    <li> <a href ="index.html">Home</a></li>
                    <li> <a href ="about.html">About Us</a></li>
                    <li> <a href ="event.html">Course</a></li>
                    <li> <a href ="team.html">Learning Path</a></li>
                    <li> <a href ="contact.html">Contact Us</a></li>
                    <li> <a href ="login.html">Sign Out</a></li>
                </ul>
            </div>
    
            <div class="footer__3">
                <h4>Important Links</h4>
                <ul class="links">
                    <li> <a href="#">Ed-Tech</a></li>
                    <li> <a href="https://educationtechnology.com/">Education Technology</a></li>
                </ul>
            </div>
        
            <div class="footer__4">
                <h4>Follow Us</h4>
                <div>
                    <p>+91 999999XXXX</p>
                    <p>support@educationtechnology.in</p>
                    <ul class="footer__socials">
                        <li> <a href="https://www.facebook.com/meenu.saini.00"><i class="uil uil-facebook-f"> </i> </a> </li>
                        <li> <a href="https://www.instagram.com/_meeta_98/"><i class="uil uil-instagram-alt"> </i> </a> </li>
                        <li> <a href="https://twitter.com/Meenaks00882522"><i class="uil uil-twitter"> </i> </a> </li>
                        <li> <a href="https://github.com/Meeta-motherfds"><i class="uil uil-github"> </i> </a> </li>
                        <li> <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"><i class="uil uil-linkedin-alt"> </i> </a> </li>
                    </ul>
                </div>
            </div>
        </div>
    
            <div class="footer__copyright">
                <p> Copyright &copy; Ed-Tech |</i> By <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"> <strong>Meenakshi Saini (Meeta)</strong></a></p>
            </div>
    </footer>
<!------------------------------------ END OF FOOTER SECTION ------------------------------------>
    
<!--------------------------------------  JS SCRIPT ---------------------------------->
        <script src="./JS/particles.js"></script>
        <script src="./JS/app.js"></script>
        <script src="./JS/main.js"></script>
        <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
        <script src="https://kit.fontawesome.com/f4cc1334b7.js" crossorigin="anonymous"></script>
        <script>
                var swiper = new Swiper(".mySwiper", {
                slidesPerView: 1,
                spaceBetween: 30,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                //when window width is >=600px
                breakpoints: {
                    600: {
                        slidesPerView: 2
                    }
                }
    
                });
        </script>
<!------------------------------------   END OF JS --------------------------------------------->    
    
</body>
</html>
        

```
about.html

```
<!------------------------------- Website for Educational purpose by Meenakshi saini ---------------------->
<!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>Ed-Tech</title>

<!------------------ IMPORTING THE ICONSCOUNT CDN ---------------->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<!-------------------- IMPORTING THE GOOGLE FONT ------------------->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-------------------- IMPORTING SWIPER JS LIBRARY ------------------------->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>

<!---------------------------- LINKING CSS FILES -------------------------->
    <link rel="stylesheet" type="text/css" href="./CSS/index.css">

<!---------------------------- WEBSITE FAVICON -------------------------->
    <link rel="icon" type="image/x-icon" href="img/favicon.ico">

</head>

<!---------------------------- BODY SECTION -------------------------->
<body>

<!----------------------- NAVIGATION BAR --------------------------------->
    <nav>
        <div class="container nav__container">
            <a href="index.html"><h3> Ed-Tech </h3></a>
                <ul class="nav__menu">
                    <li> <a href="index.html">Home</a></li>
                    <li> <a href="about.html">About Us</a></li>
                    <li> <a href="event.html">Course</a></li>
                    <li> <a href="team.html">Learning Path</a></li>
                    <li> <a href="contact.html">Contact Us</a></li>
                    <li> <a href="login.html">Sign Out</a></li>
                </ul>
                <button id="open-menu-btn"><i class="uil uil-bars"></i> </i></button>
                <button id="close-menu-btn"><i class="uil uil-multiply"></i> </button>
        </div>
    </nav>
<!------------------------ END OF NAVIGATION BAR --------------------------------->
    
<!--------------------------- HEADER PART ---------------------------------->
    <header id="particles-js">
        <div class="card">
            <div class="header__container">
                <div class="header__left">
                    <h1>Education</h1>
                    <p> has an important role to play in making INDIA self-reliant.</p>
                    <h3>- Narendra Modi</h3>
                </div> 
                
                <div class="header__right">
                    <div class="box-container">
                        <div class="box-item">
                            <div class="flip-box">
                                <div class="flip-box-front text-center" style="background-image: url('img/index-front.jpg');">
                                    <div class="inner color-white">
                                        <h3 class="flip-box-header"></h3>
                                        <img src="https://s25.postimg.cc/65hsttv9b/cta-arrow.png" alt="" class="flip-box-img">
                                    </div>
                                </div>
    
                                <div class="flip-box-back text-center" style="background-image: url('img/index-back.jpg');">
                                    <div class="inner color-white">
                                        </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
<!--------------------------- END OF HEADER PART ---------------------------------->
    
<!---------------------------- ABOUT SECTION -------------------------------------->
    <section class="aboutall">
        <div class="container aboutall__container">
            <div class="aboutall__left">
                <h1> Who we are? </h1>
                <p> Ed-Tech is the official tech website. This website help make the process of learning entertaining and attractive to the student, especially in today's age.
                    This website support different educational sectors by providing access to relevant information and tools to each group served.
                     Instructors can find valuable educational resources to develop their teaching, and by using this portal, they enhance student-centered learning. </p>
                <a href="event.html" class="btn btn-primary">Learn more</a>
            </div>
                
            <div class="aboutall__right">
                <article class="about">
                    <span class="about__icon"><i class="uil uil-icons"></i></span>
                    <h5> Hard Skills</h5>
                    <p>Science, Art, Commerce...</p>
                </article>
                            
                <article class="about">
                    <span class="about__icon"> <i class="uil uil-icons"></i> </span>
                    <h5> Soft Skills </h5>
                    <p>Communication, Personal Development...</p>
                </article>
                    
                <article class="about">
                    <span class="about__icon"> <i class="uil uil-notebooks"></i> </span>
                    <h5> General Knowledge </h5>
                    <p>Encylopedia, Current Affairs...</p>
                </article>
                    
                <article class="about">
                    <span class="about__icon"> <i class="uil uil-box"></i> </span> 
                    <h5> Daily Life Skills </h5>
                    <p>Fitter, Plumber, Electronics...</p>
                </article>
                                        
                <article class="about">
                    <span class="about__icon"><i class="uil uil-music"></i></span>
                    <h5> Curriculum Activites </h5>
                    <p>Sports, Music, Dance...</p>
                </article>
                                            
                <article class="about">
                    <span class="about__icon"> <i class="uil uil-newspaper"></i> </span>
                    <h5> Resource Library </h5>
                    <p>PDFs, Books, Articles, Blogs, Podcast...</p>
                </article>
            </div>
        </div>
    </section>
<!---------------------------- END OF ABOUT SECTION ---------------------------------->
    
<!--------------------------- OTHER SECTION ----------------------------->
    <section class="events">
        <h2>Equip your school with tools for success</h2>
        <div class="container events__container">
                
            <article class="event">
                <div class="event__image">
                    <img src="img/c1.JPG">
                </div>
                <div class="event__info">
                    <h3> Education Leaders </h3>
                    <p>

                    </p>
                    <h4> Bring flexible innovation to your school at scale </h4>
                    <p> Spend less time on administrative tasks and more time making an impact on student education. Equip your teachers with tools, resources and professional development so that they can focus on their students.</p>
                    <a href="event.html" class="btn btn-primary">Learn More</a>
                </div>
            </article>
    
            <article class="event">
                <div class="event__image">
                    <img src="img/c2.JPG">
                </div>
                    
                <div class="event__info">
                    <h3> IT Admins </h3>
                    <p>

                    </p>
                    <h4> Easily deploy educational tools across your institution</h4>
                    <p> Get diverse tools in the hands of students and educators with minimal effort. Maintain all of your institution's tech from one place. Monitor info-sec, control access and quickly make changes across your network using the centralised Admin console.</p>
                    <a href="event.html" class="btn btn-primary">Learn More</a>
                </div>
            </article>
    
            <article class="event">
                <div class="event__image">
                    <img src="img/c3.JPG">
                </div>
                    
                <div class="event__info">
                    <h3> Educators </h3>
                    <p>

                    </p>
                    <h4> Save time and enrich student learning with easy-to-use tools </h4>
                    <p> Streamline class management while providing every student with individualised learning experiences. Create, customise and collaborate on lessons to help learners grow their skills. Use virtual classrooms to promote learning any time, anywhere. Keep meetings, documents and reports all within reach. </p>
                    <a href="event.html" class="btn btn-primary">Learn More</a>
                </div>
            </article>
        </div>
    </section>
<!-------------------------- END OF SECTION ---------------------------------->
    
<!-------------------------------- FAQ SECTION ------------------------------->
    <section class="faqs">
        <h2> Have questions? We've got answers. </h2>
        <div class="container faqs__container">
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4>How can I be a part of this team?</h4>
                        <p>Become an Ed-Tech alumnus or else contact to any of the members of the club.</p>
                    </div>
            </article>
    
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4>What is the fee to join the Team?</h4>
                        <p>There is no membership fee to join the team.</p>
                    </div>
            </article>
    
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4>What is the cost of participating in course?</h4>
                        <p>All the courses are free of cost.</p>
                    </div>
            </article>
    
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4>Anyone can be contribute thier knowledge?</h4>
                        <p> Yes, contribution to knowledge means creating new knowledge based on the previous available knowledge by doing extensive and innovative reasearch. You can mail your valuable information which is mention below:
                            Your area of study / topic, methodology, problems identified and solved among others are your contribution to knowledge.
                             Writing a Statement about research contribution should indicate the new findings with contrast to the existing works.
                             The significance of the research work done should be indicated.
                        </p>
                    </div>
            </article>
    
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4> How to suggest anything?</h4>
                        <p>If you have anything to suggest, then you can mail us at support@educationtechnology.in.</p>
               </div>
            </article>
        
            <article class="faq">
                <div class="faq__icon"><i class="uil uil-plus"></i></div>
                    <div class="question__answer">
                        <h4> Any doubt still unanswered?</h4>
                        <p>For any more clarification, contact to the Support team.</p>
                    </div>
            </article>   
        </div>
    </section>    
<!------------------------------ END OF FAQ --------------------------------------->
    
<!--------------------------------------- FOOTER SECTION ------------------------------------->
    <footer>
        <div class="container footer__container">
            <div class="footer__1">
                <a href="index.html" class="footer__logo"><h4> Ed-Tech</h4></a>
                <p> Ed-Tech (Educational technology) is the combined use of computer hardware, software, and educational theory and practice to facilitate learning. 
                    When referred to with its abbreviation, ed-tech, it is often referring to the industry of companies that create educational technology. </p>
            </div>
    
            <div class="footer__2">
                <h4> Permalinks</h4>
                <ul class="permalinks">
                    <li> <a href ="index.html">Home</a></li>
                    <li> <a href ="about.html">About Us</a></li>
                    <li> <a href ="event.html">Course</a></li>
                    <li> <a href ="team.html">Learning Path</a></li>
                    <li> <a href ="contact.html">Contact Us</a></li>
                    <li> <a href ="login.html">Sign Out</a></li>
                </ul>
            </div>
    
            <div class="footer__3">
                <h4>Important Links</h4>
                <ul class="links">
                    <li> <a href="#">Ed-Tech</a></li>
                    <li> <a href="https://educationtechnology.com/">Education Technology</a></li>
                </ul>
            </div>
        
            <div class="footer__4">
                <h4>Follow Us</h4>
                <div>
                    <p>+91 999999XXXX</p>
                    <p>support@educationtechnology.in</p>
                    <ul class="footer__socials">
                        <li> <a href="https://www.facebook.com/meenu.saini.00"><i class="uil uil-facebook-f"> </i> </a> </li>
                        <li> <a href="https://www.instagram.com/_meeta_98/"><i class="uil uil-instagram-alt"> </i> </a> </li>
                        <li> <a href="https://twitter.com/Meenaks00882522"><i class="uil uil-twitter"> </i> </a> </li>
                        <li> <a href="https://github.com/Meeta-motherfds"><i class="uil uil-github"> </i> </a> </li>
                        <li> <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"><i class="uil uil-linkedin-alt"> </i> </a> </li>
                    </ul>
                </div>
            </div>
        </div>
    
            <div class="footer__copyright">
                <p> Copyright &copy; Ed-Tech |</i> By <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"> <strong>Meenakshi Saini (Meeta)</strong></a></p>
            </div>
    </footer>
<!------------------------------------ END OF FOOTER SECTION ------------------------------------>
    
<!--------------------------------------  JS SCRIPT ---------------------------------->
        <script src="./JS/particles.js"></script>
        <script src="./JS/app.js"></script>
        <script src="./JS/main.js"></script>
        <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
        <script src="https://kit.fontawesome.com/f4cc1334b7.js" crossorigin="anonymous"></script>
        <script>
                var swiper = new Swiper(".mySwiper", {
                slidesPerView: 1,
                spaceBetween: 30,
                pagination: {
                    el: ".swiper-pagination",
                    clickable: true,
                },
                //when window width is >=600px
                breakpoints: {
                    600: {
                        slidesPerView: 2
                    }
                }
    
                });
        </script>
<!------------------------------------   END OF JS --------------------------------------------->    
    
</body>
</html>
        


```
Contact.html

```
<!--------------------------- CONTACT PAGE ------------------->
<!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>Ed-Tech</title>

<!------------------ IMPORTING THE ICONSCOUNT CDN ---------------->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<!-------------------- IMPORTING THE GOOGLE FONT ------------------->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!------------------ LINKING CSS FILES ---------------->
    <link rel="stylesheet" type="text/css" href="./CSS/index.css">
    <link rel="stylesheet" type="text/css" href="./CSS/contact.css">

</head>

<body>
<!----------------------- NAVIGATION BAR --------------------------------->
<nav>
    <div class="container nav__container">
        <a href="index.html"><h4> Ed-Tech </h4></a>
            <ul class="nav__menu">
                <li> <a href="index.html">Home</a></li>
                <li> <a href="about.html">About Us</a></li>
                <li> <a href="event.html">Course</a></li>
                <li> <a href="team.html">Learning Path</a></li>
                <li> <a href="contact.html">Contact Us</a></li>
                <li> <a href="login.html">Sign Out</a></li>
            </ul>
            <button id="open-menu-btn"><i class="uil uil-bars"></i> </i></button>
            <button id="close-menu-btn"><i class="uil uil-multiply"></i> </button>
    </div>
</nav>
<!------------------------ END OF NAVIGATION BAR --------------------------------->
    
<!------------------------- CONTACT FORM ----------------------------------->
    <section>
        <div class="contact">
            <div class="container contact__container">
                <aside class="contact__aside">
                    <div class="aside__image">
                        <img src="img/contact.svg">
                    </div>
                    <h2> Contact Us</h2>
                    <p> For any kind of enquiry and suggestions, you can drop a message here.</p>
                    <ul class="contact__details">
                        <li>
                            <i class="uil uil-phone-times"></i>
                            <h5>+91 999999XXXX</h5>
                        </li>
                        <li> 
                            <i class="uil uil-envelope"></i>
                            <h5>support@educationtechnology.in</h5>
    
                        </li>
                        <li> 
                            <i class="uil uil-location-point"></i>
                            <h5>New Delhi, Delhi, India</h5>
                        </li>
                    </ul>
                    <ul class="contact__socials">
                        <li><a href="https://www.facebook.com"><i class="uil uil-facebook-f"></i></a></li>
                        <li><a href="#"><i class="uil uil-envelope"></i> </a> </li>
                        <li><a href="https://www.linkedin.com"><i class="uil uil-linkedin-alt"></i></a></li>
                    </ul> 
                </aside>
          
        <form action="https://formspree.io/f/xdobvlbq" method="POST" class="contact__form">
            <div class="form__name">
                <input type="text" name="First Name" placeholder="First Name" required>
                <input type="text" name="Last Name" placeholder="Last Name" required>
            </div>
            <input type="email" name="Email" placeholder="Email" required>
            <textarea name="Message" row="7" placeholder="Message" required></textarea>
            <button type="submit" class="btn btn-primary">Send Message</button>
        </form>
        </div>
    </section>
<!------------------------- END OF CONTACT FORM ----------------------------------->
    
<!--------------------------------------- FOOTER SECTION ------------------------------------->
<footer>
    <div class="container footer__container">
        <div class="footer__1">
            <a href="index.html" class="footer__logo"><h4> Ed-Tech</h4></a>
            <p> Ed-Tech (Educational technology) is the combined use of computer hardware, software, and educational theory and practice to facilitate learning. 
                When referred to with its abbreviation, ed-tech, it is often referring to the industry of companies that create educational technology. </p>
        </div>

        <div class="footer__2">
            <h4> Permalinks</h4>
            <ul class="permalinks">
                <li> <a href ="index.html">Home</a></li>
                <li> <a href ="about.html">About Us</a></li>
                <li> <a href ="event.html">Course</a></li>
                <li> <a href ="team.html">Learning Path</a></li>
                <li> <a href ="contact.html">Contact Us</a></li>
                <li> <a href ="login.html">Sign Out</a></li>
            </ul>
        </div>

        <div class="footer__3">
            <h4>Important Links</h4>
            <ul class="links">
                <li> <a href="#">Ed-Tech</a></li>
                <li> <a href="https://educationtechnology.com/">Education Technology</a></li>
            </ul>
        </div>
    
        <div class="footer__4">
            <h4>Follow Us</h4>
            <div>
                <p>+91 999999XXXX</p>
                <p>support@educationtechnology.in</p>
                <ul class="footer__socials">
                    <li> <a href="https://www.facebook.com/meenu.saini.00"><i class="uil uil-facebook-f"> </i> </a> </li>
                    <li> <a href="https://www.instagram.com/_meeta_98/"><i class="uil uil-instagram-alt"> </i> </a> </li>
                    <li> <a href="https://twitter.com/Meenaks00882522"><i class="uil uil-twitter"> </i> </a> </li>
                    <li> <a href="https://github.com/Meeta-motherfds"><i class="uil uil-github"> </i> </a> </li>
                    <li> <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"><i class="uil uil-linkedin-alt"> </i> </a> </li>
                </ul>
            </div>
        </div>
    </div>

        <div class="footer__copyright">
            <p> Copyright &copy; Ed-Tech |</i> By <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"> <strong>Meenakshi Saini (Meeta)</strong></a></p>
        </div>
</footer>
<!------------------------------------ END OF FOOTER SECTION ------------------------------------>

<!--------------------------------------  JS SCRIPT ---------------------------------->
    <script src="./JS/main.js"></script>
    <script src="./JS/team.js"></script>
    <script src="https://kit.fontawesome.com/f4cc1334b7.js" crossorigin="anonymous"></script>   
<!------------------------------------   END OF JS --------------------------------------------->    

</body>
</html>
```
Event.html

```
<!------------------------- EVENT PAGE --------------------------->
<!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>Ed-Tech</title>

<!------------------ IMPORTING THE ICONSCOUNT CDN ---------------->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<!-------------------- IMPORTING THE GOOGLE FONT ------------------->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-------------------- IMPORTING SWIPER JS LIBRARY ------------------------->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>

<!------------------ LINKING CSS FILES ---------------->
    <link rel="stylesheet" type="text/css" href="./CSS/index.css">
    <link rel="stylesheet" type="text/css" href="./CSS/event.css">

</head>

<body>
<!----------------------- NAVIGATION BAR --------------------------------->
<nav>
    <div class="container nav__container">
        <a href="index.html"><h4> Ed-Tech </h4></a>
            <ul class="nav__menu">
                <li> <a href="index.html">Home</a></li>
                <li> <a href="about.html">About Us</a></li>
                <li> <a href="event.html">Course</a></li>
                <li> <a href="team.html">Learning Path</a></li>
                <li> <a href="contact.html">Contact Us</a></li>
                <li> <a href="login.html">Sign Out</a></li>
            </ul>
            <button id="open-menu-btn"><i class="uil uil-bars"></i> </i></button>
            <button id="close-menu-btn"><i class="uil uil-multiply"></i> </button>
    </div>
</nav>
<!------------------------ END OF NAVIGATION BAR --------------------------------->

<!--------------------------- ACHIEVEMENTS SECTION ---------------------------------->
    <section class="about__achievements">
        <div class="container about__achievements-container">
            <div class="about__achievements-left">
                <img src="img/contact.svg">
            </div>
            <div class="about__achievements-right">3
                <h1> Achievements</h1>
                <p> Ed-Tech is making progress massively by educating peoples on the education technology.
                </p>
                <div class="achievements__cards">
                    <article class="achievements_card">
                        <span class="achievements__icon">
                            <i class="uil uil-schedule"></i>
                        </span>
                        <h3>3+</h3>
                        <p> Years</p>
                    </article>

                    <article class="achievements_card">
                        <span class="achievements__icon">
                            <i class="uil uil-users-alt"></i>
                        </span>
                        <h3>5+</h3>
                        <p> Partners</p>
                    </article>

                    <article class="achievements_card">
                        <span class="achievements__icon">
                            <i class="uil uil-user-circle"></i>
                        </span>
                        <h3>10000+</h3>
                        <p> Student Alumnus</p>
                    </article>
                </div>
            </div>
        </div>
    </section>
<!-------------------------- END OF ACHIEVEMENT -------------------------------->

<!---------------------------- ABOUT SECTION -------------------------------------->
<section class="aboutall">
    <div class="container aboutall__container">
        <div class="aboutall__left">
            <h1> Hard Skills </h1>
        </div>
        
        <div class="aboutall__right">
            <article class="about">
                <span class="about__icon"><i class="uil uil-icons"></i></span>
                <h5>Computer science</h5>
            </article>
                        
            <article class="about">
                <span class="about__icon"> <i class="uil uil-icons"></i> </span>
                <h5> Management </h5>
            </article>
                
            <article class="about">
                <span class="about__icon"> <i class="uil uil-notebooks"></i> </span>
                <h5> Marketing </h5>
            </article>
        
            <article class="about">
                <span class="about__icon"> <i class="uil uil-box"></i> </span> 
                <h5> Accounting </h5>
            </article>
                                    
            <article class="about">
                <span class="about__icon"><i class="uil uil-music"></i></span>
                <h5> Analytical </h5>
            </article>
                                        
            <article class="about">
                <span class="about__icon"> <i class="uil uil-newspaper"></i> </span>
                <h5> Design </h5>
            </article>

            <article class="about">
                <span class="about__icon"> <i class="uil uil-newspaper"></i> </span>
                <h5> Hard Communication </h5>
            </article>

            <article class="about">
                <span class="about__icon"> <i class="uil uil-newspaper"></i> </span>
                <h5> Sales & Retail </h5>
            </article>

        </div>
    </div>
</section>    
<!----------------------------- END OF SECTION -------------------------->


<!---------------------------- ABOUT SECTION -------------------------------------->
<section class="aboutall">
    <div class="container aboutall__container">
        <div class="aboutall__left">
            <h1> Daily Life Skills </h1>
        </div>
        
        <div class="aboutall__right">
            <article class="about">
                <span class="about__icon"><i class="uil uil-icons"></i></span>
                <h5>Fitter</h5>
            </article>
                        
            <article class="about">
                <span class="about__icon"> <i class="uil uil-icons"></i> </span>
                <h5>Electronics</h5>
            </article>
                
            <article class="about">
                <span class="about__icon"> <i class="uil uil-notebooks"></i> </span>
                <h5>Plumber </h5>
            </article>
        
            <article class="about">
                <span class="about__icon"> <i class="uil uil-box"></i> </span> 
                <h5>Carpenter</h5>
            </article>
                                    
            <article class="about">
                <span class="about__icon"><i class="uil uil-music"></i></span>
                <h5>Cooking </h5>
            </article>
        </div>
    </div>
</section>    
<!----------------------------- END OF SECTION -------------------------->


<!---------------------------- ABOUT SECTION -------------------------------------->
<section class="aboutall">
    <div class="container aboutall__container">
        <div class="aboutall__left">
            <h1>Curriculum Activities </h1>
        </div>
        
        <div class="aboutall__right">
            <article class="about">
                <span class="about__icon"><i class="uil uil-icons"></i></span>
                <h5>Music</h5>
            </article>
                        
            <article class="about">
                <span class="about__icon"> <i class="uil uil-icons"></i> </span>
                <h5> Dance </h5>
            </article>
                
            <article class="about">
                <span class="about__icon"> <i class="uil uil-notebooks"></i> </span>
                <h5> Indoor games </h5>
            </article>
        
            <article class="about">
                <span class="about__icon"> <i class="uil uil-box"></i> </span> 
                <h5> Outdoor Games </h5>
            </article>
                                    
            <article class="about">
                <span class="about__icon"><i class="uil uil-music"></i></span>
                <h5> Puzzles </h5>
            </article>
        </div>
    </div>
</section>    
<!----------------------------- END OF SECTION -------------------------->


<!---------------------------- ABOUT SECTION -------------------------------------->
<section class="aboutall">
    <div class="container aboutall__container">
        <div class="aboutall__left">
            <h1> General Knowledge </h1>
        </div>
        
        <div class="aboutall__right">
            <article class="about">
                <span class="about__icon"><i class="uil uil-icons"></i></span>
                <h5>Encylopedia</h5>
            </article>
                        
            <article class="about">
                <span class="about__icon"> <i class="uil uil-icons"></i> </span>
                <h5> Current Affairs </h5>
            </article>
                
            <article class="about">
                <span class="about__icon"> <i class="uil uil-notebooks"></i> </span>
                <h5> Research Papers </h5>
            </article>

            <article class="about">
                <span class="about__icon"><i class="uil uil-icons"></i></span>
                <h5>History</h5>
            </article>
                        
            <article class="about">
                <span class="about__icon"> <i class="uil uil-icons"></i> </span>
                <h5> Art & Culture </h5>
            </article>
                
            <article class="about">
                <span class="about__icon"> <i class="uil uil-notebooks"></i> </span>
                <h5> Environment </h5>
            </article>
        </div>
    </div>
</section>    
<!----------------------------- END OF SECTION -------------------------->


<!---------------------------- ABOUT SECTION -------------------------------------->
<section class="aboutall">
    <div class="container aboutall__container">
        <div class="aboutall__left">
            <h1> Resource Library </h1>
        </div>
        
        <div class="aboutall__right">
            <article class="about">
                <span class="about__icon"><i class="uil uil-icons"></i></span>
                <h5>Online Standard Books/PDFs</h5>
            </article>
                        
            <article class="about">
                <span class="about__icon"> <i class="uil uil-icons"></i> </span>
                <h5> Articles </h5>
            </article>
                
            <article class="about">
                <span class="about__icon"> <i class="uil uil-notebooks"></i> </span>
                <h5> Blogs </h5>
            </article>

            <article class="about">
                <span class="about__icon"> <i class="uil uil-icons"></i></span>
                <h5> Podcasts</h5>
            </article>
        </div>
    </div>
</section>    
<!----------------------------- END OF SECTION -------------------------->


<!--------------------------- OTHER SECTION ----------------------------->
<section class="events">
    <h2>Equip your school with tools for success</h2>
    <div class="container events__container">
            
        <article class="event">
            <div class="event__image">
                <img src="img/c1.JPG">
            </div>
            <div class="event__info">
                <h3> Education Leaders </h3>
                <p>

                </p>
                <h4> Bring flexible innovation to your school at scale </h4>
                <p> Spend less time on administrative tasks and more time making an impact on student education. Equip your teachers with tools, resources and professional development so that they can focus on their students.</p>
                <a href="event.html" class="btn btn-primary">Learn More</a>
            </div>
        </article>

        <article class="event">
            <div class="event__image">
                <img src="img/c2.JPG">
            </div>
                
            <div class="event__info">
                <h3> IT Admins </h3>
                <p>

                </p>
                <h4> Easily deploy educational tools across your institution</h4>
                <p> Get diverse tools in the hands of students and educators with minimal effort. Maintain all of your institution's tech from one place. Monitor info-sec, control access and quickly make changes across your network using the centralised Admin console.</p>
                <a href="event.html" class="btn btn-primary">Learn More</a>
            </div>
        </article>

        <article class="event">
            <div class="event__image">
                <img src="img/c3.JPG">
            </div>
                
            <div class="event__info">
                <h3> Educators </h3>
                <p>

                </p>
                <h4> Save time and enrich student learning with easy-to-use tools </h4>
                <p> Streamline class management while providing every student with individualised learning experiences. Create, customise and collaborate on lessons to help learners grow their skills. Use virtual classrooms to promote learning any time, anywhere. Keep meetings, documents and reports all within reach. </p>
                <a href="event.html" class="btn btn-primary">Learn More</a>
            </div>
        </article>
    </div>
</section>
<!-------------------------- END OF SECTION ---------------------------------->
<!--------------------------------------- FOOTER SECTION ------------------------------------->
<footer>
    <div class="container footer__container">
        <div class="footer__1">
            <a href="index.html" class="footer__logo"><h4> Ed-Tech</h4></a>
            <p> Ed-Tech (Educational technology) is the combined use of computer hardware, software, and educational theory and practice to facilitate learning. 
                When referred to with its abbreviation, ed-tech, it is often referring to the industry of companies that create educational technology. </p>
        </div>

        <div class="footer__2">
            <h4> Permalinks</h4>
            <ul class="permalinks">
                <li> <a href ="index.html">Home</a></li>
                <li> <a href ="about.html">About Us</a></li>
                <li> <a href ="event.html">Course</a></li>
                <li> <a href ="team.html">Learning Path</a></li>
                <li> <a href ="contact.html">Contact Us</a></li>
                <li> <a href ="login.html">Sign Out</a></li>
            </ul>
        </div>

        <div class="footer__3">
            <h4>Important Links</h4>
            <ul class="links">
                <li> <a href="#">Ed-Tech</a></li>
                <li> <a href="https://educationtechnology.com/">Education Technology</a></li>
            </ul>
        </div>
    
        <div class="footer__4">
            <h4>Follow Us</h4>
            <div>
                <p>+91 999999XXXX</p>
                <p>support@educationtechnology.in</p>
                <ul class="footer__socials">
                    <li> <a href="https://www.facebook.com/meenu.saini.00"><i class="uil uil-facebook-f"> </i> </a> </li>
                    <li> <a href="https://www.instagram.com/_meeta_98/"><i class="uil uil-instagram-alt"> </i> </a> </li>
                    <li> <a href="https://twitter.com/Meenaks00882522"><i class="uil uil-twitter"> </i> </a> </li>
                    <li> <a href="https://github.com/Meeta-motherfds"><i class="uil uil-github"> </i> </a> </li>
                    <li> <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"><i class="uil uil-linkedin-alt"> </i> </a> </li>
                </ul>
            </div>
        </div>
    </div>

        <div class="footer__copyright">
            <p> Copyright &copy; Ed-Tech |</i> By <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"> <strong>Meenakshi Saini (Meeta)</strong></a></p>
        </div>
</footer>
<!------------------------------------ END OF FOOTER SECTION ------------------------------------>

<!--------------------------------------  JS SCRIPT ---------------------------------->
    <script src="./JS/main.js"></script>
    <script src="https://kit.fontawesome.com/f4cc1334b7.js" crossorigin="anonymous"></script>   
<!------------------------------------   END OF JS --------------------------------------------->    

</body>
</html>
    
```
Login.html

```
<!------------------------- EVENT PAGE --------------------------->
<!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> Login Form </title>
    <link rel="stylesheet" href="style.css"> 


<!------------------ IMPORTING THE ICONSCOUNT CDN ---------------->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<!-------------------- IMPORTING THE GOOGLE FONT ------------------->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-------------------- IMPORTING SWIPER JS LIBRARY ------------------------->
    <link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>

<!------------------ LINKING CSS FILES ---------------->
    <link rel="stylesheet" type="text/css" href="./CSS/index.css">
    <link rel="stylesheet" type="text/css" href="./CSS/event.css">

</head>

<body>
<!----------------------- NAVIGATION BAR --------------------------------->
<nav>
    <div class="container nav__container">
        <a href="index.html"><h4> Ed-Tech </h4></a>
            <ul class="nav__menu">
                <li> <a href="index.html">Home</a></li>
                <li> <a href="about.html">About Us</a></li>
                <li> <a href="event.html">Course</a></li>
                <li> <a href="team.html">Learning Path</a></li>
                <li> <a href="contact.html">Contact Us</a></li>
                <li> <a href="login.html">Sign Out</a></li>
            </ul>
            <button id="open-menu-btn"><i class="uil uil-bars"> </i></button>
            <button id="close-menu-btn"><i class="uil uil-multiply"></i> </button>
    </div>
</nav>
<!------------------------ END OF NAVIGATION BAR ---------------------------------><header> 
<!------------------------------LOGIN FORM----------------------------->
<header id="particles-js">
    <div class="card">
        <div class="header__container">
            <div class="header__left">
                <section>
                    <div class="login">
                        <div class="container login__container">
                                <h3> Login Page </h3>
                            
                    <form action="" method="POST" class="login__form">
                        <div class="form__name">
                            <input type="text" name="First Name" placeholder="First Name" required>
                            <input type="text" name="Last Name" placeholder="Last Name" required>
                        </div>
                        <input type="email" name="Email" placeholder="Email" required>
                        <input type="password" name="Password" placeholder="Password" required>
                        <button type="submit" class="btn btn-primary">Login</button>
                    </form>
                        </div>
                    </div>
                </section>

            </div>
        </div>
        
    </header>
<!------------------------- END OF LOGIN FORM ------------------------>

<!--------------------------------------- FOOTER SECTION ------------------------------------->
<footer>
    <div class="container footer__container">
        <div class="footer__1">
            <a href="index.html" class="footer__logo"><h4> Ed-Tech</h4></a>
            <p> Ed-Tech (Educational technology) is the combined use of computer hardware, software, and educational theory and practice to facilitate learning. 
                When referred to with its abbreviation, ed-tech, it is often referring to the industry of companies that create educational technology. </p>
        </div>

        <div class="footer__2">
            <h4> Permalinks</h4>
            <ul class="permalinks">
                <li> <a href ="index.html">Home</a></li>
                <li> <a href ="about.html">About Us</a></li>
                <li> <a href ="event.html">Course</a></li>
                <li> <a href ="team.html">Learning Path</a></li>
                <li> <a href ="contact.html">Contact Us</a></li>
                <li> <a href ="login.html">Sign Out</a></li>
            </ul>
        </div>

        <div class="footer__3">
            <h4>Important Links</h4>
            <ul class="links">
                <li> <a href="#">Ed-Tech</a></li>
                <li> <a href="https://educationtechnology.com/">Education Technology</a></li>
            </ul>
        </div>
    
        <div class="footer__4">
            <h4>Follow Us</h4>
            <div>
                <p>+91 999999XXXX</p>
                <p>support@educationtechnology.in</p>
                <ul class="footer__socials">
                    <li> <a href="https://www.facebook.com/meenu.saini.00"><i class="uil uil-facebook-f"> </i> </a> </li>
                    <li> <a href="https://www.instagram.com/_meeta_98/"><i class="uil uil-instagram-alt"> </i> </a> </li>
                    <li> <a href="https://twitter.com/Meenaks00882522"><i class="uil uil-twitter"> </i> </a> </li>
                    <li> <a href="https://github.com/Meeta-motherfds"><i class="uil uil-github"> </i> </a> </li>
                    <li> <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"><i class="uil uil-linkedin-alt"> </i> </a> </li>
                </ul>
            </div>
        </div>
    </div>

        <div class="footer__copyright">
            <p> Copyright &copy; Ed-Tech |</i> By <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"> <strong>Meenakshi Saini (Meeta)</strong></a></p>
        </div>
</footer>
<!------------------------------------ END OF FOOTER SECTION ------------------------------------>

<!--------------------------------------  JS SCRIPT ---------------------------------->
    <script src="./JS/particles.js"></script>
    <script src="./JS/app.js"></script>
    <script src="./JS/main.js"></script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
    <script src="https://kit.fontawesome.com/f4cc1334b7.js" crossorigin="anonymous"></script>
    <script>
            var swiper = new Swiper(".mySwiper", {
            slidesPerView: 1,
            spaceBetween: 30,
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            //when window width is >=600px
            breakpoints: {
                600: {
                    slidesPerView: 2
                }
            }

            });
    </script>
<!------------------------------------   END OF JS --------------------------------------------->    

</body>
</html>
    


```

Team.html

```
<!------------------------------- TEAM PAGE ------------------------>
<!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>Ed-Tech</title>

<!------------------ IMPORTING THE ICONSCOUNT CDN ---------------->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<!-------------------- IMPORTING THE GOOGLE FONT ------------------->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!------------------ LINKING CSS FILES ---------------->
    <link rel="stylesheet" type="text/css" href="./CSS/index.css">
    <link rel="stylesheet" type="text/css" href="./CSS/team.css">

</head>

<body>
<!----------------------- NAVIGATION BAR --------------------------------->
<nav>
    <div class="container nav__container">
        <a href="index.html"><h4> Ed-Tech </h4></a>
            <ul class="nav__menu">
                <li> <a href="index.html">Home</a></li>
                <li> <a href="about.html">About Us</a></li>
                <li> <a href="event.html">Course</a></li>
                <li> <a href="team.html">Learning Path</a></li>
                <li> <a href="contact.html">Contact Us</a></li>
                <li> <a href="login.html">Sign Out</a></li>
            </ul>
            <button id="open-menu-btn"><i class="uil uil-bars"></i> </i></button>
            <button id="close-menu-btn"><i class="uil uil-multiply"></i> </button>
    </div>
</nav>
<!------------------------ END OF NAVIGATION BAR --------------------------------->

<!-------------------- TYPING TEXT ANIMATION -------->
    <section class="anitext">
        <div class="container">
            <p>Welcome <span class="typed-text"></span><span class="cursor">&nbsp;</span></p>
        </div>      
    </section>

<!-----------------------------  MEET THE TEAM --------------------------------->
    <section class="team">
        <div class="container team__container">
            <article class="team__member">
                <div class="team__member-image">
                    <img src="img/demoslide/Slide1.JPG">
                </div>
            
                <div class="team__member-info">
                    <h4>Student </h4>
                    <p> Coming Soon</p>
                </div>
           
               <div class="team__member-socials">
                    <a href="https://instagram.com/"  target="_blank" ><i class="uil uil-instagram"></i></a>
                    <a href="https://twitter.com/"  target="_blank" ><i class="uil uil-twitter-alt"></i></a>
                    <a href="https://linkedin.com/"  target="_blank" ><i class="uil uil-linkedin-alt"></i></a>
                </div>
            </article>


<!--------------------------------------- FOOTER SECTION ------------------------------------->
<footer>
    <div class="container footer__container">
        <div class="footer__1">
            <a href="index.html" class="footer__logo"><h4> Ed-Tech</h4></a>
            <p> Ed-Tech (Educational technology) is the combined use of computer hardware, software, and educational theory and practice to facilitate learning. 
                When referred to with its abbreviation, ed-tech, it is often referring to the industry of companies that create educational technology. </p>
        </div>

        <div class="footer__2">
            <h4> Permalinks</h4>
            <ul class="permalinks">
                <li> <a href ="index.html">Home</a></li>
                <li> <a href ="about.html">About Us</a></li>
                <li> <a href ="event.html">Course</a></li>
                <li> <a href ="team.html">Learning Path</a></li>
                <li> <a href ="contact.html">Contact Us</a></li>
                <li> <a href ="login.html">Sign Out</a></li>
            </ul>
        </div>

        <div class="footer__3">
            <h4>Important Links</h4>
            <ul class="links">
                <li> <a href="#">Ed-Tech</a></li>
                <li> <a href="https://educationtechnology.com/">Education Technology</a></li>
            </ul>
        </div>
    
        <div class="footer__4">
            <h4>Follow Us</h4>
            <div>
                <p>+91 999999XXXX</p>
                <p>support@educationtechnology.in</p>
                <ul class="footer__socials">
                    <li> <a href="https://www.facebook.com/meenu.saini.00"><i class="uil uil-facebook-f"> </i> </a> </li>
                    <li> <a href="https://www.instagram.com/_meeta_98/"><i class="uil uil-instagram-alt"> </i> </a> </li>
                    <li> <a href="https://twitter.com/Meenaks00882522"><i class="uil uil-twitter"> </i> </a> </li>
                    <li> <a href="https://github.com/Meeta-motherfds"><i class="uil uil-github"> </i> </a> </li>
                    <li> <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"><i class="uil uil-linkedin-alt"> </i> </a> </li>
                </ul>
            </div>
        </div>
    </div>

        <div class="footer__copyright">
            <p> Copyright &copy; Ed-Tech |</i> By <a href="https://www.linkedin.com/in/meenakshi-meeta-saini-a249aa197/"> <strong>Meenakshi Saini (Meeta)</strong></a></p>
        </div>
</footer>
<!------------------------------------ END OF FOOTER SECTION ------------------------------------>

<!--------------------------------------  JS SCRIPT ---------------------------------->
    
    <script src="./JS/main.js"></script>
    <script src="./JS/team.js"></script>
    <script src="https://kit.fontawesome.com/f4cc1334b7.js" crossorigin="anonymous"></script>   
<!------------------------------------   END OF JS --------------------------------------------->    

</body>
</html>
```


Working website is available on GitHub via my public repository, you just need to set correct connection string values, please find it below, please find zip file (issue with commit so added zip file) and extract all code.

https://github.com/Meeta-motherfds/tech/

Please look at below snap of App running on my  Window 10 pc:-

Ed-Tech web application running on the Windows 10 PC

**Outputs of the project:**

Home page of the website:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzqyvw7o6b2rnqnkpyu0.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rcupvdeh1gh92vujmdyx.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q30gea894ghp5l5mbse5.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/351se0zgj7a9mxzitbmc.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjt5f08jj8orw2ruijbr.png)

About Us:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n54k5vgg3g4xba1sp8a8.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hn2m3g5xepej631qzt8s.png)

Achievements (shown in Course Page):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5q2pud5whh556awekabf.png)

Courses (which is available for students):

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uci2yrw62rqq2en19lj.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9s5ak95s2yd25f11ebv.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/252fupf71mfo2b8yliyd.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0qquk4zju28vt0b958z.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75rmtf87uj11wesbkao9.png)

Student Learning Path:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d03wc6xgm9t70uwxbu1.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yjje5qr433obtwn9zlag.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j2oljin6iiqusqmbohf9.png)

Contact page:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cuj7mfxjsuf5py7pcb1r.png)

Login Page:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gngu8u35zct5ru9ym5zh.png)


Thank You.