1.

Company Profile

TechFusion Technologies
● Who We Are. Tech-Fusion is a team of entrepreneurs and innovative thinkers who can visualize and give
you an online identity with uniqueness and fineness.Tech-Fusion is an affordable web design company
and is reputed as one of the fastest growing IT companies in the state of Gujarat. Tech-Fusion web zone
allows you to get everything done at one place all the way always! Tech-Fusion aims to be the best web
hosting, web designing and web development company in india.

● Address:S-1/2 Dhir Complex, Eru Road, Abrama Rd, Vejalpore, Navsari, 396445.

● Phone: (+91) 9157564321

● Email: [email protected]

● Website: https://www.techfusiontechnologies.com/?fullpage=1

1
 2.Project Overview
Flask – Overview
● What is Web Framework?
Web Application Framework or simply Web Framework represents a collection of libraries and
modules that enables a web application developer to write applications without having to bother
about low-level details such as protocols, thread management etc.

● What is Flask?
Flask is a web application framework written in Python. It is developed by Armin Ronacher, who
leads an international group of Python enthusiasts named Pocco. Flask is based on the Werkzeug
WSGI toolkit and Jinja2 template engine. Both are Pocco projects.

Explore our latest online courses and learn new skills at your own pace. Enroll and become a
certified expert to boost your career.

● WSGI
Web Server Gateway Interface (WSGI) has been adopted as a standard for Python web application
development. WSGI is a specification for a universal interface between the web server and the
web applications.

● Werkzeug
It is a WSGI toolkit, which implements requests, response objects, and other utility functions.
This enables building a web framework on top of it. The Flask framework uses Werkzeug as one
of its bases.

● Jinja2
Jinja2 is a popular templating engine for Python. A web templating system combines a template
with a certain data source to render dynamic web pages.

Flask is often referred to as a micro framework. It aims to keep the core of an application simple
yet extensible. Flask does not have built-in abstraction layer for database handling, nor does it have
form a validation support. Instead, Flask supports the extensions to add such functionality to the
application. Some of the popular Flask extensions are discussed later in the tutorial.

2
 Flask – Environment
● Install virtualenv for development environment
Virtualenv is a virtual Python environment builder. It helps a user to create multiple Python
environments side-by-side. Thereby, it can avoid compatibility issues between the different
versions of the libraries.

● The following command installs virtualenv

Pip install virtualenv
● To activate corresponding environment, On Windows, following can be used
.Venv\scripts\activate
● We are now ready to install Flask in this environment.
Pip install Flask

3
 Flask – Application
Code:
from flask import Flask
app = Flask(__name__)

@app.route(“/”)
def index():
return “hello maryam”

if __name__ == “__main__”:
app.run()

Output:

● Flask constructor takes the name of current module (__name__) as argument.

● The route() function of the Flask class is a decorator, which tells the application which.URL should call
the associated function.
app.route(rule, options)
● The rule parameter represents URL binding with the function.
● The options is a list of parameters to be forwarded to the underlying Rule object.

4
 Flask – Routing
● Modern web frameworks use the routing technique to help a user remember application URLs. It is useful
to access the desired page directly without having to navigate from the home page.
● The route() decorator in Flask is used to bind URL to a function. For example −

@app.route(‘/hello’)
def hello_world():
return ‘hello world’

● Here, URL ‘/hello’ rule is bound to the hello_world() function. As a result, if a user
visits http://localhost:5000/hello URL, the output of the hello_world() function will be rendered in the
browser.
● The add_url_rule() function of an application object is also available to bind a URL with a function as
in the above example, route() is used.
● A decorator’s purpose is also served by the following representation −

