Create Your Metal Fab Website Template (HTML CSS JS)

Faraz

By Faraz -

Design and build a professional, responsive website template for metal fabrication services. Unlock HTML, CSS, & JS skills for your business.

Join us on Telegram
create-your-metal-fab-website-template-html-css-js.webp
Read AlsoCreate a Stunning Curved Range Slider with HTML and CSS.jpgCreate a Stunning Curved Range Slider with HTML and CSS (Source Code)

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. JavaScript Code
  5. Conclusion
  6. Preview

Do you want to build a clean and modern website for your metal fabrication business? A good website helps customers learn about your services and contact you easily. In this guide, we will build a Metal Fabrication Service Website Template using HTML, CSS, and JavaScript.

You don’t need to be an expert. Just basic knowledge of HTML and CSS is enough to get started. We'll also use a little JavaScript for a better user experience.

Prerequisites:

  • A code editor like VS Code
  • Basic knowledge of HTML, CSS, and JavaScript
  • A browser to preview your website

Source Code

Step 1 (HTML Code):

In the first step, we will use HTML to create the basic structure of the website. This includes the header, navigation, sections like services, about, and contact.

Copy the HTML code given below and paste it into your file named index.html.

Read Alsosquid-game-loader.pngCSS Loaders: Creating Squid Game-Inspired Loaders Using HTML and CSS

Step 2 (CSS Code):

Now that the layout is ready, let’s move to CSS. With CSS, we will make the website look modern, clean, and mobile-friendly. It will help us style the text, background, buttons, and layout.

Copy the CSS code given below and paste it into your file named styles.css.

/* ---------- Root Variables ---------- */
:root {
    /* Color Palette */
    --primary-color: 210, 100%, 30%; /* #0061a8 - Deep steel blue */
    --secondary-color: 22, 90%, 50%; /* #e67e22 - Orange accent */
    --dark-color: 210, 50%, 10%; /* #0b1926 - Very dark blue-gray */
    --light-color: 210, 20%, 95%; /* #f0f3f6 - Very light blue-gray */
    --gray-color: 210, 10%, 60%; /* #969ca3 - Medium blue-gray */
    --success-color: 120, 60%, 40%; /* #3d9a50 - Green */
    --warning-color: 45, 100%, 50%; /* #ffcc00 - Yellow */
    --error-color: 0, 80%, 50%; /* #e63333 - Red */
    
    /* Font Weights */
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-bold: 700;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 3rem;
    --spacing-xl: 5rem;
    
    /* Border Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);
    
    /* Container Width */
    --container-width: 1200px;
}

/* ---------- Reset & Base Styles ---------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: hsl(var(--dark-color));
    background-color: #ffffff;
    overflow-x: hidden;
}

ul, ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-normal);
}

img, svg {
    max-width: 100%;
    display: block;
}

button, input, select, textarea {
    font: inherit;
    color: inherit;
    border: none;
    background: none;
}

button {
    cursor: pointer;
}

/* ---------- Utility Classes ---------- */
.container {
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.section-padding {
    padding: var(--spacing-xl) 0;
}

.dark-section {
    background-color: hsl(var(--dark-color));
    color: hsl(var(--light-color));
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-header h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-xs);
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: hsl(var(--secondary-color));
}

.section-header h2 span {
    color: hsl(var(--secondary-color));
}

.section-header p {
    font-size: 1.1rem;
    color: hsl(var(--gray-color));
    max-width: 600px;
    margin: 0 auto;
    margin-top: var(--spacing-sm);
}

.dark-section .section-header p {
    color: hsla(var(--light-color), 0.7);
}

.text-left {
    text-align: left;
}

.text-left h2::after {
    left: 0;
    transform: none;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 0.8rem 1.8rem;
    border-radius: var(--border-radius-sm);
    font-weight: var(--font-medium);
    text-align: center;
    transition: var(--transition-normal);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.btn-primary {
    background-color: hsl(var(--primary-color));
    color: white;
    box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
    background-color: hsl(var(--primary-color), 0.9);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background-color: white;
    color: hsl(var(--primary-color));
    transform: translateY(-2px);
}

/* ---------- Header & Navigation ---------- */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: transparent;
    transition: var(--transition-normal);
    padding: var(--spacing-sm) 0;
}

