Best Services for Your Needs - Welcome to Our Website

<header class='header'>
        <div class='logo'>Logo</div>
        <nav class='nav'>
            <a href='#'>Home</a>
            <a href='#'>Services</a>
            <a href='#'>About</a>
            <a href='#'>Contact</a>
        </nav>
    </header>
    <section class='hero-section'>
        <div class='hero-text'>
            <h1>Welcome to our website</h1>
            <p>We offer the best services for your needs</p>
            <button>Learn more</button>
        </div>
    </section>
    <style>
        .header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #f2f2f2;
          padding: 20px;
        }
<pre><code>    .logo {
      font-size: 30px;
      font-weight: bold;
    }
    
    .nav {
      display: flex;
    }
    
    .nav a {
      margin-right: 20px;
      text-decoration: none;
      color: #333;
      font-weight: bold;
      font-size: 16px;
    }
    
    .hero-section {
      background-image: url('hero-background.jpg');
      background-size: cover;
      background-position: center;
      height: 500px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .hero-text {
      text-align: center;
      color: #fff;
    }
    
    .hero-text h1 {
      font-size: 50px;
      margin-bottom: 20px;
    }
    
    .hero-text p {
      font-size: 24px;
      margin-bottom: 30px;
    }
    
    .hero-text button {
      background-color: #fff;
      color: #333;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 18px;
      cursor: pointer;
    }
&lt;/style&gt;
</code></pre>