-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.html
More file actions
147 lines (136 loc) · 8.92 KB
/
Copy pathabout.html
File metadata and controls
147 lines (136 loc) · 8.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Playfair+Display:wght@400;700&display=swap">
<!--Generic Css Stylesheet-->
<link rel="stylesheet"href="css/styles.css">
<!--AboutUs Css Stylesheet-->
<link rel="stylesheet"href="css/about.css">
<title>Fiorellino</title>
</head>
<body>
<!-- Header Section with Navbar -->
<header>
<!-- container with no padding for full-width navbar -->
<div class="container-fluid p-0">
<nav class="navbar navbar-expand-lg">
<!-- Navbar toggler for small screens -->
<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">
<!-- Push navigation links to the right -->
<div class="mr-auto"></div>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="about.html">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="services.html">Services</a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="portfolio.html">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" aria-current="page" href="contactUs.html">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
</header>
<!-- About Us Section -->
<div class="container text-center py-4">
<h2 class="about-section">About Us</h2>
</div>
<!-- Mission, Story, and Team Section -->
<div class="container my-5">
<div class="row">
<!-- Mission and Values -->
<div class="about-section-name">
<h3>Our mission and values</h3>
<p>Welcome to Fiorellino! Since 2011, we’ve specialized in unique floral designs for weddings, events, and celebrations. We believe flowers tell stories, so we work closely with clients to create arrangements that reflect their vision. Sustainability matters to us—we use locally sourced blooms and eco-friendly practices. From consultation to setup, our team is dedicated to making every occasion beautiful and memorable.</p>
</div>
<!-- Our Story -->
<div class="about-section-name">
<h3>Our Story</h3>
<p>Fiorellino creates personalized floral experiences that go beyond decoration—we craft memorable moments. Our first event, a wedding for Stephen and Laura, set the tone: soft pastels and wildflower garlands transformed the venue, making flowers part of the story. We’re committed to sustainability, partnering with local growers and offering post-event flower donations. Today, Fiorellino is known for creative, detail-oriented designs and a passion for making every event special, beautiful, and meaningful.</p>
</div>
<!-- Meet Our Team -->
<div class="about-section-name">
<h3>Meet Our Team</h3>
<p>Our team of talented florists goes beyond technical expertise—we are deeply attuned to the emotional power flowers carry. We take pride in crafting designs that resonate with meaning and emotion, blending modern aesthetics with timeless elegance.</p>
<!-- Team Carousel Section -->
<div id="teamCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner text-center">
<!-- First Team Member -->
<div class="carousel-item active">
<img src="assets/Temp_imgs/Emily_Rose.png" class="rounded-circle team-img img-fluid" alt="Florist 1">
<h5 class="mt-3">Emily Rose</h5>
<p>Lead Floral Designer</p>
</div>
<!-- Second Team Member -->
<div class="carousel-item">
<img src="assets/Temp_imgs/James_Bloom.png" class="rounded-circle team-img" alt="Florist 2">
<h5 class="mt-3">James Bloom</h5>
<p>Event Specialist</p>
</div>
<!-- Third Team Member -->
<div class="carousel-item">
<img src="assets/Temp_imgs/Peter_Bud.png" class="rounded-circle team-img" alt="Florist 3">
<h5 class="mt-3">Peter Bud</h5>
<p>Floral Designer</p>
</div>
<!-- Fourth Team Member -->
<div class="carousel-item">
<img src="assets/Temp_imgs/Sophia_Petel.png" class="rounded-circle team-img" alt="Florist 4">
<h5 class="mt-3">Sophia Petal</h5>
<p>Creative Director</p>
</div>
</div>
<!-- Carousel Controls for navigating team members -->
<button class="carousel-control-prev" type="button" data-bs-target="#teamCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#teamCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<hr class="mt-5">
<!-- Call-for-action Section -->
<div class="container text-center my-5">
<h2 class="mb-3">Book an Appointment Today!</h2>
<a href="contactUs.html" class="btn btn-primary btn-lg">Book now</a>
</div>
<!-- Footer Section with social icons and copyright -->
<footer class="bg-dark text-light py-4">
<div class="container">
<p class="footer-text">Follow us on:</p>
<div class="icons justify-content-center gap-3">
<a href="https://facebook.com" target="_blank" rel="noopener" class="text-light" title="Visit our Facebook page">
<i class="fab fa-facebook fa-2x"></i>
</a>
<a href="https://twitter.com" target="_blank" rel="noopener" class="text-light" title="Visit our Twitter page">
<i class="fab fa-twitter fa-2x"></i>
</a>
<a href="https://instagram.com" target="_blank" rel="noopener" class="text-light" title="Visit our Instagram page">
<i class="fab fa-instagram fa-2x"></i>
</a>
<a href="https://linkedin.com" target="_blank" rel="noopener" class="text-light" title="Visit our LinkedIn page">
<i class="fab fa-linkedin fa-2x"></i>
</a>
</div>
</div>
<div class="col-md-12 text-center">
<p class="footer-text">© 2025 Fiorellino. All rights reserved.</p>
</div>
</footer>
<!-- Bootstrap JS Bundle with Popper.js for responsive navbar -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
</body>
</html>