<!DOCTYPE html> <html lang="sv"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"> <meta name="description" content="AINNOVA - Professionella webbplatser skräddarsydda för ditt företags behov och mål"> <meta name="format-detection" content="telephone=no"> <title>AINNOVA | Webbplatser</title> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Montserrat:wght@700&display=swap"> <style> /* AINNOVA färgpalett enligt designprotokoll */ :root { --primary-blue: #007BBF; --white: #FFFFFF; --light-gray: #E6EBF1; --lighter-gray: #F7F9FC; --button-green: #80CB45; --button-green-hover: #3A8C2D; --text-dark-gray: #222222; --text-medium-gray: #56585E; --text-light-gray: #888888; --border-gray: #CCCCCC; --shadow: rgba(0,0,0,0.1); }
/* Grund- och resetstil */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Lato', sans-serif; background: var(--primary-blue); }
/* Huvudlayout */
.ainnova-wrapper { padding: 14px 20px 20px; min-height: 100vh; background: var(--primary-blue); }
.container { margin: 0 auto; width: calc(100% - 20px); max-width: 1000px; background: var(--white); padding: 30px; border-radius: 10px; box-shadow: 0 4px 12px var(--shadow); }
/* Typografi */
h1 {
font-family: 'Montserrat', sans-serif;
font-size: 36px;
color: var(--primary-blue);
margin-bottom: 20px;
text-align: center;
}
h2 {
font-size: 24px;
color: var(--text-dark-gray);
margin-top: 30px;
margin-bottom: 15px;
}
h3 {
font-size: 20px;
color: var(--primary-blue);
margin-top: 20px;
margin-bottom: 10px;
}
p {
font-size: 16px;
color: var(--text-dark-gray);
line-height: 1.6;
margin-bottom: 15px;
}
/* Listformat med ikoner utan svarta punkter */
ul {
list-style-type: none;
padding-left: 0;
margin: 15px 0;
}
ul li {
display: flex;
align-items: flex-start;
margin-bottom: 12px;
line-height: 1.5;
color: var(--text-dark-gray);
}
.ainnova-icon {
display: inline-block;
width: 24px;
height: 24px;
background-image: url('<https://valingeveckan.wordpress.com/wp-content/uploads/2025/04/namnlos-design-4-1.png>');
background-size: contain;
background-repeat: no-repeat;
margin-right: 10px;
flex-shrink: 0;
}
/* Länkar - Subtil stil utan understrykning */
a {
color: var(--primary-blue);
text-decoration: none;
transition: color 0.3s;
}
a:hover {
color: var(--button-green-hover);
}
/* Konkurrentlänkar - extra subtil */
.competitor-link {
color: var(--text-light-gray);
font-weight: normal;
transition: color 0.3s;
}
.competitor-link:hover {
color: var(--primary-blue);
}
/* Bilder */
.image-container {
display: flex;
justify-content: space-between;
margin: 25px 0;
gap: 20px;
}
.image-container img {
width: 48%;
border-radius: 5px;
box-shadow: 0 2px 4px var(--shadow);
}
.full-width-image {
width: 100%;
max-height: 300px;
object-fit: cover;
border-radius: 5px;
margin: 25px 0;
box-shadow: 0 2px 4px var(--shadow);
}
/* Betoningsboxar */
.highlight-box {
background-color: var(--light-gray);
border-left: 4px solid var(--primary-blue);
padding: 15px;
margin: 20px 0;
border-radius: 0 5px 5px 0;
}
/* Konkurrentlista */
.competitors-section {
margin: 40px 0 10px;
padding: 15px;
background-color: var(--lighter-gray);
border-radius: 5px;
border-top: 1px solid var(--border-gray);
}
.competitors-section h3 {
font-size: 16px;
color: var(--text-medium-gray);
margin-bottom: 10px;
}
/* Tabellstilar - Exakt som i "våra erbjudanden på ett silverfat" */
.table-title { background: var(--light-gray); color: var(--text-dark-gray); padding: 10px; text-align: center; font-weight: bold; border-radius: 5px; margin-bottom: 5px; }
.table-container { padding: 0 15px; overflow-x: auto; }
table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0 0 20px 0; box-shadow: 0 2px 4px var(--shadow); }
th, td { border: 2px solid var(--border-gray); box-shadow: inset 0 0 3px var(--shadow); padding: 12px; text-align: left; vertical-align: top; }
th { background: var(--primary-blue); color: var(--white); font-weight: bold; text-transform: uppercase; }
tbody:nth-child(odd) { background: var(--white); }
tbody:nth-child(even) { background: var(--light-gray); }
/* Navigationscirklar - UPPDATERAD för att matcha bilden */
.cta-circles {
display: flex;
justify-content: center;
flex-wrap: nowrap; /* ÄNDRAD: Alla på en rad i desktop */
gap: 20px;
margin: 40px 0 20px;
}
.cta-circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: var(--button-green);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--text-dark-gray);
font-weight: bold;
text-align: center;
transition: background-color 0.3s, transform 0.3s;
animation: pulse 2s infinite;
font-size: 17px;
}
.cta-circle:nth-child(even) {
background-color: var(--primary-blue);
color: var(--white);
}
.cta-circle:hover {
background-color: var(--button-green-hover);
color: var(--white);
transform: scale(1.05);
animation: none;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
/* Tillbaka till toppen-knapp - UPPDATERAD för att matcha bilden */
.back-to-top {
display: block;
width: 100%;
margin: 20px auto 0;
padding: 10px;
background-color: var(--primary-blue);
color: var(--white);
text-align: center;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
transition: background-color 0.3s;
}
.back-to-top:hover {
background-color: var(--button-green-hover);
color: var(--white);
text-decoration: none;
}
/* Responsivitet */
@media (max-width: 768px) {
.container {
padding: 15px;
width: 100%;
}
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p, li { font-size: 15px; }
.image-container {
flex-direction: column;
}
.image-container img {
width: 100%;
}
/* Samma mobilanpassning som i prislistan för tabeller */
thead { display: none; }
table, tbody { display: block; }
tr {
display: grid;
grid-template-areas: "category" "service" "price" "desc";
margin-bottom: 15px;
border: 2px solid var(--border-gray);
border-radius: 5px;
background: var(--white);
box-shadow: 0 2px 4px rgba(0,0,0,0.15);
position: relative;
}
/* Visar kategorinamn i mobilvy */
tr::before {
content: attr(data-category);
display: block;
padding: 8px 12px;
background: var(--primary-blue);
color: var(--white);
font-weight: bold;
grid-area: category;
}
tbody:nth-child(odd) tr::before {
background: var(--primary-blue);
}
tbody:nth-child(even) tr::before {
background: var(--button-green-hover);
}
td { display: block; border: none; text-align: center; }
td:nth-child(1) {
grid-area: service;
font-weight: bold;
background: var(--button-green);
color: var(--text-dark-gray);
padding: 10px;
}
td:nth-child(2) {
grid-area: price;
border-bottom: 1px solid var(--border-gray);
padding: 10px;
}
td:nth-child(3) {
grid-area: desc;
background: var(--lighter-gray);
padding: 10px;
}
/* UPPDATERAD: Navigationscirklar i par på mobil */
.cta-circles {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.cta-circle {
width: 90px;
height: 90px;
font-size: 15px;
}
.back-to-top { font-size: 14px; padding: 8px 20px; }
}
</style>
</head> <body> <div class="ainnova-wrapper" id="top"> <div class="container"> <!-- HUVUDRUBRIK OCH INLEDNING --> <h1>Webbplatser</h1> <p><strong>Professionella och användarvänliga webbplatser som stärker ditt varumärke och hjälper dig nå dina mål.</strong></p> <p>Din webbplats är ofta första intrycket potentiella kunder får av ditt företag. Vi skapar snygga, funktionella och sökmotoroptimerade webbplatser som både imponerar på besökare och driver affärsresultat. Oavsett om du behöver en enkel presentationssida eller en mer omfattande lösning har vi rätt kompetens för att förverkliga din vision.</p>
<!-- BILDCONTAINER -->
<div class="image-container">
<img src="<https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=1469&auto=format&fit=crop>" alt="Webbdesign och kodning">
<img src="<https://images.unsplash.com/photo-1551434678-e076c223a692?q=80&w=1470&auto=format&fit=crop>" alt="Team som arbetar med webbdesign">
</div>
<!-- FÖRSTA SEKTIONEN -->
<h2>Fördelar med våra webbplatser</h2>
<p>Vi skapar inte bara snygga webbplatser – vi bygger digitala verktyg som hjälper ditt företag att växa och lyckas online.</p>
<!-- LISTA MED IKONER -->
<ul>
<li>
<span class="ainnova-icon"></span>
<span><strong>Responsiv design:</strong> Webbplatsen anpassar sig automatiskt till alla skärmstorlekar – mobiler, surfplattor och datorer</span>
</li>
<li>
<span class="ainnova-icon"></span>
<span><strong>SEO-optimerad:</strong> Din webbplats byggs från grunden för att rankas högt i Googles sökresultat</span>
</li>
<li>
<span class="ainnova-icon"></span>
<span><strong>Användarvänlig:</strong> Intuitiv navigering och tydlig struktur som gör det enkelt för besökare att hitta vad de söker</span>
</li>
</ul>
<!-- BETONINGSBOX -->
<div class="highlight-box">
<h3>Vi guidar dig genom hela processen. Webbplatser går att bygga både med och utan webbhotell.</h3>
<p>Du behöver inte vara teknisk – vi tar hand om allt från start till mål, och visar exakt vad vi behöver från dig. Vi hjälper dig att skapa en webbplats som representerar ditt företag på bästa sätt.</p>
</div>
<!-- ANDRA SEKTIONEN - TABELL -->
<h2>Våra webbplatslösningar</h2>
<p>Vi erbjuder flera olika typer av webbplatser anpassade efter dina behov och budget.</p>
<div class="table-title">Paket och ca priser för webbplatser. Sätter man den enhetliga strukturen från början är resten enkelt. Vårt verkliga värde ligger i att välja rätt verktyg åt dig och att du med hjälp av AI ska kunna bygga allt själv. Detta är av AI framtagna exempelsidor!!!🤺.</div>
<div class="table-container">
<table>
<thead>
<tr>
<th>Paket</th>
<th>Pris (ex moms)</th>
<th>Innehåll</th>
</tr>
</thead>
<tbody>
<tr data-category="Mindre webbplatser">
<td>Enkel webbplats</td>
<td>10 000 kr</td>
<td>En professionell webbplats som presenterar ditt företag, dina tjänster och kontaktuppgifter. Perfekt för mindre företag som vill ha en stilren närvaro online.</td>
</tr>
<tr data-category="Mindre webbplatser">
<td>Företagswebbplats</td>
<td>15 000 kr</td>
<td>En mer omfattande webbplats med fler sidor, kontaktformulär och bildgalleri. Optimerad för sökmotorer och alla enheter.</td>
</tr>
</tbody>
<tbody>
<tr data-category="Avancerade lösningar">
<td>E-handel eller speciallösning</td>
<td>Från 35 000 kr</td>
<td>Skräddarsydd lösning för mer komplexa behov som e-handel, bokningssystem eller andra specialfunktioner.</td>
</tr>
</tbody>
<tbody>
<tr data-category="Tillägg">
<td>Löpande support</td>
<td>800 kr/timme</td>
<td>Löpande hjälp med uppdateringar, ändringar och tekniskt stöd efter att webbplatsen lanserats.</td>
</tr>
<tr data-category="Tillägg">
<td>Resekostnader</td>
<td>Tillkommer</td>
<td>För tjänster utanför Karlstad och Kristinehamn tillkommer resekostnader</td>
</tr>
</tbody>
</table>
</div>
<!-- TREDJE SEKTIONEN -->
<h2>Så här skapar vi din webbplats</h2>
<p>Vi följer en enkel och effektiv process som säkerställer att slutresultatet möter dina förväntningar och levereras i tid.</p>
<!-- UNDERSEKTIONER -->
<h3>Planering och design</h3>
<p>Vi börjar med att förstå dina mål och målgrupp. Sedan skapar vi en design som speglar ditt varumärke och tilltalar dina besökare.</p>
<h3>Utveckling och innehåll</h3>
<p>När designen är godkänd börjar vi bygga webbplatsen. Vi implementerar all funktionalitet och hjälper dig med innehåll och bilder.</p>
<h3>Lansering och uppföljning</h3>
<p>Efter noggrann testning lanserar vi din webbplats. Vi går igenom hur du uppdaterar innehåll och finns tillgängliga för frågor och support.</p>
<!-- BILD I FULLBREDD -->
<img src="<https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?q=80&w=1469&auto=format&fit=crop>" alt="Modern responsiv webbdesign" class="full-width-image">
<!-- FJÄRDE SEKTIONEN -->
<h2>Därför ska du välja AINNOVA</h2>
<p>Vi bygger webbplatser som inte bara ser bra ut, utan som också hjälper dig att nå dina affärsmål.</p>
<!-- LISTA MED IKONER -->
<ul>
<li>
<span class="ainnova-icon"></span>
<span><strong>Resultatfokus:</strong> Vi designar för att uppnå dina affärsmål, inte bara för utseendets skull</span>
</li>
<li>
<span class="ainnova-icon"></span>
<span><strong>Modern teknik:</strong> Vi bygger med moderna verktyg som är enkla att underhålla och vidareutveckla</span>
</li>
<li>
<span class="ainnova-icon"></span>
<span><strong>Personlig service:</strong> Vi lyssnar på dina behov och finns tillgängliga för support längs hela vägen</span>
</li>
</ul>
<!-- KONKURRENTER -->
<div class="competitors-section">
<h3>Andra leverantörer inom webbdesign:</h3>
<p><a href="<https://delicate-neighbor-37a.notion.site/Webbplatser-1cd9c8142e3f8075b8f4fb023086ec0a>" class="competitor-link" target="_blank" rel="noopener noreferrer">Se fler leverantörer</a></p>
</div>
<!-- NAVIGATIONSCIRKLAR OCH TILLBAKA TILL TOPPEN -->
<footer>
<nav class="cta-circles">
<a href="<https://ainnova.se/>" class="cta-circle" target="_blank" rel="noopener noreferrer">AINNOVA</a>
<a href="<https://erbjudanden.ainnova.se/>" class="cta-circle" target="_blank" rel="noopener noreferrer">Erbjudanden</a>
<a href="<https://ainnova.se/kontakt>" class="cta-circle" target="_blank" rel="noopener noreferrer">Kontakt</a>
<a href="<https://delicate-neighbor-37a.notion.site/Du-f-r-alltid-AINNOVAS-b-sta-tips-1649c8142e3f805cbf91d9c1fe7d320c>" class="cta-circle" target="_blank" rel="noopener noreferrer">Notion</a>
</nav>
<a href="#top" class="back-to-top">🤺 Opp till topps bestemor! 🤺</a>
</footer>
</div>
</div>
<script>
document.querySelector('.back-to-top').addEventListener('click', function(e) {
e.preventDefault();
document.getElementById('top').scrollIntoView({ behavior: 'smooth' });
});
</script>
</body> </html>