gistfile1.txt

:root {
    --background: #ffffff;
    --text-color: #414856;
    --primary-color: rgb(0, 61, 113); /* Primary color */
    --hover-color: rgb(0, 50, 95); /* Hover color */
    --border-radius: 25px; /* More rounded corners */
    --width: 200px; /* Adequate width */
    --height: 40px; /* Height of input */
    --dropdown-padding: 10px; /* Padding inside dropdown */
    --dropdown-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); /* Shadow for dropdown */

}

.navbar {
    list-style: none;
    margin: 0;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    background-color: var(--background);
    border-bottom: 2px solid var(--primary-color);
    
    /* Fix the navbar at the top */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Ensures it stays above other content */
    
    /* Optional: Add shadow for better visibility */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

.logo {
    margin-right: auto;
}

.logo img {
    height: 50px;
}
.screenshot1 {
    position: relative;
    width: 100%; /* Ensures the container is 100% wide */
    height: 100vh; /* Full height of the viewport */
    overflow: hidden; /* Prevents the image from overflowing */
}

.screenshot1 img {
    width: 100%; /* Ensures the image stretches across the container */
    height: 100%; /* Ensures the image fills the entire height */
    object-fit: cover; /* Ensures the image maintains its aspect ratio and covers the container */
    display: block; /* Removes any space below the image */
}





.navbar li {
    margin: 0 20px;
    position: relative;
}

.navbar a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    text-transform: uppercase;
    padding: 12px 16px;
    display: inline-block;
    transition: color var(--transition);
}

.navbar a:hover {
    color: var(--hover-color);
}
li a:hover, .button:hover {
    color: var(--hover-color);
    text-decoration: underline;
}

.button {
    background-color: var(--primary-color);
    border: none;
    color: aliceblue;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: var(--border-radius); /* Rounded corners */
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color:rgb(18, 122, 213) /* Darker shade on hover */
}

.search {
    position: relative;
    overflow: hidden;
    border-radius: var(--border-radius); /* More rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Softer shadow */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: var(--primary-color); /* Background color */
}

.search input[type="text"] {
    position: relative;
    width: var(--width);
    height: var(--height);
    font: 400 16px 'Varela Round', sans-serif;
    color: #ffffff; /* Text color */
    background-color: var(--primary-color); /* Background color */
    border: none;
    border-radius: var(--border-radius); /* More rounded corners */
    box-sizing: border-box;
    outline: none;
    padding: 0 16px; /* Padding inside the input */
    transition: width 0.4s ease, background-color 0.3s ease; /* Smooth transitions */
    z-index: 10;
    opacity: 1; /* Ensure input is visible */
    cursor: pointer;
}

.search input[type="text"]::placeholder {
    color: #d1d5db; /* Lighter placeholder color */
    opacity: 1; /* Full opacity */
    font-style: italic; /* Italicized placeholder */
}

.search input[type="text"]:focus {
    background-color: #ffffff; /* Background color on focus */
    color: var(--primary-color); /* Text color on focus */
    width: 250px; /* Expand width on focus */
    cursor: text;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow on focus */
}

.search .symbol {
    display: none; /* Hide symbol for simplicity */
}

.dropdown {
    position: relative;
}

/* Add transition for dropdown */
/* Add transition for dropdown */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--background);
    box-shadow: var(--dropdown-shadow);
    border-radius: var(--border-radius);
    min-width: 200px;
    padding: 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Show dropdown with animation */
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}



.dropdown-content li {
    list-style: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dropdown-content li:last-child {
    border-bottom: none;
}

.dropdown-content a {
    display: block;
    padding: 12px 16px;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}

.dropdown-content a:hover {
    background-color: var(--hover-color);
    color: #ffffff;
}

/* Show Dropdown on Hover */
.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    visibility: visible;
}
.container {
    position: relative;
    text-align: center;
    color: white;
    display: flex;
    justify-content: flex-start;
}
.big-image {
    float:left;
    width: 100%; /* Optional, to make sure it doesn't overflow */
}
.bottom-centered {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%); /* Fix centering */
    width: 80%; /* Adjust width to fit the text properly */
    text-align: center;
}

