├── README.md
├── app.js
├── index.html
└── styles.css
/README.md:
--------------------------------------------------------------------------------
1 | # linktree-clone-css-js
2 | Build a Linktree Clone! (super simple!) HTML + CSS (+ JS optional)
3 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const shareButtons = document.querySelectorAll('.tile-share-button')
2 | console.log(shareButtons)
3 |
4 | async function copyText(e) {
5 | //prevent button going to the site
6 | e.preventDefault()
7 | const link = this.getAttribute('link')
8 | console.log(link)
9 | try {
10 | await navigator.clipboard.writeText(link)
11 | alert("Copied the text: " + link)
12 | } catch (err) {
13 | console.error(err)
14 | }
15 | }
16 |
17 | shareButtons.forEach(shareButton =>
18 | shareButton.addEventListener('click', copyText))
19 |
20 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Linktree Clone
6 |
7 |
8 |
9 |
10 |
15 |
51 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | background-color: rgb(10,10,10);
5 | color: rgb(240,240,240);
6 | display: flex;
7 | align-items: center;
8 | flex-direction: column;
9 | width: 100vw;
10 | font-family: Verdana, Tahoma, sans-serif;
11 | }
12 |
13 | header {
14 | width: 95%;
15 | max-width: 788px;
16 | display: flex;
17 | justify-content: flex-end;
18 | padding: 12px;
19 | margin-top: 15px;
20 | }
21 |
22 | .share-button {
23 | width: 40px;
24 | height: 40px;
25 | border-radius: 20px;
26 | background-color: rgb(240,240,240);
27 | }
28 |
29 | .share-button svg {
30 | margin-left: 12px;
31 | margin-top: 10px;
32 | color: rgb(0,0,0);
33 | }
34 |
35 | .container {
36 | width: 91%;
37 | max-width: 680px;
38 | margin: 10px;
39 | display: flex;
40 | flex-direction: column;
41 | align-items: center;
42 | }
43 |
44 | h1 {
45 | font-size: 20px;
46 | margin-bottom: 30px;
47 | }
48 |
49 | a {
50 | text-decoration: none;
51 | color: rgb(240,240,240);
52 | }
53 |
54 | .tile {
55 | width: 100%;
56 | background-color: rgb(37,37,37);
57 | margin: 7px;
58 | border-radius: 17px;
59 | display: flex;
60 | justify-content: space-between;
61 | }
62 |
63 | .tile:hover {
64 | transition: cubic-bezier(.07, 1.41, .82, 1.41) 0.2s;
65 | transform: scale(1.02);
66 | }
67 |
68 | .tile-share-button {
69 | margin: 8px;
70 | width: 40px;
71 | height: 40px;
72 | border-radius: 20px;
73 | background-color: rgb(52,52,52);
74 | }
75 |
76 | .tile-share-button svg {
77 | margin-left: 12px;
78 | margin-top: 10px;
79 | }
80 |
81 |
82 | .image-container {
83 | height: 96px;
84 | width: 96px;
85 | border-radius: 48px;
86 | overflow: hidden;
87 | }
88 |
89 | .image-container img {
90 | height: 100%;
91 | }
92 |
93 | .icon {
94 | margin: 4px 8px;
95 | width: 44px;
96 | height: 44px;
97 | }
--------------------------------------------------------------------------------
20 |