Creating an Architect Web Page with W3.CSS

Welcome to The Coding College! In this tutorial, we’ll design a professional Architect Web Page using W3.CSS. This page is ideal for showcasing architectural projects, portfolios, and services in a clean and modern style.

Why Use W3.CSS for an Architect Web Page?

  1. Clean Design: W3.CSS offers a minimalistic and elegant look, perfect for architecture.
  2. Responsive Layout: Ensures your site looks great on all devices.
  3. Ease of Use: Saves development time with ready-to-use classes.
  4. Professional Appeal: Modern effects, grids, and typography enhance visual impact.

Complete Architect Web Page Example

Here’s a step-by-step implementation of a professional Architect Web Page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Architect Web Page | W3.CSS</title>
  
  <!-- W3.CSS Stylesheet -->
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    .architect-image {
      width: 100%;
      height: 250px;
      object-fit: cover;
    }
    .w3-hover-shadow:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }
  </style>
</head>
<body>

  <!-- Header Section -->
  <header class="w3-container w3-light-grey w3-center w3-padding-32">
    <h1 class="w3-jumbo">Modern Architecture</h1>
    <p class="w3-large">Designing Structures That Inspire</p>
  </header>

  <!-- Navigation Bar -->
  <nav class="w3-bar w3-black w3-large">
    <a href="#projects" class="w3-bar-item w3-button w3-hover-gray">Projects</a>
    <a href="#services" class="w3-bar-item w3-button w3-hover-gray">Services</a>
    <a href="#about" class="w3-bar-item w3-button w3-hover-gray">About</a>
    <a href="#contact" class="w3-bar-item w3-button w3-hover-gray">Contact</a>
  </nav>

  <!-- Project Showcase -->
  <section id="projects" class="w3-container w3-padding-32">
    <h2 class="w3-center w3-xxlarge">Our Projects</h2>
    <p class="w3-center w3-large w3-text-gray">Innovative designs for modern living.</p>

    <div class="w3-row-padding w3-margin-top">
      <!-- Project 1 -->
      <div class="w3-third w3-margin-bottom w3-hover-shadow">
        <img src="https://via.placeholder.com/400x250" alt="Modern House" class="architect-image">
        <div class="w3-container w3-white w3-padding">
          <h3>Modern Villa</h3>
          <p>A contemporary villa with spacious interiors and eco-friendly design.</p>
        </div>
      </div>

      <!-- Project 2 -->
      <div class="w3-third w3-margin-bottom w3-hover-shadow">
        <img src="https://via.placeholder.com/400x250" alt="Office Building" class="architect-image">
        <div class="w3-container w3-white w3-padding">
          <h3>Corporate Tower</h3>
          <p>A stunning office tower blending aesthetics and functionality.</p>
        </div>
      </div>

      <!-- Project 3 -->
      <div class="w3-third w3-margin-bottom w3-hover-shadow">
        <img src="https://via.placeholder.com/400x250" alt="Skyscraper" class="architect-image">
        <div class="w3-container w3-white w3-padding">
          <h3>Urban Skyscraper</h3>
          <p>A sleek, modern skyscraper designed for urban spaces.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Services Section -->
  <section id="services" class="w3-container w3-light-grey w3-padding-32">
    <h2 class="w3-center w3-xxlarge">Our Services</h2>
    <p class="w3-center w3-large w3-text-gray">Delivering excellence in design and construction.</p>

    <div class="w3-row-padding w3-margin-top">
      <div class="w3-half">
        <div class="w3-card w3-white w3-padding w3-round">
          <h3>Architectural Design</h3>
          <p>Creating unique, modern, and sustainable designs tailored to your needs.</p>
        </div>
      </div>
      <div class="w3-half">
        <div class="w3-card w3-white w3-padding w3-round">
          <h3>Project Management</h3>
          <p>Managing every phase of your project with precision and care.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- About Section -->
  <section id="about" class="w3-container w3-padding-32">
    <h2 class="w3-center w3-xxlarge">About Us</h2>
    <p class="w3-center w3-large w3-text-gray">Combining creativity and expertise to redefine spaces.</p>
    <div class="w3-content w3-padding">
      <p>
        With over 20 years of experience in architecture and design, we specialize in creating modern, functional, and innovative structures.  
        Our team focuses on sustainability, efficiency, and aesthetics, ensuring each project meets our clients' vision and needs.
      </p>
    </div>
  </section>

  <!-- Contact Section -->
  <section id="contact" class="w3-container w3-light-grey w3-padding-32">
    <h2 class="w3-center w3-xxlarge">Contact Us</h2>
    <p class="w3-center w3-large w3-text-gray">Let’s bring your vision to life.</p>
    <form class="w3-container w3-padding-16 w3-white w3-round w3-card-4">
      <label>Name</label>
      <input class="w3-input w3-border" type="text" placeholder="Your Name" required>

      <label>Email</label>
      <input class="w3-input w3-border" type="email" placeholder="Your Email" required>

      <label>Message</label>
      <textarea class="w3-input w3-border" rows="5" placeholder="Your Message"></textarea>

      <button type="submit" class="w3-button w3-black w3-margin-top">Send Message</button>
    </form>
  </section>

  <!-- Footer -->
  <footer class="w3-container w3-black w3-center w3-padding-16">
    <p>© 2024 Modern Architecture | Designed by <a href="http://thecodingcollege.com" class="w3-hover-text-gray">The Coding College</a></p>
  </footer>

</body>
</html>

Code Breakdown

1. Header Section

  • Uses a light grey background with a centered header and a large title.
<header class="w3-container w3-light-grey w3-center w3-padding-32">
  <h1 class="w3-jumbo">Modern Architecture</h1>
  <p class="w3-large">Designing Structures That Inspire</p>
</header>

2. Navigation Bar

  • Horizontal navigation links using w3-bar and w3-black.
<nav class="w3-bar w3-black w3-large">
  <a href="#projects" class="w3-bar-item w3-button">Projects</a>
</nav>

3. Projects Section

  • A responsive grid with three columns showcasing architectural projects.
  • Includes hover effects for interactivity.
<div class="w3-third w3-hover-shadow">
  <img src="image.jpg" alt="Project" class="architect-image">
</div>

4. Services Section

  • Two columns listing services like Architectural Design and Project Management.
<div class="w3-half">
  <div class="w3-card w3-white w3-padding w3-round">
    <h3>Service Name</h3>
  </div>
</div>

5. Contact Form

  • A simple form with input fields styled using w3-input and w3-border.

Why This Works

  • Responsive: The layout adjusts seamlessly across devices.
  • Professional Design: Clean, modern cards and grids highlight content beautifully.
  • Engaging: Hover effects, large headings, and images grab user attention.

Final Thoughts

This Architect Web Page built with W3.CSS is simple, responsive, and professional—perfect for showcasing architectural services and projects.

Leave a Comment