h1 {
    color: #fefefe;
    text-align: center;
    font-size: 32px; 
    font-weight: bold;

}

h1 span {
    display: inline-block; /* Allows background to expand */
    position: relative;
    background-image: linear-gradient(
        transparent 60%,
        rgba(255, 255, 255, 0.3) 100%
    );
    background-size: 100% 0;
    background-repeat: no-repeat;
    background-position: center bottom;
    transition: background-size 0.5s ease-in-out;
}

h1:hover span {
    background-size: 100% 100%;
}


.section2{
    background-color: rgb(25, 29, 101);
    min-height:100px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}
h2{
    color:aliceblue;
    font-size:32px;
    margin:0;
}

.box {
    border: 3px solid #ffffff; /* Border color and width */
    background-color: #ffffff; /* Background color */
    padding: 20px; /* Padding inside the box */
    border-radius: 10px; /* Rounded corners */
    width: 300px; /* Width of the box */
    margin-right: auto; /* Center the box horizontally with auto margin */
    text-align:left; /* Center the text */
    opacity: 0.8;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.box:hover {
    opacity: 1;
    transform: translateY(0);
}

.arrow-text::after {
    content: '\2192'; /* Unicode for right arrow */
    margin-left: 8px; /* Space between text and arrow */
border-left:15px solid rgb(35, 72, 152);
}
.services-container {
    display: flex;
    justify-content: center;  /* Aligns boxes horizontally */
    gap: 20px;  /* Adds spacing between boxes */
    padding: 30px 10%;
    flex-wrap: wrap;  /* Ensures responsiveness */
}
.industry-title{
    font-size: x-large;
    color: rgb(35, 72, 152) ;
}
.industry-description{
    color:rgb(35, 72, 152);
}
.team{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:20px;
    border: 3px solid #ffffff; /* Border color and width */
    background-color: #ffffff; /* Background color */
    padding: 20px; /* Padding inside the box */
    width: 100%; /* Width of the box */
    box-sizing: border-box;
}
.team-member {
    
    position: relative;
    width: 300px; /* Adjust to desired width */
    height: 400px; /* Adjust to desired height */
    overflow: hidden;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out; /* Adds a smooth scale transition */
}

.team-member img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(8px); /* Initially blurred */
    opacity: 0; /* Initially hidden */
    transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out; /* Smooth transition for both */
}
.overlay h3{
    margin-top:15px;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0, 61, 113); /* Dark overlay */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: opacity 0.5s ease-in-out;
}

/* Hover effects */
.team-member:hover .overlay,
.team-member:focus-within .overlay {
    opacity: 0; /* Hides overlay on hover or focus */
    pointer-events: none;
}

.team-member:hover img,
.team-member:focus-within img {
    opacity: 1; /* Reveals image */
    filter: blur(0); /* Removes blur on hover */
    transform: scale(1.05); /* Slightly zooms in the image on hover */
}

.expertise{
    border: 3px solid rgb(224, 226, 227);; /* Border color and width */
    background-color: rgb(224, 226, 227);; /* Background color */
    padding: 20px; /* Padding inside the box */
    border-radius: 10px; /* Rounded corners */
    width: 300px; /* Width of the box */
    margin-right: auto; /* Center the box horizontally with auto margin */
    text-align:left; /* Center the text */
    opacity: 0.8;
    
    width:fit-content;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.expertise .industry-title {
    color: some-other-color;
}
/* In your CSS file (e.g., styles.css) */
.trust-section {
    padding: 40px; /* Adjust as needed */
    background-color: #f8f8f8; /* Light background color if desired */
}

.trust-content {
    max-width: 960px; /* Set a maximum width for the content */
    margin: 0 auto; /* Center the content */
}

.trust-content h2 {
    color: rgb(0, 61, 113); /* Dark blue heading color */
    font-size: 32px; /* Larger heading size */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-bottom: 20px; /* Space below heading */
    text-align: center; /* Center the heading */
}

.trust-content > p { /* Styles for the introductory paragraph */
    color: rgb(0, 61, 113);
    font-size: 16px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-bottom: 30px; /* Space below paragraph */
    line-height: 1.6; /* Improved readability */
}


.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 30px; /* Spacing between boxes */
}

