-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
222 lines (222 loc) · 12.6 KB
/
index.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
216
217
218
219
220
221
222
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@200&family=Ms+Madi&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./irisartstudio-scss/irisartstudio.css">
<title>irisartstudio</title>
</head>
<body>
<nav class="navbar fixed-top navbar-expand-md bg-primary text-white navbar-dark" id="navbar-scrollspy">
<div class="container-fluid">
<a class="navbar-brand irisartstudio ms-lg-5 me-auto" href="#">irisartstudio</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 ms-auto me-5">
<li class="nav-item active">
<a class="nav-link" href="#item-1">Featured Artwork</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#item-2">Art Classes</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#item-3">About the Artist</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#item-4">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-scrollspy" data-bs-offset="0" tabindex="0">
<div class="container-fluid" id="content">
<div class="container-fluid bg-warning p-5 mb-4">
<h2 class="text-white mb-3">Fresh out of the studio...</h2>
<div class="row align-items-center">
<div class="col-lg-3 col-md-6 mb-4 mb-md-0">
<div class="bg-white p-3">
<img src="./imgs/fresh/mauna-loa-1.jpg" alt="lava inspired round zentangle art number one" class="img-fluid mb-2">
<p>5"</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="bg-white p-3 mb-4 mb-md-5 mb-lg-0">
<img src="./imgs/fresh/mauna-loa-2.jpg" alt="lava inspired round zentangle art number two" class="img-fluid mb-2">
<p>5"</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="bg-white p-3 mb-4 mb-md-0">
<img src="./imgs/fresh/hurry-blossom.jpg" alt="blue blossom-inspired square zentangle art" class="img-fluid mb-2">
<h5>Hurry Blossom</h5>
<p>4" x 4"</p>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="bg-white p-3">
<video class="embed-responsive-item" width="100%" height="auto" controls autoplay muted>
<source src="./imgs/fresh/peacock-feather.mp4" type="video/mp4" alt="video of peacock feather painted on rock">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
</div>
<div class="container col-xl-9 col-lg-10 mb-3 bg-secondary p-4">
<h2 id="item-1">Featured Artwork</h2>
<h3 class="text-center">Zentangle</h3>
<div class="row text-end align-items-center mb-5">
<div class="col-md-4 mb-3 mb-md-0">
<div class="bg-white p-3">
<img src="./imgs/zentangle/triangle-rocks-green.jpg" alt="triangle shaped green zentangle art" class="img-fluid mb-2">
<p>2.5"</p>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="bg-white p-3">
<img src="./imgs/zentangle/grayscale-tall-rectangle_adobe_express.jpeg" alt="black and white large pen zentangle art" class="img-fluid mb-2">
<p>5" x 8"</p>
</div>
</div>
<div class="col-md-4">
<div class="bg-white p-3">
<img src="./imgs/zentangle/green-purple-circle.jpg" alt="circular pink blossom zentangle art" class="img-fluid mb-2">
<h5>Blossom Zendala</h5>
<p>5"</p>
</div>
</div>
</div>
<h3 class="text-center">Hawaiian Art</h3>
<div class="row text-end align-items-center mb-5">
<div class="col-md-4 mb-3 mb-md-0">
<div class="bg-white p-3">
<img src="./imgs/hawaiian/turtle.jpg" alt="hawaiian sea turtle artwork" class="img-fluid mb-2">
<h5>Green Sea Turtle</h5>
<p>4" x 4"</p>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="bg-white p-3">
<img src="./imgs/hawaiian/pineapple.jpg" alt="pineapple painted on wood" class="img-fluid mb-2">
<h5>Aloha Pineapple</h5>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="bg-white p-3">
<img src="./imgs/hawaiian/gecko_adobe_express.jpeg" alt="green gecko portrait" class="img-fluid mb-2">
<h5>Gold Dust Gecko</h5>
<p>4" x 4"</p>
</div>
</div>
</div>
<h3 class="text-center">Animal and Pet Portraits</h3>
<div class="row text-end align-items-center mb-5">
<div class="col-md-4 mb-3 mb-md-0">
<div class="bg-white p-3">
<img src="./imgs/pets/cat1.jpg" alt="black cat face portrait" class="img-fluid mb-2">
<h5>Sarah's Cat</h5>
<p>4" x 4"</p>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="bg-white p-3">
<img src="./imgs/pets/elephants.jpg" alt="two elephants embracing with their trunks" class="img-fluid mb-2">
<h5>African Elephants</h5>
<p>9" x 12"</p>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="bg-white p-3">
<img src="./imgs/pets/bee.jpg" alt="hornet at rest facing the viewer" class="img-fluid mb-2">
<h5>At Rest</h5>
<p>4" x 4"</p>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-success p-5 mb-4">
<h1 class="mb-4 text-white" id="item-2">Upcoming Art Classes</h1>
<div class="row align-items-center">
<div class="col-md-4 mb-3 mb-md-0">
<div class="bg-white mx-2 p-3">
<img class="img-fluid mb-2" alt="miscellaneous collection of simple zentangle art" src="./imgs/intro_to_zen.jpg">
<h2 class="">Intro to Zentangle</h2>
<p>Explore the world of zentangle with two fun projects!</p>
<p>December 10, 2022 and January 27, 2023</p>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="bg-white mx-2 p-3">
<h2>Elegant Line Drawing</h2>
<img class="img-fluid mb-2" alt="pen zentangle of plant leaves and swirls surrounded by textured box" src="./imgs/elegant_lines.jpg">
<p>Learn the icso method of drawing beautiful lines.</p>
<p>Date TBD</p>
</div>
</div>
<div class="col-md-4">
<div class="bg-white mx-2 p-3">
<h2>Valentine Zentangle</h2>
<p>Make a Valentine Zentangle for yourself or a loved one!</p>
<p>Date TBD</p>
<img class="img-fluid" alt="rectangle pink zentangle with heart patterns" src="./imgs/valentine.jpg">
</div>
</div>
</div>
</div>
<div class="container col-xl-8 col-lg-9 mb-3">
<div class="row bg-info p-5 align-items-center justify-content-between">
<div class="col-xl-5 col-md-6 mb-4 mb-md-0">
<img class="img-fluid" alt="photo of artist Iris Thornton" src="./imgs/iris.jpg">
</div>
<div class="col-xl-7 col-md-6 bg-white p-3">
<h2 id="item-3">About the Artist</h2>
<p>
My name is Iris Thornton. I've always had a passion for art, and I studied Fine Arts at Brigham Young University. I've done a variety of art in my life to include braided wool rugs, pet portraits, wildlife, and other nature inspired art painted on large rocks.
</p>
<p>
There have been big gaps in my life where I have been too busy raising children and working full time to devote time to artwork, but last year, when my youngest son left home and my husband Robert died suddenly, I found myself unexpectedly alone. I turned to my art for companionship, comfort, and yes-therapy!
</p>
<p>
The Zentangle Method of drawing was perfect for helping me to relax, have fun, and to put me in an emotional zone of happiness. Currently I draw practically every day doing either the Zentangle method of drawing, or Hawaiian-themed art. I live on the Big Island of Hawaii.
</p>
</div>
</div>
</div>
</div>
<div class="container-fluid bg-primary text-white p-5">
<div class="row d-flex justify-content-center">
<div class="col">
<div class="row align-items-center">
<div class="col-md-6 text-start text-white">
<h2 id="item-4">Contact me:</h2>
<ul class="list-inline">
<li class="list-inline-item">
<a class="nav-link" href="https://www.instagram.com/iriskthczt/" target="_blank"><h4><i class="fa-brands fa-square-instagram icon"></i></h4></a>
</li>
<li class="list-inline-item">
<a class="nav-link" href="https://www.facebook.com/iriskmc" target="_blank"><h4><i class="fa-brands fa-square-facebook"></i></h4></a>
</li>
<li class="list-inline-item">
<button class="btn btn-link nav-link" id="email" onclick="copyToClipboard()" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="click to copy"><h4>[email protected]</h4></button>
</li>
</ul>
</div>
<p class="text-end col-md-6">© 2022 irisartstudio</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/273ab1ae4e.js" crossorigin="anonymous"></script>
<script src="js/script.js"></script>
</body>
</html>