#header.scrolled {
    background-color: hsl(var(--dark-color));
    box-shadow: var(--shadow-md);
    padding: var(--spacing-xs) 0;
}

#header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo a {
    display: flex;
    align-items: center;
    color: white;
    font-weight: var(--font-bold);
    font-size: 1.5rem;
}

.logo img {
    height: 40px;
    margin-right: var(--spacing-xs);
}

.main-nav {
    display: flex;
    align-items: center;
}

.nav-menu {
    display: flex;
    gap: var(--spacing-md);
}

.nav-link {
    color: white;
    font-weight: var(--font-medium);
    position: relative;
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: hsl(var(--secondary-color));
    transition: var(--transition-normal);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.mobile-menu-toggle {
    display: none;
}

/* ---------- Hero Section ---------- */
#hero {
    height: 100vh;
    min-height: 600px;
    background: linear-gradient(rgba(11, 25, 38, 0.8), rgba(11, 25, 38, 0.8)), url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    padding: 0 var(--spacing-sm);
}

.hero-content {
    max-width: 800px;
}

.hero-content h1 {
    font-family: 'Oswald', sans-serif;
    font-size: 3.5rem;
    font-weight: var(--font-bold);
    text-transform: uppercase;
    margin-bottom: var(--spacing-xs);
    line-height: 1.2;
}

.hero-content h2 {
    font-size: 1.5rem;
    font-weight: var(--font-regular);
    margin-bottom: var(--spacing-md);
    color: hsl(var(--secondary-color));
}

.hero-content p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto var(--spacing-md);
}

.hero-buttons {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: center;
}

/* ---------- Services Section ---------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.service-card {
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-md);
    transition: var(--transition-normal);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background-color: hsl(var(--secondary-color));
    transition: var(--transition-slow);
}

.service-card:hover::before {
    height: 100%;
}

.service-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background-color: hsla(var(--primary-color), 0.1);
    border-radius: 50%;
    margin: 0 auto var(--spacing-sm);
    color: hsl(var(--primary-color));
    font-size: 1.8rem;
    transition: var(--transition-normal);
}

.service-card:hover .service-icon {
    background-color: hsl(var(--primary-color));
    color: white;
}

.service-card h3 {
    font-size: 1.4rem;
    margin-bottom: var(--spacing-sm);
    font-weight: var(--font-medium);
    color: hsl(var(--dark-color));
}

.service-card p {
    margin-bottom: var(--spacing-sm);
    color: hsl(var(--gray-color));
}

.service-features {
    text-align: left;
    padding-left: var(--spacing-md);
}

.service-features li {
    margin-bottom: var(--spacing-xs);
    position: relative;
    color: hsl(var(--gray-color));
}

.service-features li::before {
    content: '•';
    color: hsl(var(--secondary-color));
    position: absolute;
    left: -15px;
}

/* ---------- Projects Section ---------- */
.filter-controls {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.filter-btn {
    padding: 0.5rem 1rem;
    background-color: hsla(var(--light-color), 0.1);
    border-radius: var(--border-radius-sm);
    color: hsla(var(--light-color), 0.7);
    transition: var(--transition-normal);
}

.filter-btn:hover,
.filter-btn.active {
    background-color: hsl(var(--secondary-color));
    color: white;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--spacing-md);
}

.project-item {
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: var(--transition-normal);
    background-color: hsla(var(--light-color), 0.05);
}

.project-item:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg);
}

.project-image {
    height: 200px;
    position: relative;
    overflow: hidden;
}

.project-placeholder {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    transition: var(--transition-normal);
}

.project-item:hover .project-placeholder {
    transform: scale(1.1);
}

/* Placeholder backgrounds for project images */
.industrial-1 {
    background-image: url('https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080');
}

.commercial-1 {
    background-image: url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080');
}

