From 9af941ac5e7e1e6231d858452c6bc04a5394c465 Mon Sep 17 00:00:00 2001
From: Sam <74021826+x39OME@users.noreply.github.com>
Date: Wed, 12 Apr 2023 01:41:29 +0300
Subject: [PATCH] Add files via upload
---
.../50-line-through-effect/inedx.html | 18 ++++++++
100_projects/50-line-through-effect/main.js | 13 ++++++
100_projects/50-line-through-effect/style.css | 41 +++++++++++++++++++
3 files changed, 72 insertions(+)
create mode 100644 100_projects/50-line-through-effect/inedx.html
create mode 100644 100_projects/50-line-through-effect/main.js
create mode 100644 100_projects/50-line-through-effect/style.css
diff --git a/100_projects/50-line-through-effect/inedx.html b/100_projects/50-line-through-effect/inedx.html
new file mode 100644
index 0000000..3b93f6d
--- /dev/null
+++ b/100_projects/50-line-through-effect/inedx.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
+ I Love You So Much <3
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/50-line-through-effect/main.js b/100_projects/50-line-through-effect/main.js
new file mode 100644
index 0000000..8beb218
--- /dev/null
+++ b/100_projects/50-line-through-effect/main.js
@@ -0,0 +1,13 @@
+const text = document.getElementById('text');
+const textArr = text.innerText.split('');
+
+const newEl = document.createElement('h1');
+newEl.innerHTML = `${textArr.map(letter => `${letter}`).join('')}`;
+newEl.classList.add('overlay');
+
+document.body.appendChild(newEl);
+
+
+function randomVisibility() {
+ return Math.random() < 0.5 ? 'visibility: hidden' : 'visibility: visible';
+}
\ No newline at end of file
diff --git a/100_projects/50-line-through-effect/style.css b/100_projects/50-line-through-effect/style.css
new file mode 100644
index 0000000..770319f
--- /dev/null
+++ b/100_projects/50-line-through-effect/style.css
@@ -0,0 +1,41 @@
+* {
+ box-sizing: border-box;
+}
+body {
+ background-color: #FA8072;
+ font-family: 'Muli', sans-serif;
+ height: 100vh;
+ overflow: hidden;
+}
+h1 {
+ font-size: 8vw;
+ font-weight: bold;
+ margin: 0;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ z-index: 1;
+ width: 100%;
+}
+.overlay {
+ z-index: 2;
+}
+.line {
+ background-color: #fff;
+ border-radius: 50px;
+ position: absolute;
+ top: 50%;
+ left: -1vw;
+ transform: translateY(-50%);
+ height: 2vw;
+ width: 0;
+ animation: grow 3s linear forwards;
+ z-index: 2;
+}
+@keyframes grow {
+ to {
+ width: 85vw;
+ }
+}
\ No newline at end of file