bootstrap-templates/drafthouse/project.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
<!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>Slate Yard — Drafthouse | Free Bootstrap 6 Architecture Template</title>
<meta name="description" content="Project page from the Drafthouse Bootstrap 6 architecture template — drawing-sheet metadata, brief, approach and a sticky project fact 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>

<a class="visually-hidden-focusable btn-solid theme-primary m-2" href="index.html#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">
            <li class="nav-item"><a class="nav-link" href="index.html#projects">Projects</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#practice">Practice</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#people">People</a></li>
            <li class="nav-item"><a class="nav-link" href="index.html#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="index.html#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>


<div class="sub-head">
  <div class="container">
    <nav aria-label="Breadcrumb" class="mb-4">
      <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html">Drafthouse</a></li>
        <li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html#projects">Projects</a></li>
        <li class="breadcrumb-item active" aria-current="page">Slate Yard</li>
      </ol>
    </nav>
    <p class="anno mb-3">Residential &middot; on site</p>
    <h1 class="fs-5xl mb-3" style="font-weight:500;letter-spacing:-.03em">Slate Yard</h1>
    <p class="fs-lg fg-2 mb-0" style="max-width:42rem">
      A pair of derelict weavers' cottages and a collapsed outbuilding, rebuilt as
      one house around the yard that used to separate them.
    </p>
  </div>
</div>

<main id="main">
  <section class="section">
    <div class="container">
      <div class="ph ph-16x9 sheet mb-6">
        <img src="img/proj-1.jpg" alt="Slate Yard from the lane" width="1400" height="788" loading="eager">
      </div>

      <div class="row g-6">
        <div class="lg:col-8">
          <div class="prose">
            <h2 class="fs-2xl mb-3" style="font-weight:500;letter-spacing:-.02em">The brief</h2>
            <p class="fg-2">
              Two one-up-one-down cottages, condemned in the seventies, with a
              stone outbuilding between them that had lost its roof. The clients
              wanted one house for two generations, and were clear they did not
              want it to read as a conversion with an extension bolted on.
            </p>

            <h2 class="fs-2xl mb-3 mt-6" style="font-weight:500;letter-spacing:-.02em">What we did</h2>
            <p class="fg-2">
              We kept the two cottages as separate volumes and rebuilt the
              outbuilding as a single-storey link containing the kitchen — so the
              plan reads as three things that were always there, rather than one
              thing that grew.
            </p>
            <ul class="fg-2">
              <li class="mb-2">Full measured survey and structural appraisal before any design work</li>
              <li class="mb-2">Reclaimed stone from the collapsed gable used for the new link</li>
              <li class="mb-2">Internal wall insulation and new slate roof to reach EPC B on a solid-wall building</li>
              <li>Ground-source heat pump serving underfloor throughout</li>
            </ul>

            <h2 class="fs-2xl mb-3 mt-6" style="font-weight:500;letter-spacing:-.02em">Where it stands</h2>
            <p class="fg-2 mb-0">
              Structural works completed in March. First fix is underway and the
              roof is on. Practical completion is expected in spring 2027, which
              is one quarter later than the original programme after asbestos was
              found in the outbuilding floor.
            </p>
          </div>

          <div class="row g-3 mt-6">
            <div class="col-6"><div class="ph ph-4x3 sheet"><img src="img/proj-2.jpg" alt="The rebuilt link from the yard" width="600" height="450" loading="lazy"></div></div>
            <div class="col-6"><div class="ph ph-4x3 sheet"><img src="img/proj-4.jpg" alt="Interior during first fix" width="600" height="450" loading="lazy"></div></div>
          </div>
        </div>

        <div class="lg:col-4">
          <div class="fact-sheet">
            <p class="anno mb-4">Project data</p>
            <div class="spec-row"><span class="fg-3 fs-sm">Area</span><span class="fs-sm">1,240 m&sup2;</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Location</span><span class="fs-sm">Hebden Bridge</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Sector</span><span class="fs-sm">Residential</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Status</span><span class="fs-sm">RIBA Stage 5</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Completion</span><span class="fs-sm">Spring 2027</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Contractor</span><span class="fs-sm">Pemberton Build</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">Structure</span><span class="fs-sm">Calder Engineering</span></div>
            <div class="spec-row"><span class="fg-3 fs-sm">EPC target</span><span class="fs-sm">B</span></div>

            <a class="btn-solid theme-primary w-100 mt-4" href="index.html#enquire">Discuss a similar project</a>
          </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="index.html#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="index.html#practice">How we work</a></li>
          <li class="mb-2"><a href="index.html#services">Services</a></li>
          <li class="mb-2"><a href="index.html#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>