.architectural-1 {
    background-image: url('https://images.unsplash.com/photo-1520209759809-a9bcb6cb3241?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080');
}

.custom-1 {
    background-image: url('https://images.unsplash.com/photo-1473621038790-b778b4750efe?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080');
}

.industrial-2 {
    background-image: url('https://images.unsplash.com/photo-1474674556023-efef886fa147?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080');
}

.architectural-2 {
    background-image: url('https://images.unsplash.com/photo-1504328345606-18bbc8c9d7d1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080');
}

.project-info {
    padding: var(--spacing-sm);
}

.project-info h3 {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-medium);
    color: white;
}

.project-info p {
    margin-bottom: var(--spacing-xs);
    color: hsla(var(--light-color), 0.7);
    font-size: 0.9rem;
}

.project-category {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    background-color: hsla(var(--secondary-color), 0.2);
    color: hsl(var(--secondary-color));
    border-radius: var(--border-radius-sm);
    font-size: 0.8rem;
}

/* ---------- About Section ---------- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.about-image {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    height: 400px;
}

.about-placeholder {
    width: 100%;
    height: 100%;
    background-image: url('https://images.unsplash.com/photo-1507497806295-753c4108560c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080');
    background-position: center;
    background-size: cover;
}

.about-content p {
    margin-bottom: var(--spacing-md);
    color: hsl(var(--gray-color));
}

.company-stats {
    display: flex;
    justify-content: space-between;
    margin: var(--spacing-md) 0;
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: var(--font-bold);
    color: hsl(var(--primary-color));
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    color: hsl(var(--gray-color));
    font-size: 0.9rem;
}

.about-cta {
    margin-top: var(--spacing-md);
}

/* ---------- Testimonials Section ---------- */
.testimonial-slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

.slider-container {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}

.testimonial-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transform: translateX(50px);
    transition: all var(--transition-slow);
    visibility: hidden;
}

.testimonial-slide.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
    visibility: visible;
}

.testimonial-content {
    background-color: hsla(var(--light-color), 0.05);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-md);
    box-shadow: var(--shadow-md);
    position: relative;
}

.quote-icon {
    color: hsla(var(--secondary-color), 0.2);
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.testimonial-content p {
    font-style: italic;
    margin-bottom: var(--spacing-md);
    color: hsla(var(--light-color), 0.9);
}

.testimonial-author h4 {
    font-size: 1.1rem;
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-xs);
    color: white;
}

.testimonial-author p {
    font-style: normal;
    font-size: 0.9rem;
    margin-bottom: 0;
    color: hsla(var(--light-color), 0.7);
}

.slider-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-md);
}

.prev-btn,
.next-btn {
    background-color: hsla(var(--light-color), 0.1);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: var(--transition-normal);
}

.prev-btn:hover,
.next-btn:hover {
    background-color: hsl(var(--secondary-color));
}

.slider-dots {
    display: flex;
    gap: 10px;
    margin: 0 var(--spacing-md);
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: hsla(var(--light-color), 0.2);
    cursor: pointer;
    transition: var(--transition-normal);
}

.dot.active,
.dot:hover {
    background-color: hsl(var(--secondary-color));
}

/* ---------- CTA Section ---------- */
#cta {
    background: linear-gradient(rgba(11, 25, 38, 0.9), rgba(11, 25, 38, 0.9)), url('https://images.unsplash.com/photo-1533613220915-609f661a6fe1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&q=80&w=1080') no-repeat center center/cover;
    text-align: center;
    color: white;
    padding: var(--spacing-xl) 0;
}

.cta-content h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2.5rem;
    font-weight: var(--font-medium);
    margin-bottom: var(--spacing-sm);
}

.cta-content p {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    color: hsla(var(--light-color), 0.9);
}

