bootstrap-templates/drafthouse/index.html at main · ColorlibHQ/bootstrap-templates · GitHub

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
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
<!doctype html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drafthouse — Free Bootstrap 6 Architecture &amp; Interior Design Template</title>
<meta name="description" content="Drafthouse is a free Bootstrap 6 architecture template — drawing-sheet design language, projects carrying area and status as data, practice principles, awards and an enquiry sheet.">
<link rel="stylesheet" href="assets/vendor/bootstrap6/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/base.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body data-bs-spy="scroll" data-bs-target="#navScroll" data-bs-top-margin="110px" data-bs-smooth-scroll="true">

<a class="visually-hidden-focusable btn-solid theme-primary m-2" href="#main">Skip to main content</a>

<header class="site-header">
  <nav class="navbar lg:navbar-expand" aria-label="Main">
    <div class="container">
      <a class="wordmark" href="index.html">Drafthouse</a>

      <dialog class="drawer drawer-end" tabindex="-1" id="navDrawer" aria-labelledby="navDrawerLabel">
        <div class="drawer-header">
          <h5 class="drawer-title" id="navDrawerLabel">Menu</h5>
          <button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
        </div>
        <div class="drawer-body mb-2 lg:mb-0">
          <ul class="nav navbar-nav ms-auto lg:gap-4" id="navScroll">
            <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
            <li class="nav-item"><a class="nav-link" href="#practice">Practice</a></li>
            <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
            <li class="nav-item"><a class="nav-link" href="#people">People</a></li>
            <li class="nav-item"><a class="nav-link" href="#enquire">Enquire</a></li>
          </ul>
        </div>
      </dialog>

      <div class="d-flex align-items-center gap-2 ms-auto">
        <button class="btn-icon" type="button" id="themeToggle" aria-label="Toggle color mode">
          <svg class="theme-icon-light" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="3.25"/><path d="M8 1v1.5M8 13.5V15M15 8h-1.5M2.5 8H1m11-4-1 1M5 11l-1 1m0-8 1 1m6 6 1 1"/></svg>
          <svg class="theme-icon-dark" width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/></svg>
        </button>
        <a class="btn-solid theme-primary d-none md:d-inline-flex" href="#enquire">Start a project</a>
        <button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navDrawer" aria-controls="navDrawer" aria-label="Open navigation">
          <span class="navbar-toggler-icon" aria-hidden="true"></span>
        </button>
      </div>
    </div>
  </nav>
</header>

<section class="plate">
  <img class="hero-bg" src="img/plate.jpg" alt="" width="1800" height="1100" loading="eager">
  <div class="plate-inner">
    <div class="container-fluid px-0">
      <p class="anno mb-3" style="color:rgb(255 255 255 / .7)">Currently on site</p>
      <h1 class="plate-title mb-0" style="max-width:24rem">Slate Yard,<br>Hebden Bridge</h1>

      <div class="title-block">
        <div>
          <p class="anno mb-0">Area</p>
          <p class="anno-value mb-0">1,240 m&sup2;</p>
        </div>
        <div>
          <p class="anno mb-0">Completion</p>
          <p class="anno-value mb-0">Spring 2027</p>
        </div>
        <div>
          <p class="anno mb-0">Sector</p>
          <p class="anno-value mb-0">Residential</p>
        </div>
        <div>
          <p class="anno mb-0">Status</p>
          <p class="anno-value mb-0">Stage 5</p>
        </div>
      </div>
    </div>
  </div>
</section>