def hello_world():
return ‘hello world’
app.add_url_rule(‘/’, ‘hello’, hello_world

Code:

5
Output:

6
 Flask – Variable Rules

● It is possible to build a URL dynamically, by adding variable parts to the rule parameter.
● This variable part is marked as <variable-name>.
● It is passed as a keyword argument to the function with which the rule is associated.
● In the following example, the rule parameter of route() decorator contains <name> variable part attached
to URL ‘/hello’.
● Hence, if the http://localhost:5000/hello/TutorialsPoint is entered as a URL in the browser,
‘TutorialPoint’ will be supplied to hello() function as argument.

Code:
from flask import Flask
app = Flask(__name__)

@app.route(‘/hello/<name>’)
def hello_name(name):
return ‘Hello %s!’ % name

if __name__ == ‘__main__’:
app.run(debug = True)

Output:
Hello TutorialsPoint!

7
 Flask – URL Buildings

● The url_for() function is very useful for dynamically building a URL for a specific function.
● The function accepts the name of a function as first argument, and one or more keyword
arguments, each corresponding to the variable part of URL.
Code:
From flask import Flask, redirect, url_for
App = Flask(__name__)

@app.route(‘/admin’)
Def hello_admin():
Return ‘Hello Admin’

@app.route(‘/guest/<guest>’)
Def hello_guest(guest):
Return ‘Hello %s as Guest’ % guest

@app.route(‘/user/<name>’)
Def hello_user(name):
If name ==’admin’:
Return redirect(url_for(‘hello_admin’))
Else:
Return redirect(url_for(‘hello_guest’,guest = name))

If __name__ == ‘__main__’:
App.run(debug = True)

● The above script has a function user(name) which accepts a value to its argument from the URL.
● The User() function checks if an argument received matches ‘admin’ or not.
● If it matches, the application is redirected to the hello_admin() function using url_for(),
otherwise to the hello_guest() function passing the received argument as guest parameter to it.

8
9
Output:

10
11
12
 Flask – HTTP methods

● Http protocol is the foundation of data communication in world wide web.

● Different methods of data retrieval from specified URL are defined in this protocol.
● The following table summarizes different http methods –

● By default, the Flask route responds to the GET requests. However, this preference can be altered by
providing methods argument to route() decorator.
● In order to demonstrate the use of POST method in URL routing, first let us create an HTML form and
use the POST method to send form data to a URL.

Ex: Save the following script as login.html

<html>
<body>
<form action = http://localhost:5000/login method = “post”>
<p>Enter Name:</p>
<p><input type = “text” name = “nm” /></p>
<p><input type = “submit” value = “submit” /></p>
</form>
</body>
</html>
● Now enter the following script in Python shell.
App.py:
From flask import Flask, redirect, url_for, request
App = Flask(__name__)

@app.route(‘/success/<name>’)
Def success(name):
Return ‘welcome %s’ % name

13
@app.route(‘/login’,methods = [‘POST’, ‘GET’])
Def login():
If request.method == ‘POST’:
User = request.form[‘nm’]
Return redirect(url_for(‘success’,name = user))
Else:
User = request.args.get(‘nm’)
Return redirect(url_for(‘success’,name = user))

If __name__ == ‘__main__’:
App.run(debug = True)

Output:

14
 Flask – Templates

● The term ‘web templating system’ refers to designing an HTML script in which the variable data can be
inserted dynamically. A web template system comprises of a template engine, some kind of data source
and a template processor.
● Flask uses jinja2 template engine. A web template contains HTML syntax interspersed placeholders for
variables and expressions (in these case Python expressions) which are replaced values when the
template is rendered.

● Run the following code from Python shell.

From flask import Flask, render_template

App = Flask(__name__)

@app.route(‘/result’)
Def result():
Dict = {‘phy’:50,’che’:60,’maths’:70}
Return render_template(‘result.html’, result = dict)
If __name__ == ‘__main__’:
App.run(debug = True)

● Save the following HTML script as result.html in the templates folder.

<!doctype html>
<html>
<body>
<table border = 1>
{% for key, value in result.items() %}
<tr>
<th> {{ key }} </th>
<td> {{ value }} </td>
</tr>
{% endfor %}
</table>
</body>
</html>

15
 Output:

Flask – Request Object

● The data from a client’s web page is sent to the server as a global request object. In order to process the
request data, it should be imported from the Flask module.
=>Important attributes of request object are listed below –
● Form – It is a dictionary object containing key and value pairs of form parameters and their values.
● Args – parsed contents of query string which is part of URL after question mark (?).
● Cookies – dictionary object holding Cookie names and values.
● Files – data pertaining to uploaded file.
● Method – current request method

Flask – Sending Form Data to Template

● We have already seen that the http method can be specified in URL rule.
● The Form data received by the triggered function can collect it in the form of a dictionary object and
forward it to a template to render it on a corresponding web page

16
Ex Given below is the Python code of application −

17
Output:

18
 Flask – Cookies

• A cookie is stored on a client’s computer in the form of a text file. Its purpose is to remember and track
data pertaining to a client’s usage for better visitor experience and site statistics.

• A Request object contains a cookie’s attribute. It is a dictionary object of all the cookie variables and
their corresponding values, a client has transmitted. In addition to it, a cookie also stores its expiry time,
path and domain name of the site.

• In Flask, cookies are set on response object. Use make_response() function to get response object from
return value of a view function. After that, use the set_cookie() function of response object to store a
cookie.

• Reading back a cookie is easy. The get() method of request.cookies attribute is used to read a cookie.
• In the following Flask application, a simple form opens up as you visit ‘/’ URL.
o @app.route(‘/’)
o Def index():
o Return render_template(‘index.html’)

• This HTML page contains one text input.

Code:
<html>
<body>
<form action = “/setcookie” method = “POST”>
<p><h3>Enter userID</h3></p>
<p><input type = ‘text’ name = ‘nm’/></p>
<p><input type = ‘submit’ value = ‘Login’/></p>
</form>
</body>
</html>

● The Form is posted to ‘/setcookie’ URL. The associated view function sets a Cookie name userID and
renders another page.
Code:
@app.route(‘/setcookie’, methods = [‘POST’, ‘GET’])
Def setcookie():
If request.method == ‘POST’:
User = request.form[‘nm’]
Resp = make_response(render_template(‘readcookie.html’))
Resp.set_cookie(‘userID’, user)
Return resp

19
● ‘Readcookie.html’ contains a hyperlink to another view function getcookie(), which reads back and
displays the cookie value in browser.

Code:
@app.route(‘/getcookie’)
Def getcookie():
Name = request.cookies.get(‘userID’)
Return ‘<h1>welcome ‘+name+’</h1>’

Output:

20
 Flask – Sessions

● Like Cookie, Session data is stored on client. Session is the time interval when a client logs into a server
and logs out of it. The data, which is needed to be held across this session, is stored in the client browser.

● A session with each client is assigned a Session ID. The Session data is stored on top of cookies and the
server signs them cryptographically. For this encryption, a Flask application needs a defined
SECRET_KEY.

● Session object is also a dictionary object containing key-value pairs of session variables and associated
values.

Ex:

21
22
23
 3.Outcomes

Crypto currency application

Tools:
Text Editor:
● Version:17.11
● Text Editor There are lots of text editors are available online to write a code like notepad, sublime text,
word, atom, notepad++, etc.
● But I recommend Best Text Editor or IDE is VS Code.
● VS Code(Visual Studio Code) is developed and maintained by Microsoft.
MYSQL DATABASE CONNENCTION:
● Version:8.0.39
● SQL is a standard language for storing, maniping and retrieving data in databases.
● Our SQL tutorial will teach you how to use SQL in: MySQL, SQL Server, MS Access, Oracle, Sybase,
Informix, Postgres, and other database system

About crypto currency web application:

● This is a website for a crypto currency company called Finexo. It is likely a platform for buying, selling,
and trading cryptocurrencies.
● Cryptocurrencies are decentralized, meaning that their supply is not controlled by any government or
institution, which can help protect against inflation.
● Services: The navigation bar suggests various services, including information about the company,
services provided, explanations for using the platform, information about the team, and a login option
for team accounts.
● Safe And Secure:No one can access your funds unless they gain access to your crypto wallet’s private
key. If you forget or lose your key, you cannot recover your funds.It’s more secure if investors keep
crypto assets in their own wallets.
● Currency Exchanges Are Done Effortlessly:Investors can purchase cryptocurrency using currencies like
the U.S. Dollar, Indian rupee, or European euro. Various cryptocurrency exchanges and wallets help
investors trade crypto and convert currencies with minimum transactioncharges across different wallets.

24
Code:
App.py
From flask import Flask, session, render_template, url_for, request, redirect
Import os
From flask_mysqldb import MySQL

App = Flask(__name__)
Mysql = MySQL(app)
App.secret_key = “sumit”

UPLOAD_FOLDER =’static/uploads’
App.config[‘UPLOAD_FOLDER’] = UPLOAD_FOLDER

App.config[‘MYSQL_USER’] = ‘root’
App.config[‘MYSQL_PASSWORD’] = ‘1234’
App.config[‘MYSQL_DB’] = ‘finexo’

@app.route(‘/’)
Def index():
Cur = mysql.connection.cursor()
Query = “SELECT * FROM team”
Cur.execute(query)
Results = cur.fetchall()
Cur.close()
teamList = []
for team in results:
dic = {
“id”: team[0],
“name”: team[1],
“post”: team[2],
“photo”: team[3],
}
teamList.append(dic)

print(teamList)

if ‘email’ in session:
return render_template(‘admin_home.html’, team = teamList)
return render_template(‘index.html’, team = teamList)

@app.route(‘/about’)

25
Def about():
Return render_template(‘about.html’)

@app.route(‘/service’)
Def service():
Return render_template(‘service.html’)

@app.route(‘/team’)
Def team():
Return render_template(‘team.html’)

@app.route(‘/why’)
Def why():
Return render_template(‘why.html’)

@app.route(‘/login’, methods = [‘GET’,’POST’])

Def login():
If request.method == ‘GET’:
Session.pop(‘email’, None)
Return render_template(‘login.html’)
Else:
Data = request.form
If data[‘email’] [email protected] data[‘password’] == ‘12345’:
Session [‘email’] = data[‘email’]
Return redirect(url_for(‘index’))
Else:
Return render_template(‘login.html’, error = “Invalid id or password”)

@app.route(‘/add_team’, methods = [‘GET’, ‘POST’])

Def add_team():
If request.method ==’GET’:
Return render_template(‘add_team.html’)
Else:
Data = request.form
Image = request.files[‘profile’]
imageName = image.filename

print(data)
print(imageName)
image.save(os.path.join(app.config[‘UPLOAD_FOLDER’],imageName))
cur = mysql.connection.cursor()
query = “INSERT INTO team (name, post, profile) VALUES (%s, %s, %s)”
cur.execute(query, (data[‘name’], data[‘post’], imageName))
cur.connection.commit()
cur.close()

26
 return redirect(url_for(‘index’))

@app.route(‘/delete<int:id>’)
Def delete(id):
If ‘email’ in session:
Cur = mysql.connection.cursor()
Query = “DELETE FROM team WHERE team_id = %s”
Cur.execute(query,(id,))
Cur.connection.commit()
Cur.close()
Return redirect(url_for(‘index’))

@app.route(‘/update/<int:id>’, methods = [‘GET’, ‘POST’])

Def update_team(id):
If request.method ==’GET’:
Cur = mysql.connection.cursor()
Query = “SELECT * FROM team WHERE team_id = %s”
Cur.execute(query,(id,))
Result = cur.fetchone()
Cur.close()
Dic = {
“id”: result[0],
“name”: result[1],
“post”: result[2],
“photo”: result[3]
}
Print(dic)
Return render_template(‘update_team.html’, team = dic)
Else:
Data = request.form
Cur = mysql.connection.cursor()
If request.files[‘profile’]:
Print(“has Image”)
Image = request.files[‘profile’]
imageName = image.filename
image.save(os.path.join(app.config[‘UPLOAD_FOLDER’],imageName))
query = “UPDATE team SET name = %s, post = %s, profile = %s WHERE team_id = %s”
cur.execute(query, (data[‘name’], data[‘post’], imageName, id))

else:
query = “UPDATE team SET name = %s, post = %s WHERE team_id = %s”
cur.execute(query, (data[‘name’], data[‘post’], id))
print(“No Image”)

27
 mysql.connection.commit()
cur.close()
return redirect(url_for(‘index’))

if __name__ == ‘__main__’:
app.run(debug=True)

Index.html
<!DOCTYPE html>
<html>

<head>
<!—Basic 🡪
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<!—Mobile Metas 🡪
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no” />
<!—Site Metas 🡪
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta name=”author” content=”” />
<link rel=”shortcut icon” href=”../static/mages/favicon.png” type=””>

<title> Finexo </title>

<!—bootstrap core css 🡪

<link rel=”stylesheet” type=”text/css” href=”{{url_for(‘static’, filename=’css/bootstrap.css’)}}” />

<!—fonts style 🡪
<link href=https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap
rel=”stylesheet”>

<!—owl slider stylesheet 🡪

<link rel=”stylesheet” type=”text/css”
href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css />

<!—font awesome style 🡪

<link href=”{{url_for(‘static’, filename=’css/font-awesome.min.css’)}}” rel=”stylesheet” />

<!—Custom styles for this template 🡪

<link href=”{{url_for(‘static’, filename=’css/style.css’)}}” rel=”stylesheet” />
<!—responsive style 🡪
<link href=”{{url_for(‘static’, filename=’css/responsive.css’)}}” rel=”stylesheet” />

28
</head>

<body>

<div class=”hero_area”>

<div class=”hero_bg_box”>
<div class=”bg_img_box”>
<img src=”../static/images/hero-bg.png” alt=””>
</div>
</div>

<!—header section strats 🡪

<header class=”header_section”>
<div class=”container-fluid”>
<nav class=”navbar navbar-expand-lg custom_nav-container “>
<a class=”navbar-brand” href=’/’>
<span>
Finexo
</span>
</a>

<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-

target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-expanded=”false”
aria-label=”Toggle navigation”>
<span class=””> </span>
</button>

<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>

<ul class=”navbar-nav “>
<li class=”nav-item active”>
<a class=”nav-link” href=”/”>Home <span class=”sr-only”>(current)</span></a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/about”> About</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/service”>Services</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/why”>Why Us</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/team”>Team</a>
</li>

29
 <li class=”nav-item”>
<a class=”nav-link” href=”#”> <I class=”fa fa-user” aria-hidden=”true”></i> Login</a>
</li>
<form class=”form-inline”>
<button class=”btn my-2 my-sm-0 nav_search-btn” type=”submit”>
<I class=”fa fa-search” aria-hidden=”true”></i>
</button>
</form>
</ul>
</div>
</nav>
</div>
</header>
<!—end header section 🡪
<!—slider section 🡪
<section class=”slider_section “>
<div id=”customCarousel1” class=”carousel slide” data-ride=”carousel”>
<div class=”carousel-inner”>
<div class=”carousel-item active”>
<div class=”container “>
<div class=”row”>
<div class=”col-md-6 “>
<div class=”detail-box”>
<h1>
Crypto <br>
Currency
</h1>
<p>
Explicabo esse amet tempora quibusdam laudantium, laborum eaque magnam fugiat hic? Esse
dicta aliquid error repudiandae earum suscipit fugiat molestias, veniam, vel architecto veritatis delectus
repellat modi impedit sequi.
</p>
<div class=”btn-box”>
<a href=”” class=”btn1”>
Read More
</a>
</div>
</div>
</div>
<div class=”col-md-6”>
<div class=”img-box”>
<img src=”../static/images/slider-img.png” alt=””>
</div>
</div>
</div>

30
 </div>
</div>
<div class=”carousel-item “>
<div class=”container “>
<div class=”row”>
<div class=”col-md-6 “>
<div class=”detail-box”>
<h1>
Crypto <br>
Currency
</h1>
<p>
Explicabo esse amet tempora quibusdam laudantium, laborum eaque magnam fugiat hic? Esse
dicta aliquid error repudiandae earum suscipit fugiat molestias, veniam, vel architecto veritatis delectus
repellat modi impedit sequi.
</p>
<div class=”btn-box”>
<a href=”” class=”btn1”>
Read More
</a>
</div>
</div>
</div>
<div class=”col-md-6”>
<div class=”img-box”>
<img src=”../static/images/slider-img.png” alt=””>
</div>
</div>
</div>
</div>
</div>
<div class=”carousel-item”>
<div class=”container “>
<div class=”row”>
<div class=”col-md-6 “>
<div class=”detail-box”>
<h1>
Crypto <br>
Currency
</h1>
<p>
Explicabo esse amet tempora quibusdam laudantium, laborum eaque magnam fugiat hic? Esse
dicta aliquid error repudiandae earum suscipit fugiat molestias, veniam, vel architecto veritatis delectus
repellat modi impedit sequi.
</p>

31
 <div class=”btn-box”>
<a href=”” class=”btn1”>
Read More
</a>
</div>
</div>
</div>
<div class=”col-md-6”>
<div class=”img-box”>
<img src=”../static/images/slider-img.png” alt=””>
</div>
</div>
</div>
</div>
</div>
</div>
<ol class=”carousel-indicators”>
<li data-target=”#customCarousel1” data-slide-to=”0” class=”active”></li>
<li data-target=”#customCarousel1” data-slide-to=”1”></li>
<li data-target=”#customCarousel1” data-slide-to=”2”></li>
</ol>
</div>

</section>
<!—end slider section 🡪
</div>

<!—service section 🡪

<section class=”service_section layout_padding”>

<div class=”service_container”>
<div class=”container “>
<div class=”heading_container heading_center”>
<h2>
Our <span>Services</span>
</h2>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered
alteration
</p>
</div>
<div class=”row”>
<div class=”col-md-4 “>
<div class=”box “>

32
 <div class=”img-box”>
<img src=”../static/images/s1.png” alt=””>
</div>
<div class=”detail-box”>
<h5>
Currency Wallet
</h5>
<p>
Fact that a reader will be distracted by the readable content of a page when looking at its layout.
The
Point of using
</p>
<a href=””>
Read More
</a>
</div>
</div>
</div>
<div class=”col-md-4 “>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/s2.png” alt=””>
</div>
<div class=”detail-box”>
<h5>
Security Storage
</h5>
<p>
Fact that a reader will be distracted by the readable content of a page when looking at its layout.
The
Point of using
</p>
<a href=””>
Read More
</a>
</div>
</div>
</div>
<div class=”col-md-4 “>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/s3.png” alt=””>
</div>
<div class=”detail-box”>
<h5>

33
 Expert Support
</h5>
<p>
Fact that a reader will be distracted by the readable content of a page when looking at its layout.
The
Point of using
</p>
<a href=””>
Read More
</a>
</div>
</div>
</div>
</div>
<div class=”btn-box”>
<a href=””>
View All
</a>
</div>
</div>
</div>
</section>

<!—end service section 🡪

<!—about section 🡪

<section class=”about_section layout_padding”>

<div class=”container “>
<div class=”heading_container heading_center”>
<h2>
About <span>Us</span>
</h2>
<p>
Magni quod blanditiis non minus sed aut voluptatum illum quisquam aspernatur ullam vel beatae
rerum ipsum voluptatibus
</p>
</div>
<div class=”row”>
<div class=”col-md-6 “>
<div class=”img-box”>
<img src=”../static/images/about-img.png” alt=””>
</div>
</div>

34
 <div class=”col-md-6”>
<div class=”detail-box”>
<h3>
We Are Finexo
</h3>
<p>
There are many variations of passages of Lorem Ipsum available, but the majority have suffered
alteration
In some form, by injected humour, or randomised words which don’t look even slightly believable.
If you
Are going to use a passage of Lorem Ipsum, you need to be sure there isn’t anything embarrassing
hidden in
The middle of text. All
</p>
<p>
Molestiae odio earum non qui cumque provident voluptates, repellendus exercitationem,
possimus at iste corrupti officiis unde alias eius ducimus reiciendis soluta eveniet. Nobis ullam ab omnis
quasi expedita.
</p>
<a href=””>
Read More
</a>
</div>
</div>
</div>
</div>
</section>

<!—end about section 🡪

<!—why section 🡪

<section class=”why_section layout_padding”>

<div class=”container”>
<div class=”heading_container heading_center”>
<h2>
Why Choose <span>Us</span>
</h2>
</div>
<div class=”why_container”>
<div class=”box”>
<div class=”img-box”>
<img src=”../static/images/w1.png” alt=””>
</div>
<div class=”detail-box”>

35
 <h5>
Expert Management
</h5>
<p>
Incidunt odit rerum tenetur alias architecto asperiores omnis cumque doloribus aperiam
numquam! Eligendi corrupti, molestias laborum dolores quod nisi vitae voluptate ipsa? In tempore
voluptate ducimus officia id, aspernatur nihil.
Tempore laborum nesciunt ut veniam, nemo officia ullam repudiandae repellat veritatis unde
reiciendis possimus animi autem natus
</p>
</div>
</div>
<div class=”box”>
<div class=”img-box”>
<img src=”../static/images/w2.png” alt=””>
</div>
<div class=”detail-box”>
<h5>
Secure Investment
</h5>
<p>
Incidunt odit rerum tenetur alias architecto asperiores omnis cumque doloribus aperiam
numquam! Eligendi corrupti, molestias laborum dolores quod nisi vitae voluptate ipsa? In tempore
voluptate ducimus officia id, aspernatur nihil.
Tempore laborum nesciunt ut veniam, nemo officia ullam repudiandae repellat veritatis unde
reiciendis possimus animi autem natus
</p>
</div>
</div>
<div class=”box”>
<div class=”img-box”>
<img src=”../static/images/w3.png” alt=””>
</div>
<div class=”detail-box”>
<h5>
Instant Trading
</h5>
<p>
Incidunt odit rerum tenetur alias architecto asperiores omnis cumque doloribus aperiam
numquam! Eligendi corrupti, molestias laborum dolores quod nisi vitae voluptate ipsa? In tempore
voluptate ducimus officia id, aspernatur nihil.
Tempore laborum nesciunt ut veniam, nemo officia ullam repudiandae repellat veritatis unde
reiciendis possimus animi autem natus
</p>
</div>

36
 </div>
<div class=”box”>
<div class=”img-box”>
<img src=”../static/images/w4.png” alt=””>
</div>
<div class=”detail-box”>
<h5>
Happy Customers
</h5>
<p>
Incidunt odit rerum tenetur alias architecto asperiores omnis cumque doloribus aperiam
numquam! Eligendi corrupti, molestias laborum dolores quod nisi vitae voluptate ipsa? In tempore
voluptate ducimus officia id, aspernatur nihil.
Tempore laborum nesciunt ut veniam, nemo officia ullam repudiandae repellat veritatis unde
reiciendis possimus animi autem natus
</p>
</div>
</div>
</div>
<div class=”btn-box”>
<a href=””>
Read More
</a>
</div>
</div>
</section>

<!—end why section 🡪

<!—team section 🡪
<section class=”team_section layout_padding”>
<div class=”container-fluid”>
<div class=”heading_container heading_center”>
<h2 class=””>
Our <span> Team</span>
</h2>
</div>

<div class=”team_container”>
<div class=”row”>
{% for team in team %}
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/uploads/{{team[‘photo’]}}” class=”img1” alt=””>

37
 </div>
<div class=”detail-box”>
<h5>
{{team[‘name’]}}
</h5>
<p>
{{team[‘post’]}}
</p>
</div>

</div>
</div>
{% endfor %}
<!-- <div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-2.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Nancy White
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>

38
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-3.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Earl Martinez
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-4.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Josephine Allard
</h5>
<p>
Marketing Head
</p>
</div>

39
 <div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>🡪
<!—end team section 🡪

<!—client section 🡪

<section class=”client_section layout_padding”>

<div class=”container”>
<div class=”heading_container heading_center psudo_white_primary mb_45”>
<h2>
What says our <span>Customers</span>
</h2>
</div>
<div class=”carousel-wrap “>
<div class=”owl-carousel client_owl-carousel”>
<div class=”item”>
<div class=”box”>
<div class=”img-box”>
<img src=”../static/images/client1.jpg” alt=”” class=”box-img”>
</div>
<div class=”detail-box”>
<div class=”client_id”>
<div class=”client_info”>

40
 <h6>
LusDen
</h6>
<p>
Magna aliqua. Ut
</p>
</div>
<I class=”fa fa-quote-left” aria-hidden=”true”></i>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p>
</div>
</div>
</div>
<div class=”item”>
<div class=”box”>
<div class=”img-box”>
<img src=”../static/images/client2.jpg” alt=”” class=”box-img”>
</div>
<div class=”detail-box”>
<div class=”client_id”>
<div class=”client_info”>
<h6>
Zen Court
</h6>
<p>
Magna aliqua. Ut
</p>
</div>
<I class=”fa fa-quote-left” aria-hidden=”true”></i>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p>
</div>
</div>
</div>
<div class=”item”>
<div class=”box”>
<div class=”img-box”>
<img src=”../static/images/client1.jpg” alt=”” class=”box-img”>
</div>
<div class=”detail-box”>
<div class=”client_id”>

41
 <div class=”client_info”>
<h6>
LusDen
</h6>
<p>
Magna aliqua. Ut
</p>
</div>
<I class=”fa fa-quote-left” aria-hidden=”true”></i>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p>
</div>
</div>
</div>
<div class=”item”>
<div class=”box”>
<div class=”img-box”>
<img src=”../static/images/client2.jpg” alt=”” class=”box-img”>
</div>
<div class=”detail-box”>
<div class=”client_id”>
<div class=”client_info”>
<h6>
Zen Court
</h6>
<p>
Magna aliqua. Ut
</p>
</div>
<I class=”fa fa-quote-left” aria-hidden=”true”></i>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis </p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!—end client section 🡪

42
<!—info section 🡪

<section class=”info_section layout_padding2”>

<div class=”container”>
<div class=”row”>
<div class=”col-md-6 col-lg-3 info_col”>
<div class=”info_contact”>
<h4>
Address
</h4>
<div class=”contact_link_box”>
<a href=””>
<I class=”fa fa-map-marker” aria-hidden=”true”></i>
<span>
Location
</span>
</a>
<a href=””>
<I class=”fa fa-phone” aria-hidden=”true”></i>
<span>
Call +91 9426447382
</span>
</a>
<a href=””>
<I class=”fa fa-envelope” aria-hidden=”true”></i>
<span>
[email protected]
</span>
</a>
</div>
</div>
<div class=”info_social”>
<a href=””>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-instagram” aria-hidden=”true”></i>

43
 </a>
</div>
</div>
<div class=”col-md-6 col-lg-3 info_col”>
<div class=”info_detail”>
<h4>
Info
</h4>
<p>
Necessary, making this the first true generator on the Internet. It uses a dictionary of over 200
Latin words, combined with a handful
</p>
</div>
</div>
<div class=”col-md-6 col-lg-2 mx-auto info_col”>
<div class=”info_link_box”>
<h4>
Links
</h4>
<div class=”info_links”>
<a class=”active” href=”/”>
Home
</a>
<a class=”” href=”/about”>
About
</a>
<a class=”” href=”/service”>
Services
</a>
<a class=”” href=”/why”>
Why Us
</a>
<a class=”” href=”/team”>
Team
</a>
</div>
</div>
</div>
<div class=”col-md-6 col-lg-3 info_col “>
<h4>
FOLLOW
</h4>
<form action=”#”>
<input type=”text” placeholder=”Enter email” />
<button type=”submit”>

44
 Subscribe
</button>
</form>
</div>
</div>
</div>
</section>

<!—end info section 🡪

<!—footer section 🡪
<section class=”footer_section”>
<div class=”container”>
<p>
&copy; <span id=”displayYear”></span> All Rights Reserved By
<a href=https://html.design/>Free Html Templates</a>
</p>
</div>
</section>
<!—footer section 🡪

<!—jQery 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/jquery-3.4.1.min.js’)}}”></script>
<!—popper js 🡪
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
crossorigin=”anonymous”>
</script>
<!—bootstrap js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/bootstrap.js’)}}”></script>
<!—owl slider 🡪
<script type=”text/javascript”
src=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js>
</script>
<!—custom js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/custom.js’)}}”></script>
<!—Google Map 🡪
<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-
4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap>
</script>
<!—End Google Map 🡪

