newdizajnNOTFINAL missing text

kuncgregor · Jan 11, 2024 · 9d55c9b · 9d55c9b
1 parent 7400198
commit 9d55c9b
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -1,31 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>vrabec</title>
-    <script src="script.js" defer></script>
-    <link rel="stylesheet" href="style.css" />
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>vrabec</title>
+        <script src="script.js" defer></script>
+        <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=Inter:wght@800&display=swap"
-      rel="stylesheet"
-    />
-    <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=Kanit:wght@900&display=swap"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.3.0/simplex-noise.min.js"></script>
+        <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=Inter:wght@800&display=swap"
+            rel="stylesheet"
+        />
+        <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=Kanit:wght@900&display=swap"
+            rel="stylesheet"
+        />
+    </head>
+    <body>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/simplex-noise/2.3.0/simplex-noise.min.js"></script>
 
-    <div id="visualiser">
-      <div class="datum"><p id="text">17.1.2024</p></div>
-    </div>
-  </body>
+        <div id="visualiser">
+            <div class="datum"><p id="text">17.1.2024</p></div>
+        </div>
+        <div class="opis">
+            <p id="textopis">
+                =Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta
+                suscipit et accusamus expedita repellat saepe deserunt
+                asperiores libero explicabo quas autem officia sapiente corporis
+                pariatur, esse non excepturi quia voluptatibus debitis corrupti
+                quaerat cupiditate aspernatur dolorum. Quaerat amet officia
+                officiis ipsam nisi id earum velit! Accusantium quia nesciunt
+                odit provident ad nobis sint? Iusto non ea at, minima, maxime
+                quidem eum doloribus laboriosam totam repellat omnis veniam
+                mollitia libero molestiae est exercitationem beatae optio, quae
+                quaerat labore quisquam! Vero esse laudantium blanditiis
+                nesciunt fugiat, delectus expedita provident sed, placeat nobis
+                quia amet mollitia quibusdam, voluptate aperiam temporibus. Aut,
+                odit obcaecati?
+            </p>
+            <br />
+            <p></p>
+        </div>
+    </body>
 </html>
diff --git a/script.js b/script.js
@@ -54,9 +54,12 @@ function startVis() {
   camera.position.z = 100;
   scene.add(camera);
 
-  const renderer = new THREE.WebGLRenderer({ antialias: true });
+  const renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
   renderer.setSize(window.innerWidth, window.innerHeight);
-  renderer.setClearColor("#ced0ce");
+  //renderer.setClearColor("#ced0ce");
+
+  renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent
+
 
   area.appendChild(renderer.domElement);
   const geometry = new THREE.BoxGeometry(
@@ -68,12 +71,12 @@ function startVis() {
     depthSegments
   );
   const material = new THREE.MeshLambertMaterial({
-    color: "#696969",
+    color: "#FFFFFF",
     wireframe: true,
   });
   const cube = new THREE.Mesh(geometry, material);
 
-  const light = new THREE.DirectionalLight("#ffffff", 1);
+  const light = new THREE.DirectionalLight("#ffffff", 1000);
   light.position.set(0, 50, 100);
   scene.add(light);
   scene.add(cube);

diff --git a/slika.JPEG b/slika.JPEG
diff --git a/style.css b/style.css
@@ -6,14 +6,19 @@ body {
     height: 100vh;
     margin: 0;
     overflow: hidden;
-    background-color: #ac9898e8;
     text-align: center;
+    background-color: black;
 }
 
 #visualiser {
     cursor: pointer;
     position: relative;
-    color: #878787;
+    background-image: url("slika.JPEG"); /* Replace 'your-image-path.jpg' with the path or URL of your background image */
+    background-position: center; /* Centers the background image */
+    text-align: center;
+    background-size: 50% 100%;
+    background-position: center;
+    background-repeat: no-repeat;
 }
 
 .datum {
@@ -25,8 +30,18 @@ body {
 
 #text {
     font-size: 30px;
-    color: #090909;
+    color: #ffffff;
     font-family: "Inter", sans-serif;
     font-style: bold;
     font-weight: 800;
 }
+
+.opis {
+    margin-bottom: 30px;
+    width: 50%;
+}
+
+#textopis {
+    font-family: "Inter", sans-serif;
+    color: #ffffff;
+}