<main id="main">

  <!-- Intro -->
  <section class="section">
    <div class="container">
      <div class="row g-6">
        <div class="lg:col-5">
          <p class="anno mb-3">The practice</p>
          <h2 class="fs-4xl mb-0" style="font-weight:500;letter-spacing:-.03em;line-height:1.06">Buildings that<br>age well</h2>
        </div>
        <div class="lg:col-7">
          <p class="fs-lg fg-2 mb-4">
            Drafthouse is an eleven-person architecture and interiors practice in
            West Yorkshire. We work on houses, small civic buildings and the
            occasional workplace, mostly within an hour of the studio.
          </p>
          <p class="fg-2 mb-0">
            We take on around nine projects a year and run them ourselves — the
            person who draws it is the person who visits the site. Roughly a
            third of our work is on existing buildings, which is where most of
            the interesting problems are.
          </p>
        </div>
      </div>
    </div>
  </section>

  <!-- Projects -->
  <section class="section bg-2" id="projects">
    <div class="container">
      <div class="d-flex flex-wrap justify-content-between align-items-end gap-3 mb-5">
        <div>
          <p class="anno mb-2">Selected projects</p>
          <h2 class="fs-4xl mb-0" style="font-weight:500;letter-spacing:-.03em">Recent &amp; current</h2>
        </div>
        <p class="fg-3 fs-sm mb-0">2021 — 2027</p>
      </div>

      <div class="row g-5">
        <div class="md:col-6">
          <a class="proj" href="project.html">
            <div class="proj-media"><div class="ph"><img src="img/proj-1.jpg" alt="Slate Yard, a stone house on a hillside" width="900" height="675" loading="lazy"></div></div>
            <p class="proj-name mb-0">Slate Yard</p>
            <div class="proj-meta">
              <div><p class="anno mb-0">Area</p><p class="anno-value mb-0">1,240 m&sup2;</p></div>
              <div><p class="anno mb-0">Location</p><p class="anno-value mb-0">Hebden Bridge</p></div>
              <div><p class="anno mb-0">Status</p><p class="anno-value mb-0">On site</p></div>
            </div>
          </a>
        </div>
        <div class="md:col-6">
          <a class="proj" href="project.html">
            <div class="proj-media"><div class="ph"><img src="img/proj-2.jpg" alt="A converted mill workspace" width="900" height="675" loading="lazy"></div></div>
            <p class="proj-name mb-0">Bank Mill</p>
            <div class="proj-meta">
              <div><p class="anno mb-0">Area</p><p class="anno-value mb-0">2,860 m&sup2;</p></div>
              <div><p class="anno mb-0">Location</p><p class="anno-value mb-0">Halifax</p></div>
              <div><p class="anno mb-0">Status</p><p class="anno-value mb-0">Complete</p></div>
            </div>
          </a>
        </div>
        <div class="md:col-6">
          <a class="proj" href="project.html">
            <div class="proj-media"><div class="ph"><img src="img/proj-3.jpg" alt="A small library interior" width="900" height="675" loading="lazy"></div></div>
            <p class="proj-name mb-0">Wainhouse Library</p>
            <div class="proj-meta">
              <div><p class="anno mb-0">Area</p><p class="anno-value mb-0">640 m&sup2;</p></div>
              <div><p class="anno mb-0">Location</p><p class="anno-value mb-0">Sowerby</p></div>
              <div><p class="anno mb-0">Status</p><p class="anno-value mb-0">Complete</p></div>
            </div>
          </a>
        </div>
        <div class="md:col-6">
          <a class="proj" href="project.html">
            <div class="proj-media"><div class="ph"><img src="img/proj-4.jpg" alt="A domestic kitchen extension" width="900" height="675" loading="lazy"></div></div>
            <p class="proj-name mb-0">Fold House</p>
            <div class="proj-meta">
              <div><p class="anno mb-0">Area</p><p class="anno-value mb-0">210 m&sup2;</p></div>
              <div><p class="anno mb-0">Location</p><p class="anno-value mb-0">Todmorden</p></div>
              <div><p class="anno mb-0">Status</p><p class="anno-value mb-0">Complete</p></div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- Practice -->
  <section class="section" id="practice">
    <div class="container">
      <div class="row g-6">
        <div class="lg:col-4">
          <p class="anno mb-2">How we work</p>
          <h2 class="fs-4xl mb-0" style="font-weight:500;letter-spacing:-.03em">Four things<br>we hold to</h2>
        </div>
        <div class="lg:col-8">
          <div class="principle">
            <span class="principle-no">01</span>
            <div>
              <p class="fw-semibold mb-2">Survey before sketch</p>
              <p class="fg-2 mb-0">We measure the building ourselves rather than working from the estate agent's plan. It costs a week and saves an argument at Stage 4.</p>
            </div>
          </div>
          <div class="principle">
            <span class="principle-no">02</span>
            <div>
              <p class="fw-semibold mb-2">One drawing set, kept current</p>
              <p class="fg-2 mb-0">Contractors get one place to look. Superseded drawings are withdrawn, not left in the folder to be found six weeks later.</p>
            </div>
          </div>
          <div class="principle">
            <span class="principle-no">03</span>
            <div>
              <p class="fw-semibold mb-2">Cost the design, not the aspiration</p>
              <p class="fg-2 mb-0">A QS is on board from Stage 2 on anything over £400k. We would rather lose a good idea early than lose it at tender.</p>
            </div>
          </div>
          <div class="principle">
            <span class="principle-no">04</span>
            <div>
              <p class="fw-semibold mb-2">Visit weekly once on site</p>
              <p class="fg-2 mb-0">Whoever drew it walks it. Most of what goes wrong on site is visible a fortnight before it becomes expensive.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Services -->
  <section class="section bg-2" id="services">
    <div class="container">
      <p class="anno mb-2">Services</p>
      <h2 class="fs-4xl mb-5" style="font-weight:500;letter-spacing:-.03em">What we are appointed for</h2>
      <div class="row g-4">
        <div class="md:col-6 lg:col-3">
          <div class="service-cell">
            <p class="anno mb-3">RIBA 0—1</p>
            <p class="fw-semibold mb-2">Feasibility</p>
            <p class="fg-2 fs-sm mb-0">Site appraisal, planning risk and a costed options study. Usually four to six weeks.</p>
          </div>
        </div>
        <div class="md:col-6 lg:col-3">
          <div class="service-cell">
            <p class="anno mb-3">RIBA 2—3</p>
            <p class="fw-semibold mb-2">Design &amp; planning</p>
            <p class="fg-2 fs-sm mb-0">Concept through to a submitted application, including pre-app and consultant coordination.</p>
          </div>
        </div>
        <div class="md:col-6 lg:col-3">
          <div class="service-cell">
            <p class="anno mb-3">RIBA 4</p>
            <p class="fw-semibold mb-2">Technical design</p>
            <p class="fg-2 fs-sm mb-0">Building regulations, tender package and a specification a contractor can price without guessing.</p>
          </div>
        </div>
        <div class="md:col-6 lg:col-3">
          <div class="service-cell">
            <p class="anno mb-3">RIBA 5—6</p>
            <p class="fw-semibold mb-2">On site</p>
            <p class="fg-2 fs-sm mb-0">Contract administration, weekly visits, and seeing it through to practical completion.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Awards -->
  <section class="section">
    <div class="container">
      <p class="anno mb-2">Recognition</p>
      <h2 class="fs-4xl mb-5" style="font-weight:500;letter-spacing:-.03em">Awards &amp; press</h2>
      <div class="award-row"><span class="anno-value fg-3">2026</span><span class="fw-semibold">RIBA Yorkshire Award — Bank Mill</span><span class="fg-3 fs-sm">Shortlisted</span></div>
      <div class="award-row"><span class="anno-value fg-3">2025</span><span class="fw-semibold">Civic Trust Award — Wainhouse Library</span><span class="fg-3 fs-sm">Winner</span></div>
      <div class="award-row"><span class="anno-value fg-3">2025</span><span class="fw-semibold">Don't Move, Improve — Fold House</span><span class="fg-3 fs-sm">Longlisted</span></div>
      <div class="award-row"><span class="anno-value fg-3">2024</span><span class="fw-semibold">Architects' Journal Retrofit — Bank Mill</span><span class="fg-3 fs-sm">Highly commended</span></div>
    </div>
  </section>

  <!-- People -->
  <section class="section bg-2" id="people">
    <div class="container">
      <div class="row g-6 mb-5">
        <div class="lg:col-5">
          <p class="anno mb-2">People</p>
          <h2 class="fs-4xl mb-0" style="font-weight:500;letter-spacing:-.03em">Eleven of us</h2>
        </div>
        <div class="lg:col-7">
          <p class="fg-2 mb-0">
            Four architects, three Part 2s, two technologists, an interior
            designer and someone who keeps the fee accounts honest.
          </p>
        </div>
      </div>
      <div class="row g-4">
        <div class="sm:col-6 lg:col-3">
          <div class="person">
            <div class="ph"><img src="img/person-1.jpg" alt="Portrait of Rhian Vaughan" width="500" height="500" loading="lazy"></div>
            <p class="fw-semibold mb-1">Rhian Vaughan</p>
            <p class="person-role mb-0">Director, ARB. Founded the practice in 2011.</p>
          </div>
        </div>
        <div class="sm:col-6 lg:col-3">
          <div class="person">
            <div class="ph"><img src="img/person-2.jpg" alt="Portrait of Idris Bello" width="500" height="500" loading="lazy"></div>
            <p class="fw-semibold mb-1">Idris Bello</p>
            <p class="person-role mb-0">Director, ARB. Conservation accredited.</p>
          </div>
        </div>
        <div class="sm:col-6 lg:col-3">
          <div class="person">
            <div class="ph"><img src="img/person-3.jpg" alt="Portrait of Marta Kowalczyk" width="500" height="500" loading="lazy"></div>
            <p class="fw-semibold mb-1">Marta Kowalczyk</p>
            <p class="person-role mb-0">Associate. Leads the interiors work.</p>
          </div>
        </div>
        <div class="sm:col-6 lg:col-3">
          <div class="person">
            <div class="ph"><img src="img/person-4.jpg" alt="Portrait of Tom Sherratt" width="500" height="500" loading="lazy"></div>
            <p class="fw-semibold mb-1">Tom Sherratt</p>
            <p class="person-role mb-0">Technologist. Draws the details.</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Enquire -->
  <section class="section" id="enquire">
    <div class="container">
      <div class="row g-6">
        <div class="lg:col-5">
          <p class="anno mb-2">Enquiries</p>
          <h2 class="fs-4xl mb-4" style="font-weight:500;letter-spacing:-.03em">Tell us about<br>the site</h2>
          <p class="fg-2 mb-4">
            A director reads every enquiry. If the project is not right for us we
            will say so within a few days rather than leaving you waiting.
          </p>
          <div class="spec-row"><span class="fg-3 fs-sm">Typical project value</span><span class="fs-sm">&pound;150k — &pound;4m</span></div>
          <div class="spec-row"><span class="fg-3 fs-sm">Working radius</span><span class="fs-sm">One hour of Hebden Bridge</span></div>
          <div class="spec-row"><span class="fg-3 fs-sm">Feasibility fee</span><span class="fs-sm">From &pound;3,500</span></div>
          <div class="spec-row"><span class="fg-3 fs-sm">Current capacity</span><span class="fs-sm">Taking on from October</span></div>
        </div>

        <div class="lg:col-7">
          <div class="contact-sheet">
            <form id="enqForm" data-demo-form data-bs-validate novalidate>
              <div class="row g-3">
                <div class="md:col-6">
                  <div class="form-field">
                    <label class="form-label" for="eqName">Your name</label>
                    <input type="text" class="form-control" id="eqName" required>
                    <div class="invalid-feedback">Required.</div>
                  </div>
                </div>
                <div class="md:col-6">
                  <div class="form-field">
                    <label class="form-label" for="eqEmail">Email</label>
                    <input type="email" class="form-control" id="eqEmail" required>
                    <div class="invalid-feedback">A valid email, please.</div>
                  </div>
                </div>
                <div class="md:col-6">
                  <label class="form-label">Project type</label>
                  <button class="form-control combobox-toggle" type="button" data-bs-toggle="combobox" data-bs-search="true" data-bs-name="ptype" data-bs-placeholder="Choose one…">
                    <span class="combobox-value">Choose one…</span>
                    <svg class="combobox-caret" width="10" height="16" viewBox="0 0 10 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M0.46967 5.46967C0.762563 5.17678 1.23744 5.17678 1.53033 5.46967L5 8.93934L8.46967 5.46967C8.76256 5.17678 9.23744 5.17678 9.53033 5.46967C9.82322 5.76256 9.82322 6.23744 9.53033 6.53033L5.53033 10.5303C5.23744 10.8232 4.76256 10.8232 4.46967 10.5303L0.46967 6.53033C0.176777 6.23744 0.176777 5.76256 0.46967 5.46967Z" fill="currentcolor"/></svg>
                  </button>
                  <div class="menu">
                    <button class="menu-item" type="button" data-bs-value="newhouse">New house</button>
                    <button class="menu-item" type="button" data-bs-value="extension">Extension or remodel</button>
                    <button class="menu-item" type="button" data-bs-value="retrofit">Retrofit or conversion</button>
                    <button class="menu-item" type="button" data-bs-value="civic">Civic or community</button>
                    <button class="menu-item" type="button" data-bs-value="workplace">Workplace</button>
                    <button class="menu-item" type="button" data-bs-value="interiors">Interiors only</button>
                  </div>
                </div>
                <div class="md:col-6">
                  <div class="form-field">
                    <label class="form-label" for="eqWhen">Hoped-for start</label>
                    <input type="text" class="form-control" id="eqWhen" data-bs-toggle="datepicker" autocomplete="off" placeholder="Choose a date…">
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-field">
                    <label class="form-label" for="eqSite">The site &amp; the brief</label>
                    <textarea class="form-control" id="eqSite" rows="5" placeholder="Where is it, what is there now, and what do you want to end up with? Planning history is useful if you know it." required></textarea>
                    <div class="invalid-feedback">Give us the outline.</div>
                  </div>
                </div>
                <div class="col-12">
                  <div class="form-field">
                    <div class="switch"><input type="checkbox" id="eqPlanning" role="switch" switch></div>
                    <label for="eqPlanning">The site is listed or in a conservation area</label>
                  </div>
                </div>
                <div class="col-12">
                  <button class="btn-solid theme-primary btn-lg" type="submit" data-done-text="Enquiry sent ✓">Send enquiry</button>
                  <p class="fs-xs fg-3 mt-3 mb-0">Or email <a href="mailto:studio@drafthouse.example">studio@drafthouse.example</a></p>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

