začatek

src/App.vue

@@ -1,26 +1,67 @@
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+<div class="wraperr">
+<section>
+  <u><h1>Kliknněte na hlínu a udělejte hroudu</h1></u>
+  <div v-for="obj, i in menu" :key="i" class="menu">
+    <img :src="obj.obrazek" alt="">
+    <p>
+      {{obj.kg}}
+    </p>
+  </div>
+</section>
+<section><h1>1</h1></section>
+<section>
+  <u><h1>Zde se tvoří hrouda </h1></u>
+  <h2>Celkový počet kg:</h2>
+</section>
+</div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
 
 export default {
   name: 'App',
-  components: {
-    HelloWorld
+  data: () => {
+    return{
+      menu:[
+      {
+        obrazek: "/img/1.png",
+        popisek: "černá koule",
+        kg: 10,
+      },
+      {
+        obrazek: "/img/2.jpg",
+        popisek: "hnědá koule",
+        kg: 20,
+      },
+      {
+        obrazek: "/img/3.jpg",
+        popisek: "šedá koule",
+        kg: 25,
+      },
+      {
+        obrazek: "/img/4.jpg",
+        popisek: "divná koule",
+        kg: 30,
+      },
+      {
+        obrazek: "/img/1.png",
+        popisek:"černá koule",
+        kg:28,
+      }
+    ]
+    }
   }
 }
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+.wraperr{
+  display: grid;
+  grid-template-columns: 2fr 1fr 2fr ;
+}
+img{
+  width: 20%;
+  height: 20%;
 }
 </style>