first commit

3 years ago · a7324b15c6
commit a7324b15c6
5 changed files with 59 additions and 0 deletions
--- a/assets/shark.png
+++ b/assets/shark.png
--- a/assets/you-tiao-chinese-donut-cakwe-vegan-friendly-recipe-main-photo.jpg
+++ b/assets/you-tiao-chinese-donut-cakwe-vegan-friendly-recipe-main-photo.jpg
--- a/index.html
+++ b/index.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>IMGSSS</title>
+		<link rel="stylesheet" href="style.css" />
+		<script src="script.js" defer></script>
+	</head>
+	<body>
+		<main>
+			Esse ad consequat minim irure anim dolore duis. Nulla reprehenderit amet nulla cupidatat
+			aliquip mollit culpa aliquip culpa proident eiusmod. Elit sit ut et est minim est sunt
+			excepteur ea ad excepteur consequat occaecat. Aliqua aute tempor consectetur ut et ex
+			quis non voluptate cupidatat id do minim. Nisi duis irure exercitation sint nulla veniam
+			amet esse. Irure reprehenderit aliqua occaecat esse eu dolore esse amet do laborum
+			cillum. Commodo id ut mollit culpa occaecat.
+		</main>
+		<div id="container">
+			<img src="./assets/shark.png" style="left: 32%; top: 43%" />
+			<img
+				src="./assets/you-tiao-chinese-donut-cakwe-vegan-friendly-recipe-main-photo.jpg"
+				style="left: 50%; top: 23%"
+			/>
+		</div>
+	</body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,16 @@
+const container = document.getElementById("container");
+// console.log(container.children);
+
+let images = Array.from(container.children);
+// console.log(images);
+
+// for (index in images) {
+// 	console.log(images[index]);
+// }
+
+images.forEach((image) => {
+	left = Math.random() * 100;
+	top = Math.random() * 100;
+	image.style.left = left + "%";
+	image.style.top = top + "%";
+});
--- a/style.css
+++ b/style.css
@ -0,0 +1,15 @@
+main {
+	font-size: 2rem;
+}
+
+#container {
+	position: absolute;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+
+#container img {
+	position: absolute;
+}