</body>

</html>

45
Login.html
<!DOCTYPE html>
<html>

<head>
<!—Basic 🡪
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<!—Mobile Metas 🡪
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no” />
<!—Site Metas 🡪
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta name=”author” content=”” />
<link rel=”shortcut icon” href=”../static/mages/favicon.png” type=””>

<title> Finexo </title>

<!—bootstrap core css 🡪

<link rel=”stylesheet” type=”text/css” href=”{{url_for(‘static’, filename=’css/bootstrap.css’)}}” />

<!—fonts style 🡪
<link
href=https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap
rel=”stylesheet”>

<!—owl slider stylesheet 🡪

<link rel=”stylesheet” type=”text/css”
href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css />

<!—font awesome style 🡪

<link href=”{{url_for(‘static’, filename=’css/font-awesome.min.css’)}}” rel=”stylesheet” />

<!—Custom styles for this template 🡪

<link href=”{{url_for(‘static’, filename=’css/style.css’)}}” rel=”stylesheet” />
<!—responsive style 🡪
<link href=”{{url_for(‘static’, filename=’css/responsive.css’)}}” rel=”stylesheet” />

</head>

<body>

<main class=”container d-flex justify-content-center align-items-center”style=”height: 100vh;”>

46
 <form class=”card p-4” action=”/login” method=”POST”>