/* ---------- Contact Section ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contact-card {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.contact-icon {
    width: 50px;
    height: 50px;
    background-color: hsla(var(--primary-color), 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--primary-color));
    font-size: 1.2rem;
}

.contact-details h3 {
    font-size: 1.1rem;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-medium);
}

.contact-details p {
    color: hsl(var(--gray-color));
}

.map-container {
    margin-top: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.contact-form-container {
    background-color: white;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-md);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-form label {
    font-weight: var(--font-medium);
    color: hsl(var(--dark-color));
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    padding: 10px 12px;
    border: 1px solid hsla(var(--gray-color), 0.3);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-normal);
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: hsl(var(--primary-color));
    box-shadow: 0 0 0 3px hsla(var(--primary-color), 0.1);
}

.error-message {
    color: hsl(var(--error-color));
    font-size: 0.85rem;
    display: none;
}

.form-status {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    text-align: center;
    margin-top: var(--spacing-sm);
    display: none;
}

.form-status.success {
    background-color: hsla(var(--success-color), 0.1);
    color: hsl(var(--success-color));
    display: block;
}

.form-status.error {
    background-color: hsla(var(--error-color), 0.1);
    color: hsl(var(--error-color));
    display: block;
}

/* ---------- Footer ---------- */
#footer {
    background-color: hsl(var(--dark-color));
    color: hsla(var(--light-color), 0.8);
    padding-top: var(--spacing-xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid hsla(var(--light-color), 0.1);
}

.footer-about {
    max-width: 300px;
}

.footer-logo {
    display: flex;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.footer-logo img {
    height: 35px;
    margin-right: var(--spacing-xs);
}

.footer-logo span {
    color: white;
    font-weight: var(--font-bold);
    font-size: 1.2rem;
}

.footer-about p {
    margin-bottom: var(--spacing-md);
    color: hsla(var(--light-color), 0.7);
    font-size: 0.9rem;
    line-height: 1.6;
}

.social-links {
    display: flex;
    gap: var(--spacing-sm);
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: hsla(var(--light-color), 0.1);
    border-radius: 50%;
    transition: var(--transition-normal);
    color: white;
}

.social-links a:hover {
    background-color: hsl(var(--secondary-color));
    transform: translateY(-3px);
}

.footer-links h3,
.footer-services h3,
.footer-newsletter h3 {
    color: white;
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    position: relative;
    display: inline-block;
}

.footer-links h3::after,
.footer-services h3::after,
.footer-newsletter h3::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: hsl(var(--secondary-color));
}

.footer-links ul,
.footer-services ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-links a,
.footer-services a {
    color: hsla(var(--light-color), 0.7);
    transition: var(--transition-normal);
    font-size: 0.9rem;
}

.footer-links a:hover,
.footer-services a:hover {
    color: hsl(var(--secondary-color));
    padding-left: 5px;
}

.footer-newsletter p {
    margin-bottom: var(--spacing-sm);
    color: hsla(var(--light-color), 0.7);
    font-size: 0.9rem;
    line-height: 1.6;
}

.newsletter-form .form-group {
    display: flex;
    flex-direction: row;
}

.newsletter-form input {
    flex: 1;
    padding: 10px 12px;
    border-radius: var(--border-radius-sm) 0 0 var(--border-radius-sm);
    border: 1px solid hsla(var(--light-color), 0.1);
    background-color: hsla(var(--light-color), 0.05);
    color: white;
}

.newsletter-form button {
    background-color: hsl(var(--secondary-color));
    color: white;
    padding: 0 15px;
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
    transition: var(--transition-normal);
}

.newsletter-form button:hover {
    background-color: hsla(var(--secondary-color), 0.8);
}

.newsletter-status {
    margin-top: var(--spacing-xs);
    font-size: 0.85rem;
    display: none;
}

.newsletter-status.success {
    color: hsl(var(--success-color));
    display: block;
}

.newsletter-status.error {
    color: hsl(var(--error-color));
    display: block;
}

.footer-bottom {
    padding: var(--spacing-md) 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

.footer-bottom-links {
    display: flex;
    gap: var(--spacing-md);
}

/* ---------- Back to Top Button ---------- */
#backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: hsl(var(--primary-color));
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
    z-index: 100;
}

#backToTop.visible {
    opacity: 1;
    visibility: visible;
}

#backToTop:hover {
    background-color: hsl(var(--secondary-color));
    transform: translateY(-5px);
}