</main>

<footer class="site-footer section pb-5 bg-2">
  <div class="container">
    <div class="row g-5">
      <div class="md:col-4">
        <p class="wordmark d-inline-block mb-3">Drafthouse</p>
        <p class="fg-3 fs-sm mb-0">The Old Weaving Shed<br>Hebden Bridge HX7 8AF<br>United Kingdom</p>
      </div>
      <div class="md:col-2">
        <p class="fw-semibold fs-sm mb-3">Work</p>
        <ul class="list-unstyled fs-sm fg-3 mb-0">
          <li class="mb-2"><a href="#projects">Projects</a></li>
          <li class="mb-2"><a href="project.html">Project detail</a></li>
        </ul>
      </div>
      <div class="md:col-2">
        <p class="fw-semibold fs-sm mb-3">Practice</p>
        <ul class="list-unstyled fs-sm fg-3 mb-0">
          <li class="mb-2"><a href="#practice">How we work</a></li>
          <li class="mb-2"><a href="#services">Services</a></li>
          <li class="mb-2"><a href="#people">People</a></li>
        </ul>
      </div>
      <div class="md:col-4">
        <p class="fw-semibold fs-sm mb-3">Studio</p>
        <p class="fs-sm fg-3 mb-1"><a href="tel:01422000000">01422 000 000</a></p>
        <p class="fs-sm fg-3 mb-0"><a href="mailto:studio@drafthouse.example">studio@drafthouse.example</a></p>
      </div>
    </div>
    <hr class="my-5">
    <p class="fs-xs fg-3 mb-0">&copy; <span data-year></span> Drafthouse Architects. A free Bootstrap 6 template — the practice is fictional.</p>
  </div>
</footer>

<script type="module" src="assets/js/main.js"></script>
</body>
</html>