<div class=”mb-3”>
<label for=”exampleInputEmail1” class=”form-label”>Email address</label>
<input type=”email” name=”email” class=”form-control” id=”exampleInputEmail1” aria-
describedby=”emailHelp”>

<div class=”mb-3”>
<label for=”exampleInputPassword1” class=”form-label”>Password</label>
<input type=”password” name=”password” class=”form-control”
id=”exampleInputPassword1”>
</div>

<button type=”submit” class=”btn btn-primary”>Submit</button>

</form>
</main>
{% if error ==”Invalid id or password” %}
<script>
Alert(“Invalid id or password”);
</script>
{% endif %}

<!—jQery 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/jquery-
3.4.1.min.js’)}}”></script>
<!—popper js 🡪
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
integrity=”sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
crossorigin=”anonymous”>
</script>
<!—bootstrap js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/bootstrap.js’)}}”></script>
<!—owl slider 🡪
<script type=”text/javascript”
src=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js>
</script>
<!—custom js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/custom.js’)}}”></script>
<!—Google Map 🡪
<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-
4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap>
</script>
<!—End Google Map 🡪

47
</body>

</html>

Service.html
<!DOCTYPE html>
<html>

<head>
<!—Basic 🡪
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<!—Mobile Metas 🡪
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no” />
<!—Site Metas 🡪
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta name=”author” content=”” />
<link rel=”shortcut icon” href=”../static/mages/favicon.png” type=””>

