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

169
src/app.css
View File

@ -1,130 +1,139 @@
:root { :root {
/* Brand Colors */ /* Brand Colors */
--color-primary: #0056b3; /* Deep Blue - Trust & Engineering */ --color-primary: #0056b3;
--color-secondary: #00a8e8; /* Light Blue - Technology & Innovation */ /* Deep Blue - Trust & Engineering */
--color-accent: #ffc107; /* Amber - Energy & Attention */ --color-secondary: #00a8e8;
--color-dark: #1a1a1a; /* Light Blue - Technology & Innovation */
--color-light: #f8f9fa; --color-accent: #ffc107;
--color-white: #ffffff; /* Amber - Energy & Attention */
--color-text: #333333; --color-dark: #1a1a1a;
--color-text-light: #666666; --color-light: #f8f9fa;
--color-white: #ffffff;
--color-text: #333333;
--color-text-light: #666666;
/* Spacing */ /* Spacing */
--spacing-xs: 0.5rem; --spacing-xs: 0.5rem;
--spacing-sm: 1rem; --spacing-sm: 1rem;
--spacing-md: 2rem; --spacing-md: 2rem;
--spacing-lg: 4rem; --spacing-lg: 4rem;
--spacing-xl: 8rem; --spacing-xl: 8rem;
/* Typography */ /* Typography */
--font-main: 'Inter', system-ui, -apple-system, sans-serif; --font-main: 'Inter', system-ui, -apple-system, sans-serif;
--font-heading: 'Outfit', sans-serif; --font-heading: 'Outfit', sans-serif;
/* Border Radius */ /* Border Radius */
--radius-sm: 4px; --radius-sm: 4px;
--radius-md: 8px; --radius-md: 8px;
--radius-lg: 16px; --radius-lg: 16px;
--radius-full: 9999px; --radius-full: 9999px;
/* Shadows */ /* Shadows */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px 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); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
} }
* { * {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
body { body {
font-family: var(--font-main); font-family: var(--font-main);
color: var(--color-text); color: var(--color-text);
background-color: var(--color-light); background-color: var(--color-light);
line-height: 1.6; line-height: 1.6;
overflow-x: hidden; overflow-x: hidden;
} }
h1, h2, h3, h4, h5, h6 { h1,
font-family: var(--font-heading); h2,
color: var(--color-dark); h3,
line-height: 1.2; h4,
margin-bottom: 1rem; h5,
h6 {
font-family: var(--font-heading);
color: var(--color-dark);
line-height: 1.2;
margin-bottom: 1rem;
} }
a { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
transition: color 0.3s ease; transition: color 0.3s ease;
} }
ul { ul {
list-style: none; list-style: none;
} }
img { img {
max-width: 100%; max-width: 100%;
height: auto; height: auto;
display: block; display: block;
} }
.container { .container {
width: 100%; width: 100%;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 var(--spacing-sm); padding: 0 var(--spacing-sm);
} }
.btn { .btn {
display: inline-block; display: inline-block;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; transition: all 0.3s ease;
border: none; border: none;
} }
.btn-primary { .btn-primary {
background-color: var(--color-primary); border: 2px solid var(--color-primary);
color: var(--color-white); background-color: var(--color-primary);
color: var(--color-white);
} }
.btn-primary:hover { .btn-primary:hover {
background-color: #004494; background-color: #004494;
transform: translateY(-2px); transform: translateY(-2px);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
.btn-outline { .btn-outline {
border: 2px solid var(--color-primary); border: 2px solid var(--color-primary);
color: var(--color-primary); color: var(--color-primary);
background: transparent; background: transparent;
} }
.btn-outline:hover { .btn-outline:hover {
background-color: var(--color-primary); background-color: var(--color-primary);
color: var(--color-white); color: var(--color-white);
} }
.section { .section {
padding: var(--spacing-lg) 0; padding: var(--spacing-lg) 0;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
.section { .section {
padding: var(--spacing-md) 0; padding: var(--spacing-md) 0;
} }
.section-title { .section-title {
font-size: 2rem; font-size: 2rem;
} }
} }
.section-title { .section-title {
text-align: center; text-align: center;
font-size: 2.5rem; font-size: 2.5rem;
margin-bottom: var(--spacing-md); margin-bottom: var(--spacing-md);
color: var(--color-primary); 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"> <script lang="ts">
import '../app.css'; import '../app.css';
import logo from '$lib/assets/logo2.png'
let { children } = $props(); let { children } = $props();
let isMenuOpen = $state(false); let isMenuOpen = $state(false);
@ -15,7 +16,7 @@
<svelte:head> <svelte:head>
<link rel="preconnect" href="https://fonts.googleapis.com"> <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"> <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> <title>EITS - Engineering Integral Tech Solutions</title>
</svelte:head> </svelte:head>
@ -23,7 +24,9 @@
<div class="app"> <div class="app">
<header class="header"> <header class="header">
<div class="container header-content"> <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"> <button class="menu-toggle" onclick={toggleMenu} aria-label="Toggle menu">
<span class="bar"></span> <span class="bar"></span>
@ -33,11 +36,11 @@
<nav class="nav {isMenuOpen ? 'active' : ''}"> <nav class="nav {isMenuOpen ? 'active' : ''}">
<a href="/" onclick={closeMenu}>Inicio</a> <a href="/" onclick={closeMenu}>Inicio</a>
<a href="/about" onclick={closeMenu}>Nosotros</a> <a href="/acerca" onclick={closeMenu}>Nosotros</a>
<a href="/services" onclick={closeMenu}>Servicios</a> <a href="/servicios" onclick={closeMenu}>Servicios</a>
<a href="/portfolio" onclick={closeMenu}>Portafolio</a> <a href="/portafolio" onclick={closeMenu}>Portafolio</a>
<a href="/blog" onclick={closeMenu}>Blog</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> </nav>
</div> </div>
</header> </header>

24
src/routes/+page.svelte
View File

@ -5,11 +5,20 @@
<svelte:head> <svelte:head>
<title>Inicio | EITS</title> <title>Inicio | EITS</title>
</svelte:head> </svelte:head>
<!-- font-family: var(--font-heading); -->
<!-- color: var(--color-dark); -->
<!-- line-height: 1.2; -->
<!-- margin-bottom: 1rem; -->
<section class="hero"> <section class="hero">
<div class="container hero-content"> <div class="container hero-content">
<h1>Soluciones Integrales de Ingeniería y Tecnología</h1> <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"> <div class="hero-btns">
<a href="/contact" class="btn btn-primary">Contáctanos</a> <a href="/contact" class="btn btn-primary">Contáctanos</a>
<a href="/services" class="btn btn-outline">Nuestros Servicios</a> <a href="/services" class="btn btn-outline">Nuestros Servicios</a>
@ -137,4 +146,17 @@
.feature h3 { .feature h3 {
color: var(--color-secondary); 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> </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