Team Introduction Page

Introduction to the Template

The "Team Introduction Page" template is designed to create a single-page website that introduces a team of four members. The page features names, brief bios, profile photos, and roles, with a responsive design and smooth scrolling navigation.

Clicking Start with this Template

To get started with the "Team Introduction Page" template, click the Start with this Template button in the Lazy Builder interface.

Test

After starting with the template, press the Test button to begin the deployment of the app. This will launch the Lazy CLI, which will handle the deployment process.

Using the App

Once the app is deployed, you can access the website through the provided link in the Lazy Builder CLI. The website will display the team introduction page with the following features:

• Header: Contains the app logo and navigation links.
• Main Content: Displays the team members with their profile photos, names, roles, and brief biographies.

Header

The header includes a logo and navigation links. The navigation links are responsive and adapt to different screen sizes. On smaller screens, a mobile menu button is available to toggle the navigation links.

Main Content

The main content section introduces the team members. Each member's profile includes:

• Profile photo
• Name
• Role
• Brief biography

Code Overview

Here is a brief overview of the code structure:

app_init.py

This file initializes the Flask app and registers the routes.

```python from flask import Flask from routes import register_routes

def create_initialized_flask_app(): app = Flask(name, static_folder='static', template_folder='templates') register_routes(app) return app ```

routes.py

This file defines the routes for the home and team pages.

```python from flask import render_template from flask import current_app as app

def register_routes(app): @app.route("/") def home_route(): return render_template("home.html")

@app.route("/team")
def team_route():
    return render_template("team.html")

```

main.py

This file sets up the Gunicorn server to run the Flask app.

```python import logging from gunicorn.app.base import BaseApplication from app_init import create_initialized_flask_app

app = create_initialized_flask_app()

logging.basicConfig(level=logging.INFO) logger = logging.getLogger(name)

class StandaloneApplication(BaseApplication): def init(self, app, options=None): self.application = app self.options = options or {} super().init()

def load_config(self):
    for key, value in self.options.items():
        if key in self.cfg.settings and value is not None:
            self.cfg.set(key.lower(), value)

def load(self):
    return self.application

if name == "main": options = { "bind": "0.0.0.0:8080", "workers": 4, "loglevel": "info", "accesslog": "-" } StandaloneApplication(app, options).run() ```

styles.css

This file contains the custom styles for the website, including responsive design and smooth scrolling navigation.

home.js and header.js

These files contain JavaScript for the home page and header functionality, respectively.

HTML Templates

• _header.html: Contains the header structure.
• _desktop_header.html: Contains the desktop navigation links.
• _mobile_header.html: Contains the mobile navigation menu.
• home.html: Contains the main content for the home page.

Conclusion

The "Team Introduction Page" template provides a simple and effective way to create a responsive team introduction website. By following the steps outlined above, you can easily deploy and use the template to showcase your team members.