First commit

This commit is contained in:
Matic Ivešić 2025-03-07 12:20:16 +01:00
commit eb48bc390a
8 changed files with 327 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@ -0,0 +1 @@
.vscode

BIN
images/intelidom_logo_1.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
images/intelidom_logo_2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

BIN
images/intelidom_logo_3.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
images/mail_icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
images/tel_icon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

80
index.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Napredne rešitve za dom in podjetja">
<link rel="stylesheet" href="style.css">
<title>InteliDom d.o.o.</title>
<link rel="icon" href="images/intelidom_logo_3.png" type="image/icon type">
<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=Roboto+Condensed&display=swap" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="header_content">
<div class="logo1">
<img src="images/intelidom_logo_1.png"> </img>
</div>
<div class="logo2">
<img src="images/intelidom_logo_2.png"> </img>
</div>
<div class="contact">
<div class="contact_box">
<h1>k o n t a k t</h1>
<div class="contact_info_box">
<img src="images/mail_icon.png" alt="">
<a href="mailto:info@intelidom.si">info@intelidom.si</a>
</div>
<div class="contact_info_box">
<img src="images/tel_icon.png" alt="">
<a href="tel:+386 40 771 166">040 77 11 66</a>
</div>
</div>
</div>
</div>
<div class="header_background_fade">
</div>
</div>
<div class="main">
<h1>s t o r i t v e</h1>
<div class="services">
<div class="service_box">
<h2>elektroinštalacije</h2>
<ul>
<li>Napeljava električnih inštalacij</li>
<li>Zamenjava dotrajanih inštalacij</li>
<li>Zamenjava rezdelilnih omaric, varovalk, vtičnic in stikal</li>
<li>Montaža luči</li>
</ul>
</div>
<div class="service_box">
<h2>telekomunikacije</h2>
<ul>
<li>Napeljava podatkovnih kablov za računalniška omrežja</li>
<li>Montaža komunikacijskih omaric</li>
<li>Urejanje komunikacijskih vozlišč</li>
<li>Montaža in konfiguracija WiFi dostopnih točk</li>
</ul>
</div>
<div class="service_box">
<h2>pametne inštalacije</h2>
<ul>
<li>Montaža in zagon domofonskih sistemov</li>
<li>Odpiranje vrat na pin kodo ali kartico</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<p>2025 Intelidom d.o.o.</p>
</div>
</body>
</html>

246
style.css Normal file
View File

@ -0,0 +1,246 @@
body {
display: flex;
flex-direction: column;
align-items: center;
gap: 2em;
background-color: black;
padding: 0%;
margin: 0%;
color: rgba(255, 255, 255, 1);
font-family: "Roboto Condensed", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}
h1 {
text-transform:uppercase;
font-size: 3em;
margin: 0%;
}
h2 {
text-transform:uppercase;
font-size: 1.7em;
margin: 0 0 1em 0;
text-align: center;
}
a {
text-decoration: none;
color: rgba(255, 255, 255, 1);
font-size: 1.5em;
}
a:hover {
color: rgba(200, 200, 200, 1);
}
.header {
width: 100%;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
background-image: linear-gradient(to right, rgba(87,230,74,0.4), rgba(52,178,249,0.4));
}
.header_content {
width: 1200px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-evenly;
}
.header_background_fade {
position: relative;
bottom: 0;
background-image: linear-gradient(to top, rgb(0, 0, 0), rgba(255, 255, 255, 0));
width: 100%;
height: 15em;
}
.logo1 {
display: block;
position:relative;
visibility: visible;
padding: 2em;
filter: drop-shadow(5px 5px 5px #222);
}
.logo1 > img {
width: 500px;
}
.logo2 {
display: none;
position: absolute;
visibility: hidden;
}
.contact {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.contact_box {
background-color: rgba(0,0,0,0.5);
padding: 3em;
border-radius: 2em;
width: 20em;
height: 20em;
display: flex;
flex-direction: column;
align-items: center;
gap: 2em;
}
.contact_info_box {
width: auto;
margin-top: 2em;
display: flex;
flex-direction: row;
align-items: center;
gap: 1em;
}
.contact_info_box > img {
width: 3em;
}
.main {
width: 1200px;
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
}
.services{
display: flex;
width: 100%;
gap: 2em;
justify-content: space-around;
}
.service_box {
display: flex;
flex-direction: column;
background-color: rgba(25, 28, 31, 0.5);
border-radius: 2em;
padding: 2em;
width: 25%;
}
.service_box > ul > li {
margin-bottom: 1em;
}
.footer {
background-color: rgba(25, 28, 31, 0.5);
text-align: center;
padding-top: 5em;
margin-top: 5em;
width: 100%;
}
@media (max-width: 1000px) {
html{
width: 100%;
padding: 0%;
margin: 0%;
}
body {
width: auto;
padding: 0;
margin: 0;
}
h1 {
font-size: 2.5em;
}
.header{
align-items: center;
width: 100%;
}
.header_content {
width: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo1 {
position: absolute;
visibility: hidden;
display: none;
width: 0;
height: 0;
}
.logo2 {
display: block;
position:relative;
visibility: visible;
padding: 2em 0;
width: 90%;
filter: drop-shadow(5px 5px 5px #222);
}
.logo2 > img {
width: 100%;
}
.contact {
width: 100%;
}
.contact_box {
margin: 3em;
padding: 2em;
padding-bottom: 4em;
width: 70%;
height: auto;
}
.contact_info_box {
padding: 0;
}
.contact_info_box > img {
width: 2em;
}
.main{
width: 100%;
}
.services{
display: flex;
flex-direction: column;
width: 90%;
gap: 2em;
justify-content: space-around;
align-items: center;
}
.service_box {
width: auto;
}
}