Skip to content

Instantly share code, notes, and snippets.

@codecademydev

codecademydev/index.html Secret

Created May 22, 2020 13:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codecademydev/15a31b9db01ba95803063a435a6d1bb3 to your computer and use it in GitHub Desktop.
Save codecademydev/15a31b9db01ba95803063a435a6d1bb3 to your computer and use it in GitHub Desktop.
Download ZIP
Codecademy export
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moja prva HTML&CSS stranica</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Priručnik stilske web stranice</h1>
<div class="kontejner-glavni">
<div class="podkontejner1">
<h2>Boje</h2>
<p class="paleta-boja">
<span id="red">Red<br>rgb(255, 0, 0)</span>
<span id="blue">Blue<br>rgb(0, 0, 255)</span>
<span id="green">Green<br>rgb(0, 128, 0)</span>
<span id="yellow">Yellow<br>rgb(255, 255, 0)</span>
<span id="aqua">Aqua<br>rgb(0, 255, 255)</span>
<span id="orange">Orange<br>rgb(255, 165, 0)</span>
</p>
</div>
<div class="podkontejner2">
<h2>Fontovi</h2>
<div class="fontovi">
<div class="baloo">
<h3>Baloo Chettan 2</h3>
<p>Onaj tko se trudi, trud mu se uvijek isplati</p>
<p class="bold">Onaj tko se trudi, trud mu se uvijek isplati</p>
<p class="italic">Onaj tko se trudi, trud mu se uvijek isplati</p>
</div>
<div class="orbitron">
<h3>Orbitron</h3>
<p>Onaj tko se trudi, trud mu se uvijek isplati</p>
<p class="bold">Onaj tko se trudi, trud mu se uvijek isplati</p>
<p class="italic">Onaj tko se trudi, trud mu se uvijek isplati</p>
</div>
<div class="squada">
<h3>Squada One</h3>
<p>Onaj tko se trudi, trud mu se uvijek isplati</p>
<p class="bold">Onaj tko se trudi, trud mu se uvijek isplati</p>
<p class="italic">Onaj tko se trudi, trud mu se uvijek isplati</p>
</div>
</div>
</div>
<div class="podkontejner3">
<h2>Stilovi teksta</h2>
<div class="fontovi">
<div>
<p class="naslov">H1 Glavni naslov</p>
<ul class="baloo">
<li>Vrsta fonta: Baloo Chettan 2</li>
<li>Veličina fonta: 30px</li>
<li>Težina fonta: 800(podebljano)</li>
</ul>
</div>
<div>
<p class="podnaslov">H2 Podnaslov </p>
<ul class="orbitron">
<li>Vrsta fonta: Orbitron</li>
<li>Veličina fonta: 22px</li>
<li>Težina fonta: 500(normalno)</li>
</ul>
</div>
<div>
<p class="odlomak">Odlomak teksta</p>
<ul class="squada">
<li>Vrsta fonta: Squada One</li>
<li>Veličina fonta: 15px</li>
<li>Težina fonta: 400 (default)</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
styles.css
/* latin */
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Baloo Chettan 2 Regular'), local('BalooChettan2-Regular'), url(https://fonts.gstatic.com/s/baloochettan2/v1/vm8udRbmXEva26PK-NtuX4ynWEzv5_d6.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 800;
font-display: swap;
src: local('Baloo Chettan 2 ExtraBold'), local('BalooChettan2-ExtraBold'), url(https://fonts.gstatic.com/s/baloochettan2/v1/vm8rdRbmXEva26PK-NtuX4ynWEznQNFvNbce.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Orbitron';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/orbitron/v15/yMJRMIlzdpvBhQQL_Qq7dy0.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Orbitron';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/orbitron/v15/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyKS6BoWgz.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Squada One';
font-style: normal;
font-weight: 400;
font-display: swap;
src: local('Squada One'), local('SquadaOne-Regular'), url(https://fonts.gstatic.com/s/squadaone/v8/BCasqZ8XsOrx4mcOk6Mtaac2WQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.kontejner-glavni {
display: block;
}
.podkontejner1, .podkontejner2, .podkontejner3 {
border: 1px solid grey;
padding: 20px;
margin: 10px;
}
/* Podkontejner1 */
.paleta-boja {
display: grid;
grid-template: repeat(2, 1fr) / repeat(3, 1fr);
grid-gap: 20px 20px;
list-style: none;
justify-items: stretch;
text-align: center;
}
#red {
background-color: red;
}
#blue {
background-color: blue;
}
#green {
background-color: green;
}
#yellow {
background-color: yellow;
}
#aqua {
background-color: aqua;
}
#orange {
background-color: orange;
}
/* Podkontejner2 */
.fontovi {
display: grid;
grid-template: 1fr / repeat(3, 1fr);
justify-items: space-evenly;
text-align: center;
}
h3 {
text-decoration: underline;
text-transform: uppercase;
}
.baloo {
font-family: 'Baloo Chettan 2';
}
.orbitron {
font-family: 'Orbitron';
}
.squada {
font-family: 'Squada One';
}
.bold {
font-weight: bold;
}
.italic {
font-style: italic;
}
/* podkontejner3 */
.naslov {
font-size: 30px;
font-weight: 800;
}
.podnaslov {
font-size: 22px;
font-weight: 500;
}
.odlomak {
font-size: 15px;
font-weight: 400;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment