Figma Animated Web

Certainly, John!
Below are
simplified HTML templates for
the homepage (index.html) and
the appointment form
(appointments.html). Note that
for a truly professional and
impressive design, you might
want to involve a web designer
or use more advanced frontend
technologies like CSS
frameworks and
JavaScript.index.html
(Homepage):<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Barbershop &
Salon</title>

</head>
<body>
<header>

<h1>Welcome to our
Barbershop & Salon</h1>
</header>
<section class="hero">

<p>Experience the perfect
blend of style and grooming!</p>
</section>
<section class="services">
<h2>Our Services</h2>

</section>
<section class="enquiry">
<h2>Contact Us</h2>

</section>
<footer>
<p>© 2024
Barbershop & Salon. All rights
reserved.</p>
</footer>
</body>
</html>
appointments.html (Appointment
Form):<!
DOCTYPE html>
<html lang="en">
<head>
initial-
scale=1.0">
<title>Make an
Appointment</title>
-->
</head>
<body>
<header>

<h1>Book Your
Appointment</h1>
</header>
<section class="appointment-
form">
<form
action="/appointments"
method="POST">
<label
for="name">Name:</label>
<input type="text"
id="name" name="name"
required>
<label
for="email">Email:</label>
<input type="email"
id="email"
name="email" required>
<label
for="date">Date:</label>
<input type="date"
id="date" name="date" required>
<label
for="time">Time:</label>
<input type="time"
id="time" name="time" required>
<button
type="submit">Book
Appointment</button>
</form>
</section>
<footer>
<p>© 2024
reserved.</p>
</footer>
</body>
</html>
Certainly, John! Let's enhance
the styles and add more sections
to create a more professional
and visually appealing design.
Please note that for a complete
and polished design, it's
recommended to involve a
professional web designer.
However, I'll provide an improved
version with some additional
elements:
### `index.html` (Homepage):
```html
<!DOCTYPE html>
<html lang="en">
<head>
initial-scale=1.0">
<title>Barbershop &
Salon</title>
-->
<style>
body {
font-family: 'Arial', sans-
serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
.hero {
background:
url('barbershop_hero.jpg')
center/cover;
color: #fff;
text-align: center;
padding: 100px 0;
}
.services {
background-color:
#f4f4f4;
padding: 50px 0;
text-align: center;
}
.service-item {
margin: 20px;
}
.enquiry {
padding: 50px 0;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to our
Barbershop & Salon</h1>
</header>
<section class="hero">
<h2>Experience the Perfect
Blend of Style and
Grooming</h2>
<p>Transform your look
with our expert stylists</p>
</section>
<section class="services">
<h2>Our Services</h2>
<div class="service-item">
<img src="haircut.jpg"
alt="Haircut">
<h3>Haircuts</h3>
<p>Professional haircuts
tailored to
your style.</p>
</div>
<div class="service-item">
<img src="coloring.jpg"
alt="Hair Coloring">
<h3>Hair Coloring</h3>
<p>Add a pop of color to
your hair with our expert coloring
services.</p>
</div>

</section>
<section class="enquiry">
<h2>Contact Us</h2>
<p>Have questions or want
to book an appointment? Reach
out to us!</p>
<a href="#appointments"
class="button">Book
Appointment</a>
</section>
<footer>
<p>© 2024
reserved.</p>
</footer>
</body>
</html>
```
Remember to replace
placeholder image URLs with
actual image URLs and
customize the styles according to
your preferences. Additionally,
consider incorporating more
interactive elements using
JavaScript for a modern and
engaging user experience.
Python 👇🏿👇🏿👇🏿
from flask import Flask,

render_template, request,
redirect, url_for
import sqlite3
app = Flask(__name__)
# SQLite database setup

conn =
sqlite3.connect('barbershop.db')
c = conn.cursor()
c.execute('CREATE TABLE IF
NOT EXISTS appointments (id
INTEGER PRIMARY KEY
AUTOINCREMENT, name TEXT,
email TEXT, date TEXT, time
TEXT)')
conn.commit()
conn.close()
# Routes
@app.route('/')
def index():
return
render_template('index.html')
@app.route('/appointments',
methods=['GET', 'POST'])
def appointments():
if request.method == 'POST':
name =
request.form['name']
email = request.form['email']
date = request.form['date']
time = request.form['time']
conn =
sqlite3.connect('barbershop.db')
c = conn.cursor()
c.execute('INSERT INTO
appointments (name, email,
date, time) VALUES (?, ?, ?, ?)',
(name, email, date, time))
conn.commit()
conn.close()
return
redirect(url_for('index'))
return
render_template('appointments.h
tml')
if __name__ == '__main__':
app.run(debug=True)

Figma Animated Web

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Figma Animated Web

Uploaded by

Copyright:

Available Formats

Certainly, John!

### `index.html` (Homepage):

<!-- Add more service items

from flask import Flask,

# SQLite database setup

You might also like