diff --git a/README.md b/README.md index 6dc78c7..8f3ba4c 100644 --- a/README.md +++ b/README.md @@ -113,6 +113,11 @@ This repository contains a collection of frontend projects.Each project is built Bubble Game Click Here + + 21 + Link Tree + Click Here + diff --git a/project-21_LinkTree/fonts/Birch.ttf b/project-21_LinkTree/fonts/Birch.ttf new file mode 100644 index 0000000..563eef0 Binary files /dev/null and b/project-21_LinkTree/fonts/Birch.ttf differ diff --git a/project-21_LinkTree/fonts/Inter_18pt-SemiBoldItalic.ttf b/project-21_LinkTree/fonts/Inter_18pt-SemiBoldItalic.ttf new file mode 100644 index 0000000..d9c9896 Binary files /dev/null and b/project-21_LinkTree/fonts/Inter_18pt-SemiBoldItalic.ttf differ diff --git a/project-21_LinkTree/images/aggrasive.jpeg b/project-21_LinkTree/images/aggrasive.jpeg new file mode 100644 index 0000000..3eff86a Binary files /dev/null and b/project-21_LinkTree/images/aggrasive.jpeg differ diff --git a/project-21_LinkTree/images/chill.jpg b/project-21_LinkTree/images/chill.jpg new file mode 100644 index 0000000..a68db24 Binary files /dev/null and b/project-21_LinkTree/images/chill.jpg differ diff --git a/project-21_LinkTree/images/drift-thum.jpeg b/project-21_LinkTree/images/drift-thum.jpeg new file mode 100644 index 0000000..017fc6e Binary files /dev/null and b/project-21_LinkTree/images/drift-thum.jpeg differ diff --git a/project-21_LinkTree/images/images.jpeg b/project-21_LinkTree/images/images.jpeg new file mode 100644 index 0000000..1139d3c Binary files /dev/null and b/project-21_LinkTree/images/images.jpeg differ diff --git a/project-21_LinkTree/images/lain's pfp.jpg b/project-21_LinkTree/images/lain's pfp.jpg new file mode 100644 index 0000000..357870b Binary files /dev/null and b/project-21_LinkTree/images/lain's pfp.jpg differ diff --git a/project-21_LinkTree/images/og phonk.jpeg b/project-21_LinkTree/images/og phonk.jpeg new file mode 100644 index 0000000..48cef17 Binary files /dev/null and b/project-21_LinkTree/images/og phonk.jpeg differ diff --git a/project-21_LinkTree/images/phonk.jpeg b/project-21_LinkTree/images/phonk.jpeg new file mode 100644 index 0000000..0832b9a Binary files /dev/null and b/project-21_LinkTree/images/phonk.jpeg differ diff --git a/project-21_LinkTree/images/spotify.png b/project-21_LinkTree/images/spotify.png new file mode 100644 index 0000000..f291809 Binary files /dev/null and b/project-21_LinkTree/images/spotify.png differ diff --git a/project-21_LinkTree/images/wave-thum.jpeg b/project-21_LinkTree/images/wave-thum.jpeg new file mode 100644 index 0000000..774665d Binary files /dev/null and b/project-21_LinkTree/images/wave-thum.jpeg differ diff --git a/project-21_LinkTree/images/yt.png b/project-21_LinkTree/images/yt.png new file mode 100644 index 0000000..ca8867b Binary files /dev/null and b/project-21_LinkTree/images/yt.png differ diff --git a/project-21_LinkTree/index.html b/project-21_LinkTree/index.html new file mode 100644 index 0000000..380464f --- /dev/null +++ b/project-21_LinkTree/index.html @@ -0,0 +1,185 @@ + + + + + + + Lain's LinkTree + + + + + + +
+
+
+
+
+

Email copied

+ +
+
+
+
+ + +
+
+
+
+

Lain Killaz

+
+
+

musician / phonk producer

