suntzu/EITS-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding more things

Browse Source
This commit is contained in:
Luis Ramos 2025-12-05 23:07:19 -05:00
parent 0d77720f10
commit 871a85e9a1
9 changed files with 121 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

167
src/app.css
View File

@ -1,130 +1,139 @@
:root {
/* Brand Colors */
--color-primary: #0056b3; /* Deep Blue - Trust & Engineering */
--color-secondary: #00a8e8; /* Light Blue - Technology & Innovation */
--color-accent: #ffc107; /* Amber - Energy & Attention */
--color-dark: #1a1a1a;
--color-light: #f8f9fa;
--color-white: #ffffff;
--color-text: #333333;
--color-text-light: #666666;
/* Brand Colors */
--color-primary: #0056b3;
/* Deep Blue - Trust & Engineering */
--color-secondary: #00a8e8;
/* Light Blue - Technology & Innovation */
--color-accent: #ffc107;
/* Amber - Energy & Attention */
--color-dark: #1a1a1a;
--color-light: #f8f9fa;
--color-white: #ffffff;
--color-text: #333333;
--color-text-light: #666666;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 8rem;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 8rem;
/* Typography */
--font-main: 'Inter', system-ui, -apple-system, sans-serif;
--font-heading: 'Outfit', sans-serif;
/* Typography */
--font-main: 'Inter', system-ui, -apple-system, sans-serif;
--font-heading: 'Outfit', sans-serif;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-full: 9999px;
/* Border Radius */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-full: 9999px;
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
/* Shadows */
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: var(--font-main);
color: var(--color-text);
background-color: var(--color-light);
line-height: 1.6;
overflow-x: hidden;
font-family: var(--font-main);
color: var(--color-text);
background-color: var(--color-light);
line-height: 1.6;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--color-dark);
line-height: 1.2;
margin-bottom: 1rem;
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-heading);
color: var(--color-dark);
line-height: 1.2;
margin-bottom: 1rem;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
ul {
list-style: none;
list-style: none;
}
img {
max-width: 100%;
height: auto;
display: block;
max-width: 100%;
height: auto;
display: block;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-sm);
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-sm);
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-md);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
}
.btn-primary {
background-color: var(--color-primary);
color: var(--color-white);
border: 2px solid var(--color-primary);
background-color: var(--color-primary);
color: var(--color-white);
}
.btn-primary:hover {
background-color: #004494;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
background-color: #004494;
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.btn-outline {
border: 2px solid var(--color-primary);
color: var(--color-primary);
background: transparent;
border: 2px solid var(--color-primary);
color: var(--color-primary);
background: transparent;
}
.btn-outline:hover {
background-color: var(--color-primary);
color: var(--color-white);
background-color: var(--color-primary);
color: var(--color-white);
}
.section {
padding: var(--spacing-lg) 0;
padding: var(--spacing-lg) 0;
}
@media (max-width: 768px) {
.section {
padding: var(--spacing-md) 0;
}
.section {
padding: var(--spacing-md) 0;
}
.section-title {
font-size: 2rem;
}
.section-title {
font-size: 2rem;
}
}
.section-title {
text-align: center;
font-size: 2.5rem;
margin-bottom: var(--spacing-md);
color: var(--color-primary);
text-align: center;
font-size: 2.5rem;
margin-bottom: var(--spacing-md);
color: var(--color-primary);
}

BIN
src/lib/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 111 KiB

BIN
src/lib/assets/logo2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 94 KiB

15
src/routes/+layout.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import '../app.css';
import logo from '$lib/assets/logo2.png'
let { children } = $props();
let isMenuOpen = $state(false);
@ -15,7 +16,7 @@
<svelte:head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@500;700&display=swap" rel="stylesheet">
<title>EITS - Engineering Integral Tech Solutions</title>
</svelte:head>
@ -23,7 +24,9 @@
<div class="app">
<header class="header">
<div class="container header-content">
<a href="/" class="logo" onclick={closeMenu}>EITS</a>
<a href="/" onclick={closeMenu}>
<img src={logo} style="width: 80px;" alt="logo.png" />
</a>
<button class="menu-toggle" onclick={toggleMenu} aria-label="Toggle menu">
<span class="bar"></span>
@ -33,11 +36,11 @@
<nav class="nav {isMenuOpen ? 'active' : ''}">
<a href="/" onclick={closeMenu}>Inicio</a>
<a href="/about" onclick={closeMenu}>Nosotros</a>
<a href="/services" onclick={closeMenu}>Servicios</a>
<a href="/portfolio" onclick={closeMenu}>Portafolio</a>
<a href="/acerca" onclick={closeMenu}>Nosotros</a>
<a href="/servicios" onclick={closeMenu}>Servicios</a>
<a href="/portafolio" onclick={closeMenu}>Portafolio</a>
<a href="/blog" onclick={closeMenu}>Blog</a>
<a href="/contact" class="btn btn-primary btn-sm" onclick={closeMenu}>Contacto</a>
<a href="/contacto" onclick={closeMenu}>Contacto</a>
</nav>
</div>
</header>

24
src/routes/+page.svelte
View File

@ -5,11 +5,20 @@
<svelte:head>
<title>Inicio | EITS</title>
</svelte:head>
<!-- font-family: var(--font-heading); -->
<!-- color: var(--color-dark); -->
<!-- line-height: 1.2; -->
<!-- margin-bottom: 1rem; -->
<section class="hero">
<div class="container hero-content">
<h1>Soluciones Integrales de Ingeniería y Tecnología</h1>
<p>Impulsamos el crecimiento sostenible de la industria con automatización, energía y tecnología avanzada.</p>
<span class="eits">
<span class="first-letter">E</span>ngineering
<span class="first-letter">I</span>ntegral
<span class="first-letter">T</span>ech
<span class="first-letter">S</span>olutions</span>
<p style="margin-top: 15px">Impulsamos el crecimiento sostenible de la industria con automatización y tecnología avanzada</p>
<div class="hero-btns">
<a href="/contact" class="btn btn-primary">Contáctanos</a>
<a href="/services" class="btn btn-outline">Nuestros Servicios</a>
@ -137,4 +146,17 @@
.feature h3 {
color: var(--color-secondary);
}
.eits {
font-size: 1.3rem;
line-height: 1.2;
color: black;
margin-bottom: 100px;
}
.first-letter {
font-weight: bold;
font-size: 1.4rem;
color: black;
}
</style>

0
src/routes/about/+page.svelte → src/routes/acerca/+page.svelte
View File

0
src/routes/contact/+page.svelte → src/routes/contacto/+page.svelte
View File

0
src/routes/portfolio/+page.svelte → src/routes/portafolio/+page.svelte
View File

0
src/routes/services/+page.svelte → src/routes/servicios/+page.svelte
View File