CSS cleanup and decrease padding on hero and section a bit
This commit is contained in:
bdnugget committed
1 parent
d124561ef9
commit
7c45c0af08
24 files changed
+689
-213
No files matched your search
@@ -346,6 +346,18 @@ func (s *Server) aboutHandler(w http.ResponseWriter, r *http.Request) {
|
||||
s.renderTemplate(w, "over-mij.html", data)
|
||||
}
|
||||
|
||||
// dienstenHandler handles the services page
|
||||
func (s *Server) dienstenHandler(w http.ResponseWriter, r *http.Request) {
|
||||
data := s.createPageData("Diensten en tarieven - "+s.config.CompanyName, "diensten")
|
||||
s.renderTemplate(w, "diensten.html", data)
|
||||
}
|
||||
|
||||
// linuxHandler handles the Linux page (distributions + features)
|
||||
func (s *Server) linuxHandler(w http.ResponseWriter, r *http.Request) {
|
||||
data := s.createPageData("Linux distributies en functies - "+s.config.CompanyName, "linux")
|
||||
s.renderTemplate(w, "linux.html", data)
|
||||
}
|
||||
|
||||
// setupRoutes configures all HTTP routes
|
||||
func (s *Server) setupRoutes() {
|
||||
// Static files
|
||||
@@ -356,6 +368,8 @@ func (s *Server) setupRoutes() {
|
||||
http.HandleFunc("/", s.homeHandler)
|
||||
http.HandleFunc("/contact", s.contactHandler)
|
||||
http.HandleFunc("/over-mij", s.aboutHandler)
|
||||
http.HandleFunc("/diensten", s.dienstenHandler)
|
||||
http.HandleFunc("/linux", s.linuxHandler)
|
||||
http.HandleFunc("/health", s.healthHandler)
|
||||
}
|
||||
|
||||
|
||||
@@ -157,7 +157,7 @@ p {
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background: linear-gradient(135deg, rgba(236, 253, 245, 0.85) 0%, rgba(209, 250, 229, 0.85) 100%), url('/static/TuxAinrom.webp');
|
||||
background: linear-gradient(135deg, rgba(236, 253, 245, 0.85) 0%, rgba(209, 250, 229, 0.85) 100%), url('/static/images/TuxAinrom.webp');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@@ -226,6 +226,98 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
/* Universal Card Base Class */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(5, 150, 105, 0.15);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
color: #047857;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Card Variants */
|
||||
.card--benefit {
|
||||
background: #f0fdf4;
|
||||
border-color: #bbf7d0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card--benefit:hover {
|
||||
border-color: #34d399;
|
||||
}
|
||||
|
||||
.card--service {
|
||||
background: #f0fdf4;
|
||||
border-left: 4px solid #059669;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.card--service:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.card--distro {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
min-height: 400px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card--distro::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #059669, #10b981);
|
||||
}
|
||||
|
||||
.card--distro:hover {
|
||||
transform: translateY(-8px);
|
||||
border-color: #a7f3d0;
|
||||
}
|
||||
|
||||
.card--cta {
|
||||
text-align: center;
|
||||
border: 2px solid #bbf7d0;
|
||||
}
|
||||
|
||||
/* Card Content Components */
|
||||
.card__icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.card--benefit .card__icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.card--cta .card__icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
/* Clickable Card Utility */
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 12px 24px;
|
||||
@@ -269,9 +361,61 @@ p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* Benefits Section */
|
||||
/* Universal Section Classes */
|
||||
.section {
|
||||
padding: 3.5rem 0;
|
||||
}
|
||||
|
||||
.section--light {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.section--light-green {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.section--hero {
|
||||
padding: 4rem 0;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
/* Section Headers */
|
||||
.section__title {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
color: #047857;
|
||||
}
|
||||
|
||||
.section__subtitle {
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
color: #6b7280;
|
||||
margin-bottom: 4rem;
|
||||
max-width: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
/* Universal Grid Classes */
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.grid--2-col {
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
}
|
||||
|
||||
.grid--3-col {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
}
|
||||
|
||||
.grid--responsive-cards {
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
}
|
||||
|
||||
/* Legacy Section Classes - Cleaned Up */
|
||||
.benefits {
|
||||
padding: 5rem 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -287,34 +431,8 @@ p {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.benefit-card {
|
||||
background: #f0fdf4;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid #bbf7d0;
|
||||
}
|
||||
|
||||
.benefit-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 30px rgba(5, 150, 105, 0.15);
|
||||
border-color: #34d399;
|
||||
}
|
||||
|
||||
.benefit-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.benefit-card h3 {
|
||||
color: #047857;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Windows EOL Section */
|
||||
.windows-eol {
|
||||
padding: 5rem 0;
|
||||
background: #fffbeb;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
@@ -430,7 +548,6 @@ p {
|
||||
|
||||
/* Distributions Section */
|
||||
.distros {
|
||||
padding: 5rem 0;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
@@ -458,36 +575,6 @@ p {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.distro-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
.distro-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg, #059669, #10b981);
|
||||
}
|
||||
|
||||
.distro-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 12px 40px rgba(5, 150, 105, 0.15);
|
||||
border-color: #a7f3d0;
|
||||
}
|
||||
|
||||
.distro-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
@@ -589,7 +676,6 @@ p {
|
||||
|
||||
/* Services Section */
|
||||
.services {
|
||||
padding: 5rem 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
@@ -605,26 +691,8 @@ p {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: #f0fdf4;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
border-left: 4px solid #059669;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
color: #047857;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Linux Features Section */
|
||||
.linux-features {
|
||||
padding: 5rem 0;
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
@@ -726,7 +794,6 @@ p {
|
||||
|
||||
/* CTA Section */
|
||||
.cta {
|
||||
padding: 5rem 0;
|
||||
background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
||||
color: white;
|
||||
text-align: center;
|
||||
@@ -744,12 +811,34 @@ p {
|
||||
}
|
||||
|
||||
/* Contact Page Styles */
|
||||
.contact-hero {
|
||||
/* Deprecated: contact-hero replaced by .page-hero */
|
||||
|
||||
/* Generic page hero reused across pages */
|
||||
.page-hero {
|
||||
background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
|
||||
padding: 3rem 0;
|
||||
padding: 2.25rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Match heading color for reusable hero */
|
||||
.page-hero h1 {
|
||||
color: #047857;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Keep heading links visually identical to headings */
|
||||
h2 a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Reusable link wrapper to make whole cards clickable */
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.contact-hero h1 {
|
||||
color: #047857;
|
||||
margin-bottom: 1rem;
|
||||
@@ -882,7 +971,6 @@ p {
|
||||
}
|
||||
|
||||
.contact-cta {
|
||||
padding: 4rem 0;
|
||||
background: #f0fdf4;
|
||||
}
|
||||
|
||||
@@ -898,24 +986,6 @@ p {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.cta-benefit {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.cta-benefit .benefit-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta-benefit h3 {
|
||||
color: #047857;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: #f9fafb;
|
||||
@@ -957,8 +1027,8 @@ footer {
|
||||
}
|
||||
|
||||
/* About page */
|
||||
.about {
|
||||
padding: 5rem 0;
|
||||
.section {
|
||||
padding: 3.5rem 0;
|
||||
}
|
||||
|
||||
.about-grid {
|
||||
@@ -1067,9 +1137,7 @@ footer {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.benefit-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.eol-content {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -1081,9 +1149,7 @@ footer {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.distro-card {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
|
||||
.contact-grid {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -1112,8 +1178,11 @@ footer {
|
||||
}
|
||||
|
||||
/* Section padding adjustments */
|
||||
.benefits, .windows-eol, .distros, .services, .linux-features, .cta {
|
||||
padding: 3rem 0;
|
||||
.page-hero {
|
||||
padding: 1.75rem 0;
|
||||
}
|
||||
.section {
|
||||
padding: 2.25rem 0;
|
||||
}
|
||||
|
||||
/* Typography adjustments */
|
||||
@@ -1159,12 +1228,12 @@ footer {
|
||||
}
|
||||
|
||||
/* Card padding adjustments */
|
||||
.benefit-card, .service-card, .distro-card, .cta-benefit {
|
||||
.card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
/* Icon size adjustments */
|
||||
.benefit-icon, .cta-benefit .benefit-icon {
|
||||
.card__icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
@@ -1196,8 +1265,11 @@ footer {
|
||||
}
|
||||
|
||||
/* Section padding for very small screens */
|
||||
.benefits, .windows-eol, .distros, .services, .linux-features, .cta {
|
||||
padding: 2rem 0;
|
||||
.page-hero {
|
||||
padding: 1.5rem 0;
|
||||
}
|
||||
.section {
|
||||
padding: 1.75rem 0;
|
||||
}
|
||||
|
||||
/* Typography for very small screens */
|
||||
@@ -1277,7 +1349,7 @@ footer {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.benefit-card, .service-card, .distro-card, .cta-benefit {
|
||||
.card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
@@ -1299,9 +1371,7 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
.benefit-card,
|
||||
.service-card,
|
||||
.cta-benefit {
|
||||
.card {
|
||||
animation: fadeInUp 0.6s ease-out;
|
||||
}
|
||||
|
||||
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
+19
-19
@@ -30,11 +30,11 @@
|
||||
<meta name="twitter:image:alt" content="Tux Linux mascotte banner voor Hogeland Linux service">
|
||||
|
||||
<!-- Favicon Links -->
|
||||
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
<link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/static/icons/manifest.json">
|
||||
|
||||
<!-- Theme Color for Mobile Browsers -->
|
||||
<meta name="theme-color" content="#059669">
|
||||
@@ -44,25 +44,25 @@
|
||||
<link rel="canonical" href="https://{{.Domain}}/contact">
|
||||
|
||||
<!-- Preload Critical Resources -->
|
||||
<link rel="preload" href="/static/style.css" as="style">
|
||||
<link rel="preload" href="/static/css/style.css" as="style">
|
||||
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" as="style">
|
||||
|
||||
<!-- CSS and Fonts -->
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
{{template "header" .}}
|
||||
|
||||
<main>
|
||||
<section class="contact-hero">
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<h1>Neem contact op</h1>
|
||||
<p>Heeft u vragen over Linux migratie? Wij helpen u graag verder!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact-content">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="contact-grid">
|
||||
<div class="contact-info">
|
||||
@@ -164,27 +164,27 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact-cta">
|
||||
<section class="section section--light-green contact-cta">
|
||||
<div class="container">
|
||||
<h2>Waarom kiezen voor {{.CompanyName}}?</h2>
|
||||
<div class="cta-benefits">
|
||||
<div class="cta-benefit">
|
||||
<div class="benefit-icon">🎯</div>
|
||||
<div class="card card--ctas">
|
||||
<div class="card card--cta">
|
||||
<div class="card__icon">🎯</div>
|
||||
<h3>Persoonlijke aanpak</h3>
|
||||
<p>Elke klant is uniek, en wij bieden maatwerkoplossingen.</p>
|
||||
</div>
|
||||
<div class="cta-benefit">
|
||||
<div class="benefit-icon">🛠️</div>
|
||||
<div class="card card--cta">
|
||||
<div class="card__icon">🛠️</div>
|
||||
<h3>Professionele service</h3>
|
||||
<p>Ruim 20 jaar ervaring met Linux systemen en migraties.</p>
|
||||
</div>
|
||||
<div class="cta-benefit">
|
||||
<div class="benefit-icon">🤝</div>
|
||||
<div class="card card--cta">
|
||||
<div class="card__icon">🤝</div>
|
||||
<h3>Volledige ondersteuning</h3>
|
||||
<p>Van installatie tot training, wij begeleiden u door het hele proces.</p>
|
||||
</div>
|
||||
<div class="cta-benefit">
|
||||
<div class="benefit-icon">💚</div>
|
||||
<div class="card card--cta">
|
||||
<div class="card__icon">💚</div>
|
||||
<h3>Duurzame keuze</h3>
|
||||
<p>Samen bouwen we aan een duurzamere digitale toekomst.</p>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.Title}}</title>
|
||||
|
||||
<!-- Basic SEO Meta Tags -->
|
||||
<meta name="description" content="Diensten en tarieven van {{.CompanyName}}: Linux-installaties, advies, datamigratie en ondersteuning. Tarief: €20 per half uur.">
|
||||
<meta name="keywords" content="diensten, tarieven, Linux installatie, datamigratie, ondersteuning, Het Hogeland">
|
||||
<meta name="author" content="{{.CompanyName}}">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="language" content="nl">
|
||||
|
||||
<!-- Open Graph Meta Tags for Social Media -->
|
||||
<meta property="og:title" content="{{.Title}}">
|
||||
<meta property="og:description" content="Diensten en tarieven: Linux-installaties, advies, datamigratie en ondersteuning. Tarief: €20 per half uur.">
|
||||
<meta property="og:image" content="https://{{.Domain}}/static/TuxAinrom.webp">
|
||||
<meta property="og:image:alt" content="Diensten van {{.CompanyName}}">
|
||||
<meta property="og:url" content="https://{{.Domain}}/diensten">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="{{.CompanyName}}">
|
||||
<meta property="og:locale" content="nl_NL">
|
||||
|
||||
<!-- Favicon Links -->
|
||||
<link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/static/icons/manifest.json">
|
||||
|
||||
<!-- Theme Color for Mobile Browsers -->
|
||||
<meta name="theme-color" content="#059669">
|
||||
<meta name="msapplication-TileColor" content="#059669">
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="https://{{.Domain}}/diensten">
|
||||
|
||||
<!-- CSS and Fonts -->
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
{{template "header" .}}
|
||||
|
||||
<main>
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<h1>Diensten en tarieven</h1>
|
||||
<p>Heldere prijzen en duidelijke afspraken. Tarief: €20 per half uur.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--light services">
|
||||
<div class="container">
|
||||
<h2>Wat ik voor u kan doen</h2>
|
||||
<div class="services-grid">
|
||||
<div class="card card--service">
|
||||
<h3>Gratis advies</h3>
|
||||
<p>Ik bekijk uw huidige computer en adviseer over de beste Linux-distributie en aanpak.</p>
|
||||
</div>
|
||||
<div class="card card--service">
|
||||
<h3>Installatieservice</h3>
|
||||
<p>Professionele Linux-installatie met basissoftware, updates en drivers waar nodig.</p>
|
||||
</div>
|
||||
<div class="card card--service">
|
||||
<h3>Datamigratie</h3>
|
||||
<p>Overzetten van bestanden, documenten en foto’s van uw oude systeem naar Linux.</p>
|
||||
</div>
|
||||
<div class="card card--service">
|
||||
<h3>Training en ondersteuning</h3>
|
||||
<p>Uitleg en begeleiding zodat u direct prettig aan de slag kunt met Linux.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--light-green contact-cta">
|
||||
<div class="container">
|
||||
<h2>Tarieven</h2>
|
||||
<div class="cta-benefits">
|
||||
<div class="cta-benefit">
|
||||
<div class="benefit-icon">💶</div>
|
||||
<h3>€20 per half uur</h3>
|
||||
<p>Transparant, zonder verborgen kosten. Reistijd in overleg, binnen Het Hogeland vaak kosteloos.</p>
|
||||
</div>
|
||||
<div class="cta-benefit">
|
||||
<div class="benefit-icon">🧾</div>
|
||||
<h3>Voorbeelden</h3>
|
||||
<p>Installatie + basisinrichting: 1–2 uur. Migratie van gegevens: afhankelijk van volume en snelheid van opslag.</p>
|
||||
</div>
|
||||
<div class="cta-benefit">
|
||||
<div class="benefit-icon">🔁</div>
|
||||
<h3>Extra service</h3>
|
||||
<p>Optioneel kan ik data kopiëren naar uw USB-stick(s) of externe schijf. Zie de disclaimer hieronder.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact-content">
|
||||
<div class="container">
|
||||
<h2>Belangrijke disclaimer over back-ups</h2>
|
||||
<p>Ik lever in de kern een Linux-installatie- en migratieservice en ben geen back-updienst. <strong>Back-ups maken en bewaren is in principe de verantwoordelijkheid van de klant.</strong> Als extra service kan ik — op uw verzoek — data kopiëren naar door u aangeleverde USB-sticks of een externe schijf.</p>
|
||||
<p>Hoewel ik zorgvuldig werk, kan er bij datakopie of -migratie altijd een risico op dataverlies bestaan (bijvoorbeeld door defecte schijven, corrupte data of hardwarefouten). <strong>U blijft verantwoordelijk voor uw eigen data</strong>. Ik ben niet aansprakelijk voor verlies of beschadiging van gegevens. Ik adviseer altijd om vooraf een eigen back-up te maken.</p>
|
||||
<div class="about-cta">
|
||||
<a href="/contact" class="btn btn-primary">Vrijblijvend contact opnemen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{{template "footer" .}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -4,15 +4,14 @@
|
||||
<div class="nav-container">
|
||||
<div class="nav-logo">
|
||||
<a href="/">
|
||||
<img src="/static/Tux.svg" alt="Tux the Linux Penguin" class="tux-icon">
|
||||
<img src="/static/images/Tux.svg" alt="Tux the Linux Penguin" class="tux-icon">
|
||||
<h1>{{.CompanyName}}</h1>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-links">
|
||||
<a href="/"{{if eq .CurrentPage "home"}} class="active"{{end}}>Home</a>
|
||||
<a href="/#voordelen">↓ Voordelen</a>
|
||||
<a href="/#distros">↓ Linux-keuze</a>
|
||||
<a href="/#diensten">↓ Diensten</a>
|
||||
<a href="/linux"{{if eq .CurrentPage "linux"}} class="active"{{end}}>Waarom Linux</a>
|
||||
<a href="/diensten"{{if eq .CurrentPage "diensten"}} class="active"{{end}}>Diensten</a>
|
||||
<a href="/over-mij"{{if eq .CurrentPage "about"}} class="active"{{end}}>Over mij</a>
|
||||
<a href="/contact"{{if eq .CurrentPage "contact"}} class="active"{{end}}>Contact</a>
|
||||
</div>
|
||||
@@ -21,9 +20,8 @@
|
||||
</button>
|
||||
<div class="mobile-menu" id="mobile-menu">
|
||||
<a href="/"{{if eq .CurrentPage "home"}} class="active"{{end}}>Home</a>
|
||||
<a href="/#voordelen">↓ Voordelen</a>
|
||||
<a href="/#distros">↓ Linux-keuze</a>
|
||||
<a href="/#diensten">↓ Diensten</a>
|
||||
<a href="/linux"{{if eq .CurrentPage "linux"}} class="active"{{end}}>Waarom Linux</a>
|
||||
<a href="/diensten"{{if eq .CurrentPage "diensten"}} class="active"{{end}}>Diensten</a>
|
||||
<a href="/over-mij"{{if eq .CurrentPage "about"}} class="active"{{end}}>Over mij</a>
|
||||
<a href="/contact"{{if eq .CurrentPage "contact"}} class="active"{{end}}>Contact</a>
|
||||
</div>
|
||||
|
||||
+58
-58
@@ -33,11 +33,11 @@
|
||||
<meta name="twitter:image:alt" content="Tux Linux mascotte banner voor Hogeland Linux service">
|
||||
|
||||
<!-- Favicon Links -->
|
||||
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
<link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/static/icons/manifest.json">
|
||||
|
||||
<!-- Theme Color for Mobile Browsers -->
|
||||
<meta name="theme-color" content="#059669">
|
||||
@@ -47,12 +47,12 @@
|
||||
<link rel="canonical" href="https://{{.Domain}}/">
|
||||
|
||||
<!-- Preload Critical Resources -->
|
||||
<link rel="preload" href="/static/style.css" as="style">
|
||||
<link rel="preload" href="/static/TuxAinrom.webp" as="image">
|
||||
<link rel="preload" href="/static/css/style.css" as="style">
|
||||
<link rel="preload" href="/static/images/TuxAinrom.webp" as="image">
|
||||
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" as="style">
|
||||
|
||||
<!-- CSS and Fonts -->
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Structured Data for Search Engines -->
|
||||
@@ -110,51 +110,51 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="voordelen" class="benefits">
|
||||
<section id="voordelen" class="section section--light benefits">
|
||||
<div class="container">
|
||||
<h2>Waarom Linux kiezen?</h2>
|
||||
<h2><a href="/linux">Waarom Linux kiezen?</a></h2>
|
||||
<div class="benefits-grid">
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🛡️</div>
|
||||
<a class="card card--benefit card-link" href="/linux">
|
||||
<div class="card__icon">🛡️</div>
|
||||
<h3>Veilig en betrouwbaar</h3>
|
||||
<p>Linux is van nature veiliger dan Windows. Minder virussen, geen gedwongen updates en volledige controle over uw systeem.</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">💰</div>
|
||||
</a>
|
||||
<a class="card card--benefit card-link" href="/linux">
|
||||
<div class="card__icon">💰</div>
|
||||
<h3>Volledig gratis</h3>
|
||||
<p>Geen licentiekosten, geen abonnementen. Linux en alle software zijn gratis en open source.</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🔄</div>
|
||||
</a>
|
||||
<a class="card card--benefit card-link" href="/linux">
|
||||
<div class="card__icon">🔄</div>
|
||||
<h3>Oude hardware hergebruiken</h3>
|
||||
<p>Uw computer van 10 jaar oud? Linux maakt hem weer snel! Geen nieuwe hardware nodig.</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🌱</div>
|
||||
</a>
|
||||
<a class="card card--benefit card-link" href="/linux">
|
||||
<div class="card__icon">🌱</div>
|
||||
<h3>Milieuvriendelijk</h3>
|
||||
<p>Stop e-waste! Door Linux te gebruiken houdt u uw apparaten langer werkend en uit de afvalberg.</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">🔒</div>
|
||||
</a>
|
||||
<a class="card card--benefit card-link" href="/linux">
|
||||
<div class="card__icon">🔒</div>
|
||||
<h3>Privacybescherming</h3>
|
||||
<p>Geen tracking en geen verborgen gegevensverzameling. Uw privacy blijft van uzelf.</p>
|
||||
</div>
|
||||
<div class="benefit-card">
|
||||
<div class="benefit-icon">⚡</div>
|
||||
</a>
|
||||
<a class="card card--benefit card-link" href="/linux">
|
||||
<div class="card__icon">⚡</div>
|
||||
<h3>Snel en efficiënt</h3>
|
||||
<p>Linux gebruikt minder systeembronnen, waardoor uw computer sneller opstart en soepeler werkt.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="windows10-eol" class="windows-eol">
|
||||
<section id="windows10-eol" class="section windows-eol">
|
||||
<div class="container">
|
||||
<h2>Windows 10-ondersteuning eindigt</h2>
|
||||
<div class="eol-content">
|
||||
<div class="eol-main">
|
||||
<div class="eol-clippy-image">
|
||||
<img src="/static/clippy.png" alt="Clippy advising to use Linux">
|
||||
<img src="/static/images/clippy.png" alt="Clippy advising to use Linux">
|
||||
</div>
|
||||
<div class="eol-text">
|
||||
<p>Microsoft stopt de ondersteuning voor Windows 10 in <strong>oktober 2025</strong>. Dit betekent:</p>
|
||||
@@ -188,12 +188,12 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="distros" class="distros">
|
||||
<section id="distros" class="section section--light-green distros">
|
||||
<div class="container">
|
||||
<h2>Welke Linux past bij u?</h2>
|
||||
<h2><a href="/linux">Welke Linux past bij u?</a></h2>
|
||||
<p class="section-subtitle">Er zijn veel Linux-distributies, elk met hun eigen voordelen. Ik help u graag de perfecte keuze te maken.</p>
|
||||
<div class="distros-grid">
|
||||
<div class="distro-card">
|
||||
<a class="card card--distro card-link" href="/linux">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEiUlEQVR4nO1ZXWgcVRQeVNAna0Xw3tSaB/viQ6EP6ltMobXN3EmsRkpDraVCaSISsbV/YrE0P+CDtJuIPpX0xUIxaaRVUBRbX6q2D0piEOKDm02Zu5P9S5Z2/5LtHDl3kmUnO7tzZzO7bWEPHHZnmLnzffeev3uuojSkIQ1Zs8Bp5ZGw9uwrOqMndUbHdEYnuUoSXCW5ZU3gPZ3RUXwGn8V3lPstkZ3PUF2lA5yRWc4oeFKVhPBdHKPuwEPa8+u5SoY4IxnPwEuUZHCs4K7mp+oCnjPSqTM6t3bgdtVVauDYNQMOu5VHrVn3FzgvXZEAfstX8MHW5ie4SsZrD56u+Mc4ftMX8DgbGD3qBp4VSFyBVuWxNRPw22zCWhNEDr0qlGsb3EicWxt4Rjr9Bp/75xasSG7qprhX7nmdUVPX6JtVgU9sX79OZ5T7SSDSsxVWSwRXwiU6Ydj2PvsqGfYM8vWNMP9ZD6R//RbyPAhmJgVmNg15IwQLgSMQ/2RPKYGeygSWTWnIE3jMjtUkqehhDcA0wUnyxizM7dsifgsmNHnD3Q+EkoynjG2VB5LAtSa4c/FzMPZuFtepny5BOUlfGwNj3xZYGD4GicGDkuALpjQgBR6LLKxTZAe+880XFrjr4+La2PMi3JuPlCWRn7sNqR8vCk1eGPRCYEaqAMRKUXbQ+Kkum8kkzuy3TKl3hzCncOcLQqNH2uHu1REwlxZLCMVPvyNvpip5yd18GD0pNVj7c7CkB21gctN/AW8vbxbR3tcgHzfsKxKegfCuZrlV0OgJGQJjMoMl+g7YgJiLOYi+v83d0Xt3lKxEov9dOQKMjroTUOnfFTNoT6tw3IXhozYQd6+clzaF1Hcjdue+Pi5LYNKVAFdJzDWDTv4Gc3s3C4dckeiHTJoA+kSxLIWmZX0gKkMgJ5NBMRSmfvi6cB1+a5O8M1atJFsdge5WBwJHRSh8EAnEHE1o6mYBbHbihkhcNhM6rEkDidXShHRXJ8YyuAnmh4/ZnfjqiLwTf3+hdk6sy4bRM/ttIDA0Ypx3ey/6wU6A1WG074CPYVQ2kWkbYEn/zwYke+tn4KypIvh7qxMZD8onMpUe97eUwPJ4uZTARBZ5b6t1/1SXsHN0bNTYRx2W2TiVEp++7W8p4bmYuzQkgCTP94nryKEWMHPZEqCFGTdmRfhFTY4M+F/MeS6nGYXkVx+L2oh3bITF6T/Lgk//Mir2BJhD5gcPVtxOOhDoV2q9oUl+eaLCzIesDU1R6M1N/SFJwuOGpupuRAduKbshfe2ycHCxpcykRMVpbSm7SohFsLZyJxBQvEqs7eknfd/UO2T0SHeLm+kYVfdNl/ugpl8EVmf03NTv7m0Vlb5RFfgiEgE/V6GQ0btbXO1fV+lZ5aFuLe72qcn7b9umx+vZ3NVVehm/qdSgvX7OT5/gzjZ/1vf2erFgr9I6jPB91o2q+6BeBcOar0dMjATqdsTkcMjX76V2KprxGXz3vhzyORaAbeRl7NtYEYtMcEbihWNW/M/IhDhmVelxrCofiGPWhjREefjlf0AT6pAJW8ezAAAAAElFTkSuQmCC" alt="ubuntu--v1">
|
||||
@@ -210,9 +210,9 @@
|
||||
<span class="feature">✓ LTS versies</span>
|
||||
</div>
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Beginners, kantoorwerk, algemeen gebruik</strong></p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="distro-card">
|
||||
<a class="card card--distro card-link" href="/linux">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
|
||||
@@ -231,9 +231,9 @@
|
||||
<span class="feature">✓ Zeer stabiel</span>
|
||||
</div>
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Windows migratie, ouderen, conservatieve gebruikers</strong></p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="distro-card">
|
||||
<a class="card card--distro card-link" href="/linux">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="inxzwh639poeU1X9W8tTQa" x1="7.037" x2="45.033" y1="7.037" y2="45.033" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#05acb3"/><stop offset="1" stop-color="#038387"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQa)" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><linearGradient id="inxzwh639poeU1X9W8tTQb" x1="22.277" x2="31.658" y1="31.726" y2="57.724" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQb)" d="M15.5,38.5h17c1.105,0,2-0.895,2-2v0c0-1.105-0.895-2-2-2h-17c-1.105,0-2,0.895-2,2v0 C13.5,37.605,14.395,38.5,15.5,38.5z"/><linearGradient id="inxzwh639poeU1X9W8tTQc" x1="30.056" x2="40.896" y1="16.127" y2="46.17" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQc)" d="M34,16c-3-1-3.5,0.5-4,2.5c-0.618,2.473-1,7-1,8.5s1,2,2,0.5s4-6.5,4.5-8S35.956,16.652,34,16 z"/><linearGradient id="inxzwh639poeU1X9W8tTQd" x1="28.561" x2="31.626" y1="29.85" y2="38.346" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQd)" d="M27.996,30.447c-0.642,0.833-0.433,2.571,1.067,2.589c0.938,0.011,1.584-0.887,1.509-2.029 C30.518,30.184,29.104,29.01,27.996,30.447z"/><linearGradient id="inxzwh639poeU1X9W8tTQe" x1="17.026" x2="40.638" y1="8.349" y2="73.788" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0f0f0"/><stop offset="1" stop-color="#fff"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQe)" d="M26,12c-3.056-5.239-8.399-4.379-13.366-0.748c-1.265,0.924-1.651,2.649-0.91,4.029 l8.91,16.606c0.49,0.913,1.596,1.3,2.549,0.892h0c1.006-0.431,1.479-1.591,1.059-2.602c-0.819-1.975-2.095-5.059-2.742-6.677 C23.5,22.5,29.846,18.592,26,12z M21.352,19.609c-0.515,0.303-1.907,0.452-3.239-2.812c-1.213-2.971-0.849-4.335-0.212-4.547 s1.971,0.485,3.244,3.001C22.418,17.767,21.868,19.306,21.352,19.609z"/></svg>
|
||||
@@ -250,9 +250,9 @@
|
||||
<span class="feature">✓ Modern ontwerp</span>
|
||||
</div>
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Gamers, ontwikkelaars, jongeren</strong></p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="distro-card">
|
||||
<a class="card card--distro card-link" href="/linux">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<img src="data:image/png;base64,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" alt="external-elementary-os-is-a-linux-distribution-based-on-ubuntu-logo-regular-tal-revivo">
|
||||
@@ -269,9 +269,9 @@
|
||||
<span class="feature">✓ Mac-achtig</span>
|
||||
</div>
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Mac gebruikers, designers, stijlbewuste mensen</strong></p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="distro-card">
|
||||
<div class="card card--distro">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFU0lEQVR4nO1YWW8bVRi1gAfojLcsxWmbZnNBQoDgFyCBVAG1E8/YYydx9sQuhWeekBoJQdpCnxFCVUECBSVt9sTLzDhOkzheEloEVA2pKtpCkGhSpOy7P3Qn8XiJJ3TGdqmQj3SVaMYP59w53/m+e2WyLLLIIov/BcqaJ7QlLYEPipv97cXN/utFjb6HhQ2+zWP145tH68fmC+rGrmtqx9o11tH38+vGy2RPAt5o9T6jbQlaS1sCE6UtAShpCUBxsx+KmibgeOMEFDb44Gj9OBypG4eC2jHQ1IzC8zWjcNh6DfKqvb5cy0i1jOp8+j8hX2YPvq21hWbKbEEQSz6/egTyqkYgt9IL6krvdI7Fc/KxES+wTx06YQ9d0tpDkCr5HLQsw6A2D4PKPPzVMWriuYySL33vx8MnTgd/SDd5NRJAeUBJsZM4NZqfMfJae3A6c+Q9oDR5QGFkpnHKkZ9+26Sy81XDkEu5IYfsBxXRC2qiD1SkE9QUG0/exILCyAJOspOyeu+zaROQiufzKml47QwL3zD3YfbhOmxuh2F2fh2+dt+Dl200KI3OOPJyTgADGEl/mRbyWnvgZCrkjR/7YWl1G5JhaXUbys/6QEE64shH1iED+07qOS81KquG4fUzrCD5CBZXt+ClJhfISTqOPPcVCOZWSn1Caw/VSC1Y5HlkmwjuP1jjdltj7uf+/j63xr+75LwLePngPgG7IthKyQJKbUG/1LRBBYs8HwEirTK6UVSCknRDxVlfVNzcGmC6bgEBzLjk2SaVqERps70T5knmkb0xacOAxtTPv9vY2gFMdzWpAJykw0rKXSJaABrMUsl5laEnzuuK8u5o2pA0vPXhNf7dvb9WAdP1CAhgACfY06IF7E2VkpuUsiJBgL47GpWECz66/Av/7rJLuAb2vsJ34gU0+W+k0mETBcj1XdGoJNzwqs0Nd/5cgduzy/CKzc09ExbATIkWUNTkm3+kDmuhIcc4CCrUXQ09HHEV0c9ZJhb4qSuA67t2vV7eD7jBwdmGK16D4yDyqJAfiBZQ2Ojb+Lcm9UKjGy5euQ0//bYIK+vRvEfkEwXEFuznnTO7IkjmUde6eAEHkTc7oeHilGCT4gTokwtAWFrdAkzXlVkBB+08Ih+OJuR+AfpuzvNCX+Czjl9FfQFMioWEPI9sE7vzf8yvQe2FSThiGeB3Xl7eA3JdvIBD73YAdupqtAaSjA54Oos46XhgoTnPx5IvtjpAZXTtdtjYkThBACIvgjDE9wHmW9ECko4HxkH4+e4STwrt/C75+HkeRSUinD4BrPhGlnw86IuzD7JN4s7z83zaBNBhZYWzWLSA5ONB734BiHgCeeTvAnN01llcEZ06wBcwyYzJpCBZh1URA1zmR1DdFgQF6dx/GDE4oO58iP/djTsLgOt7pQkw0mZJApIewE0uuNAxwxObmV2GwsoBkBPOvVShOfLoGSrwCNrapwE3DIknT9A3JR9okt4emFgorXVwp6gI0MGk9nwINFQft9DOx5JfWNmC41UDgBO0BAHuN2VSIXj1QTrBei4IOwd1sj2g31R+EpC4+8wXkslzAoTubVDBVgyAtS3I7a4Q0LuqTwNiZx7YIx9I+VpFkHykYA1DnDXOfT/NFeny2jY346D/0TPONtJ2/hau8+alRD4iQJA832BQ0Q5xCYNikotKlDbomSTPM4G03copKXbxQPJpXhjyfDpv4xQmT8/jII8R9M2U0kYIcsrzotzI/J0Z8nQYdViMZCyy1tanZJmCusJVKCeZToxgFiSTJZgNjKTn0EiMDudoMJM022SRRRZZyJ5E/ANvJojABjwtUQAAAABJRU5ErkJggg==" alt="fedora">
|
||||
@@ -290,7 +290,7 @@
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Ontwikkelaars, IT-professionals, tech-enthousiastelingen</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="distro-card">
|
||||
<div class="card card--distro">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
|
||||
@@ -320,39 +320,39 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="diensten" class="services">
|
||||
<section id="diensten" class="section section--light services">
|
||||
<div class="container">
|
||||
<h2>Mijn diensten</h2>
|
||||
<h2><a href="/diensten">Mijn diensten</a></h2>
|
||||
<div class="services-grid">
|
||||
<div class="service-card">
|
||||
<a class="card card--service card-link" href="/diensten">
|
||||
<h3>Gratis advies</h3>
|
||||
<p>Ik bekijk uw huidige computer en adviseer over de beste Linux distributie voor uw behoeften.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
</a>
|
||||
<a class="card card--service card-link" href="/diensten">
|
||||
<h3>Installatieservice</h3>
|
||||
<p>Professionele Linux-installatie op uw computer, inclusief alle benodigde software.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
</a>
|
||||
<a class="card card--service card-link" href="/diensten">
|
||||
<h3>Datamigratie</h3>
|
||||
<p>Veilige overdracht van al uw bestanden, foto's en documenten van Windows naar Linux.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
</a>
|
||||
<a class="card card--service card-link" href="/diensten">
|
||||
<h3>Training en ondersteuning</h3>
|
||||
<p>Persoonlijke begeleiding om u vertrouwd te maken met uw nieuwe Linux-systeem.</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="linux-features">
|
||||
<section class="section section--light-green linux-features">
|
||||
<div class="container">
|
||||
<h2>Linux in actie</h2>
|
||||
<h2><a href="/linux">Linux in actie</a></h2>
|
||||
<p class="section-subtitle">Zie hoe Linux eruitziet en werkt in de praktijk</p>
|
||||
|
||||
<div class="features-grid">
|
||||
<div class="feature-showcase">
|
||||
<div class="feature-image">
|
||||
<img src="/static/Zorin-17-desktop.webp" alt="Zorin OS 17 Desktop Interface" loading="lazy">
|
||||
<img src="/static/images/Zorin-17-desktop.webp" alt="Zorin OS 17 Desktop Interface" loading="lazy">
|
||||
<div class="image-caption">
|
||||
<small>Bron: <a href="https://www.debugpoint.com/wp-content/uploads/2023/12/Zorin-17-desktop.jpg" target="_blank" rel="noopener">DebugPoint.com</a></small>
|
||||
</div>
|
||||
@@ -363,7 +363,7 @@
|
||||
|
||||
<div class="feature-showcase">
|
||||
<div class="feature-image">
|
||||
<img src="/static/LinuxMintCinnamonSoftwareManager.webp" alt="Linux Mint Software Manager" loading="lazy">
|
||||
<img src="/static/images/LinuxMintCinnamonSoftwareManager.webp" alt="Linux Mint Software Manager" loading="lazy">
|
||||
<div class="image-caption">
|
||||
<small>Bron: <a href="https://linuxmint.com" target="_blank" rel="noopener">LinuxMint.com</a></small>
|
||||
</div>
|
||||
@@ -374,7 +374,7 @@
|
||||
|
||||
<div class="feature-showcase">
|
||||
<div class="feature-image">
|
||||
<img src="/static/GamingBenchmarkLinuxvsWindows.webp" alt="Gaming Performance Linux vs Windows" loading="lazy">
|
||||
<img src="/static/images/GamingBenchmarkLinuxvsWindows.webp" alt="Gaming Performance Linux vs Windows" loading="lazy">
|
||||
<div class="image-caption">
|
||||
<small>Bron: <a href="https://www.youtube.com/watch?v=4LI-1Zdk-Ys" target="_blank" rel="noopener">Linux vs Windows Gaming Performance</a></small>
|
||||
</div>
|
||||
@@ -386,7 +386,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta">
|
||||
<section class="section cta">
|
||||
<div class="container">
|
||||
<h2>Klaar voor de overstap?</h2>
|
||||
<p>Laat uw computer niet eindigen als e-waste. Geef hem een tweede leven met Linux - ik help u graag.</p>
|
||||
|
||||
@@ -0,0 +1,278 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="nl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{.Title}}</title>
|
||||
|
||||
<!-- Basic SEO Meta Tags -->
|
||||
<meta name="description" content="Linux in detail: distributiekeuze en functies. Hulp bij kiezen en voorbeelden van Linux in actie.">
|
||||
<meta name="keywords" content="Linux, distributies, functies, Ubuntu, Linux Mint, Fedora, Pop!_OS, Elementary OS">
|
||||
<meta name="author" content="{{.CompanyName}}">
|
||||
<meta name="robots" content="index, follow">
|
||||
<meta name="language" content="nl">
|
||||
|
||||
<!-- Open Graph Meta Tags for Social Media -->
|
||||
<meta property="og:title" content="{{.Title}}">
|
||||
<meta property="og:description" content="Maak kennis met populaire Linux-distributies en zie Linux in actie.">
|
||||
<meta property="og:image" content="https://{{.Domain}}/static/TuxAinrom.webp">
|
||||
<meta property="og:image:alt" content="Linux distributies en functies">
|
||||
<meta property="og:url" content="https://{{.Domain}}/linux">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:site_name" content="{{.CompanyName}}">
|
||||
<meta property="og:locale" content="nl_NL">
|
||||
|
||||
<!-- Favicon Links -->
|
||||
<link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/static/icons/manifest.json">
|
||||
|
||||
<!-- Theme Color for Mobile Browsers -->
|
||||
<meta name="theme-color" content="#059669">
|
||||
<meta name="msapplication-TileColor" content="#059669">
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="https://{{.Domain}}/linux">
|
||||
|
||||
<!-- CSS and Fonts -->
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
{{template "header" .}}
|
||||
|
||||
<main>
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<h1>Waarom Linux?</h1>
|
||||
<p>Nieuw bij Linux? Geen zorgen. Linux is een veilig en snel besturingssysteem dat uw huidige computer nieuw leven kan geven – zonder licentiekosten. Hieronder leest u kort de voordelen en ziet u voorbeelden en populaire keuzes.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--light benefits">
|
||||
<div class="container">
|
||||
<h2>Voordelen van Linux</h2>
|
||||
<div class="benefits-grid">
|
||||
<div class="card card--benefit">
|
||||
<div class="card__icon">🛡️</div>
|
||||
<h3>Veilig en betrouwbaar</h3>
|
||||
<p>Linux is van nature veiliger dan Windows. Minder virussen, geen gedwongen updates en volledige controle over uw systeem.</p>
|
||||
</div>
|
||||
<div class="card card--benefit">
|
||||
<div class="card__icon">💰</div>
|
||||
<h3>Volledig gratis</h3>
|
||||
<p>Geen licentiekosten, geen abonnementen. Linux en alle software zijn gratis en open source.</p>
|
||||
</div>
|
||||
<div class="card card--benefit">
|
||||
<div class="card__icon">🔄</div>
|
||||
<h3>Oude hardware hergebruiken</h3>
|
||||
<p>Uw computer van 10 jaar oud? Linux maakt hem weer snel! Geen nieuwe hardware nodig.</p>
|
||||
</div>
|
||||
<div class="card card--benefit">
|
||||
<div class="card__icon">🌱</div>
|
||||
<h3>Milieuvriendelijk</h3>
|
||||
<p>Stop e-waste! Door Linux te gebruiken houdt u uw apparaten langer werkend en uit de afvalberg.</p>
|
||||
</div>
|
||||
<div class="card card--benefit">
|
||||
<div class="card__icon">🔒</div>
|
||||
<h3>Privacybescherming</h3>
|
||||
<p>Geen tracking en geen verborgen gegevensverzameling. Uw privacy blijft van uzelf.</p>
|
||||
</div>
|
||||
<div class="card card--benefit">
|
||||
<div class="card__icon">⚡</div>
|
||||
<h3>Snel en efficiënt</h3>
|
||||
<p>Linux gebruikt minder systeembronnen, waardoor uw computer sneller opstart en soepeler werkt.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--light-green distros">
|
||||
<div class="container">
|
||||
<h2>Welke Linux past bij u?</h2>
|
||||
<p class="section-subtitle">Er zijn veel Linux-distributies, elk met hun eigen voordelen. Ik help u graag de perfecte keuze te maken.</p>
|
||||
<div class="distros-grid">
|
||||
{{/* Content mirrors the index distros cards */}}
|
||||
<div class="card card--distro">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEiUlEQVR4nO1ZXWgcVRQeVNAna0Xw3tSaB/viQ6EP6ltMobXN3EmsRkpDraVCaSISsbV/YrE0P+CDtJuIPpX0xUIxaaRVUBRbX6q2D0piEOKDm02Zu5P9S5Z2/5LtHDl3kmUnO7tzZzO7bWEPHHZnmLnzffeev3uuojSkIQ1Zs8Bp5ZGw9uwrOqMndUbHdEYnuUoSXCW5ZU3gPZ3RUXwGn8V3lPstkZ3PUF2lA5yRWc4oeFKVhPBdHKPuwEPa8+u5SoY4IxnPwEuUZHCs4K7mp+oCnjPSqTM6t3bgdtVVauDYNQMOu5VHrVn3FzgvXZEAfstX8MHW5ie4SsZrD56u+Mc4ftMX8DgbGD3qBp4VSFyBVuWxNRPw22zCWhNEDr0qlGsb3EicWxt4Rjr9Bp/75xasSG7qprhX7nmdUVPX6JtVgU9sX79OZ5T7SSDSsxVWSwRXwiU6Ydj2PvsqGfYM8vWNMP9ZD6R//RbyPAhmJgVmNg15IwQLgSMQ/2RPKYGeygSWTWnIE3jMjtUkqehhDcA0wUnyxizM7dsifgsmNHnD3Q+EkoynjG2VB5LAtSa4c/FzMPZuFtepny5BOUlfGwNj3xZYGD4GicGDkuALpjQgBR6LLKxTZAe+880XFrjr4+La2PMi3JuPlCWRn7sNqR8vCk1eGPRCYEaqAMRKUXbQ+Kkum8kkzuy3TKl3hzCncOcLQqNH2uHu1REwlxZLCMVPvyNvpip5yd18GD0pNVj7c7CkB21gctN/AW8vbxbR3tcgHzfsKxKegfCuZrlV0OgJGQJjMoMl+g7YgJiLOYi+v83d0Xt3lKxEov9dOQKMjroTUOnfFTNoT6tw3IXhozYQd6+clzaF1Hcjdue+Pi5LYNKVAFdJzDWDTv4Gc3s3C4dckeiHTJoA+kSxLIWmZX0gKkMgJ5NBMRSmfvi6cB1+a5O8M1atJFsdge5WBwJHRSh8EAnEHE1o6mYBbHbihkhcNhM6rEkDidXShHRXJ8YyuAnmh4/ZnfjqiLwTf3+hdk6sy4bRM/ttIDA0Ypx3ey/6wU6A1WG074CPYVQ2kWkbYEn/zwYke+tn4KypIvh7qxMZD8onMpUe97eUwPJ4uZTARBZ5b6t1/1SXsHN0bNTYRx2W2TiVEp++7W8p4bmYuzQkgCTP94nryKEWMHPZEqCFGTdmRfhFTY4M+F/MeS6nGYXkVx+L2oh3bITF6T/Lgk//Mir2BJhD5gcPVtxOOhDoV2q9oUl+eaLCzIesDU1R6M1N/SFJwuOGpupuRAduKbshfe2ycHCxpcykRMVpbSm7SohFsLZyJxBQvEqs7eknfd/UO2T0SHeLm+kYVfdNl/ugpl8EVmf03NTv7m0Vlb5RFfgiEgE/V6GQ0btbXO1fV+lZ5aFuLe72qcn7b9umx+vZ3NVVehm/qdSgvX7OT5/gzjZ/1vf2erFgr9I6jPB91o2q+6BeBcOar0dMjATqdsTkcMjX76V2KprxGXz3vhzyORaAbeRl7NtYEYtMcEbihWNW/M/IhDhmVelxrCofiGPWhjREefjlf0AT6pAJW8ezAAAAAElFTkSuQmCC" alt="ubuntu--v1">
|
||||
</div>
|
||||
<div class="distro-header-content">
|
||||
<h3>Ubuntu</h3>
|
||||
<span class="distro-tag">Populair</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="distro-description">Perfect voor beginners die van Windows komen. Gebruiksvriendelijk met veel ondersteuning.</p>
|
||||
<div class="distro-features">
|
||||
<span class="feature">✓ Eenvoudig</span>
|
||||
<span class="feature">✓ Grote community</span>
|
||||
<span class="feature">✓ LTS versies</span>
|
||||
</div>
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Beginners, kantoorwerk, algemeen gebruik</strong></p>
|
||||
</div>
|
||||
|
||||
{{/* Mint */}}
|
||||
<div class="card card--distro">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path fill="#c5e1a5" d="M21.5,44C13.492,44,7,37.508,7,29.5V18H2V4h29.031C39.298,4,46,10.702,46,18.969V44H21.5z"></path><path fill="#689f38" d="M30.031,8H6v6h2c1.657,0,3,1.343,3,3v0v11.5C11,34.851,16.149,40,22.5,40H38c2.209,0,4-1.791,4-4 V19.969C42,13.359,36.641,8,30.031,8z"></path><path fill="#fff" d="M33.5,15c-1.577,0-2.996,0.672-4,1.74c-1.004-1.069-2.423-1.74-4-1.74c-3.033,0-5.5,2.473-5.5,5.512 V28h3v-7.488c0-1.381,1.122-2.505,2.5-2.505S28,19.13,28,20.512V28h3v-7.488v0c0-1.381,1.122-2.505,2.5-2.505S36,19.13,36,20.512 V28.5c0,1.93-1.57,3.5-3.5,3.5h-12c-1.93,0-3.5-1.57-3.5-3.5V12h-3v16.5c0,3.584,2.916,6.5,6.5,6.5h12c3.584,0,6.5-2.916,6.5-6.5 v-7.988C39,17.472,36.533,15,33.5,15z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="distro-header-content">
|
||||
<h3>Linux Mint</h3>
|
||||
<span class="distro-tag">Windows-achtig</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="distro-description">Ziet er vertrouwd uit voor Windows-gebruikers. Stabiel en betrouwbaar.</p>
|
||||
<div class="distro-features">
|
||||
<span class="feature">✓ Vertrouwde interface</span>
|
||||
<span class="feature">✓ Multimedia ondersteuning</span>
|
||||
<span class="feature">✓ Zeer stabiel</span>
|
||||
</div>
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Windows migratie, ouderen, conservatieve gebruikers</strong></p>
|
||||
</div>
|
||||
|
||||
{{/* Pop!_OS */}}
|
||||
<div class="card card--distro">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="48px" height="48px"><linearGradient id="inxzwh639poeU1X9W8tTQa" x1="7.037" x2="45.033" y1="7.037" y2="45.033" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#05acb3"/><stop offset="1" stop-color="#038387"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQa)" d="M44,24c0,11.045-8.955,20-20,20S4,35.045,4,24S12.955,4,24,4S44,12.955,44,24z"/><linearGradient id="inxzwh639poeU1X9W8tTQb" x1="22.277" x2="31.658" y1="31.726" y2="57.724" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQb)" d="M15.5,38.5h17c1.105,0,2-0.895,2-2v0c0-1.105-0.895-2-2-2h-17c-1.105,0-2,0.895-2,2v0 C13.5,37.605,14.395,38.5,15.5,38.5z"/><linearGradient id="inxzwh639poeU1X9W8tTQc" x1="30.056" x2="40.896" y1="16.127" y2="46.17" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQc)" d="M34,16c-3-1-3.5,0.5-4,2.5c-0.618,2.473-1,7-1,8.5s1,2,2,0.5s4-6.5,4.5-8S35.956,16.652,34,16 z"/><linearGradient id="inxzwh639poeU1X9W8tTQd" x1="28.561" x2="31.626" y1="29.85" y2="38.346" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff"/><stop offset=".472" stop-color="#dde0e2"/><stop offset="1" stop-color="#bbc1c4"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQd)" d="M27.996,30.447c-0.642,0.833-0.433,2.571,1.067,2.589c0.938,0.011,1.584-0.887,1.509-2.029 C30.518,30.184,29.104,29.01,27.996,30.447z"/><linearGradient id="inxzwh639poeU1X9W8tTQe" x1="17.026" x2="40.638" y1="8.349" y2="73.788" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#f0f0f0"/><stop offset="1" stop-color="#fff"/></linearGradient><path fill="url(#inxzwh639poeU1X9W8tTQe)" d="M26,12c-3.056-5.239-8.399-4.379-13.366-0.748c-1.265,0.924-1.651,2.649-0.91,4.029 l8.91,16.606c0.49,0.913,1.596,1.3,2.549,0.892h0c1.006-0.431,1.479-1.591,1.059-2.602c-0.819-1.975-2.095-5.059-2.742-6.677 C23.5,22.5,29.846,18.592,26,12z M21.352,19.609c-0.515,0.303-1.907,0.452-3.239-2.812c-1.213-2.971-0.849-4.335-0.212-4.547 s1.971,0.485,3.244,3.001C22.418,17.767,21.868,19.306,21.352,19.609z"/></svg>
|
||||
</div>
|
||||
<div class="distro-header-content">
|
||||
<h3>Pop!_OS</h3>
|
||||
<span class="distro-tag">Gaming</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="distro-description">Gemaakt door System76. Uitstekend voor gaming en creatief werk.</p>
|
||||
<div class="distro-features">
|
||||
<span class="feature">✓ Gaming-geoptimaliseerd</span>
|
||||
<span class="feature">✓ NVIDIA-ondersteuning</span>
|
||||
<span class="feature">✓ Modern ontwerp</span>
|
||||
</div>
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Gamers, ontwikkelaars, jongeren</strong></p>
|
||||
</div>
|
||||
|
||||
{{/* Elementary, Fedora, Garuda mirror index */}}
|
||||
<div class="card card--distro">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<img src="data:image/png;base64,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" alt="elementary">
|
||||
</div>
|
||||
<div class="distro-header-content">
|
||||
<h3>Elementary OS</h3>
|
||||
<span class="distro-tag">Mooi</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="distro-description">Prachtig ontwerp geïnspireerd door macOS. Eenvoudig en elegant.</p>
|
||||
<div class="distro-features">
|
||||
<span class="feature">✓ Elegant ontwerp</span>
|
||||
<span class="feature">✓ Privacy-gericht</span>
|
||||
<span class="feature">✓ Mac-achtig</span>
|
||||
</div>
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Mac gebruikers, designers, stijlbewuste mensen</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="card card--distro">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFU0lEQVR4nO1YWW8bVRi1gAfojLcsxWmbZnNBQoDgFyCBVAG1E8/YYydx9sQuhWeekBoJQdpCnxFCVUECBSVt9sTLzDhOkzheEloEVA2pKtpCkGhSpOy7P3Qn8XiJJ3TGdqmQj3SVaMYP59w53/m+e2WyLLLIIov/BcqaJ7QlLYEPipv97cXN/utFjb6HhQ2+zWP145tH68fmC+rGrmtqx9o11tH38+vGy2RPAt5o9T6jbQlaS1sCE6UtAShpCUBxsx+KmibgeOMEFDb44Gj9OBypG4eC2jHQ1IzC8zWjcNh6DfKqvb5cy0i1jOp8+j8hX2YPvq21hWbKbEEQSz6/egTyqkYgt9IL6krvdI7Fc/KxES+wTx06YQ9d0tpDkCr5HLQsw6A2D4PKPPzVMWriuYySL33vx8MnTgd/SDd5NRJAeUBJsZM4NZqfMfJae3A6c+Q9oDR5QGFkpnHKkZ9+26Sy81XDkEu5IYfsBxXRC2qiD1SkE9QUG0/exILCyAJOspOyeu+zaROQiufzKml47QwL3zD3YfbhOmxuh2F2fh2+dt+Dl200KI3OOPJyTgADGEl/mRbyWnvgZCrkjR/7YWl1G5JhaXUbys/6QEE64shH1iED+07qOS81KquG4fUzrCD5CBZXt+ClJhfISTqOPPcVCOZWSn1Caw/VSC1Y5HlkmwjuP1jjdltj7uf+/j63xr+75LwLePngPgG7IthKyQJKbUG/1LRBBYs8HwEirTK6UVSCknRDxVlfVNzcGmC6bgEBzLjk2SaVqERps70T5knmkb0xacOAxtTPv9vY2gFMdzWpAJykw0rKXSJaABrMUsl5laEnzuuK8u5o2pA0vPXhNf7dvb9WAdP1CAhgACfY06IF7E2VkpuUsiJBgL47GpWECz66/Av/7rJLuAb2vsJ34gU0+W+k0mETBcj1XdGoJNzwqs0Nd/5cgduzy/CKzc09ExbATIkWUNTkm3+kDmuhIcc4CCrUXQ09HHEV0c9ZJhb4qSuA67t2vV7eD7jBwdmGK16D4yDyqJAfiBZQ2Ojb+Lcm9UKjGy5euQ0//bYIK+vRvEfkEwXEFuznnTO7IkjmUde6eAEHkTc7oeHilGCT4gTokwtAWFrdAkzXlVkBB+08Ih+OJuR+AfpuzvNCX+Czjl9FfQFMioWEPI9sE7vzf8yvQe2FSThiGeB3Xl7eA3JdvIBD73YAdupqtAaSjA54Oos46XhgoTnPx5IvtjpAZXTtdtjYkThBACIvgjDE9wHmW9ECko4HxkH4+e4STwrt/C75+HkeRSUinD4BrPhGlnw86IuzD7JN4s7z83zaBNBhZYWzWLSA5ONB734BiHgCeeTvAnN01llcEZ06wBcwyYzJpCBZh1URA1zmR1DdFgQF6dx/GDE4oO58iP/djTsLgOt7pQkw0mZJApIewE0uuNAxwxObmV2GwsoBkBPOvVShOfLoGSrwCNrapwE3DIknT9A3JR9okt4emFgorXVwp6gI0MGk9nwINFQft9DOx5JfWNmC41UDgBO0BAHuN2VSIXj1QTrBei4IOwd1sj2g31R+EpC4+8wXkslzAoTubVDBVgyAtS3I7a4Q0LuqTwNiZx7YIx9I+VpFkHykYA1DnDXOfT/NFeny2jY346D/0TPONtJ2/hau8+alRD4iQJA832BQ0Q5xCYNikotKlDbomSTPM4G03copKXbxQPJpXhjyfDpv4xQmT8/jII8R9M2U0kYIcsrzotzI/J0Z8nQYdViMZCyy1tanZJmCusJVKCeZToxgFiSTJZgNjKTn0EiMDudoMJM022SRRRZZyJ5E/ANvJojABjwtUQAAAABJRU5ErkJggg==" alt="fedora">
|
||||
</div>
|
||||
<div class="distro-header-content">
|
||||
<h3>Fedora</h3>
|
||||
<span class="distro-tag">Geavanceerd</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="distro-description">Nieuwste technologieën en functies. Voor technische gebruikers.</p>
|
||||
<div class="distro-features">
|
||||
<span class="feature">✓ Geavanceerde technologie</span>
|
||||
<span class="feature">✓ Red Hat basis</span>
|
||||
<span class="feature">✓ Ontwikkelaarstools</span>
|
||||
</div>
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Ontwikkelaars, IT-professionals, tech-enthousiastelingen</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="card card--distro">
|
||||
<div class="distro-header">
|
||||
<div class="distro-logo">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="48" height="48" viewBox="0 0 48 48">
|
||||
<path fill="#1e88e5" d="M28.465,38.611c0.419-1.105,0.664-2.365,0.664-3.714c0-4.133-2.211-7.494-4.929-7.494 c-2.741,0-4.951,3.361-4.951,7.494c0,1.326,0.221,2.586,0.641,3.669c-9.041,0.951-15.407,4.731-17.993,6.432 c4.355-6.278,8.909-13.638,13.262-22.105c1.083-2.101,2.101-4.178,3.05-6.211c0.375,0.243,0.751,0.509,1.171,0.775 c1.945,1.215,3.759,1.879,5.084,2.233c-0.973-0.73-2.033-1.613-3.116-2.697c-0.817-0.817-1.547-1.637-2.167-2.433 C21.016,10.538,22.608,6.669,24,3c2.32,6.144,5.217,12.842,8.841,19.893c2.343,4.531,4.731,8.754,7.117,12.644 c-0.685-0.375-1.437-0.73-2.233-1.039c-1.371-0.53-2.652-0.862-3.759-1.06c1.503,0.751,3.25,1.747,5.084,3.073 c1.194,0.885,2.254,1.769,3.161,2.631c0.021,0.021,0.021,0.021,0.045,0.045c1.26,2.056,2.565,3.957,3.846,5.813 C43.561,43.319,37.306,39.605,28.465,38.611z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="distro-header-content">
|
||||
<h3>Garuda Linux</h3>
|
||||
<span class="distro-tag">Prestaties</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="distro-description">Arch-gebaseerd met sterke prestaties. Prachtig ontwerp en gaming-geoptimaliseerd.</p>
|
||||
<div class="distro-features">
|
||||
<span class="feature">✓ Arch basis</span>
|
||||
<span class="feature">✓ Gaming-klaar</span>
|
||||
<span class="feature">✓ Mooie interface</span>
|
||||
</div>
|
||||
<p class="distro-ideal">Ideaal voor: <strong>Powergebruikers, gamers, prestatie-enthousiasten</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="distro-cta">
|
||||
<h3>Weet u niet welke u moet kiezen?</h3>
|
||||
<p>Geen probleem! Ik adviseer u graag over de beste distributie voor uw situatie.</p>
|
||||
<a href="/contact" class="btn btn-primary">Persoonlijk advies</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section section--light-green linux-features">
|
||||
<div class="container">
|
||||
<h2>Linux in actie</h2>
|
||||
<p class="section-subtitle">Zie hoe Linux eruitziet en werkt in de praktijk</p>
|
||||
<div class="features-grid">
|
||||
<div class="feature-showcase">
|
||||
<div class="feature-image">
|
||||
<img src="/static/images/Zorin-17-desktop.webp" alt="Zorin OS 17 Desktop Interface" loading="lazy">
|
||||
<div class="image-caption">
|
||||
<small>Bron: <a href="https://www.debugpoint.com/wp-content/uploads/2023/12/Zorin-17-desktop.jpg" target="_blank" rel="noopener">DebugPoint.com</a></small>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Moderne desktopinterface</h3>
|
||||
<p>Linux ziet er vertrouwd en professioneel uit. Deze Zorin OS desktop lijkt op Windows maar is veel sneller en veiliger.</p>
|
||||
</div>
|
||||
<div class="feature-showcase">
|
||||
<div class="feature-image">
|
||||
<img src="/static/images/LinuxMintCinnamonSoftwareManager.webp" alt="Linux Mint Software Manager" loading="lazy">
|
||||
<div class="image-caption">
|
||||
<small>Bron: <a href="https://linuxmint.com" target="_blank" rel="noopener">LinuxMint.com</a></small>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Eenvoudig software installeren</h3>
|
||||
<p>Duizenden gratis programma's met één klik installeren via de Software Manager. Net zo makkelijk als een app store.</p>
|
||||
</div>
|
||||
<div class="feature-showcase">
|
||||
<div class="feature-image">
|
||||
<img src="/static/images/GamingBenchmarkLinuxvsWindows.webp" alt="Gaming Performance Linux vs Windows" loading="lazy">
|
||||
<div class="image-caption">
|
||||
<small>Bron: <a href="https://www.youtube.com/watch?v=4LI-1Zdk-Ys" target="_blank" rel="noopener">Linux vs Windows Gaming Performance</a></small>
|
||||
</div>
|
||||
</div>
|
||||
<h3>Gamingprestaties</h3>
|
||||
<p>Linux kan vaak betere gamingprestaties leveren dan Windows, dankzij minder overhead en optimalisaties voor moderne games.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section cta">
|
||||
<div class="container">
|
||||
<h2>Klaar voor de overstap?</h2>
|
||||
<p>Laat uw computer niet eindigen als e-waste. Geef hem een tweede leven met Linux - ik help u graag.</p>
|
||||
<a href="/contact" class="btn btn-primary btn-large">Neem contact op</a>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
{{template "footer" .}}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
+10
-10
@@ -30,11 +30,11 @@
|
||||
<meta name="twitter:image:alt" content="{{.AboutName}} - Linux op Het Hogeland">
|
||||
|
||||
<!-- Favicon Links -->
|
||||
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/static/manifest.json">
|
||||
<link rel="icon" type="image/x-icon" href="/static/icons/favicon.ico">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
|
||||
<link rel="manifest" href="/static/icons/manifest.json">
|
||||
|
||||
<!-- Theme Color for Mobile Browsers -->
|
||||
<meta name="theme-color" content="#059669">
|
||||
@@ -44,20 +44,20 @@
|
||||
<link rel="canonical" href="https://{{.Domain}}/over-mij">
|
||||
|
||||
<!-- CSS and Fonts -->
|
||||
<link rel="stylesheet" href="/static/style.css">
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
{{template "header" .}}
|
||||
|
||||
<main>
|
||||
<section class="contact-hero">
|
||||
<section class="page-hero">
|
||||
<div class="container">
|
||||
<h1>Over mij</h1>
|
||||
<p>Maak kennis met de Linux-evangelist van Het Hogeland.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="about">
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-text">
|
||||
@@ -66,7 +66,7 @@
|
||||
<!-- Photo appears here on mobile after first paragraph -->
|
||||
<div class="about-photo about-photo-mobile">
|
||||
<figure>
|
||||
<img src="/static/DutchOpen2024.jpg" alt="Foto van mijzelf met mijn zoontje bij grasbaanraces">
|
||||
<img src="/static/images/DutchOpen2024.jpg" alt="Foto van mijzelf met mijn zoontje bij grasbaanraces">
|
||||
<figcaption><small>Ik met mijn zoontje bij de grasbaanraces (Dutch Open 2024)</small></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
@@ -85,7 +85,7 @@
|
||||
</div>
|
||||
<div class="about-photo about-photo-desktop">
|
||||
<figure>
|
||||
<img src="/static/DutchOpen2024.jpg" alt="Foto van mijzelf met mijn zoontje bij grasbaanraces">
|
||||
<img src="/static/images/DutchOpen2024.jpg" alt="Foto van mijzelf met mijn zoontje bij grasbaanraces">
|
||||
<figcaption><small>Ik met mijn zoontje bij de grasbaanraces (Dutch Open 2024)</small></figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user