/*
* Responsive Styles - Large Screens */
@media (max-width: 1200px) {
    .container {
        max-width: 95%;
    }
    
    .section-header h2 {
        font-size: 2.2rem;
    }
    
    .hero-content h1 {
        font-size: 3rem;
    }
    
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-lg) var(--spacing-xl);
    }
}

/* Medium Screens */
@media (max-width: 992px) {
    html {
        font-size: 15px;
    }
    
    .hero-content h1 {
        font-size: 2.8rem;
    }
    
    .hero-content h2 {
        font-size: 1.3rem;
    }
    
    .services-grid,
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .about-image {
        order: 1;
        max-height: 350px;
    }
    
    .about-content {
        order: 2;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .contact-info {
        order: 2;
    }
    
    .contact-form-container {
        order: 1;
    }
    
    .company-stats {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    
    .stat-item {
        width: 45%;
        margin-bottom: var(--spacing-sm);
    }
}

/* Small Screens/Tablets */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background-color: hsl(var(--dark-color));
        flex-direction: column;
        justify-content: center;
        transition: var(--transition-normal);
        z-index: 1001;
        box-shadow: var(--shadow-lg);
    }
    
    .nav-menu.active {
        right: 0;
    }
    
    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        gap: 6px;
        z-index: 1002;
    }
    
    .mobile-menu-toggle .bar {
        width: 30px;
        height: 3px;
        background-color: white;
        transition: var(--transition-normal);
    }
    
    .mobile-menu-toggle.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    
    .mobile-menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .service-card,
    .project-item {
        max-width: 400px;
        margin: 0 auto;
    }
    
    .services-grid,
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .footer-about {
        max-width: 100%;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    
    .footer-bottom-links {
        justify-content: center;
    }
}

/* Extra Small Screens/Phones */
@media (max-width: 576px) {
    html {
        font-size: 14px;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content h2 {
        font-size: 1.1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .btn {
        width: 100%;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .testimonial-content {
        padding: var(--spacing-sm);
    }
    
    .filter-controls {
        flex-direction: column;
        align-items: center;
    }
    
    .filter-btn {
        width: 100%;
        text-align: center;
    }
    
    .stat-item {
        width: 100%;
    }
    
    .contact-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .contact-details h3 {
        margin-top: var(--spacing-xs);
    }
}

Step 3 (JavaScript Code):

This is our final step. Using JavaScript, we will add smart and interactive features like image sliders, form validation, gallery effects, and smooth scroll. These features will make your site more user-friendly.

Copy the JavaScript code below and paste it into your file named script.js.

document.addEventListener('DOMContentLoaded', function() {
  // Initialize all scripts
  initializeNavigation();
  initializeSmoothScrolling();
  initializeBackToTop();
  initializeNewsletterForm();
});

// Header Scroll Effect
function initializeNavigation() {
  const header = document.getElementById('header');
  const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
  const navMenu = document.querySelector('.nav-menu');
  const navLinks = document.querySelectorAll('.nav-link');
  
  // Handle header scrolling effect
  window.addEventListener('scroll', function() {
      if (window.scrollY > 50) {
          header.classList.add('scrolled');
      } else {
          header.classList.remove('scrolled');
      }
  });
  
  // Handle mobile menu toggle
  mobileMenuToggle.addEventListener('click', function() {
      mobileMenuToggle.classList.toggle('active');
      navMenu.classList.toggle('active');
      document.body.classList.toggle('no-scroll');
  });
  
  // Close menu when a link is clicked
  navLinks.forEach(link => {
      link.addEventListener('click', function() {
          mobileMenuToggle.classList.remove('active');
          navMenu.classList.remove('active');
          document.body.classList.remove('no-scroll');
          
          // Update active link
          navLinks.forEach(l => l.classList.remove('active'));
          this.classList.add('active');
      });
  });
  
  // Update active nav link on scroll
  window.addEventListener('scroll', function() {
      let current = '';
      const sections = document.querySelectorAll('section');
      
      sections.forEach(section => {
          const sectionTop = section.offsetTop;
          const sectionHeight = section.clientHeight;
          
          if (window.scrollY >= (sectionTop - 200)) {
              current = section.getAttribute('id');
          }
      });
      
      navLinks.forEach(link => {
          link.classList.remove('active');
          if (link.getAttribute('href') === `#${current}`) {
              link.classList.add('active');
          }
      });
  });
}

// Smooth Scrolling for Anchor Links
function initializeSmoothScrolling() {
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
          e.preventDefault();
          
          const targetId = this.getAttribute('href');
          
          if (targetId === '#') return;
          
          const targetElement = document.querySelector(targetId);
          
          if (targetElement) {
              const headerHeight = document.getElementById('header').offsetHeight;
              const targetPosition = targetElement.getBoundingClientRect().top + window.scrollY - headerHeight;
              
              window.scroll({
                  top: targetPosition,
                  behavior: 'smooth'
              });
          }
      });
  });
}

