Webleb - UI Elements

HTML

<!DOCTYPE html>

<head>

<title>Nexus | Software & Systems Engineering</title>

<style>

:root {

--primary-dark: #0a192f;

--primary-blue: #58a4b0;

--accent-blue: #64ffda;

--light-gray: #e6f1ff;

--dark-gray: #8892b0;

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Inter', sans-serif;

color: #333;

overflow-x: hidden;

background-color: #ffffff;

}

h1, h2, h3, h4, h5, h6 {

font-family: 'Source Serif Pro', serif;

font-weight: 600;

line-height: 1.2;

}

.section-padding {

padding: 100px 5%;

}

@media (max-width: 768px) {

.section-padding {

padding: 60px 5%;

}

.fade-up {

opacity: 0;

transform: translateY(30px);

transition: opacity 0.6s ease, transform 0.6s ease;

}

.fade-up.visible {

opacity: 1;

transform: translateY(0);

}

.hero-bg {

background: linear-gradient(135deg, rgba(10, 25, 47, 0.9) 0%, rgba(88, 164, 176, 0.7) 100%),

url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2072&q=80');

background-size: cover;

background-position: center;

background-attachment: fixed;

}

.project-card {

position: relative;

overflow: hidden;

height: 400px;

border-radius: 8px;

}

.project-card img {

transition: transform 0.5s ease;

height: 100%;

width: 100%;

object-fit: cover;

}

.project-card:hover img {

transform: scale(1.05);

}

.project-overlay {

position: absolute;

bottom: 0;

left: 0;

right: 0;

background: linear-gradient(to top, rgba(10, 25, 47, 0.9), transparent);

color: white;

padding: 30px;

transform: translateY(100%);

transition: transform 0.5s ease;

}

.project-card:hover .project-overlay {

transform: translateY(0);

}

.stat-box {

background-color: #f8f9fa;

padding: 40px 30px;

border-radius: 8px;

border-left: 4px solid var(--primary-blue);

transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.stat-box:hover {

transform: translateY(-5px);

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

}

.service-card {

background-color: white;

padding: 40px 30px;

border-radius: 8px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

border-top: 3px solid transparent;

transition: all 0.3s ease;

}

.service-card:hover {

transform: translateY(-10px);

border-top: 3px solid var(--primary-blue);

box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

}

.testimonial-card {

background-color: #f8f9fa;

padding: 40px;

border-radius: 8px;

position: relative;

}

.testimonial-card::before {

content: '"';

position: absolute;

top: 20px;

left: 30px;

font-size: 80px;

color: var(--primary-blue);

opacity: 0.2;

font-family: 'Source Serif Pro', serif;

}

.journal-card {

overflow: hidden;

border-radius: 8px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

transition: transform 0.3s ease;

}

.journal-card:hover {

transform: translateY(-5px);

}

.journal-card img {

height: 200px;

width: 100%;

object-fit: cover;

}

.form-input {

width: 100%;

padding: 15px;

border: 1px solid #ddd;

border-radius: 4px;

font-family: 'Inter', sans-serif;

transition: border-color 0.3s ease;

}

.form-input:focus {

outline: none;

border-color: var(--primary-blue);

}

.btn-primary {

display: inline-block;

padding: 15px 30px;

background-color: var(--primary-blue);

color: white;

border-radius: 4px;

font-weight: 600;

transition: all 0.3s ease;

border: none;

cursor: pointer;

}

.btn-primary:hover {

background-color: #4a8c96;

transform: translateY(-3px);

box-shadow: 0 5px 15px rgba(88, 164, 176, 0.3);

}

.btn-outline {

display: inline-block;

padding: 15px 30px;

background-color: transparent;

color: var(--primary-blue);

border-radius: 4px;

font-weight: 600;

border: 2px solid var(--primary-blue);

transition: all 0.3s ease;

}

.btn-outline:hover {

background-color: var(--primary-blue);

color: white;

transform: translateY(-3px);

}

.navbar {

position: fixed;

top: 0;

left: 0;

right: 0;

background-color: rgba(255, 255, 255, 0.95);

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

z-index: 1000;

padding: 20px 5%;

transition: all 0.3s ease;

}

.navbar.scrolled {

padding: 15px 5%;

background-color: rgba(255, 255, 255, 0.98);

}

.mobile-menu {

position: fixed;

top: 0;

right: 0;

bottom: 0;

width: 300px;

background-color: white;

box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);

transform: translateX(100%);

transition: transform 0.3s ease;

z-index: 1001;

padding: 30px;

overflow-y: auto;

}

.mobile-menu.active {

transform: translateX(0);

}

.menu-overlay {

position: fixed;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: rgba(0, 0, 0, 0.5);

z-index: 1000;

opacity: 0;

visibility: hidden;

transition: opacity 0.3s ease, visibility 0.3s ease;

}

.menu-overlay.active {

opacity: 1;

visibility: visible;

}

.chat-bot {

position: fixed;

bottom: 30px;

right: 30px;

z-index: 999;

}

.chat-btn {

width: 60px;

height: 60px;

border-radius: 50%;

background-color: var(--primary-blue);

color: white;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

transition: all 0.3s ease;

}

.chat-btn:hover {

transform: scale(1.1);

background-color: #4a8c96;

}

.chat-window {

position: absolute;

bottom: 80px;

right: 0;

width: 350px;

height: 500px;

background-color: white;

border-radius: 10px;

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

overflow: hidden;

display: none;

flex-direction: column;

}

.chat-window.active {

display: flex;

}

.chat-header {

background-color: var(--primary-blue);

color: white;

padding: 20px;

display: flex;

justify-content: space-between;

align-items: center;

}

.chat-body {

flex: 1;

padding: 20px;

overflow-y: auto;

display: flex;

flex-direction: column;

gap: 15px;

}

.message {

max-width: 80%;

padding: 12px 15px;

border-radius: 18px;

font-size: 14px;

line-height: 1.4;

}

.bot-message {

background-color: #f0f0f0;

align-self: flex-start;

border-bottom-left-radius: 5px;

}

.user-message {

background-color: var(--primary-blue);

color: white;

align-self: flex-end;

border-bottom-right-radius: 5px;

}

.chat-input {

padding: 20px;

border-top: 1px solid #eee;

display: flex;

gap: 10px;

}

.chat-input input {

flex: 1;

padding: 12px 15px;

border: 1px solid #ddd;

border-radius: 30px;

outline: none;

}

.chat-input button {

width: 40px;

height: 40px;

border-radius: 50%;

background-color: var(--primary-blue);

color: white;

border: none;

cursor: pointer;

display: flex;

align-items: center;

justify-content: center;

}

.quick-questions {

display: flex;

flex-wrap: wrap;

gap: 8px;

margin-top: 10px;

}

.quick-question {

background-color: #f0f0f0;

padding: 8px 12px;

border-radius: 15px;

font-size: 12px;

cursor: pointer;

transition: background-color 0.3s ease;

}

.quick-question:hover {

background-color: #e0e0e0;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(10px); }

to { opacity: 1; transform: translateY(0); }

}

.message {

animation: fadeIn 0.3s ease;

}

</style>

</head>

<body>

<div class="text-2xl font-bold" style="color: var(--primary-dark);">Nexus</div>

<a href="#engineering" class="font-medium hover:text-blue-600 transition-colors">Engineering</a>

<a href="#systems" class="font-medium hover:text-blue-600 transition-colors">Systems</a>

<a href="#journal" class="font-medium hover:text-blue-600 transition-colors">Journal</a>

<a href="#contact" class="font-medium hover:text-blue-600 transition-colors">Contact</a>

<button class="btn-primary">Discuss a System</button>

</div>

</button>

</div>

</nav>

<div class="text-2xl font-bold" style="color: var(--primary-dark);">Nexus</div>

</button>

</div>

<a href="#engineering" class="text-lg font-medium py-2 border-b border-gray-100">Engineering</a>

<a href="#systems" class="text-lg font-medium py-2 border-b border-gray-100">Systems</a>

<a href="#journal" class="text-lg font-medium py-2 border-b border-gray-100">Journal</a>

<a href="#contact" class="text-lg font-medium py-2 border-b border-gray-100">Contact</a>

<button class="btn-primary mt-4">Discuss a System</button>

</div>

<h1 class="text-5xl md:text-7xl font-bold mb-6 fade-up">Engineering Software Systems</h1>

Software Engineering • Computer Engineering • Scalable Systems

</p>

<button class="btn-primary">View Systems</button>

<button class="btn-outline">Engineering Approach</button>

</div>

</section>

<h2 class="text-4xl font-bold mb-4">Engineering Systems</h2>

<p class="text-gray-600 max-w-3xl mx-auto">Architecting robust, scalable systems that solve complex engineering challenges with precision and reliability.</p>

</div>

<h3 class="text-2xl font-bold mb-2">Distributed Systems Platform</h3>

<p class="mb-4">High-availability platform for processing real-time data across global networks.</p>

<a href="#" class="text-white font-medium inline-flex items-center">Explore System <i class="fas fa-arrow-right ml-2"></i></a>

</div>

<h3 class="text-2xl font-bold mb-2">Intelligent Automation Engine</h3>

<p class="mb-4">AI-driven system for automating complex workflows and decision processes.</p>

<a href="#" class="text-white font-medium inline-flex items-center">Explore System <i class="fas fa-arrow-right ml-2"></i></a>

</div>

<h3 class="text-2xl font-bold mb-2">Data Processing Architecture</h3>

<p class="mb-4">Scalable pipeline for processing petabytes of data with millisecond latency.</p>

<a href="#" class="text-white font-medium inline-flex items-center">Explore System <i class="fas fa-arrow-right ml-2"></i></a>

</div>

</section>

<h2 class="text-4xl font-bold mb-6">Engineering Approach</h2>

We approach software engineering as a disciplined practice focused on creating systems that stand the test of time.

Our methodology prioritizes clarity, maintainability, and scalability over short-term solutions.

</p>

With a foundation in both software and computer engineering principles, we build systems that are not just functional,

but resilient, efficient, and adaptable to evolving requirements. We believe in engineering solutions that reduce

complexity rather than adding to it.

</p>

<button class="btn-primary">Our Engineering Principles</button>

</div>

<div class="text-gray-600">Years of Engineering Practice</div>

</div>

<div class="text-gray-600">Systems Built & Deployed</div>

</div>

<div class="text-gray-600">Engineering Disciplines Mastered</div>

</div>

<div class="text-gray-600">Countries / Industries Served</div>

</div>

</section>

<h2 class="text-4xl font-bold mb-4">Engineering Domains</h2>

<p class="text-gray-600 max-w-3xl mx-auto">Specialized expertise across the full spectrum of software and computer engineering disciplines.</p>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Software Architecture & Backend Systems</h3>

<p class="text-gray-600">Designing and implementing robust, scalable backend architectures that form the foundation of enterprise applications.</p>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Web & Platform Engineering</h3>

<p class="text-gray-600">Building performant web applications and platforms with modern frameworks and best practices in UI/UX.</p>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Automation & Optimization</h3>

<p class="text-gray-600">Developing intelligent automation systems and optimizing existing workflows for maximum efficiency.</p>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Data & Algorithmic Systems</h3>

<p class="text-gray-600">Engineering data pipelines, storage solutions, and algorithmic systems for complex data processing.</p>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Computer Engineering & Low-Level Systems</h3>

<p class="text-gray-600">Working with embedded systems, firmware, and low-level programming for hardware-software integration.</p>

</div>

</div>

<h3 class="text-xl font-bold mb-4">Security & Reliability Engineering</h3>

<p class="text-gray-600">Implementing security-first approaches and building systems with exceptional reliability and uptime.</p>

</div>

</section>

<h2 class="text-4xl font-bold mb-4">Client & Partner Feedback</h2>

<p class="text-gray-600 max-w-3xl mx-auto">Trusted by engineering teams and organizations to deliver systems that perform under pressure.</p>

</div>

<p class="text-gray-700 mb-6">"The system architecture delivered by Nexus has been running flawlessly for three years with 99.99% uptime. Their engineering discipline is exceptional."</p>

<div>

<div class="font-bold">Sarah Chen</div>

<div class="text-gray-500">CTO, TechFlow Systems</div>

</div>

<p class="text-gray-700 mb-6">"Working with engineers who truly understand both software and hardware constraints has been transformative for our product development cycle."</p>

<div>

<div class="font-bold">Marcus Rivera</div>

<div class="text-gray-500">Lead Engineer, DataCorp</div>

</div>

<p class="text-gray-700 mb-6">"The scalability built into our platform has allowed us to handle 10x growth without major re-architecture. That's forward-thinking engineering."</p>

<div>

<div class="font-bold">James O'Connell</div>

<div class="text-gray-500">VP Engineering, ScaleRight</div>

</div>

</section>

<h2 class="text-4xl font-bold mb-4">Engineering Insights</h2>

<p class="text-gray-600 max-w-3xl mx-auto">Thoughts on software engineering principles, system design, and the practice of building reliable systems.</p>

</div>

<div class="text-sm text-gray-500 mb-2">System Design • 8 min read</div>

<h3 class="text-xl font-bold mb-3">Principles of Clean Architecture in Distributed Systems</h3>

<p class="text-gray-600 mb-4">Exploring how clean architecture principles apply to modern distributed systems and microservices.</p>

<a href="#" class="font-medium" style="color: var(--primary-blue);">Read Article <i class="fas fa-arrow-right ml-1"></i></a>

</div>

<div class="text-sm text-gray-500 mb-2">Scalability • 6 min read</div>

<h3 class="text-xl font-bold mb-3">Engineering for Scale: Patterns That Withstand Growth</h3>

<p class="text-gray-600 mb-4">Architectural patterns and engineering decisions that enable systems to scale gracefully under load.</p>

<a href="#" class="font-medium" style="color: var(--primary-blue);">Read Article <i class="fas fa-arrow-right ml-1"></i></a>

</div>

<div class="text-sm text-gray-500 mb-2">Ethics • 10 min read</div>

<h3 class="text-xl font-bold mb-3">Ethical Considerations in Algorithmic Systems</h3>

<p class="text-gray-600 mb-4">The responsibility of engineers when building systems that make autonomous decisions affecting people's lives.</p>

<a href="#" class="font-medium" style="color: var(--primary-blue);">Read Article <i class="fas fa-arrow-right ml-1"></i></a>

</div>

</section>

<h2 class="text-4xl font-bold mb-4">Engineering Consultation</h2>

<p class="text-gray-600">Discuss a system engineering challenge or explore how we can collaborate on your next project.</p>

</div>

<div>

<div class="text-red-500 text-sm mt-1 hidden" id="nameError">Please enter your name</div>

</div>

<div>

<div class="text-red-500 text-sm mt-1 hidden" id="emailError">Please enter a valid email</div>

</div>

<div>

<div class="text-red-500 text-sm mt-1 hidden" id="topicError">Please enter a topic</div>

</div>

<div>

<div class="text-red-500 text-sm mt-1 hidden" id="messageError">Please enter a message</div>

</div>

<button type="submit" class="btn-primary w-full md:w-auto">Submit Inquiry</button>

</form>

</div>

</section>

<div class="text-3xl font-bold mb-6">Nexus</div>

<p class="text-gray-400 max-w-3xl mx-auto italic mb-8">"Good engineering is not about being noticed, but about being reliable when it matters most."</p>

</div>

</div>

<a href="#" class="text-gray-400 hover:text-white transition-colors">LinkedIn</a>

<a href="#" class="text-gray-400 hover:text-white transition-colors">GitHub</a>

<a href="#" class="text-gray-400 hover:text-white transition-colors">Twitter</a>

<a href="#" class="text-gray-400 hover:text-white transition-colors">Contact</a>

</div>

</footer>

<div>

<div class="font-bold">Nexus Engineering Assistant</div>

<div class="text-sm opacity-80">Ask about our engineering services</div>

</div>

</button>

</div>

Hello! I'm the Nexus engineering assistant. How can I help you today?

<div class="quick-question" data-question="What engineering services do you offer?">Services</div>

<div class="quick-question" data-question="How do you approach system architecture?">Architecture</div>

<div class="quick-question" data-question="Can you help with an existing system?">Existing Systems</div>

<div class="quick-question" data-question="What's your typical project timeline?">Timeline</div>

</div>

</button>

</div>

</div>

// Mobile Menu Toggle

const menuToggle = document.getElementById('menuToggle');

const closeMenu = document.getElementById('closeMenu');

const mobileMenu = document.getElementById('mobileMenu');

const menuOverlay = document.getElementById('menuOverlay');

menuToggle.addEventListener('click', () => {

mobileMenu.classList.add('active');

menuOverlay.classList.add('active');

document.body.style.overflow = 'hidden';

});

closeMenu.addEventListener('click', () => {

mobileMenu.classList.remove('active');

menuOverlay.classList.remove('active');

document.body.style.overflow = 'auto';

});

menuOverlay.addEventListener('click', () => {

mobileMenu.classList.remove('active');

menuOverlay.classList.remove('active');

document.body.style.overflow = 'auto';

});

// Navbar scroll effect

window.addEventListener('scroll', () => {

const navbar = document.getElementById('navbar');

if (window.scrollY > 50) {

navbar.classList.add('scrolled');

} else {

navbar.classList.remove('scrolled');

}

});

// Fade-up animation on scroll

const fadeUpElements = document.querySelectorAll('.fade-up');

const fadeUpObserver = new IntersectionObserver((entries) => {

entries.forEach(entry => {

if (entry.isIntersecting) {

entry.target.classList.add('visible');

}

});

}, { threshold: 0.1 });

fadeUpElements.forEach(element => {

fadeUpObserver.observe(element);

});

// Chat Bot Functionality

const chatButton = document.getElementById('chatButton');

const chatWindow = document.getElementById('chatWindow');

const closeChat = document.getElementById('closeChat');

const sendMessage = document.getElementById('sendMessage');

const chatInput = document.getElementById('chatInput');

const chatBody = document.getElementById('chatBody');

chatButton.addEventListener('click', () => {

chatWindow.classList.toggle('active');

});

closeChat.addEventListener('click', () => {

chatWindow.classList.remove('active');

});

// Quick question buttons

document.querySelectorAll('.quick-question').forEach(button => {

button.addEventListener('click', () => {

const question = button.getAttribute('data-question');

addUserMessage(question);

setTimeout(() => {

handleBotResponse(question);

}, 500);

});

sendMessage.addEventListener('click', sendChatMessage);

chatInput.addEventListener('keypress', (e) => {

if (e.key === 'Enter') {

sendChatMessage();

}

});

function sendChatMessage() {

const message = chatInput.value.trim();

if (message) {

addUserMessage(message);

chatInput.value = '';

setTimeout(() => {

handleBotResponse(message);

}, 500);

}

function addUserMessage(text) {

const messageDiv = document.createElement('div');

messageDiv.className = 'message user-message';

messageDiv.textContent = text;

chatBody.appendChild(messageDiv);

chatBody.scrollTop = chatBody.scrollHeight;

}

function addBotMessage(text) {

const messageDiv = document.createElement('div');

messageDiv.className = 'message bot-message';

messageDiv.textContent = text;

chatBody.appendChild(messageDiv);

chatBody.scrollTop = chatBody.scrollHeight;

}

function handleBotResponse(userMessage) {

const lowerMessage = userMessage.toLowerCase();

let response = "";

if (lowerMessage.includes('service') || lowerMessage.includes('offer')) {

response = "We offer software architecture, backend systems, web/platform engineering, automation, data systems, computer engineering, and security engineering. Which area are you most interested in?";

} else if (lowerMessage.includes('architecture') || lowerMessage.includes('design')) {

response = "Our approach to system architecture emphasizes clean separation of concerns, scalability, and maintainability. We follow principles like domain-driven design and emphasize building systems that can evolve over time.";

} else if (lowerMessage.includes('existing') || lowerMessage.includes('legacy')) {

response = "Yes, we frequently work with existing systems to improve performance, scalability, or maintainability. We start with a thorough assessment before proposing any changes.";

} else if (lowerMessage.includes('timeline') || lowerMessage.includes('time')) {

response = "Project timelines vary based on complexity. A typical system architecture review takes 2-3 weeks, while building a new system can range from 3-9 months. We can provide a more accurate estimate after discussing your specific needs.";

} else if (lowerMessage.includes('contact') || lowerMessage.includes('reach')) {

response = "You can use the contact form on our website or email us directly at engineering@nexus.dev. We typically respond within 1 business day.";

} else if (lowerMessage.includes('hello') || lowerMessage.includes('hi')) {

response = "Hello! I'm here to help answer questions about our engineering services and approach. What would you like to know?";

} else {

response = "Thanks for your question. For detailed information about " + userMessage + ", I recommend contacting our engineering team directly through the contact form. They can provide specific technical details tailored to your needs.";

}

setTimeout(() => {

addBotMessage(response);

}, 500);

}

// Form Validation

const contactForm = document.getElementById('contactForm');

contactForm.addEventListener('submit', (e) => {

e.preventDefault();

let isValid = true;

// Validate name

const name = document.getElementById('name');

const nameError = document.getElementById('nameError');

if (!name.value.trim()) {

nameError.classList.remove('hidden');

isValid = false;

} else {

nameError.classList.add('hidden');

}

// Validate email

const email = document.getElementById('email');

const emailError = document.getElementById('emailError');

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!email.value.trim() || !emailRegex.test(email.value)) {

emailError.classList.remove('hidden');

isValid = false;

} else {

emailError.classList.add('hidden');

}

// Validate topic

const topic = document.getElementById('topic');

const topicError = document.getElementById('topicError');

if (!topic.value.trim()) {

topicError.classList.remove('hidden');

isValid = false;

} else {

topicError.classList.add('hidden');

}

// Validate message

const message = document.getElementById('message');

const messageError = document.getElementById('messageError');

if (!message.value.trim()) {

messageError.classList.remove('hidden');

isValid = false;

} else {

messageError.classList.add('hidden');

}

if (isValid) {

alert('Thank you for your inquiry. Our engineering team will review your message and respond within 1-2 business days.');

contactForm.reset();

}

});

// Smooth scrolling for anchor links

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) {

// Close mobile menu if open

mobileMenu.classList.remove('active');

menuOverlay.classList.remove('active');

document.body.style.overflow = 'auto';

window.scrollTo({

top: targetElement.offsetTop - 80,

behavior: 'smooth'

});

}

});

</script>

</body>

</html>

Metehan

Recommended

A Code by Metehan

HTML

CSS

JS

Recommended

A Code by Metehan

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS