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

Added hover effect to contact elements

This commit is contained in:
Matic Ivešić 2025-11-02 20:56:14 +01:00
parent 8d3e601768
commit 41410e3079
3 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/lib/HeaderContact.svelte
View File

@ -17,12 +17,12 @@ export let customClass = '';
.header-contact{ .header-contact{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5em; gap: 0em;
} }
} }
</style> </style>
<div class="header-contact {customClass}" > <div class="header-contact {customClass}" >
<HeaderContactElement image_src={mail_icon} image_alt="Mail icon" link="mailto:info@intelidom.si" text="info@intelidom.si"></HeaderContactElement> <HeaderContactElement image_src={mail_icon} link="mailto:info@intelidom.si" text="info@intelidom.si"></HeaderContactElement>
<HeaderContactElement image_src={phone_icon} image_alt="Phone icon" link="tel:+3860771166" text="040 77 11 66"></HeaderContactElement> <HeaderContactElement image_src={phone_icon} link="tel:+3860771166" text="040 77 11 66"></HeaderContactElement>
</div> </div>

6
src/lib/HeaderContactElement.svelte
View File

@ -1,6 +1,5 @@
<script> <script>
export let image_src; export let image_src;
export let image_alt;
export let link; export let link;
export let text; export let text;
export let icon_color = '#bcc0c2'; export let icon_color = '#bcc0c2';
@ -14,10 +13,15 @@
display: flex; display: flex;
gap: 0.75em; gap: 0.75em;
align-items: center; align-items: center;
padding: 0.3em;
border-radius: 0.5em;
transition: 0.2s;
} }
div:hover{ div:hover{
cursor: pointer; cursor: pointer;
background-color: rgba(255, 255, 255, 0.055);
transition: 0.2s;
} }
a{ a{

2
src/lib/Main.svelte
View File

@ -20,7 +20,7 @@ li{
<div class="main"> <div class="main">
<Service service='Pametne inštalacije' serviceImage='/loxone_image.png'> <Service service='Pametne inštalacije' serviceImage='/loxone_image.png'>
<ul> <ul>
<li>Inštalacija in zagon <a style="color: rgb(66, 175, 56); text-decoration: none;" href="https://www.loxone.com/int/">Loxone</a> sistema za pametno hišo</li> <li>Inštalacija in zagon <a style="color: rgb(66, 175, 56);" href="https://www.loxone.com/int/">Loxone</a> sistema za pametno hišo</li>
<li>Montaža in zagon domofonskih sistemov</li> <li>Montaža in zagon domofonskih sistemov</li>
<li>Odpiranje vrat na pin kodo ali kartico</li> <li>Odpiranje vrat na pin kodo ali kartico</li>
</ul> </ul>