+
+ +
+ + + + +
+ + + + + + \ No newline at end of file diff --git a/project-21_LinkTree/main.js b/project-21_LinkTree/main.js new file mode 100644 index 0000000..fa7d2e4 --- /dev/null +++ b/project-21_LinkTree/main.js @@ -0,0 +1,52 @@ +// YouTube Redirect Button... +const youtube = document.querySelector(".youtube"); + +youtube.addEventListener("click", () => { + let confirmtoYoutube = confirm("redirect to YouTube"); + console.log('user confirm', confirmtoYoutube); + + if (confirmtoYoutube) { + window.location.href = "https://youtube.com/@lainkillaz?si=jwtnFg-r6OT31OaI"; + } else { + console.log('cancel YouTube redirect'); + } +}); + +// email copy text +const toastmsg = document.querySelector(".toast"); + +function copyText() { + let tempTextArea = document.createElement("textarea"); + tempTextArea.value = "ashishekka447@gmail.com"; + document.body.appendChild(tempTextArea); + + tempTextArea.select(); + tempTextArea.setSelectionRange(0, 99999); + + document.execCommand("copy"); + + document.body.removeChild(tempTextArea); + + // toast message + toastmsg.style.top = "1.5rem"; + toastmsg.style.opacity = "1"; + + setTimeout(() => { + toastmsg.style.top = "-10rem"; + toastmsg.style.opacity = "0"; + }, 5000); + + // time counter + const counter = document.querySelector(".countdown"); + count = 5; + + let interval = setInterval(() => { + if (count > 1) { + count--; + counter.textContent = count; + } else { + counter.textContent = 1; + clearInterval(interval); + } + }, 1000); +} diff --git a/project-21_LinkTree/styles/mediaquery.css b/project-21_LinkTree/styles/mediaquery.css new file mode 100644 index 0000000..71f647b --- /dev/null +++ b/project-21_LinkTree/styles/mediaquery.css @@ -0,0 +1,17 @@ +@media (max-width: 768px) { + header{ + padding: 4rem 0rem; + } + #all-links{ + padding: 1rem .5rem; + } + .link{ + padding: 1rem .5rem; + } + footer #about{ + padding: 1rem .5rem 3rem .5rem; + } + .fake-video{ + background-size: cover; + } +} \ No newline at end of file diff --git a/project-21_LinkTree/styles/style.css b/project-21_LinkTree/styles/style.css new file mode 100644 index 0000000..7b66f2f --- /dev/null +++ b/project-21_LinkTree/styles/style.css @@ -0,0 +1,226 @@ +@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); + +/*fonts*/ + +@font-face { + font-family: "MyWebFont"; + src: url("../fonts/Birch.ttf") format("truetype"); +} + +@font-face { + font-family: "aves"; + src: url("../fonts/Inter_18pt-SemiBoldItalic.ttf") format("truetype"); +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "MyWebFont", sans-serif; +} +.occupation p{ + font-family: "aves", sans-serif; +} +/* ALL img */ +img{ + height: 50px; + width: 50px; +} + +li, a{ + list-style: none; + text-decoration: none; +} +:root{ + --light-black: #191919ab; +} +button{ + cursor: pointer; +} +body{ + background-color: #000; + color: #fff; +} + +.profile img{ + height: 100px; + width: 100px; + object-fit: contain; + border-radius: 50px; + -webkit-border-radius: 50px; + -moz-border-radius: 50px; + -ms-border-radius: 50px; + -o-border-radius: 50px; +} + +header{ + padding: 4rem 2rem; + display: grid; + gap: .5rem; + place-items: center; +} + +header .occupation{ + opacity: .8; +} + +header .socialmedia{ + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + gap: 3rem; + place-items: center; +} + +header .socialmedia .box{ + cursor: pointer; + background-color: var(--light-black); + border-radius: 5px; + padding: .5rem 1.5rem; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; +} + +#all-links{ + padding: 2rem 4rem; +} +#all-links img{ + height: 50px; + width: 50px; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; +} +.socialmedia a{ + color: #fff; +} + +.link{ + background-color: var(--light-black); + padding: 1rem 2rem; + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + margin: 1rem 0; +} +.link-left{ + display: flex; + justify-content: center; + gap: 1rem; + align-items: center; +} +.link-left p{ + opacity: .7; +} + +#all-links .link-footer button{ + border: 1px solid #000; + padding: .5rem 1rem; + font-weight: 600; + background-color: var(--light-black); + color: #fff; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; +} + +#latest-video{ + background-color: var(--light-black); + padding: 2rem; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; +} + +#latest-video .head{ + display: flex; + justify-content: space-between; + align-items: center; + padding: 1rem 0; +} +#latest-video .head p{ + opacity: .8; + cursor: pointer; + background-color: none; + padding: .5rem 1rem; + color: #fff; +} + +.fake-video { + cursor: pointer; + background-color: #3636367a; + display: grid; + place-items: center; + padding: 5rem 1rem; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + background-image: url('../images/phonk.jpeg'); + background-repeat: no-repeat; + background-position: center; + background-blend-mode: color-burn; + + transition: .3s; + -webkit-transition: .3s; + -moz-transition: .3s; + -ms-transition: .3s; + -o-transition: .3s; +} +.fake-video:hover{ + opacity: .9; +} +.fake-video img{ + transition: .3s; + -webkit-transition: .3s; + -moz-transition: .3s; + -ms-transition: .3s; + -o-transition: .3s; +} +.fake-video img:hover{ + opacity: .7; +} + +.link button a{ + color: #fff; +} + +footer{ + padding: 1rem 2rem 0 2rem; +} + +footer #about{ + padding: 1rem 2rem 3rem 2rem ; +} +footer #about h1{ + padding: 1rem 0; +} + +footer #copyright{ + display: flex; + justify-content: center; + align-items: center; + padding: .5rem 0; + gap: .2rem; + opacity: .3; +} +footer #copyright i{ + font-size: .8rem; +} + +footer #about p{ + opacity: .7; +} diff --git a/project-21_LinkTree/styles/toast.css b/project-21_LinkTree/styles/toast.css new file mode 100644 index 0000000..074ec73 --- /dev/null +++ b/project-21_LinkTree/styles/toast.css @@ -0,0 +1,68 @@ +@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"); + +/*fonts*/ + +@font-face { + font-family: "MyWebFont"; + src: url("../fonts/Inter_18pt-SemiBoldItalic.ttf") format("truetype"); +} +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "MyWebFont", sans-serif; +} + +/* color */ +:root { + --light-green: #235347; + --dark-green: #163832; +} + +.notice-toast { + padding: 1rem 0; + display: grid; + place-items: center; + position: relative; +} +.toast { + width: fit-content; + position: absolute; + top: -10rem; + opacity: 0; + transition: 0.3s; +} + +.notice { + background-color: var(--light-green); + display: flex; + justify-content: space-between; + align-items: center; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; +} + +.notice .left { + background-color: var(--dark-green); + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; +} +.notice .left i { + font-size: 2.5rem; + padding: 0 0.5rem; + color: #fff; + opacity: 0.6; +} +.notice .right { + display: flex; + flex-direction: column; + padding: 0.2rem 2rem 0.2rem 0.5rem; + color: #fff; + opacity: 0.7; +}