MaticIvesic
/
intelidomWebsite
mirror of https://github.com/MoxiFoxi411/intelidomWebsite.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/MoxiFoxi411/intelidomWebsite

This commit is contained in:
Matic Ivešić 2025-11-01 20:22:06 +01:00
parent 587ca29e84 a8768f7ac3
commit 8d3e601768
6 changed files with 67 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.css
View File

@ -1,7 +1,7 @@
body { body {
background-color: #0a0d0f; background-color: #0a0d0f;
color: #e5e4ea; color: #e5e4ea;
font-family: sans-serif; font-family: "Inter", sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;

3
src/app.html
View File

@ -3,6 +3,9 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap" rel="stylesheet">
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover"> <body data-sveltekit-preload-data="hover">

15
src/lib/Header.svelte
View File

@ -15,17 +15,7 @@
top: 0; top: 0;
backdrop-filter: blur(7px); backdrop-filter: blur(7px);
padding: 0 0 1em 0; padding: 0 0 1em 0;
} z-index: 1;
.blur-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgba(15, 15, 16, 0.8);
} }
div>img{ div>img{
@ -33,9 +23,6 @@
width: 15em; width: 15em;
z-index: 1; z-index: 1;
} }
@media (min-width: 900px){ @media (min-width: 900px){
:global(.header-contact){ :global(.header-contact){

4
src/lib/Main.svelte
View File

@ -11,6 +11,10 @@ import Service from '$lib/Service.svelte';
align-items: center; align-items: center;
gap: 2em; gap: 2em;
} }
li{
margin-bottom: 1em;
}
</style> </style>
<div class="main"> <div class="main">

25
src/lib/Service.svelte
View File

@ -3,6 +3,7 @@ export let service = 'Lorem Ipsum';
export let serviceImage = '/default_image.jpg'; export let serviceImage = '/default_image.jpg';
export let serviceImageAlt = 'Image'; export let serviceImageAlt = 'Image';
export let imageOnRight = false; export let imageOnRight = false;
import ZoomInImage from '$lib/ZoomInImage.svelte'
</script> </script>
<style> <style>
@ -11,12 +12,15 @@ export let imageOnRight = false;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center;
} }
.service-content{ .service-content{
width: 100%; width: 100%;
height: 100%;
display: flex; display: flex;
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: center;
gap: 2em; gap: 2em;
} }
@ -24,15 +28,6 @@ export let imageOnRight = false;
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.image{
width: 100%;
}
.image>img{
width: 100%;
border-radius: 2em;
}
.service-text{ .service-text{
width: 100%; width: 100%;
font-size: 1.3em; font-size: 1.3em;
@ -43,10 +38,16 @@ export let imageOnRight = false;
text-transform: uppercase; text-transform: uppercase;
} }
h2{
text-align: center;
width: 100%;
}
@media (min-width: 900px){ @media (min-width: 900px){
.service-content{ .service-content{
flex-direction: row; flex-direction: row;
align-items: start;
} }
.image-right{ .image-right{
@ -66,9 +67,9 @@ h2{
</h2> </h2>
</div> </div>
<div class="service-content" class:image-right={imageOnRight}> <div class="service-content" class:image-right={imageOnRight}>
<div class="image"> <ZoomInImage serviceImage={serviceImage} serviceImageAlt={serviceImageAlt}>
<img src={serviceImage} alt={serviceImageAlt}>
</div> </ZoomInImage>
<div class="service-text"> <div class="service-text">
<slot /> <slot />
</div> </div>

45
src/lib/ZoomInImage.svelte Normal file
View File

@ -0,0 +1,45 @@
<script>
export let serviceImage = '/default_image.jpg';
export let serviceImageAlt = 'Image';
</script>
<style>
.image{
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2em;
width: 80%;
height: 0;
padding-top: 60%;
overflow: hidden;
z-index: 0;
}
.image>img{
position: absolute;
top: 0;
left: 0;
width: 100%;
object-fit: cover;
transition: 0.2s;
}
.image>img:hover{
transform: scale(1.1);
}
@media (min-width: 900px){
.image{
padding-top: 33%;
}
}
</style>
<div class="image">
<img src={serviceImage} alt={serviceImageAlt}>
</div>