// Back to Top Button
function initializeBackToTop() {
  const backToTopButton = document.getElementById('backToTop');
  
  window.addEventListener('scroll', function() {
      if (window.scrollY > 300) {
          backToTopButton.classList.add('visible');
      } else {
          backToTopButton.classList.remove('visible');
      }
  });
  
  backToTopButton.addEventListener('click', function() {
      window.scroll({
          top: 0,
          behavior: 'smooth'
      });
  });
}

// Newsletter Form Handling
function initializeNewsletterForm() {
  const newsletterForm = document.getElementById('newsletterForm');
  const newsletterStatus = document.getElementById('newsletterStatus');
  
  if (newsletterForm) {
      newsletterForm.addEventListener('submit', function(e) {
          e.preventDefault();
          
          const emailInput = document.getElementById('newsletterEmail');
          const email = emailInput.value.trim();
          
          // Simple email validation
          if (!isValidEmail(email)) {
              showNewsletterStatus('Please enter a valid email address.', 'error');
              return;
          }
          
          // Simulate form submission (in a real project, you would send this to a backend service)
          showNewsletterStatus('Thank you for subscribing to our newsletter!', 'success');
          newsletterForm.reset();
      });
  }
  
  function showNewsletterStatus(message, type) {
      newsletterStatus.textContent = message;
      newsletterStatus.className = 'newsletter-status';
      newsletterStatus.classList.add(type);
      
      // Hide the status message after 5 seconds
      setTimeout(() => {
          newsletterStatus.classList.remove(type);
      }, 5000);
  }
  
  function isValidEmail(email) {
      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
  }
}

/*
* Contact Form Validation
*/

document.addEventListener('DOMContentLoaded', function() {
  initializeContactForm();
});

