Still working on main page, add img

css/style.css

@@ -1,18 +1,22 @@
-*{
+* {
-    1rem = 16px;
+    1rem=16px;
 }
+
 @font-face {
     font-family: headersFont;
     src: url(/fonts/monaco.ttf);
 }
+
+
 /*-----------------------Icon CSS high-resolution-------------------------------------*/
 
+
 /*-----------------------Character CSS high-resolution--------------------------------*/
 
 h1 {
     font-family: headersFont;
-    font-size: 100px;
+    font-size: 80px;
-    color: yellow;
+    color: lightblue;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -22,6 +26,56 @@ html {
     background-color: whitesmoke;
 }
 
+.active {
+    pointer-events: auto;
+    cursor: default;
+}
+
+.not-active {
+    pointer-events: none;
+    cursor: not-allowed;
+}
+
+#station-building {
+    position: absolute;
+    top: 35rem;
+    left: 15rem;
+}
+
+#police-building {
+    position: absolute;
+    top: 15rem;
+    left: 30rem;
+}
+
+#cinema-building {
+    position: absolute;
+    top: 12rem;
+    left: 57rem;
+}
+
+#burguer-building {
+    position: absolute;
+    top: 15rem;
+    left: 80rem;
+}
+
+#club-building {
+    position: absolute;
+    top: 35rem;
+    left: 95rem;
+}
+
+.building {
+    height: 200px;
+    width: 200px;
+}
+
+.building img {
+    height: 100%;
+    width: auto;
+}
+
 #char-container {
     position: absolute;
     top: 40rem;
@@ -94,7 +148,10 @@ html {
     border-radius: 50%;
     background-color: #000000;
 }
+
+
 /*-----------------------Animate pupil--------------------------------*/
+
 #char-pupil-left {
     position: absolute;
     top: 0.1rem;
@@ -104,7 +161,8 @@ html {
     border-radius: 50%;
     background-color: #ffffff;
 }
-#char-pupil-left-move{
+
+#char-pupil-left-move {
     position: absolute;
     top: 0.1rem;
     left: -0.02rem;
@@ -115,17 +173,19 @@ html {
     animation-name: pupil-move;
     animation-duration: 0.2s;
 }
