generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
287 lines (283 loc) · 12 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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!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">
<meta name="description" content="Artificial grass installation guide to do it yourself">
<meta name="keywords" content="Artificial grass, installation, installation guide, DIY, do it yourself, fake grass">
<link rel="stylesheet" href="assets/css/styles.css">
<title>DIY Projects</title>
</head>
<body>
<!-- Logo -->
<!-- Navagation bar -->
<nav>
<div class="logo">
<h1>
<a href="index.html">Diyi</a>
</h1>
</div>
<ul class="nav-links">
<li>
<a href="index.html" aria-label="Go to home page" class="current-page">
<i class="fas fa-home"></i> Home </a>
</li>
<li>
<a href="#project" aria-label="Go to project page">
<i class="fa-solid fa-compass-drafting"></i> Project </a>
</li>
<li>
<a href="contact.html" aria-label="Go to Contact form">
<i class="fab fa-wpforms"></i> Contact </a>
</li>
</ul>
</nav>
<!-- Header -->
<header>
<div class="hero-image"></div>
<div class="hero-text">
<h2>Artificial Grass</h2>
<h5>
<cite>"Because The Grass is Always Greener on the Other Side”</cite>
</h5>
</div>
<div class="language">
<a href="es-index.html"><i class="fa-solid fa-globe"></i> | Español</a>
</div>
</header>
<div class="container">
<!-- Main section -->
<main class="content">
<section class="about">
<h2>About</h2>
<h3>What is arficial grass?</h3>
<p>Artificial grass is a surface of synthetic fibers made to look like natural grass. It is most often used in
arenas for sports that were originally or are normally played on grass. However, it is now being used on
residential lawns and commercial applications as well. </p>
<div class="image graphic">
<img src="assets/images/graphic-agrass.webp" width="440" height="289"
alt="diagram of modern artificial grass">
</div>
<h3>Who is artificial grass for?</h3>
<p>Artificial grass is ideal for anyone who wants a low maintenance garden, for those with busy lifestyles,
young family members and pets.Those who are not able to keep on top of mowing. </p>
</section>
<section class="how-to">
<h2>How to lay artificial grass</h2>
<p>You can install articial grass yourself. First, you have to choose the grass that best suit your needs, then
just have to follow some simple steps, please refer to the installation instructions on how to install
artifical grass and the video bellow so you have a visual reference. </p>
<!-- Instructions video -->
<div class="video-container">
<iframe src="https://www.youtube.com/embed/gAjIVEmackw?start=13" title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<br>
<br>
<!-- Project Before and After images -->
<div class="image">
<figure>
<img src="assets/images/garden-before.webp" width="717" height="223" alt="image of project before">
<figcaption>Before Project</figcaption>
</figure>
</div>
<br>
<br>
<div class="image">
<figure>
<img src="assets/images/garden-after.webp" width="717" height="537" alt="image of project after">
<figcaption>After Project</figcaption>
</figure>
</div>
<h2 id="project">Artificial grass installation guide.</h2>
<!-- Installation step 1 -->
<h3>
<i class="fas fa-digging"></i> Step 1
</h3>
<h4>Digging the area</h4>
<p>First step is to prepare the area by removing the topsoil to a depth of 100mm. This can be done by hand if it
is a small area, but it will be easier if using a turf cutter. </p>
<div class="image">
<img src="assets/images/digging.webp" width="717" height="425" alt="removing the turf">
</div>
<!-- Installation step 2 -->
<h3>
<i class="fas fa-crop"></i> Step 2
</h3>
<h4>Edging the area</h4>
<p>Using batons and 100mm treated timber, make a frame around the area.This step is important as will give
support to our newly installed grass and a clean edge finish. Please, make sure the edging is not higher than
final grass line to allow the water to run-off the turf. </p>
<div class="image">
<img src="assets/images/framing-grass-area.webp" width="717" height="417"
alt="making a wood frame around the area">
</div>
<!-- Installation step 3 -->
<h3>
<i class="fas fa-digging"></i> Step 3
</h3>
<h4>Subbase</h4>
<p> Then cover two thirds of the depth (approx. 70mm) with a crush stones aggregate like MOT type-1. This can be
purchased from local DIY store or reliable builders providers. You will level and compact using a compactor
plate at this point. This will provide a solid base and good drainage. </p>
<div class="image">
<img src="assets/images/subbase-layer.webp" width="717" height="417" alt="Fill the area with subbase type-1">
</div>
<!-- Installation step 4 -->
<h3>
<i class="fas fa-layer-group"></i> Step 4
</h3>
<h4>Weed barrier</h4>
<p>You will then fit a weed barrier on the entire base of the soil base, overlapping the barrier to prevent
weeds growing through. </p>
<div class="image">
<img src="assets/images/weed-membrane.webp" width="717" height="519"
alt="Lying down the geo-textile membrane">
</div>
<!-- Installation step 5 -->
<h3>
<i class="fas fa-digging"></i> Step 5
</h3>
<h4>Granite dust</h4>
<p>Next add up 25mm of granite dust, then you will compact couple of times with a compactor plate. The more
times you compact the granite dust the less chance there will be of sinkage. The base needs to be completely
level with the timbers because the artificial grass will mirror what is beneath it, ,if you have lumpy
groundworks your artificial lawn will be the same. </p>
<div class="image">
<img src="assets/images/bedding-layer.webp" width="717" height="425" alt="Granite dust area">
</div>
<!-- Installation step 6 -->
<h3>
<i class="fas fa-layer-group"></i> Step 6
</h3>
<h4>Lay out the grass</h4>
<p>Unroll your artificial grass into position, with the pile direction facing towards the property or main focus
point,for a more natural look. Leave it unroll for 2 to 3 hours to acclimatate. </p>
<div class="image">
<img src="assets/images/install-grass.webp" width="717" height="425" alt="laid out sheet of grass">
</div>
<!-- Installation step 7 -->
<h3>
<i class="fa-solid fa-puzzle-piece"></i> Step 7
</h3>
<h4>Joining the grass</h4>
<p>Now I join the sheets of grass if necessary, leaving an extra 50mm around all areas. It is very important to
cut 3 rows of stiches on the rubber side of each grass sheet to achieve an invisible join. I then fold over
each side of grass and roll out the joining tape, shiny side down. Apply aquabond glue on a zig-zag pattern
over the joining tape, and glue the two pieces of grass together. </p>
<div class="image">
<img src="assets/images/joining-grass.webp" width="717" height="425" alt="Joining sheets of artificial grass">
</div>
<!-- Installation step 8 -->
<h3>
<i class="fa-solid fa-broom"></i> Step 8
</h3>
<h4>Brushing the grass</h4>
<p>The last step of the isntallation is to brush your new installed grass to get the grass pile upright for a
more natural look. It can be done with a garden brush for small areas, but I would recommend to use a power
brush for bigger projects. </p>
<div class="image">
<img src="assets/images/power-brush.webp" width="717" height="425"
alt="brushing the grass with an electric brush">
</div>
</section>
</main>
<!-- End of Main Section -->
<!-- Aside Section -->
<aside class="content">
<h3>Materials and locations:</h3>
<br>
<div class="image">
<figure>
<img src="assets/images/grass40mm.webp" width="645" height="645" alt="sample of 40mm pile grass">
<figcaption> 40mm pile grass</figcaption>
</figure>
</div>
<br>
<div class="image">
<figure>
<img src="assets/images/sport-golf-grass.webp" width="645" height="645" alt="sample of golf type grass">
<figcaption> Putting green grass</figcaption>
</figure>
</div>
<br>
<div class="image">
<figure>
<img src="assets/images/play-area-grass.webp" width="780" height="780" alt="sample of play area grass">
<figcaption> Play area grass</figcaption>
</figure>
</div>
<br>
<div class="list">
<h3>Tools checklist:</h3>
<ul>
<li>Shovel</li>
<li>Wheelbarrow</li>
<li>Turf cutter (recommended)</li>
<li>Screen bar</li>
<li>Measuring tape</li>
<li>Shap knife and spare blades</li>
<li>Hammer</li>
<li>Pair of gloves</li>
</ul>
<br>
<h3>Materials checklist:</h3>
<ul>
<li>100mm treated timber</li>
<li>MOT-1 agregate</li>
<li>Weed membrane</li>
<li>Granite dust</li>
<li>Your chosen grass</li>
<li>Joining tape (if required)</li>
<li>Aqua bond glue cartridge</li>
</ul>
</div>
<div class="map-container">
<h3>Builders Providers locations</h3>
<iframe
src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d276527.4710542414!2d-6.503708657228686!3d53.66337851387275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sartificial%20grass%20material!5e0!3m2!1sen!2sie!4v1654340563735!5m2!1sen!2sie"
width="300" height="300" style="border:0;" title="builder providers locations" allowfullscreen=""
loading="lazy"></iframe>
</div>
<button><a href="index.html" aria-label="Go back to top of the page" class="down-top-btn">top</a></button>
</aside>
</div>
<footer>
<ul class="social-links">
<li>
<a href="https://www.facebook.com/" target="_blank" rel="noopener"
aria-label="visit our facebook page (opens in a new tab)">
<i class="fa-brands fa-facebook-square"></i>
</a>
</li>
<li>
<a href="https://www.youtube.com/watch?v=gAjIVEmackw&t=1s&ab_channel=Marshalls" target="_blank" rel="noopener"
aria-label="Visit marshalls youtube page (opens in a new tab)">
<i class="fab fa-youtube-square"></i>
</a>
</li>
<li>
<a href="https://www.instagram.com/" target="_blank" rel="noopener"
aria-label="Visit our facebook page (opens in a new tab)">
<i class="fab fa-instagram-square"></i>
</a>
</li>
<li>
<a href="https://www.twitter.com/" target="_blank" rel="noopener"
aria-label="visit our twitter page (opens in a new tab)">
<i class="fa-brands fa-twitter-square"></i>
</a>
</li>
</ul>
<div class="signature">
<span>Developed by Jose Guerra</span>
<span>Personal Project-1</span>
<span>Code Institute</span>
</div>
</footer>
<!-- Font awesome link -->
<script src="https://kit.fontawesome.com/97317b0f17.js" crossorigin="anonymous"></script>
</body>
</html>