function initializeContactForm() {
  const contactForm = document.getElementById('contactForm');
  const formStatus = document.getElementById('formStatus');
  
  if (!contactForm) return;
  
  contactForm.addEventListener('submit', function(e) {
      e.preventDefault();
      
      // Reset previous error messages
      resetErrorMessages();
      
      // Get form inputs
      const nameInput = document.getElementById('name');
      const emailInput = document.getElementById('email');
      const phoneInput = document.getElementById('phone');
      const messageInput = document.getElementById('message');
      
      // Validate inputs
      let isValid = true;
      
      // Name validation (required, at least 2 characters)
      if (!nameInput.value.trim() || nameInput.value.trim().length < 2) {
          showError(nameInput, 'nameError', 'Please enter your name (at least 2 characters)');
          isValid = false;
      }
      
      // Email validation (required, valid format)
      if (!emailInput.value.trim() || !isValidEmail(emailInput.value.trim())) {
          showError(emailInput, 'emailError', 'Please enter a valid email address');
          isValid = false;
      }
      
      // Phone validation (optional, but if provided must be valid)
      if (phoneInput.value.trim() && !isValidPhone(phoneInput.value.trim())) {
          showError(phoneInput, 'phoneError', 'Please enter a valid phone number');
          isValid = false;
      }
      
      // Message validation (required, at least 10 characters)
      if (!messageInput.value.trim() || messageInput.value.trim().length < 10) {
          showError(messageInput, 'messageError', 'Please enter your message (at least 10 characters)');
          isValid = false;
      }
      
      // If the form is valid, process it
      if (isValid) {
          // In a real project, you would send this data to a server or email service
          // For this static example, we'll just show a success message
          
          // Simulate form submission with a short delay
          submitForm(contactForm);
      }
  });
  
  // Function to show error message
  function showError(inputElement, errorId, message) {
      const errorElement = document.getElementById(errorId);
      errorElement.textContent = message;
      errorElement.style.display = 'block';
      inputElement.classList.add('error');
      
      // Add event listener to clear error on input
      inputElement.addEventListener('input', function() {
          errorElement.style.display = 'none';
          inputElement.classList.remove('error');
      }, { once: true });
  }
  
  // Function to reset all error messages
  function resetErrorMessages() {
      const errorMessages = document.querySelectorAll('.error-message');
      const inputs = contactForm.querySelectorAll('input, textarea');
      
      errorMessages.forEach(error => {
          error.style.display = 'none';
      });
      
      inputs.forEach(input => {
          input.classList.remove('error');
      });
      
      formStatus.textContent = '';
      formStatus.className = 'form-status';
  }
  
  // Function to validate email
  function isValidEmail(email) {
      const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
  }
  
  // Function to validate phone
  function isValidPhone(phone) {
      // Allow formats like: (123) 456-7890, 123-456-7890, 123.456.7890, 1234567890
      const re = /^[\+]?[(]?[0-9]{3}[)]?[-\s\.]?[0-9]{3}[-\s\.]?[0-9]{4,6}$/;
      return re.test(phone);
  }
  
  // Function to simulate form submission
  function submitForm(form) {
      // Show loading state
      const submitButton = form.querySelector('button[type="submit"]');
      const originalText = submitButton.textContent;
      submitButton.disabled = true;
      submitButton.textContent = 'Sending...';
      
      // Simulate server delay
      setTimeout(function() {
          // Show success message
          formStatus.textContent = 'Thank you! Your message has been sent successfully.';
          formStatus.className = 'form-status success';
          
          // Reset form
          form.reset();
          
          // Reset button
          submitButton.disabled = false;
          submitButton.textContent = originalText;
          
          // Remove success message after 5 seconds
          setTimeout(function() {
              formStatus.className = 'form-status';
          }, 5000);
      }, 1500);
  }
}

/*
* Project Gallery Filtering
*/

document.addEventListener('DOMContentLoaded', function() {
  initializeProjectFilters();
});

function initializeProjectFilters() {
  const filterButtons = document.querySelectorAll('.filter-btn');
  const projectItems = document.querySelectorAll('.project-item');
  
  if (!filterButtons.length || !projectItems.length) return;
  
  // Add click event to each filter button
  filterButtons.forEach(button => {
      button.addEventListener('click', function() {
          // Get filter value
          const filterValue = this.getAttribute('data-filter');
          
          // Update active button
          filterButtons.forEach(btn => {
              btn.classList.remove('active');
          });
          this.classList.add('active');
          
          // Filter projects
          filterProjects(filterValue, projectItems);
      });
  });
  
  // Initialize with "all" projects visible
  filterProjects('all', projectItems);
}

function filterProjects(filterValue, projects) {
  projects.forEach(project => {
      // Get project category
      const projectCategory = project.getAttribute('data-category');
      
      // Apply filtering
      if (filterValue === 'all' || filterValue === projectCategory) {
          // Show project with animation
          project.style.display = 'block';
          
          // Apply fade-in animation
          setTimeout(() => {
              project.style.opacity = '1';
              project.style.transform = 'translateY(0)';
          }, 50);
      } else {
          // Hide project with animation
          project.style.opacity = '0';
          project.style.transform = 'translateY(20px)';
          
          // Remove from DOM after animation completes
          setTimeout(() => {
              project.style.display = 'none';
          }, 300);
      }
  });
}

/*
* Testimonial Slider JavaScript
*/

