I want to create a website for a woodworker that focuses on built-in furniture like kitchen cabinets and bookcases. Can you create it for me? I want the .html files and .scss files only.

Absolutely — below is a clean, professional starter website tailored for a custom woodworker specializing in built-in furniture (kitchen cabinets, bookcases, storage, etc.).

You’ll get:

📁 Suggested File Structure

/project
│
├── index.html
├── services.html
├── gallery.html
├── contact.html
│
└── scss/
    ├── main.scss
    ├── _variables.scss
    ├── _base.scss
    ├── _layout.scss
    ├── _components.scss

🧱 HTML FILES

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Crafted Built-Ins | Custom Woodworking</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>
  <header class="site-header">
    <h1>Crafted Built-Ins</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="gallery.html">Gallery</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section class="hero">
    <h2>Custom Built-In Furniture</h2>
    <p>Handcrafted kitchen cabinets, bookcases, and storage solutions made to fit your home perfectly.</p>
  </section>

  <section class="intro">
    <h3>Quality Craftsmanship</h3>
    <p>
      We specialize in bespoke built-in furniture using solid hardwoods,
      traditional joinery, and timeless design.
    </p>
  </section>

  <footer class="site-footer">
    <p>&copy; 2025 Crafted Built-Ins</p>
  </footer>
</body>
</html>

services.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Services | Crafted Built-Ins</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>
  <header class="site-header">
    <h1>Our Services</h1>
  </header>

  <main class="services">
    <article>
      <h2>Kitchen Cabinets</h2>
      <p>Custom cabinetry designed to maximize storage and complement your space.</p>
    </article>

    <article>
      <h2>Bookcases & Libraries</h2>
      <p>Wall-to-wall bookcases, reading nooks, and home libraries.</p>
    </article>

    <article>
      <h2>Built-In Storage</h2>
      <p>Closets, mudrooms, and media units tailored to your needs.</p>
    </article>
  </main>

  <footer class="site-footer">
    <a href="index.html">← Back Home</a>
  </footer>
</body>
</html>

gallery.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Gallery | Crafted Built-Ins</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>
  <header class="site-header">
    <h1>Project Gallery</h1>
  </header>

  <main class="gallery">
    <div class="gallery-item">Kitchen Cabinet Project</div>
    <div class="gallery-item">Custom Bookcase</div>
    <div class="gallery-item">Built-In Storage Wall</div>
  </main>

  <footer class="site-footer">
    <a href="index.html">← Back Home</a>
  </footer>
</body>
</html>

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Contact | Crafted Built-Ins</title>
  <link rel="stylesheet" href="css/main.css" />
</head>
<body>
  <header class="site-header">
    <h1>Contact</h1>
  </header>

  <main class="contact">
    <p>Interested in a custom built-in?</p>

    <form>
      <label>
        Name
        <input type="text" />
      </label>

      <label>
        Email
        <input type="email" />
      </label>

      <label>
        Project Details
        <textarea></textarea>
      </label>

      <button type="submit">Send</button>
    </form>
  </main>

  <footer class="site-footer">
    <a href="index.html">← Back Home</a>
  </footer>
</body>
</html>

🎨 SCSS FILES

scss/main.scss

@use 'variables';
@use 'base';
@use 'layout';
@use 'components';

scss/_variables.scss

$font-main: 'Georgia', serif;
$color-primary: #5a3e2b;
$color-accent: #c49a6c;
$color-bg: #f7f4f1;
$color-text: #2b2b2b;

scss/_base.scss

body {
  font-family: $font-main;
  background-color: $color-bg;
  color: $color-text;
  margin: 0;
}

a {
  color: $color-primary;
  text-decoration: none;
}

scss/_layout.scss

.site-header,
.site-footer {
  background: $color-primary;
  color: white;
  padding: 1rem;
}

.site-header nav ul {
  list-style: none;
  display: flex;
  gap: 1rem;
  padding: 0;
}

main {
  padding: 2rem;
}

.hero {
  background: $color-accent;
  padding: 3rem;
  text-align: center;
}

scss/_components.scss

.services article,
.gallery-item {
  background: white;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-left: 4px solid $color-accent;
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

button {
  background: $color-primary;
  color: white;
  border: none;
  padding: 0.75rem;
  cursor: pointer;
}

🚀 Next Steps (Optional)

I can:

Just tell me how far you want to take it.