<title> Finexo </title>

<!—bootstrap core css 🡪

<link rel=”stylesheet” type=”text/css” href=”{{url_for(‘static’, filename=’css/bootstrap.css’)}}” />

<!—fonts style 🡪
<link
href=https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap
rel=”stylesheet”>

<!—owl slider stylesheet 🡪

<link rel=”stylesheet” type=”text/css”
href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css />

<!—font awesome style 🡪

<link href=”{{url_for(‘static’, filename=’css/font-awesome.min.css’)}}” rel=”stylesheet” />

<!—Custom styles for this template 🡪

<link href=”{{url_for(‘static’, filename=’css/style.css’)}}” rel=”stylesheet” />
<!—responsive style 🡪
<link href=”{{url_for(‘static’, filename=’css/responsive.css’)}}” rel=”stylesheet” />

</head>

<body>

48
 <nav class=”navbar navbar-expand-lg bg-body-tertiary” style=”width: 100vw;”>

<div class=”container-fluid”>
<a class=”navbar-brand” href=”/”>Cryptoc</a>
<button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-
target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-
expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
<ul class=”navbar-nav me-auto mb-2 mb-lg-0”>
<li class=”nav-item”>
<a class=”nav-link active” aria-current=”page” href=”/”>Home</a>
</li>
</ul>
<a class=”btn btn-outline-danger” style=”margin-left: auto\;” href=”/login”>logout</a>
</div>
</div>
</nav>

<main class=”container”>
<h1>Add Team</h1>
<form action=”/add_team” method=”post” class=”card p-5” enctype=”multipart/form-data”>
<div class=”row mb-3”>
<label for=”inputEmail3” class=”col-sm-2 col-form-label”>Name</label>
<div class=”col-sm-10”>
<input type=”text” name=”name” class=”form-control” id=”inputEmail3”>
</div>
</div>
<div class=”row mb-3”>
<label for=”profile” class=”col-sm-2 col-form-label”>Post</label>
<div class=”col-sm-10”>
<input type=”text” name=”post” class=”form-control” id=”inputPassword3”>
</div>
</div>
<div class=”row mb-3”>
<label for=”profile” class=”col-sm-2 col-form-label”>Profile</label>
<div class=”col-sm-10”>
<input type=”file” name=”profile” class=”form-control” id=”profile”>
</div>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>