-@keyframes pupil-move{
+
-    0%{
+@keyframes pupil-move {
+    0% {
         left: 0.1rem;
     }
-    50%{
+    50% {
         left: 0rem;
     }
-    100%{
+    100% {
         left: -0.02rem;
     }
 }
+
 #char-eye-right {
     position: absolute;
     top: 1.6rem;
@@ -145,7 +205,8 @@ html {
     border-radius: 50%;
     background-color: #ffffff;
 }
-#char-pupil-right-move{
+
+#char-pupil-right-move {
     position: absolute;
     top: 0.1rem;
     left: -0.02rem;
@@ -156,7 +217,10 @@ html {
     animation-name: pupil-move;
     animation-duration: 0.2s;
 }
+
+
 /*-----------------------------------------------------------------*/
+
 #char-mouth {
     position: absolute;
     top: 2.2rem;
@@ -200,7 +264,10 @@ html {
     border-radius: 1rem;
     background-color: #632e90;
 }
+
+
 /*-----------------------Move Up Arms Animation--------------------------------*/
+
 #char-arm-left {
     position: absolute;
     top: 0.2rem;
@@ -212,6 +279,7 @@ html {
     transform: rotate(310deg);
     z-index: 1;
 }
+
 #char-arm-left-up {
     position: absolute;
     top: 0.2rem;
@@ -225,17 +293,19 @@ html {
     animation-duration: 0.2s;
     z-index: 1;
 }
-@keyframes arm-left-move-up{
+
-    0%{
+@keyframes arm-left-move-up {
+    0% {
         transform: rotate(310deg);
     }
-    50%{
+    50% {
         transform: rotate(250deg);
     }
-    100%{
+    100% {
         transform: rotate(310deg)
     }
 }
+
 #char-arm-right {
     position: absolute;
     top: 0.2rem;
@@ -246,6 +316,7 @@ html {
     background-color: #632e90;
     transform: rotate(50deg);
 }
+
 #char-arm-right-up {
     position: absolute;
     top: 0.2rem;
@@ -258,17 +329,20 @@ html {
     animation-name: arm-right-move-up;
     animation-duration: 0.2s;
 }
-@keyframes arm-right-move-up{
+
-    0%{
+@keyframes arm-right-move-up {
+    0% {
         transform: rotate(50deg);
     }
-    50%{
+    50% {
         transform: rotate(110deg);
     }
-    100%{
+    100% {
         transform: rotate(50deg)
     }
 }
+
+
 /*---------------------------------------------------------------------------*/
 
 #char-forearm-left {
@@ -300,12 +374,16 @@ html {
     position: absolute;
     width: 3rem;
     height: 1rem;
-    top: 0rem;   /*sprawdzic!*/
+    top: 0rem;
+    /*sprawdzic!*/
     left: 0rem;
     border-radius: 0.4rem 0.4rem;
     background-color: #e31e5e;
 }
+
+
 /*-----------------------Move Left Animation--------------------------------*/
+
 #char-pants-left {
     position: absolute;
     top: 0rem;
@@ -316,6 +394,7 @@ html {
     background-color: #e31e5e;
     transform: rotate(0deg);
 }
+
 #move-left {
     position: absolute;
     top: 0rem;
@@ -328,18 +407,23 @@ html {
     animation-name: move-left;
     animation-duration: 0.2s;
 }
-@keyframes move-left{
+
-    0%{
+@keyframes move-left {
+    0% {
         transform: rotate(0deg);
     }
-    50%{
+    50% {
         transform: rotate(30deg);
     }
-    100%{
+    100% {
         transform: rotate(0deg)
     }
 }
+
+
 /*---------------------------------------------------------------------------*/
+
+
 /*-----------------------Move Right Animation--------------------------------*/
 
 #char-pants-right {
@@ -351,6 +435,7 @@ html {
     border-radius: 0.4rem 0.4rem;
     background-color: #e31e5e;
 }
+
 #move-right {
     position: absolute;
     top: 0rem;
@@ -363,18 +448,22 @@ html {
     animation-name: move-right;
     animation-duration: 0.2s;
 }
-@keyframes move-right{
+
-    0%{
+@keyframes move-right {
+    0% {
         transform: rotate(0deg);
     }
-    50%{
+    50% {
         transform: rotate(-30deg);
     }
-    100%{
+    100% {
         transform: rotate(0deg)
     }
 }
+
+
 /*---------------------------------------------------------------------------*/
+
 #char-leg-left {
     position: absolute;
     top: 2rem;

img/my-icons-collection (1)/backup.txt

@@ -0,0 +1 @@
+eyIxIjp7IklEIjoxLCJuYW1lIjoiTXkgaWNvbnMgY29sbGVjdGlvbiIsImJvb2ttYXJrX2lkIjoiNncxMnFxZGlsM20wMDAwMCIsImNyZWF0ZWQiOm51bGwsInVwZGF0ZWQiOjE1MTMxMjM1OTAsImFjdGl2ZSI6MSwic291cmNlIjoibG9jYWwiLCJvcmRlciI6MCwiY29sb3IiOiIwMDAwMDAiLCJzdGF0dXMiOjF9LCI2dzEycXFkaWwzbTAwMDAwIjpbeyJpZCI6MTY5ODQ3LCJ0ZWFtIjowLCJuYW1lIjoiYnVyZ3VlciIsImNvbG9yIjoiI1hYWFhYWCIsInByZW1pdW0iOjAsInNvcnQiOjF9LHsiaWQiOjE2OTg0NiwidGVhbSI6MCwibmFtZSI6ImxpYnJhcnkiLCJjb2xvciI6IiNYWFhYWFgiLCJwcmVtaXVtIjowLCJzb3J0IjoyfSx7ImlkIjoxNjk4NTUsInRlYW0iOjAsIm5hbWUiOiJjaW5lbWEiLCJjb2xvciI6IiNYWFhYWFgiLCJwcmVtaXVtIjowLCJzb3J0IjozfSx7ImlkIjoxNjk4NDQsInRlYW0iOjAsIm5hbWUiOiJwb2xpY2UiLCJjb2xvciI6IiNYWFhYWFgiLCJwcmVtaXVtIjowLCJzb3J0Ijo0fSx7ImlkIjoxNjk4NzUsInRlYW0iOjAsIm5hbWUiOiJzdGF0aW9uIiwiY29sb3IiOiIjWFhYWFhYIiwicHJlbWl1bSI6MCwic29ydCI6NX0seyJpZCI6MTY5ODgxLCJ0ZWFtIjowLCJuYW1lIjoiY2x1YiIsImNvbG9yIjoiI1hYWFhYWCIsInByZW1pdW0iOjAsInNvcnQiOjZ9XX0=

index.html

@@ -15,6 +15,21 @@
 <body>
     <h1>PLAY &amp;&amp; LEARN</h1>
     <div id="game-container"></div>
+    <a href="page1.html" class="active">
+        <div id="police-building" class="building"><img src="img/006-police.png"></div>
+    </a>
+    <a href="page1.html" class="active">
+        <div id="station-building" class="building"><img src="img/002-station.png"></div>
+    </a>
+    <a href="page1.html" class="active">
+        <div id="cinema-building" class="building"><img src="img/003-cinema.png"></div>
+    </a>
+    <a href="page1.html" class="active">
+        <div id="burguer-building" class="building"><img src="img/004-burguer.png"></div>
+    </a>
+    <a href="page1.html" class="active">
+        <div id="club-building" class="building"><img src="img/001-club.png"></div>
+    </a>
     <div id="char-container">
         <div id="char-head">
             <div id="char-hair"></div>

page1.html

@@ -0,0 +1,17 @@
+<!doctype html>
+
+<html lang="en">
+    <head>
+    <meta charset="utf-8">
+
+    <title>The HTML5 Herald</title>
+    <meta name="description" content="The HTML5 Herald">
+    <meta name="author" content="SitePoint">
+
+</head>
+
+<body>
+
+
+</body>
+</html>