document.addEventListener('DOMContentLoaded', function() {
  initializeTestimonialSlider();
});

function initializeTestimonialSlider() {
  const slides = document.querySelectorAll('.testimonial-slide');
  const dots = document.querySelectorAll('.dot');
  const prevBtn = document.querySelector('.prev-btn');
  const nextBtn = document.querySelector('.next-btn');
  
  if (!slides.length) return;
  
  let currentSlide = 0;
  let slideInterval;
  const autoSlideDelay = 5000; // 5 seconds
  
  // Start auto-sliding
  startAutoSlide();
  
  // Initialize slider positions
  updateSlider();
  
  // Previous button click
  prevBtn.addEventListener('click', function() {
      currentSlide = (currentSlide === 0) ? slides.length - 1 : currentSlide - 1;
      updateSlider();
      resetAutoSlide();
  });
  
  // Next button click
  nextBtn.addEventListener('click', function() {
      currentSlide = (currentSlide === slides.length - 1) ? 0 : currentSlide + 1;
      updateSlider();
      resetAutoSlide();
  });
  
  // Dot navigation
  dots.forEach((dot, index) => {
      dot.addEventListener('click', function() {
          currentSlide = index;
          updateSlider();
          resetAutoSlide();
      });
  });
  
  // Pause auto-sliding on hover
  const sliderContainer = document.querySelector('.testimonial-slider');
  sliderContainer.addEventListener('mouseenter', function() {
      clearInterval(slideInterval);
  });
  
  sliderContainer.addEventListener('mouseleave', function() {
      startAutoSlide();
  });
  
  // Touch events for mobile swipe
  let touchStartX = 0;
  let touchEndX = 0;
  
  const sliderElement = document.querySelector('.slider-container');
  
  sliderElement.addEventListener('touchstart', function(e) {
      touchStartX = e.changedTouches[0].screenX;
  }, { passive: true });
  
  sliderElement.addEventListener('touchend', function(e) {
      touchEndX = e.changedTouches[0].screenX;
      handleSwipe();
  }, { passive: true });
  
  function handleSwipe() {
      // If swipe distance is significant enough (more than 50px)
      if (touchStartX - touchEndX > 50) {
          // Swiped left, go to next slide
          currentSlide = (currentSlide === slides.length - 1) ? 0 : currentSlide + 1;
          updateSlider();
          resetAutoSlide();
      }
      
      if (touchEndX - touchStartX > 50) {
          // Swiped right, go to previous slide
          currentSlide = (currentSlide === 0) ? slides.length - 1 : currentSlide - 1;
          updateSlider();
          resetAutoSlide();
      }
  }
  
  function updateSlider() {
      // Update slides
      slides.forEach(slide => {
          slide.classList.remove('active');
      });
      slides[currentSlide].classList.add('active');
      
      // Update dots
      dots.forEach(dot => {
          dot.classList.remove('active');
      });
      dots[currentSlide].classList.add('active');
  }
  
  function startAutoSlide() {
      slideInterval = setInterval(function() {
          currentSlide = (currentSlide === slides.length - 1) ? 0 : currentSlide + 1;
          updateSlider();
      }, autoSlideDelay);
  }
  
  function resetAutoSlide() {
      clearInterval(slideInterval);
      startAutoSlide();
  }
}

Final Output:

create-your-metal-fab-website-template-html-css-js.gif
Read Alsotender-portal-website-template-using-html-tailwind-css-and-javascript.webpTender Portal Website Template Using HTML, CSS, and JavaScript

Conclusion:

Creating a metal fabrication service website template is easy when you use basic HTML, CSS, and JavaScript. This one-page site is great for small to medium metal businesses to showcase services, company info, and a contact form.

By following this guide, you now have a working and responsive website that can be easily customized and hosted online. For more professional features, you can add animations or connect it to email services.

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: metal fabrication, website template, fabrication website, industrial website template, metal fabrication service website template, html css javascript template for metal business, responsive fabrication company website design, how to make fabrication website using html and css, fabrication company landing page with javascript
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Components

Please allow ads on our site🥺