49
 </form>
</main>

<!—jQery 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/jquery-
3.4.1.min.js’)}}”></script>
<!—popper js 🡪
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
integrity=”sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
crossorigin=”anonymous”>
</script>
<!—bootstrap js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/bootstrap.js’)}}”></script>
<!—owl slider 🡪
<script type=”text/javascript”
src=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js>
</script>
<!—custom js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/custom.js’)}}”></script>
<!—Google Map 🡪
<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-
4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap>
</script>
<!—End Google Map 🡪

</body>

</html>

Add_team.html
<!DOCTYPE html>
<html>

<head>
<!—Basic 🡪
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<!—Mobile Metas 🡪
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no” />
<!—Site Metas 🡪
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta name=”author” content=”” />
<link rel=”shortcut icon” href=”../static/mages/favicon.png” type=””>

50
 <title> Finexo </title>

<!—bootstrap core css 🡪

<link rel=”stylesheet” type=”text/css” href=”{{url_for(‘static’, filename=’css/bootstrap.css’)}}” />

<!—fonts style 🡪
<link
href=https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap
rel=”stylesheet”>

<!—owl slider stylesheet 🡪

<link rel=”stylesheet” type=”text/css”
href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css />

<!—font awesome style 🡪

<link href=”{{url_for(‘static’, filename=’css/font-awesome.min.css’)}}” rel=”stylesheet” />

<!—Custom styles for this template 🡪

<link href=”{{url_for(‘static’, filename=’css/style.css’)}}” rel=”stylesheet” />
<!—responsive style 🡪
<link href=”{{url_for(‘static’, filename=’css/responsive.css’)}}” rel=”stylesheet” />

</head>

<body>

<nav class=”navbar navbar-expand-lg bg-body-tertiary” style=”width: 100vw;”>

<div class=”container-fluid”>
<a class=”navbar-brand” href=”/”>Cryptoc</a>
<button class=”navbar-toggler” type=”button” data-bs-toggle=”collapse” data-bs-
target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-
expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>
<ul class=”navbar-nav me-auto mb-2 mb-lg-0”>
<li class=”nav-item”>
<a class=”nav-link active” aria-current=”page” href=”/”>Home</a>
</li>
</ul>
<a class=”btn btn-outline-danger” style=”margin-left: auto\;” href=”/login”>logout</a>
</div>

51
 </div>
</nav>

<main class=”container”>
<h1>Admin Home</h1>
<a href=”/add_team” class=”btn btn-primary”>Add Team</a>
<hr>
<h3>Teams</h3>
<div class=”d-flex”>
{% for team in team %}
<div class=”card mx-3” style=”width: 18rem;”>
<img src=”../static/uploads/{{team[‘photo’]}}” class=”card-img-top” alt=”…”>
<div class=”card-body”>
<h5 class=”card-title”>{{team[‘name’]}}</h5>
<p class=”card-text”>{{team[‘post’]}}</p>
<a href=”/update/{{team[‘id’]}}” class=”btn btn-warning”>Update</a>
<a href=”/delete{{team[‘id’]}}” class=”btn btn-danger”>Delete</a>
</div>
</div>
{% endfor %}
</div>
</main>

<!—jQery 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/jquery-
3.4.1.min.js’)}}”></script>
<!—popper js 🡪
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
integrity=”sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
crossorigin=”anonymous”>
</script>
<!—bootstrap js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/bootstrap.js’)}}”></script>
<!—owl slider 🡪
<script type=”text/javascript”
src=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js>
</script>
<!—custom js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/custom.js’)}}”></script>
<!—Google Map 🡪
<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-
4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap>
</script>

52
<!—End Google Map 🡪

</body>

</html>

Admin_home.html
<!DOCTYPE html>
<html>

<head>
<!—Basic 🡪
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<!—Mobile Metas 🡪
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no” />
<!—Site Metas 🡪
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta name=”author” content=”” />
<link rel=”shortcut icon” href=”../static/images/favicon.png” type=””>

<title> Finexo </title>

<!—bootstrap core css 🡪

<link rel=”stylesheet” type=”text/css” href=”{{url_for(‘static’, filename=’css/bootstrap.css’)}}” />

<!—fonts style 🡪
<link
href=https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap
rel=”stylesheet”>

<!—owl slider stylesheet 🡪

<link rel=”stylesheet” type=”text/css”
href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css />

<!—font awesome style 🡪

<link href=”{{url_for(‘static’, filename=’css/font-awesome.min.css’)}}” rel=”stylesheet” />

<!—Custom styles for this template 🡪

<link href=”{{url_for(‘static’, filename=’css/style.css’)}}” rel=”stylesheet” />
<!—responsive style 🡪
<link href=”{{url_for(‘static’, filename=’css/responsive.css’)}}” rel=”stylesheet” />

</head>

53
<body class=”sub_page”>

<div class=”hero_area”>

<div class=”hero_bg_box”>
<div class=”bg_img_box”>
<img src=”../static/images/hero-bg.png” alt=””>
</div>
</div>

<!—header section strats 🡪

<header class=”header_section”>
<div class=”container-fluid”>
<nav class=”navbar navbar-expand-lg custom_nav-container “>
<a class=”navbar-brand” href=”/”>
<span>
Finexo
</span>
</a>

<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-

target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-
expanded=”false” aria-label=”Toggle navigation”>
<span class=””> </span>
</button>

<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>

<ul class=”navbar-nav “>
<li class=”nav-item “>
<a class=”nav-link” href=”/”>Home </a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/about”> About</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/service”>Services</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/why”>Why Us</a>
</li>
<li class=”nav-item active”>
<a class=”nav-link” href=”/team”>Team <span class=”sr-only”>(current)</span> </a>
</li>
<li class=”nav-item”>

54
 <a class=”nav-link” href=”#”> <I class=”fa fa-user” aria-hidden=”true”></i> Login</a>
</li>
<form class=”form-inline”>
<button class=”btn my-2 my-sm-0 nav_search-btn” type=”submit”>
<I class=”fa fa-search” aria-hidden=”true”></i>
</button>
</form>
</ul>
</div>
</nav>
</div>
</header>
<!—end header section 🡪
</div>

<!—team section 🡪
<section class=”team_section layout_padding”>
<div class=”container-fluid”>
<div class=”heading_container heading_center”>
<h2 class=””>
Our <span> Team</span>
</h2>
</div>

<div class=”team_container”>
<div class=”row”>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-1.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Joseph Brown
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>

55
 </a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-2.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Nancy White
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>

56
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-3.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Earl Martinez
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-4.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Josephine Allard
</h5>
<p>
Marketing Head
</p>
</div>

57
 <div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!—end team section 🡪

<!—info section 🡪

<section class=”info_section layout_padding2”>

<div class=”container”>
<div class=”row”>
<div class=”col-md-6 col-lg-3 info_col”>
<div class=”info_contact”>
<h4>
Address
</h4>
<div class=”contact_link_box”>
<a href=””>
<I class=”fa fa-map-marker” aria-hidden=”true”></i>
<span>
Location
</span>
</a>
<a href=””>
<I class=”fa fa-phone” aria-hidden=”true”></i>
<span>

58
 Call +91 9426447382
