@Your Username

├── Style ├── SButton.css └── main.css ├── readme.md └── index.html /Style/SButton.css: -------------------------------------------------------------------------------- 1 | .circle ul li a:hover { 2 | transform: translate(0, -10px); 3 | color: #000000; 4 | } 5 | 6 | .circle ul li .fa-instagram:hover { 7 | color: #E1306C; 8 | } 9 | 10 | .circle ul li .fa-facebook:hover { 11 | color: #3B5998; 12 | } 13 | 14 | .circle ul li .fa-twitter:hover { 15 | color: #55ACEE; 16 | } 17 | 18 | .circle ul li .fa-tiktok:hover { 19 | color: #010101; 20 | } 21 | 22 | .circle ul li .fa-pinterest:hover { 23 | color: #BD081C; 24 | } 25 | 26 | .circle ul li .fa-linkedin:hover { 27 | color: #0077B5; 28 | } 29 | 30 | .circle ul li .fa-telegram:hover { 31 | color: #0088CC; 32 | } 33 | 34 | .circle ul li .fa-reddit:hover { 35 | color: #FF4500; 36 | } 37 | 38 | .circle ul li .fa-youtube:hover { 39 | color: #FF0000; 40 | } 41 | 42 | .circle ul li .fa-quora:hover { 43 | color: #B92B27; 44 | } 45 | 46 | .circle ul li .fa-discord:hover { 47 | color: #7289DA; 48 | } 49 | 50 | .circle ul li .fa-twitch:hover { 51 | color: #9147FE; 52 | } 53 | 54 | .circle ul li .fa-soundcloud:hover { 55 | color: #FF7700; 56 | } 57 | 58 | .circle ul li .fa-github:hover { 59 | color: #211F1F; 60 | } 61 | 62 | .circle ul li .fa-medium:hover { 63 | color: #12100E; 64 | } 65 | 66 | .circle ul li .fa-spotify:hover { 67 | color: #1DB954; 68 | } 69 | 70 | .circle ul li .fa-whatsapp:hover { 71 | color: #25D366; 72 | } 73 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ## Panduan Penggunaan Template Bio Link Tool 2 | 3 | Cek Demo [Disini](https://mgkusumaputra.github.io/Social-Media-Link/) 4 | 5 | 6 | 1. Ganti elemen dibawah pada file [index.html](index.html) dengan namamu sendiri. 7 | ```HTML 8 | @Your Username 9 | ``` 10 | 2. Ubah foto dari avatar dan username pada file [index.html](index.html) dengan avatar juga username milikmu. 11 | ```HTML 12 | 20 | ``` 21 | 22 | 3. Sesuaikan penggunaan long button dengan kebutuhan pada file [index.html](index.html) 23 | ```HTML 24 |

25 | 30 | Content Long Button 31 | 32 |

33 | ``` 34 | 35 | 4. Gunakan social button dengan syntaks: 36 | ```HTML 37 |

38 | 42 |

43 | ``` 44 | Tukar class li dengan nama social media juga a class mengikuti syntaks `fab fa-(nama social media)` 45 | 46 | untuk hasil yang responsive, penggunaan social button maksimal 8 Item. 47 | 48 | Warna social media yang tersedia bisa dilihat pada file [Sbutton.css](Style/Sbutton.css) 49 | dapat ditambahkan dengan syntaks: 50 | ```CSS 51 | .circle ul li .fa-(nama social media):hover { 52 | color: #(warna social media); 53 | } 54 | ``` 55 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | @Your Username 7 | 8 | 9 | 10 | 11 | 12 | 13 | 17 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 |

30 | 31 | 32 | 40 | 41 |

42 | 43 | 44 |

45 | 50 | Content Long Button 51 | 52 |

53 | 54 | 55 |

56 |

57 |

59 | 63 |

65 |

66 |

67 | 68 |

69 |

70 | 71 | 72 | 75 | 76 | -------------------------------------------------------------------------------- /Style/main.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html { 7 | font-family: "Rubik", sans-serif; 8 | } 9 | 10 | body { 11 | min-height: 100vh; 12 | max-width: 100%; 13 | background-color: #f0f0f0; 14 | color: #262626; 15 | } 16 | 17 | .main { 18 | padding-bottom: 85px; 19 | } 20 | 21 | .header { 22 | margin: 20px 0 55px; 23 | display: flex; 24 | flex-direction: column; 25 | align-items: center; 26 | } 27 | 28 | .avatar img { 29 | border-radius: 50%; 30 | width: 96px; 31 | height: 96px; 32 | margin-bottom: 12px; 33 | } 34 | 35 | .username { 36 | text-decoration: underline; 37 | text-align: center; 38 | } 39 | 40 | .long-btn { 41 | margin: 20px auto; 42 | border-radius: 20px; 43 | border: 2px solid #262626; 44 | padding: 5px; 45 | max-width: 540px; 46 | height: 42px; 47 | display: flex; 48 | justify-content: center; 49 | text-align: center; 50 | align-items: center; 51 | color: #262626; 52 | text-decoration: none; 53 | font-size: 18px; 54 | } 55 | 56 | .long-btn:hover { 57 | color: #f0f0f0; 58 | background-color: #262626; 59 | transition-duration: 0.3s; 60 | } 61 | 62 | .circle ul { 63 | margin: 30px; 64 | text-align: center; 65 | justify-content: center; 66 | align-items: center; 67 | /* */ 68 | } 69 | 70 | .circle ul li { 71 | display: inline-block; 72 | list-style: none; 73 | margin: 0px 5px; 74 | } 75 | 76 | .circle ul li .fab { 77 | font-size: 36px; 78 | line-height: 50px; 79 | transition: 0.6s; 80 | color: #262626; 81 | list-style: none; 82 | } 83 | 84 | .circle ul li a { 85 | text-decoration: none; 86 | width: 64px; 87 | height: 64px; 88 | border-radius: 50%; 89 | transition: 0.5s; 90 | } 91 | 92 | .footer { 93 | text-align: center; 94 | margin-bottom: 15px; 95 | } 96 | 97 | .footer a{ 98 | color: #262626; 99 | text-decoration: none; 100 | font-weight: bold; 101 | } 102 | 103 | @media (max-width: 576px) { 104 | .long-btn { 105 | max-width: 270px; 106 | font-size: 12px; 107 | height: 28px; 108 | } 109 | .avatar img { 110 | width: 64px; 111 | height: 64px; 112 | } 113 | .username { 114 | font-size: 14px; 115 | } 116 | .circle ul li .fab { 117 | font-size: 28px; 118 | } 119 | .circle ul li a { 120 | width: 40px; 121 | height: 40px; 122 | } 123 | .footer { 124 | font-size: 12px; 125 | } 126 | } 127 | --------------------------------------------------------------------------------