.value-box {
    text-align: center; /* Center content within each box */
    padding: 20px;
    border: 1px solid #ddd; /* Light border for the boxes */
    border-radius: 8px; /* Rounded corners for the boxes */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
    background-color: white; /* White background for boxes */
}

.value-box:hover {
    transform: translateY(-5px); /* Move up slightly on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* More prominent shadow on hover */
}

.value-box h3 {
    color: rgb(0, 61, 113);
    font-size: 20px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin-bottom: 10px;
}

.value-box p {
    color: rgb(0, 61, 113);
    font-size: 16px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    line-height: 1.6;
}
/* In your CSS file (e.g., styles.css) */
.stats-container {
    display: flex;
    justify-content: space-around; /* Distribute stats evenly */
    align-items: center; /* Vertically center content */
    padding: 40px; /* Adjust padding as needed */
    background-color: #f8f8f8; /* Example light background */
    opacity: 0.8;
    transform: translateY(20px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.stats-container:hover{
    opacity: 1;
    transform: translateY(0);
}
.stat {
    text-align: center; /* Center content within each stat */
}

.stat-number {
    color: rgb(0, 61, 113);
    font-size: 50px;
    font-weight: bold;
    margin-bottom: 10px; /* Space below number */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.stat-description {
    font-size: 35px;
    font-weight: bold;
    color: #333; /* Or your desired color */
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

/* Optional: Add a separator between stats if needed */
.stat + .stat {
    border-left: 1px solid #ddd; /* Light gray separator */
    padding-left: 40px; /* Add some space */
}

/* Make it responsive */
@media (max-width: 768px) { /* Example breakpoint */
    .stats-container {
        flex-direction: column; /* Stack stats vertically */
        align-items: center;
        text-align: center;
    }

    .stat {
        margin-bottom: 30px; /* Add space between stacked stats */
        border-left: none; /* Remove separator */
        padding-left: 0;
    }
}
.footer{
    border:rgb(0, 61, 113) ;
    background-color: rgb(0, 61, 113);
    width:auto;
    text-align: center;
    color:rgb(255, 255, 255);
    font-size:25px;
}

/* Footer Styles */
footer {
    background-color: #1a202c;
    color: white;
    padding: 40px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

footer img {
    height: 48px;
    margin-bottom: 16px;
}

footer p {
    color: #a0aec0;
    font-size: 14px;
}

footer h3 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
}

footer ul {
    list-style: none;
    padding: 0;
}

footer ul li {
    margin-bottom: 8px;
}

footer ul li a {
    color: #a0aec0;
    text-decoration: none;
    transition: color 0.3s;
}

footer ul li a:hover {
    color: rgb(0, 61, 113);
}

.border-t {
    border-top: 1px solid #2d3748;
    margin-top: 32px;
    padding-top: 16px;
    text-align: center;
    font-size: 14px;
    color: #a0aec0;
}

gistfile2.txt

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Matthew Ronsheim, PhD, Appointed COO for Xenon Pharmaceuticals - Chartwell Partners</title>
    <link rel="stylesheet" href="design.css">
</head>
<body style="background-color: rgb(224, 226, 227);">

    <!-- Navbar -->
    <ul class="navbar">
        <div class="logo">
            <img src="logo.png" alt="Company Logo">
        </div>
        <li><a href="#our-firm">OUR FIRM</a></li>
        <li class="dropdown">
            <a href="#expertise" class="dropdown-toggle">EXPERTISE ▾</a>
            <ul class="dropdown-content">
                <li><a href="#">Biopharmaceuticals</a></li>
                <li><a href="#">Financial Services</a></li>
                <li><a href="#">Healthcare Services</a></li>
                <li><a href="#">Real Estate</a></li>
            </ul>
        </li>
        <li class="dropdown">
            <a href="#services" class="dropdown-toggle">SERVICES ▾</a>
            <ul class="dropdown-content">
                <li><a href="#">Executive Search</a></li>
                <li><a href="#">Board Services</a></li>
                <li><a href="#">Leadership Advisory</a></li>
            </ul>
        </li>
        
        <li class="search">
            <input type="text" placeholder="Search...">
            <div class="symbol">
                <svg class="cloud" viewBox="0 0 35 32"><path d="M...Z"/></svg>
                <svg class="lens" viewBox="0 0 16 16"><path d="M...Z"/></svg>
            </div>
        </li>
        <li class="button">* CONTACT US *</li>
    </ul>

    <!-- Hero Section -->
    <div class="screenshot1">
        <img src="screenshot1.png" alt="first photo">
        <div class="bottom-centered">
            <h1><span>A retained executive search firm dedicated to identifying exceptional leaders.</span></h1>
        </div>
    </div>
    

    <!-- Section Heading -->
    <div class="section2">
        <h2>Executive Search | Board Services | Leadership Advisory</h2>
    </div>
    <div class="expertise">
        <p class="industry-title" style="color:rgb(0, 61, 113); font-size:x-large;"><strong>Industry Expertise</strong></p>
        <p class="industry-description" style="color:rgb(0, 61, 113)">With extensive training as senior partners of the largest global search firms, we apply our in-depth industry knowledge to exceed our clients' expectations.</p>
    <button class="button">Meet our Firm</button>
</div>
    
   
    <div class="services-container">
        <div class="box">
            <img src="vectors.png" alt="Biopharmaceuticals">
            <p class="box-title" style="font-size: x-large;"><strong>Biopharmaceuticals</strong></p>
            <p>&rarr; Stealth Mode Companies</p>
            <p>&rarr; Private to Public</p>
            <p>&rarr; R&D to Commercial</p>
            <p>&rarr; Investors</p>
            <p class="see-more"><strong>See more</strong></p>
        </div>

        <div class="box">
            <img src="financial service.png" alt="Financial Services">
            <p class="box-title" style="font-size: x-large;"><strong>Financial Services</strong></p>
            <p>&rarr; Commercial, Community and Private Banking</p>
            <p>&rarr; Mortgage</p>
            <p>&rarr; Wealth Management</p>
            <p>&rarr; Fintech</p>
            <p class="see-more"><strong>See more</strong></p>
        </div>

        <div class="box">
            <img src="healthcare services.png" alt="Healthcare Services">
            <p class="box-title" style="font-size: x-large;"><strong>Healthcare Services</strong></p>
            <p>&rarr; Provider Services</p>
            <p>&rarr; Payer Services</p>
            <p>&rarr; Healthcare Technology</p>
            <p>&rarr; Private Equity</p>
            <p class="see-more"><strong>See more</strong></p>
        </div>

        <div class="box">
            <img src="real estate.png" alt="Real Estate">
            <p class="box-title" style="font-size: x-large;"><strong>Real Estate</strong></p>
            <p>&rarr; Homebuilders</p>
            <p>&rarr; Single Family Rental</p>
            <p>&rarr; Private</p>
            <p>&rarr; Institutional</p>
            <p class="see-more"><strong>See more</strong></p>
        </div>
    </div>

<div class="team">
    <p class="industry-title"><strong>Our Team</strong></p><br>
    
    <div class="team-member">
        <div class="overlay">
            <h3>Amy Bottoms</h3>
            <p>Biopharmaceuticals</p>
            <a href="#">View Profile</a>
        </div>
        <img src="amy bottoms.jpg" alt="Amy Bottoms">
    </div>

    <div class="team-member">
        <div class="overlay">
            <h3>Amy Bottoms</h3>
            <p>Biopharmaceuticals</p>
            <a href="#">View Profile</a>
        </div>
        <img src="mike desantis.jpg" alt="mike desantis">
    </div>

    <div class="team-member">
        <div class="overlay">
            <h3>Amy Bottoms</h3>
            <p>Biopharmaceuticals</p>
            <a href="#">View Profile</a>
        </div>
        <img src="Sara_Hagar.jpg" alt="Sara_Hagar">
    </div>
   
    <div class="team-member">
        <div class="overlay">
            <h3>Amy Bottoms</h3>
            <p>Biopharmaceuticals</p>
            <a href="#">View Profile</a>
        </div>
        <img src="sean o'neal.jpg" alt="sean o'neal">
    </div>
   
    <div class="team-member">
        <div class="overlay">
            <h3>Amy Bottoms</h3>
            <p>Biopharmaceuticals</p>
            <a href="#">View Profile</a>
        </div>
        <img src="j.scott.jpg" alt="j.scott">
    </div>
  
    <div class="team-member">
        <div class="overlay">
            <h3>Amy Bottoms</h3>
            <p>Biopharmaceuticals</p>
            <a href="#">View Profile</a>
        </div>
        <img src="ellen.jpg" alt="ellen">
    </div>
   
    <div class="team-member">
        <div class="overlay">
            <h3>Amy Bottoms</h3>
            <p>Biopharmaceuticals</p>
            <a href="#">View Profile</a>
        </div>
        <img src="julie_bell.jpg" alt="julie_bell">
    </div>

</div>
<div class="trust-section">
    <div class="trust-content">
      <h2>Why Companies Trust Us</h2>
      <p>Our cohesive, dedicated team of professionals has worked together for close to 20 years with a singular focus on delivering exceptional leaders to our executive search clients. Our clients repeatedly retain our proven research, recruitment, and onboarding expertise to build their companies. As evidenced by more than 70% of our work from repeat clients, our client partnerships are the cornerstone of what we do.</p>
  
      <div class="values-grid">
        <div class="value-box">
          <h3>Excellence</h3>
          <p>We take pride in outstanding execution. Leveraging our large firm know-how, we apply a proven, disciplined search process with rigor and enthusiasm.</p>
        </div>
        <div class="value-box">
          <h3>Compassion</h3>
          <p>We chose this line of work because we enjoy seeing our clients and candidates succeed. We invest deeply in relationships that last, which starts with caring.</p>
        </div>
        <div class="value-box">
          <h3>Integrity</h3>
          <p>Our reputation is our livelihood. We choose to “think long” and let the golden rule govern our decisions.</p>
        </div>
        <div class="value-box">
          <h3>Candor</h3>
          <p>We take an advisory approach to our interactions. We provide candid perspective to our clients and candidates, facilitating more successful outcomes.</p>
        </div>
      </div>
    </div>
  </div>
<hr>
<div class="stats-container">
    <div class="stat">
      <p class="stat-number">100+</p>
      <p class="stat-description">Placements each year</p>
    </div>
    <div class="stat">
      <p class="stat-number">70+</p>
      <p class="stat-description">Percentage of our searches are with repeat clients</p>
    </div>
    <div class="stat">
      <p class="stat-number">15+</p>
      <p class="stat-description">Years in business</p>
    </div>
  </div><br>
  <footer class="footer">
    <div class="footer-container">
        <div class="footer-logo">
            <img src="logo2.png" alt="Company Logo">
        </div>
        <div class="footer-links">
            <h3>Quick Links</h3>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Industries</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <div class="footer-contact">
            <h3>Contact Us</h3>
            <p>123 Business Ave, Suite 100, Dallas, TX 75201</p>
            <p>Phone: (214) 555-1234</p>
            <p>Email: info@chartwellpartners.com</p>
        </div>
    </div>
    <div class="footer-bottom">
        <p>&copy; 2025 Chartwell Partners. All rights reserved.</p>
    </div>
</footer>
</div>
</body>
</html>