</span>
</a>
<a href=””>
<I class=”fa fa-envelope” aria-hidden=”true”></i>
<span>
[email protected]
</span>
</a>
</div>
</div>
<div class=”info_social”>
<a href=””>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
</div>
</div>
<div class=”col-md-6 col-lg-3 info_col”>
<div class=”info_detail”>
<h4>
Info
</h4>
<p>
Necessary, making this the first true generator on the Internet. It uses a dictionary of over
200 Latin words, combined with a handful
</p>
</div>
</div>
<div class=”col-md-6 col-lg-2 mx-auto info_col”>
<div class=”info_link_box”>
<h4>
Links
</h4>
<div class=”info_links”>
<a class=”active” href=”/”>
Home

59
 </a>
<a class=”” href=”/about”>
About
</a>
<a class=”” href=”/service”>
Services
</a>
<a class=”” href=”/why”>
Why Us
</a>
<a class=”” href=”/team”>
Team
</a>
</div>
</div>
</div>
<div class=”col-md-6 col-lg-3 info_col “>
<h4>
Subscribe
</h4>
<form action=”#”>
<input type=”text” placeholder=”Enter email” />
<button type=”submit”>
Subscribe
</button>
</form>
</div>
</div>
</div>
</section>

<!—end info section 🡪

<!—footer section 🡪
<section class=”footer_section”>
<div class=”container”>
<p>
&copy; <span id=”displayYear”></span> All Rights Reserved By
<a href=https://html.design/>Free Html Templates</a>
</p>
</div>
</section>
<!—footer section 🡪

<!—jQery 🡪

60
 <script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/jquery-
3.4.1.min.js’)}}”></script>
<!—popper js 🡪
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
integrity=”sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
crossorigin=”anonymous”>
</script>
<!—bootstrap js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/bootstrap.js’)}}”></script>
<!—owl slider 🡪
<script type=”text/javascript”
src=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js>
</script>
<!—custom js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/custom.js’)}}”></script>
<!—Google Map 🡪
<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-
4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap>
</script>
<!—End Google Map 🡪

</body>

</html>

Team.html
<!DOCTYPE html>
<html>

<head>
<!—Basic 🡪
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<!—Mobile Metas 🡪
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no” />
<!—Site Metas 🡪
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta name=”author” content=”” />
<link rel=”shortcut icon” href=”../static/images/favicon.png” type=””>

<title> Finexo </title>

<!—bootstrap core css 🡪

61
<link rel=”stylesheet” type=”text/css” href=”{{url_for(‘static’, filename=’css/bootstrap.css’)}}” />

<!—fonts style 🡪
<link
href=https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap
rel=”stylesheet”>

<!—owl slider stylesheet 🡪

<link rel=”stylesheet” type=”text/css”
href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css />

<!—font awesome style 🡪

<link href=”{{url_for(‘static’, filename=’css/font-awesome.min.css’)}}” rel=”stylesheet” />

<!—Custom styles for this template 🡪

<link href=”{{url_for(‘static’, filename=’css/style.css’)}}” rel=”stylesheet” />
<!—responsive style 🡪
<link href=”{{url_for(‘static’, filename=’css/responsive.css’)}}” rel=”stylesheet” />

</head>

<body class=”sub_page”>

<div class=”hero_area”>

<div class=”hero_bg_box”>
<div class=”bg_img_box”>
<img src=”../static/images/hero-bg.png” alt=””>
</div>
</div>

<!—header section strats 🡪

<header class=”header_section”>
<div class=”container-fluid”>
<nav class=”navbar navbar-expand-lg custom_nav-container “>
<a class=”navbar-brand” href=”/”>
<span>
Finexo
</span>
</a>

<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-

target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-
expanded=”false” aria-label=”Toggle navigation”>
<span class=””> </span>

62
 </button>

<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>

<ul class=”navbar-nav “>
<li class=”nav-item “>
<a class=”nav-link” href=”/”>Home </a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/about”> About</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/service”>Services</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/why”>Why Us</a>
</li>
<li class=”nav-item active”>
<a class=”nav-link” href=”/team”>Team <span class=”sr-only”>(current)</span> </a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”> <I class=”fa fa-user” aria-hidden=”true”></i> Login</a>
</li>
<form class=”form-inline”>
<button class=”btn my-2 my-sm-0 nav_search-btn” type=”submit”>
<I class=”fa fa-search” aria-hidden=”true”></i>
</button>
</form>
</ul>
</div>
</nav>
</div>
</header>
<!—end header section 🡪
</div>

<!—team section 🡪
<section class=”team_section layout_padding”>
<div class=”container-fluid”>
<div class=”heading_container heading_center”>
<h2 class=””>
Our <span> Team</span>
</h2>
</div>

<div class=”team_container”>

63
<div class=”row”>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-1.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Joseph Brown
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-2.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Nancy White
</h5>
<p>
Marketing Head
</p>

64
 </div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-3.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Earl Martinez
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>

65
 </a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-4.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Josephine Allard
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!—end team section 🡪

66
<!—info section 🡪

<section class=”info_section layout_padding2”>

<div class=”container”>
<div class=”row”>
<div class=”col-md-6 col-lg-3 info_col”>
<div class=”info_contact”>
<h4>
Address
</h4>
<div class=”contact_link_box”>
<a href=””>
<I class=”fa fa-map-marker” aria-hidden=”true”></i>
<span>
Location
</span>
</a>
<a href=””>
<I class=”fa fa-phone” aria-hidden=”true”></i>
<span>
Call +91 9426447382
</span>
</a>
<a href=””>
<I class=”fa fa-envelope” aria-hidden=”true”></i>
<span>
[email protected]
</span>
</a>
</div>
</div>
<div class=”info_social”>
<a href=””>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
</div>

67
 </div>
<div class=”col-md-6 col-lg-3 info_col”>
<div class=”info_detail”>
<h4>
Info
</h4>
<p>
Necessary, making this the first true generator on the Internet. It uses a dictionary of over
200 Latin words, combined with a handful
</p>
</div>
</div>
<div class=”col-md-6 col-lg-2 mx-auto info_col”>
<div class=”info_link_box”>
<h4>
Links
</h4>
<div class=”info_links”>
<a class=”active” href=”/”>
Home
</a>
<a class=”” href=”/about”>
About
</a>
<a class=”” href=”/service”>
Services
</a>
<a class=”” href=”/why”>
Why Us
</a>
<a class=”” href=”/team”>
Team
</a>
</div>
</div>
</div>
<div class=”col-md-6 col-lg-3 info_col “>
<h4>
Subscribe
</h4>
<form action=”#”>
<input type=”text” placeholder=”Enter email” />
<button type=”submit”>
Subscribe
</button>

68
 </form>
</div>
</div>
</div>
</section>

<!—end info section 🡪

<!—footer section 🡪
<section class=”footer_section”>
<div class=”container”>
<p>
&copy; <span id=”displayYear”></span> All Rights Reserved By
<a href=https://html.design/>Free Html Templates</a>
</p>
</div>
</section>
<!—footer section 🡪

<!—jQery 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/jquery-
3.4.1.min.js’)}}”></script>
<!—popper js 🡪
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
integrity=”sha384-
Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
crossorigin=”anonymous”>
</script>
<!—bootstrap js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/bootstrap.js’)}}”></script>
<!—owl slider 🡪
<script type=”text/javascript”
src=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js>
</script>
<!—custom js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/custom.js’)}}”></script>
<!—Google Map 🡪
<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-
4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap>
</script>
<!—End Google Map 🡪

