v1

replyre · Nov 20, 2023 · 4898ee9 · 4898ee9
commit 4898ee9
Show file tree

Hide file tree

Showing 14 changed files with 174 additions and 0 deletions.
diff --git a/img/Rectangle-1495.png b/img/Rectangle-1495.png
diff --git a/img/Rectangle-1496.png b/img/Rectangle-1496.png
diff --git a/img/Rectangle-1497.png b/img/Rectangle-1497.png
diff --git a/img/Rectangle-1503.png b/img/Rectangle-1503.png
diff --git a/img/Rectangle-1569.png b/img/Rectangle-1569.png
diff --git a/img/Star-10.png b/img/Star-10.png
diff --git a/img/Star-6.png b/img/Star-6.png
diff --git a/img/full-stack-developer.png b/img/full-stack-developer.png
diff --git a/img/image-1.png b/img/image-1.png
diff --git a/img/image-2.png b/img/image-2.png
diff --git a/img/image-3.png b/img/image-3.png
diff --git a/img/replyre.png b/img/replyre.png
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="globals.css" />
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="box">
+      <div class="group">
+        <div class="overlap-group">
+          <img class="rectangle" src="img/rectangle-1495.png" />
+          <img class="img" src="img/rectangle-1496.png" />
+          <div class="div"></div>
+          <img
+            class="full-stack-developer"
+            src="img/full-stack-developer.png"
+          />
+          <img class="star" src="img/star-6.png" />
+          <img class="rectangle-2" src="img/rectangle-1497.png" />
+          <div class="group-2"></div>
+          <img class="replyre" src="img/replyre.png" />
+          <img class="star-2" src="img/star-10.png" />
+          <a href="https://github.com/replyre">
+            <img class="image" src="img/image-1.png"
+          /></a>
+          <a href="https://www.linkedin.com/in/replyr/">
+            <img class="image-2" src="img/image-2.png"
+          /></a>
+          <a href="https://codepen.io/replyre">
+            <img class="image-3" src="img/image-3.png"
+          /></a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,138 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  height: 100vh;
+  overflow: hidden;
+}
+.box {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #000000;
+}
+
+/* .box .group {
+  position: fixed;
+  width: 558px;
+  height: 533px;
+  top: 0;
+  left: 0;
+} */
+
+.box .overlap-group {
+  position: relative;
+  width: 469px;
+  height: 513px;
+  top: 8px;
+  left: 10px;
+}
+
+.box .rectangle {
+  position: absolute;
+  width: 320px;
+  height: 451px;
+  top: 0;
+  left: 71px;
+}
+
+.box .img {
+  position: absolute;
+  width: 349px;
+  height: 71px;
+  top: 283px;
+  left: 120px;
+}
+
+.box .div {
+  position: absolute;
+  width: 134px;
+  height: 35px;
+  top: 298px;
+  left: 304px;
+  background-color: #ffff00;
+  border: 5px solid;
+  border-color: #000000;
+}
+
+.box .full-stack-developer {
+  position: absolute;
+  width: 248px;
+  height: 21px;
+  top: 305px;
+  left: 184px;
+}
+
+.box .star {
+  position: absolute;
+  width: 126px;
+  height: 125px;
+  top: 388px;
+  left: 0;
+}
+
+.box .rectangle-2 {
+  position: absolute;
+  width: 220px;
+  height: 257px;
+  top: 30px;
+  left: 120px;
+}
+
+.box .group-2 {
+  position: absolute;
+  width: 179px;
+  height: 160px;
+  top: 47px;
+  left: 139px;
+  background-image: url(./img/rectangle-1503.png);
+  background-size: cover;
+  background-position: 50% 50%;
+}
+
+.box .replyre {
+  position: absolute;
+  width: 163px;
+  height: 29px;
+  top: 233px;
+  left: 154px;
+}
+
+.box .star-2 {
+  position: absolute;
+  width: 79px;
+  height: 79px;
+  top: 13px;
+  left: 281px;
+}
+
+.box .image {
+  width: 60px;
+  height: 61px;
+  top: 365px;
+  left: 122px;
+  position: absolute;
+  object-fit: cover;
+}
+
+.box .image-2 {
+  width: 64px;
+  height: 73px;
+  top: 359px;
+  left: 196px;
+  position: absolute;
+  object-fit: cover;
+}
+
+.box .image-3 {
+  width: 64px;
+  height: 61px;
+  top: 365px;
+  left: 274px;
+  position: absolute;
+  object-fit: cover;
+}