Merge branch 'fixed'
This commit is contained in:
commit
7cb8520216
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,4 +1,6 @@
|
|||||||
node_modules
|
node_modules
|
||||||
|
build
|
||||||
|
.vscode
|
||||||
|
|
||||||
# Output
|
# Output
|
||||||
.output
|
.output
|
||||||
@ -6,7 +8,6 @@ node_modules
|
|||||||
.netlify
|
.netlify
|
||||||
.wrangler
|
.wrangler
|
||||||
/.svelte-kit
|
/.svelte-kit
|
||||||
/build
|
|
||||||
|
|
||||||
# OS
|
# OS
|
||||||
.DS_Store
|
.DS_Store
|
||||||
|
|||||||
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
@ -1,5 +0,0 @@
|
|||||||
{
|
|
||||||
"files.associations": {
|
|
||||||
"*.css": "tailwindcss"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
167
src/app.css
167
src/app.css
@ -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
BIN
src/lib/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
src/lib/assets/logo2.png
Normal file
BIN
src/lib/assets/logo2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user