</body>

</html>

69
Update_team.html
<!DOCTYPE html>
<html>

<head>
<!—Basic 🡪
<meta charset=”utf-8” />
<meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
<!—Mobile Metas 🡪
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no” />
<!—Site Metas 🡪
<meta name=”keywords” content=”” />
<meta name=”description” content=”” />
<meta name=”author” content=”” />
<link rel=”shortcut icon” href=”../static/images/favicon.png” type=””>

<title> Finexo </title>

<!—bootstrap core css 🡪

<link rel=”stylesheet” type=”text/css” href=”{{url_for(‘static’, filename=’css/bootstrap.css’)}}” />

<!—fonts style 🡪
<link
href=https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap
rel=”stylesheet”>

<!—owl slider stylesheet 🡪

<link rel=”stylesheet” type=”text/css”
href=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css />

<!—font awesome style 🡪

<link href=”{{url_for(‘static’, filename=’css/font-awesome.min.css’)}}” rel=”stylesheet” />

<!—Custom styles for this template 🡪

<link href=”{{url_for(‘static’, filename=’css/style.css’)}}” rel=”stylesheet” />
<!—responsive style 🡪
<link href=”{{url_for(‘static’, filename=’css/responsive.css’)}}” rel=”stylesheet” />

</head>

<body class=”sub_page”>

<div class=”hero_area”>

<div class=”hero_bg_box”>

70
 <div class=”bg_img_box”>
<img src=”../static/images/hero-bg.png” alt=””>
</div>
</div>

<!—header section strats 🡪

<header class=”header_section”>
<div class=”container-fluid”>
<nav class=”navbar navbar-expand-lg custom_nav-container “>
<a class=”navbar-brand” href=”/”>
<span>
Finexo
</span>
</a>

<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-

target=”#navbarSupportedContent” aria-controls=”navbarSupportedContent” aria-
expanded=”false” aria-label=”Toggle navigation”>
<span class=””> </span>
</button>

<div class=”collapse navbar-collapse” id=”navbarSupportedContent”>

<ul class=”navbar-nav “>
<li class=”nav-item “>
<a class=”nav-link” href=”/”>Home </a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/about”> About</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/service”>Services</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”/why”>Why Us</a>
</li>
<li class=”nav-item active”>
<a class=”nav-link” href=”/team”>Team <span class=”sr-only”>(current)</span> </a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”> <I class=”fa fa-user” aria-hidden=”true”></i> Login</a>
</li>
<form class=”form-inline”>
<button class=”btn my-2 my-sm-0 nav_search-btn” type=”submit”>
<I class=”fa fa-search” aria-hidden=”true”></i>
</button>

71
 </form>
</ul>
</div>
</nav>
</div>
</header>
<!—end header section 🡪
</div>

<!—team section 🡪
<section class=”team_section layout_padding”>
<div class=”container-fluid”>
<div class=”heading_container heading_center”>
<h2 class=””>
Our <span> Team</span>
</h2>
</div>

<div class=”team_container”>
<div class=”row”>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-1.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Joseph Brown
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>

72
 </a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-2.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Nancy White
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-3.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>

73
 <h5>
Earl Martinez
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
<div class=”col-lg-3 col-sm-6”>
<div class=”box “>
<div class=”img-box”>
<img src=”../static/images/team-4.jpg” class=”img1” alt=””>
</div>
<div class=”detail-box”>
<h5>
Josephine Allard
</h5>
<p>
Marketing Head
</p>
</div>
<div class=”social_box”>
<a href=”#”>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-twitter” aria-hidden=”true”></i>

74
 </a>
<a href=”#”>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
<a href=”#”>
<I class=”fa fa-youtube-play” aria-hidden=”true”></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!—end team section 🡪

<!—info section 🡪

<section class=”info_section layout_padding2”>

<div class=”container”>
<div class=”row”>
<div class=”col-md-6 col-lg-3 info_col”>
<div class=”info_contact”>
<h4>
Address
</h4>
<div class=”contact_link_box”>
<a href=””>
<I class=”fa fa-map-marker” aria-hidden=”true”></i>
<span>
Location
</span>
</a>
<a href=””>
<I class=”fa fa-phone” aria-hidden=”true”></i>
<span>
Call +91 9426447382
</span>
</a>
<a href=””>
<I class=”fa fa-envelope” aria-hidden=”true”></i>
<span>

75
 [email protected]
</span>
</a>
</div>
</div>
<div class=”info_social”>
<a href=””>
<I class=”fa fa-facebook” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-twitter” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-linkedin” aria-hidden=”true”></i>
</a>
<a href=””>
<I class=”fa fa-instagram” aria-hidden=”true”></i>
</a>
</div>
</div>
<div class=”col-md-6 col-lg-3 info_col”>
<div class=”info_detail”>
<h4>
Info
</h4>
<p>
Necessary, making this the first true generator on the Internet. It uses a dictionary of over
200 Latin words, combined with a handful
</p>
</div>
</div>
<div class=”col-md-6 col-lg-2 mx-auto info_col”>
<div class=”info_link_box”>
<h4>
Links
</h4>
<div class=”info_links”>
<a class=”active” href=”/”>
Home
</a>
<a class=”” href=”/about”>
About
</a>
<a class=”” href=”/service”>
Services

76
 </a>
<a class=”” href=”/why”>
Why Us
</a>
<a class=”” href=”/team”>
Team
</a>
</div>
</div>
</div>
<div class=”col-md-6 col-lg-3 info_col “>
<h4>
Subscribe
</h4>
<form action=”#”>
<input type=”text” placeholder=”Enter email” />
<button type=”submit”>
Subscribe
</button>
</form>
</div>
</div>
</div>
</section>

<!—end info section 🡪

<!—footer section 🡪
<section class=”footer_section”>
<div class=”container”>
<p>
&copy; <span id=”displayYear”></span> All Rights Reserved By
<a href=https://html.design/>Free Html Templates</a>
</p>
</div>
</section>
<!—footer section 🡪

<!—jQery 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/jquery-
3.4.1.min.js’)}}”></script>
<!—popper js 🡪
<script src=https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js
integrity=”sha384-

77
 Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo”
crossorigin=”anonymous”>
</script>
<!—bootstrap js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/bootstrap.js’)}}”></script>
<!—owl slider 🡪
<script type=”text/javascript”
src=https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js>
</script>
<!—custom js 🡪
<script type=”text/javascript” src=”{{url_for(‘static’, filename=’js/custom.js’)}}”></script>
<!—Google Map 🡪
<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-
4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap>
</script>
<!—End Google Map 🡪

</body>

</html>
Output:

78
79
80
81
82
 4.CONCLUSION

The exploration of web design introduces a broad spectrum of skills and technologies essential for creating
modern websites. From understanding the foundational roles of HTML and CSS in structuring and styling content
to leveraging JavaScript for interactive elements and dynamic behavior, web design encompasses a diverse set of
tools and techniques. Frameworks like Bootstrap streamline the development process, ensuring responsive and
visually appealing designs, while libraries like React enhance user interface development with efficient
component management. Additionally, extends JavaScript capabilities to server-side scripting, enabling the
development of scalable, high-performance applications. Mastery of these elements equips individuals with the
skills needed to build robust, engaging web experiences and adapt to evolving web technologies.

83
 5.References

● Flask: https://www.tutorialspoint.com/flask/index.htm
● Css: https://www.free-css.com/free-css-templates
● Coding with Meet: https://youtu.be/KJ-kIBRfdbg

84