Nastavitve te spletne strani
Tipske barve, tipografija, razmerja...
zsds-blue-90
HSL: 214, 100, 30
HEX: #004399
HSL: 214, 100, 30
HEX: #004399
zsds-blue-70
HSL: 214, 100, 41
HEX: #005bd0
HSL: 214, 100, 41
HEX: #005bd0
zsds-blue-50
HSL: 214, 100, 52
HEX: #0875ff
HSL: 214, 100, 52
HEX: #0875ff
zsds-blue-30
HSL: 214, 100, 63
HEX: #4095ff
HSL: 214, 100, 63
HEX: #4095ff
zsds-blue-20
HSL: 214, 100, 73
HEX: #77b4ff
HSL: 214, 100, 73
HEX: #77b4ff
zsds-blue-10
HSL: 214, 100, 84
HEX: #aed3ff
HSL: 214, 100, 84
HEX: #aed3ff
zsds-blue-5
HSL: 214, 100, 95
HEX: #e5f1ff
HSL: 214, 100, 95
HEX: #e5f1ff
zsds-gray-90
HSL: 220, 2.36, 24.9
HEX: #3e3f41
HSL: 220, 2.36, 24.9
HEX: #3e3f41
zsds-gray-80
HSL: 225, 1.96, 40
HEX: #646568
HSL: 225, 1.96, 40
HEX: #646568
zsds-gray-70
HSL: 216, 2.18, 55
HEX: #8a8c8e
HSL: 216, 2.18, 55
HEX: #8a8c8e
zsds-gray-50
HSL: 220, 3.37, 65
HEX: #a3a5a9
HSL: 220, 3.37, 65
HEX: #a3a5a9
zsds-gray-30
HSL: 210, 4.69, 74.9
HEX: #bcbfc2
HSL: 210, 4.69, 74.9
HEX: #bcbfc2
zsds-gray-20
HSL: 204, 6.49, 84.9
HEX: #d6d9db
HSL: 204, 6.49, 84.9
HEX: #d6d9db
zsds-gray-10
HSL: 210, 7.69, 94.9
HEX: #f1f2f3
HSL: 210, 7.69, 94.9
HEX: #f1f2f3
DA (zelena)
--clr-yes
HEX: #00b73c
--clr-yes
HEX: #00b73c
Opomba (oranžna)
--clr-gold-3
HEX: #e5ae4d
--clr-gold-3
HEX: #e5ae4d
NE (rdeča)
--clr-red-carm
HEX: #c73047
--clr-red-carm
HEX: #c73047
To je glavni naslov ali <h1>
In druga vrstica
Namen: glavni naslov na vsaki podstrani. Samo eden tak naslov naj bo, ostalih je lahko več.
Navadno v beli barvi na t.i "HERO"-sliki (le-ta je črno-bela in prekrita s temnejšo delno prosojno modro).
CSS {
font-family: "DM Serif Display";
font-weight: 400;
font-size: clamp(28px, 2.3vw, 89px);
color: var(--clr-white) / #ffffff;
}
Navadno v beli barvi na t.i "HERO"-sliki (le-ta je črno-bela in prekrita s temnejšo delno prosojno modro).
CSS {
font-family: "DM Serif Display";
font-weight: 400;
font-size: clamp(28px, 2.3vw, 89px);
color: var(--clr-white) / #ffffff;
}
To je glavni podnaslov ali <h2>
In druga vrstica
Namen: glavni podnaslov.
CSS {
font-family: "Barlow SemiCondensed";
font-weight: 600;
font-size: clamp(24px, 1.8vw, 68px);
color: var(--clr-zsds-gray-90) / #3e3f41;
}
CSS {
font-family: "Barlow SemiCondensed";
font-weight: 600;
font-size: clamp(24px, 1.8vw, 68px);
color: var(--clr-zsds-gray-90) / #3e3f41;
}
To je podnaslov ali <h3>
In druga vrstica
Namen: podnaslov.
CSS {
font-family: "Barlow SemiCondensed";
font-weight: 600;
font-size: clamp(22px, 1.4vw, 55px;
color: var(--clr-zsds-gray-90) / #3e3f41;
}
CSS {
font-family: "Barlow SemiCondensed";
font-weight: 600;
font-size: clamp(22px, 1.4vw, 55px;
color: var(--clr-zsds-gray-90) / #3e3f41;
}
To je pod-podnaslov ali <h4>
In druga vrstica
Namen: pod-podnaslov ali "pomožni" naslov, lahko za izpostaviti del teksta.
CSS {
font-family: "Barlow SemiCondensed";
font-weight: 600;
font-size: clamp(20px, 1.3vw, 48px);
color: var(--clr-zsds-gray-90) / #3e3f41;
}
CSS {
font-family: "Barlow SemiCondensed";
font-weight: 600;
font-size: clamp(20px, 1.3vw, 48px);
color: var(--clr-zsds-gray-90) / #3e3f41;
}
To je pomožni tekst ali <h5>
In druga vrstica
Namen: razno ali za rezervo (lahko so opombe, "caption" pod sliko ali grafom ipd.) - glede namena uporabe in končne podobe se odločimo kasneje.
CSS {
font-family: "Barlow SemiCondensed";
font-weight: not set;
font-size: clamp(14px, 0.9vw, 36px);
color: var(--clr-zsds-gray-90) / #3e3f41;
}
CSS {
font-family: "Barlow SemiCondensed";
font-weight: not set;
font-size: clamp(14px, 0.9vw, 36px);
color: var(--clr-zsds-gray-90) / #3e3f41;
}
To je droben tekst ali <h6>
In druga vrstica
Namen: droben tekst, opombe ipd.
CSS {
font-family: "Barlow SemiCondensed";
font-weight: 400;
font-size: clamp(12px, 0.7vw, 26px);
color: var(--clr-zsds-gray-90) / #3e3f41;
}
CSS {
font-family: "Barlow SemiCondensed";
font-weight: 400;
font-size: clamp(12px, 0.7vw, 26px);
color: var(--clr-zsds-gray-90) / #3e3f41;
}
To je običajen tekst <p>.
Ta vrstica je nov odstavek.
Ta vrstica je "new line".
Ta vrstica je nov odstavek.
Ta vrstica je "new line".
Namen: običajen tekst.
CSS {
font-family: "Barlow";
font-weight: 400;
font-size: clamp(18px, 1.1vw, 42px);
color: var(--clr-zsds-gray-90) / #3e3f41;
}
CSS {
font-family: "Barlow";
font-weight: 400;
font-size: clamp(18px, 1.1vw, 42px);
color: var(--clr-zsds-gray-90) / #3e3f41;
}
- Linija 1
- Linija 2
- Linija 3
- Linija
- Linija
- Linija