-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
153 lines (151 loc) · 11.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KLADA.NET</title>
<link rel="icon" type="image/png" href="small.png">
<meta name="description" content="Profesionalno pravimo web stranice i web shop-ove. Naš tim se sastoji od stručnjaka koji će vašu firmu uvesti u digitalni svijet interneta. Dizajniramo stranice po vašoj želji i prilagođavamo ih vašim potrebama. Sve stranice su ručno napisane što nam omogućava svaki detalj prilagoditi vašim potrebama, te maksimalno ubrzati učitavnje stranice korisnicima na svim uređajima.">
<link rel="stylesheet" href="style.css">
<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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body class="font-[Montserrat] bg-[rgb(7,8,11)] text-white">
<header class="container max-w-6xl mx-auto flex flex-row justify-between items-center">
<div class="mt-4 flex gap-4 justify-center items-center flex-row">
<img class="h-8 object-contain" src="small.png" alt="">
<h1 class="font-bold text-xl hover:text-green-400">KLADA.NET</h1>
</div>
<nav class="mt-4 lg:block hidden">
<ul class="flex flex-row gap-2 justify-center items-center">
<li><a class="px-4 py-2 font-bold hover:border-b-2 border-green-400 hover:text-green-400 text-xl" href="#mi">O nama</a></li>
<li><a class="px-4 py-2 font-bold hover:border-b-2 border-green-400 hover:text-green-400 text-xl" href="#usluge">Usluge</a></li>
<li><a class="px-4 py-2 font-bold hover:border-b-2 border-green-400 hover:text-green-400 text-xl" href="#proces">Postupak</a></li>
<li><a class="px-4 py-2 font-bold hover:border-b-2 border-green-400 hover:text-green-400 text-xl" href="mailto:[email protected]">Kontakt</a></li>
</ul>
</nav>
</header>
<main id="main" class="w-full h-max mt-4 pt-52 relative overflow-hidden">
<div class="max-w-6xl container mx-auto h-max">
<h1 class="text-7xl mb-52 font-bold text-center max-w-2xl mx-auto tracking-tight leading-[68px]">Uvodimu vašu Tvrtku u <span class="bg-gradient-to-b from-green-300 to bg-green-600 bg-clip-text text-transparent z-10">Digitalni Svijet</span></h1>
</div>
</main>
<section id="mi" class="container max-w-6xl mx-auto py-12">
<h1 class="text-6xl text-center w-full font-bold text-green-500">O nama</h1>
<h2 class="mt-6 max-w-4xl mx-auto text-lg mb-12 text-gray-300">
Profesionalno pravimo web stranice i web shop-ove. Naš tim se sastoji od stručnjaka koji će vašu firmu uvesti u digitalni svijet interneta. Dizajniramo stranice po vašoj želji i prilagođavamo ih vašim potrebama. Sve stranice su ručno napisane što nam omogućava svaki detalj prilagoditi vašim potrebama, te maksimalno ubrzati učitavnje stranice korisnicima na svim uređajima.
</h2>
<div class="container max-w-5xl mx-auto flex lg:flex-row flex-col justify-around">
<div class="h-56 aspect-square relative flex flex-col justify-center items-center text-[22px]">
<h2 class="text-center font-bold text-xl">Brzina</h2>
<h3 class="text-5xl text-green-600 font-bold countup mt-4">100</h3>
<svg class="w-full h-full absolute">
<circle class="text-gray-300" stroke-width="10" stroke="currentColor" fill="transparent" r="100" cx="50%" cy="50%">
</circle>
<circle class="text-green-500 progress" stroke-width="10" stroke-dasharray="628.3185307179586" stroke-dashoffset="628.3185307179586" stroke-linecap="round" stroke="currentColor" fill="transparent" r="100"
cx="50%" cy="50%" style="transition: stroke-dashoffset 0.35s; transform-origin: 0%;"></circle>
</svg>
</div>
<div class="h-56 aspect-square relative flex flex-col justify-center items-center text-[22px]">
<h2 class="text-center font-bold text-xl">Jedinstvenost</h2>
<h3 class="text-5xl text-green-600 font-bold countup mt-4">100</h3>
<svg class="w-full h-full absolute">
<circle class="text-gray-300" stroke-width="10" stroke="currentColor" fill="transparent" r="100" cx="50%" cy="50%">
</circle>
<circle class="text-green-500 progress" stroke-width="10" stroke-dasharray="628.3185307179586"
stroke-dashoffset="628.3185307179586" stroke-linecap="round" stroke="currentColor" fill="transparent" r="100"
cx="50%" cy="50%"></circle>
</svg>
</div>
<div class="h-56 aspect-square relative flex flex-col justify-center items-center text-[22px]">
<h2 class="text-center font-bold text-xl">Izmjenivost</h2>
<h3 class="text-5xl text-green-600 font-bold countup mt-4">100</h3>
<svg class="w-full h-full absolute">
<circle class="text-gray-300" stroke-width="10" stroke="currentColor" fill="transparent" r="100" cx="50%" cy="50%">
</circle>
<circle class="text-green-500 progress" stroke-width="10" stroke-dasharray="628.3185307179586"
stroke-dashoffset="628.3185307179586" stroke-linecap="round" stroke="currentColor" fill="transparent" r="100"
cx="50%" cy="50%"></circle>
</svg>
</div>
</div>
</section>
<section id="usluge" class="container py-12 max-w-6xl mx-auto flex flex-col justify-center items-center">
<h1 class="text-6xl mt-4 text-center font-bold text-green-500">Usluge</h1>
<h2 class="text-4xl mt-10 text-center">Izrada Web Stranice</h2>
<h3 class="text-xl mt-6 max-w-4xl text-gray-300">Ako niste sigurni koji paket najbolje odgovara vašim potrebama ili imate posebne zahtjeve, nudimo "Posebni" paket po potrebi.<br><br>*U cijene nije uračunat PDV</h3>
<div class="flex w-full gap-4 justify-center items-center mt-24 lg:flex-row flex-col">
<div class="w-72 border-4 border-green-500 grid grid-rows-[110px_350px_110px]">
<div>
<h1 class="text-3xl mt-4 text-center w-full font-semibold">Web Stranica</h1>
<h2 class="mt-7 text-5xl text-center w-full font-bold"><span class="text-green-500">199</span><span class="text-lg">€</span></h2>
</div>
<ul class="mt-12 w-full flex flex-col justify-center">
<li class="mt-2 text-center">+ Dizajn po želji</li>
<li class="mt-2 text-center">+ Jedna lista izmjena</li>
<li class="mt-2 text-center">+ Osnovni Hosting</li>
<li class="mt-2 text-center">+ Domena po izboru</li>
</ul>
<button class="mt-12 mx-auto w-32 h-12 border-2 border-green-500 mb-4">Pošalji Upit</button>
</div>
<div class="w-72 border-4 border-green-500 grid grid-rows-[110px_350px_110px]">
<div>
<h1 class="text-3xl mt-4 text-center w-full font-semibold">Web Shop</h1>
<h2 class="mt-7 text-5xl text-center w-full font-bold"><span class="text-green-500">399</span><span class="text-lg">€</span></h2>
</div>
<ul class="mt-12 w-full flex flex-col justify-center">
<li class="mt-2 text-center">+ Dizajn po želji</li>
<li class="mt-2 text-center">+ Pet lista izmjena</li>
<li class="mt-2 text-center">+ Premium Hosting</li>
<li class="mt-2 text-center">+ Domena po želji</li>
<li class="mt-2 text-center">+ Optimizacija na Google tražilici</li>
<li class="mt-2 text-center">+ Alati za izmjenu stranice</li>
<li class="mt-2 text-center">+ Prodaja na stranici</li>
</ul>
<button class="mt-12 mx-auto w-32 h-12 border-2 mb-4 border-green-500">Pošalji Upit</button>
</div>
<div class="w-72 border-4 border-green-500 grid grid-rows-[110px_350px_110px]">
<div>
<h1 class="text-3xl mt-4 text-center w-full font-semibold">Posebno</h1>
<h2 class="mt-7 text-5xl text-center w-full font-bold"><span class="text-green-500">?</span><span class="text-lg">€</span></h2>
</div>
<ul class="mt-12 w-full flex flex-col justify-center">
<li class="mt-2 text-center">+ Dizajn po želji</li>
<li class="mt-2 text-center">+ Neograničene izmjene</li>
<li class="mt-2 text-center">+ Premium Hosting</li>
<li class="mt-2 text-center">+ Domena po želji</li>
<li class="mt-2 text-center">+ Optimizacija na Google tražilici</li>
<li class="mt-2 text-center">+ Alati za izmjenu stranice</li>
<li class="mt-2 text-center">+ Prodaja na stranici</li>
<li class="mt-2 text-center">+ API integracija</li>
<li class="mt-2 text-center">+ Posebne animacije</li>
</ul>
<button class="mt-12 mx-auto w-32 h-12 border-2 mb-4 border-green-500">Pošalji Upit</button>
</div>
</div>
</section>
<section id="proces" class="container max-w-4xl mx-auto py-12 flex flex-col items-center">
<h1 class="text-6xl text-center w-full font-bold text-green-500">Postupak</h1>
<h3 class="text-2xl mt-6 text-gray-300">Postupak kojim poslujemo i naša očekivanja te prosječna trajanja svakog dijela.</h3>
<div class="w-full grid grid-cols-[2fr_10fr] gap-8 mx-auto mt-12 text-3xl">
<h1 class="text-green-600">Dan 1.</h1>
<h1>Dogovor sastanka</h1>
<h1 class="text-green-600">Dan 2.</h1>
<h1>Sastanak i odabir paketa prema vašim potrebama</h1>
<h1 class="text-green-600">Dan 3.</h1>
<h1>Predstavljamo prvi primjerak</h1>
<h1 class="text-green-600">Dan 4.</h1>
<h1>Dajete nam listu željenih promjeni</h1>
<h1 class="text-green-600">Dan 5.</h1>
<h1>Predstavljamo konačnu verziju</h1>
<h1 class="text-green-600">Dan 6.</h1>
<h1>Uz vaše odobrenje objavljujemo vašu stranicu</h1>
</div>
</section>
<footer class="w-full text-center py-2 border-t-2 border-green-500">
<h1 class="text-xl text-green-700">© 2024 | KLADA.NET | Sva prava pridržana</h1>
</footer>
<script src="counter.js"></script>
</body>
</html>