-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
215 lines (204 loc) · 9.93 KB
/
about.html
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>About - Flo Designs</title>
<!-- Link to Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Font awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
<!-- Link to your custom stylesheet -->
<link rel="stylesheet" type="text/css" href="styles/custom.css">
<link rel="stylesheet" type="text/css" href="styles/about_style.css">
</head>
<body>
<div class="container-fluid no-gutters px-0 h-100" id="container">
<!-- header: Alyssa -->
<div class="row no-gutters">
<div class="col-sm-12">
<header class="text-header">
<h1>Flo Designs</h1>
</header>
</div>
</div>
<!--nav: Daniela-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03"
aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item button-nav">
<a class="nav-link" href="index.html">Home <span class="sr-only"></span></a>
</li>
<li class="nav-item button-nav">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item button-nav">
<a class="nav-link active" href="about.html">About <span class="sr-only">(current)</span></a>
</li>
</form>
</div>
</nav>
<!--main part Daniela-->
<main class="row card-bio-section">
<div class="col-12 col-md-4 bio-card">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="about_imgs/florence.jpg" alt="First designer photo">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="about_imgs/flo_jose.jpg" alt="Second designer photo">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="bio-card-info">
<div class="bio-card-line">
<h5 class="bio-card-label">Name: </h5>
<p>Florence Cooley</p>
</div>
<div class="bio-card-line">
<h5 class="bio-card-label">Location: </h5>
<p>Yarmouth, ME</p>
</div>
<div class="bio-card-line">
<h5 class="bio-card-label">Motto: </h5>
<p>Can't Stop, Won't Stop!</p>
</div>
<div class="bio-card-line">
<h5 class="bio-card-label">Interests: </h5>
<ul>
<li>Hoola-Hooping</li>
<li>Cats</li>
<li>Theater</li>
<li>Light Design</li>
<li>Saving the planet!</li>
</ul>
</div>
</div>
</div>
<section class="col-12 col-md-8 bio-description">
<h1 id="bio-title">Biography</h1>
<p id="bio-paragraph">
Florence grew up in Yarmouth, Maine where she was very active in her high school theater and in her local
Habitat For Humanity charity.
She went on to The University of Southern Maine and got her Bachelor's Degree in Lighting Design. From there
she combined her passion to save the planet and
her love for design by recycling old clothes into a patchwork masterpiece on the side while working for the
Union working as a costume designer, stage hand or lighting design technician.
It is her dream to be an etrepreneur and to create unique custom works of art.
</p>
<div id="accordion">
<div class="card">
<header class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
<i class="fas fa-angle-down arrow-icon"> Why I started Flo Designs</i>
</button>
</h5>
</header>
<section id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
I have been creating costumes since I was very young, and I loved how I can express myself through
creativity and display my art by my clothes. I am also veyr passionate
about charity and saving the earth by not wasting. That is where I started taking old clothes and
upcycling them into something unique and something
someone would be proud to wear! As of right now, I am my only customer along with some of my close
friends and family, but I hope to one day sell globally.
</div>
</section>
</div>
<div class="card">
<header class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
aria-expanded="false" aria-controls="collapseTwo">
<i class="fas fa-angle-down arrow-icon"> More about the materials</i>
</button>
</h5>
</header>
<section id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
I will get my materials where ever I can! If it is free, all the better. A lot of people donate their
clothes to me, other times
I will take the scraps of fabric that the gigs that I work would normally throw out, and sometimes I
would by clothes buy the pound at GoodWill.
</div>
</section>
</div>
<div class="card">
<header class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"
aria-expanded="false" aria-controls="collapseThree">
<i class="fas fa-angle-down arrow-icon"> Design process</i>
</button>
</h5>
</header>
<section id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
For the most part, I generally only patchwork design. Which, is a very tedious but rewarding process.
That way I can make almost anything out of the materials I have available to me.
</div>
</section>
</div>
</div>
</section>
</main>
<!-- footer: Alyssa -->
<div class="row no-gutters" id="footer">
<div class="col-sm-12">
<h1>Contact us!</h1>
<div class="row no-gutters" id="nested">
<div class="col-sm-12 col-md-4 footer-col">
<p><a href="https://instagram.com/faerieflo?igshid=1iwzuo2gkssmx" class="contact-link" target="_blank"><i
class="fab fa-instagram"></i>Instagram</a>
</p>
<p><a href="https://www.etsy.com/" class="contact-link" target="_blank"><i class="fab fa-etsy"></i>Etsy</a>
</p>
</div>
<div class="col-sm-12 col-md-4 footer-col">
<p><a href="https://www.facebook.com/FloFaerie" class="contact-link" target="_blank"><i
class="fab fa-facebook"></i>Facebook</a>
</p>
<p><a href="mailto: [email protected]" class="contact-link" target="_blank"><i
class="fas fa-envelope"></i>[email protected]</a></p>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
</script>
<!-- popper.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous">
</script>
<!-- unique Bootstrap 4 JavaScript scripts -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
</body>