├── README.md ├── image ├── site.png ├── user.png ├── complemento.png └── design-image-mobile.png ├── index.html └── css └── styles.css /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoMouraa/template-link-bio/HEAD/README.md -------------------------------------------------------------------------------- /image/site.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoMouraa/template-link-bio/HEAD/image/site.png -------------------------------------------------------------------------------- /image/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoMouraa/template-link-bio/HEAD/image/user.png -------------------------------------------------------------------------------- /image/complemento.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoMouraa/template-link-bio/HEAD/image/complemento.png -------------------------------------------------------------------------------- /image/design-image-mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RicardoMouraa/template-link-bio/HEAD/image/design-image-mobile.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | TITULO 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 | 24 |
25 |
26 |
27 | Imagem do usuário 28 |
29 |
30 |

NOME DO USER

31 | @username 32 |
33 |
34 |
35 | Ícone complementar 36 |
37 |
38 | 39 | 40 |
41 |
42 | Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit. 43 |
44 |
45 | 46 | 47 |
48 | 49 | 50 |
51 |

Lorem Ipsum

52 | Lorem ipsum dolor sit. 53 |
54 |
55 | 56 | 57 | 58 |
59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 |
79 |
80 | 81 | 82 |
83 | 84 | 85 |

Lorem ipsum dolor sit amet.

86 | 87 |
88 | 89 | 90 |
91 | Lorem ipsum dolor sit amet. 92 | 93 | 94 | 98 | 99 | 100 | 101 | 105 | 106 | 107 | 111 |
112 |
113 |
114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap'); 8 | 9 | body { 10 | font-family: "Roboto", sans-serif; 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | background-color: #151515; 15 | width: 100%; 16 | min-height: 100vh; 17 | padding-top: 2rem; 18 | padding-bottom: 2rem; 19 | 20 | } 21 | 22 | a { 23 | text-decoration: none; 24 | } 25 | 26 | 27 | /* Variaveis Globais*/ 28 | :root { 29 | --color-destaque: #5e0ddf; 30 | --color-black: #101010; 31 | --color-white: #fafafa; 32 | } 33 | 34 | /* Container principal */ 35 | .container { 36 | display: inline; 37 | border-radius: 20px; 38 | width: 95%; 39 | max-width: 400px; 40 | background-color: #050505; 41 | display: flex; 42 | align-items: center; 43 | justify-content: center; 44 | padding: .8rem; 45 | } 46 | 47 | .content { 48 | min-width: 320px; 49 | width: 100%; 50 | height: 100%; 51 | display: flex; 52 | flex-direction: column; 53 | gap: 1rem; 54 | } 55 | 56 | /* WIDGET 1: Informações do usuário */ 57 | .widget1 { 58 | width: 100%; 59 | height: 16%; 60 | background-color: var(--color-black); 61 | border-radius: 12px; 62 | display: flex; 63 | justify-content: space-between; 64 | align-items: center; 65 | padding: 1rem; 66 | } 67 | 68 | .widget1 img { 69 | width: 100%; 70 | border-radius: 8px; 71 | } 72 | 73 | .info-user { 74 | width: 80%; 75 | display: flex; 76 | flex-direction: row; 77 | justify-content: left; 78 | align-items: center; 79 | text-align: left; 80 | gap: 0.6rem; 81 | } 82 | 83 | .img-user { 84 | width: 50px; 85 | height: 50px; 86 | border-radius: 8px; 87 | border: 2px solid var(--color-destaque); 88 | } 89 | 90 | .name-user h1 { 91 | font-size: 1.2rem; 92 | color: var(--color-white); 93 | padding-bottom: 0.2rem; 94 | font-weight: bold; 95 | } 96 | 97 | .name-user span { 98 | color: #fafafab4; 99 | font-size: 0.8rem; 100 | } 101 | 102 | .info-icon { 103 | width: 45px; 104 | display: flex; 105 | justify-content: right; 106 | align-items: center; 107 | } 108 | 109 | .info-icon img { 110 | width: 100%; 111 | animation: rotate 5s linear infinite; 112 | } 113 | 114 | /* WIDGET 2: Informações CTA2 */ 115 | .widget2 { 116 | width: 100%; 117 | height: 16%; 118 | background-color: var(--color-black); 119 | border-radius: 12px; 120 | padding: 1rem; 121 | display: flex; 122 | align-items: center; 123 | justify-content: center; 124 | } 125 | 126 | .cta-info { 127 | display: flex; 128 | flex-direction: column; 129 | align-items: center; 130 | justify-content: center; 131 | width: 100%; 132 | height: 100%; 133 | gap: 0.4rem; 134 | color: var(--color-white); 135 | text-align: center; 136 | } 137 | 138 | .destaque { 139 | color: var(--color-destaque); 140 | font-weight: bold; 141 | font-size: 1rem; 142 | padding-bottom: 0.3rem; 143 | } 144 | 145 | /* WIDGET 3: Redes sociais e link do site */ 146 | .widget3 { 147 | height: 100%; 148 | height: 32%; 149 | border-radius: 12px; 150 | display: flex; 151 | align-items: center; 152 | justify-content: space-between; 153 | gap: 0.8rem; 154 | } 155 | 156 | .site { 157 | border-radius: 12px; 158 | background-color: var(--color-black); 159 | width: 50%; 160 | height: 100%; 161 | display: flex; 162 | flex-direction: column; 163 | align-items: center; 164 | justify-content: center; 165 | padding: 1rem; 166 | gap: 0.8rem; 167 | } 168 | 169 | .text-site { 170 | width: 100%; 171 | display: flex; 172 | flex-direction: column; 173 | justify-content: center; 174 | } 175 | 176 | .text-site h1 { 177 | padding-bottom: 0.3rem; 178 | color: var(--color-white); 179 | font-weight: bold; 180 | font-size: 1rem; 181 | } 182 | 183 | .text-site span { 184 | color: #fafafab4; 185 | font-size: 0.8rem; 186 | } 187 | 188 | .img-site { 189 | width: 100%; 190 | height: 100px; 191 | background-image: url(/image/site.png); 192 | background-position: center; 193 | background-size: 100%; 194 | background-repeat: no-repeat; 195 | border-radius: 8px; 196 | } 197 | 198 | .img-site img { 199 | width: 50%; 200 | } 201 | 202 | /* Redes sociais */ 203 | .redes-sociais { 204 | border-radius: 12px; 205 | width: 50%; 206 | height: 185px; 207 | display: flex; 208 | flex-wrap: wrap; 209 | align-items: center; 210 | justify-content: space-between; 211 | gap: 15px; 212 | } 213 | 214 | .redes-sociais a { 215 | background-color: var(--color-black); 216 | border-radius: 10px; 217 | width: 45%; 218 | height: 45%; 219 | display: flex; 220 | flex-wrap: wrap; 221 | align-items: center; 222 | justify-content: center; 223 | } 224 | 225 | .redes-sociais i { 226 | font-size: 2.8rem; 227 | color: var(--color-white); 228 | } 229 | 230 | .redes-sociais .youtube:hover i { 231 | color: #ff0000; 232 | transition: color 0.3s; 233 | } 234 | 235 | .redes-sociais .instagram:hover i { 236 | color: #E1306C; 237 | transition: color 0.3s; 238 | } 239 | 240 | .redes-sociais .spotify:hover i { 241 | color: #4add06; 242 | transition: color 0.3s; 243 | } 244 | 245 | .redes-sociais .mail:hover i { 246 | color: #808080; 247 | transition: color 0.3s; 248 | } 249 | 250 | /* WIDGET 4: Call to action adicional */ 251 | .widget4 { 252 | width: 100%; 253 | height: 16%; 254 | background-color: var(--color-destaque); 255 | border-radius: 12px; 256 | display: flex; 257 | align-items: center; 258 | justify-content: center; 259 | color: var(--color-black); 260 | padding: 1rem; 261 | } 262 | 263 | .cta { 264 | width: 100%; 265 | height: 100%; 266 | display: flex; 267 | align-items: center; 268 | justify-content: start; 269 | gap: .8rem; 270 | } 271 | 272 | .cta i { 273 | font-size: 40px; 274 | color: var(--color-black); 275 | } 276 | 277 | .cta h1 { 278 | font-weight: bold; 279 | font-size: 1.2rem; 280 | color: var(--color-white); 281 | } 282 | 283 | 284 | /* WIDGET 5: Embeds do Spotify */ 285 | .widget5 { 286 | width: 100%; 287 | height: 32%; 288 | border-radius: 12px; 289 | display: flex; 290 | flex-direction: column; 291 | align-items: center; 292 | justify-content: space-between; 293 | gap: 1rem; 294 | } 295 | 296 | .widget5 span { 297 | color: #fafafab4; 298 | font-size: 1rem; 299 | padding-top: 1rem; 300 | } 301 | 302 | /* ANIMAÇÕES */ 303 | .widget1, 304 | .widget2, 305 | .site, 306 | .box-social, 307 | .widget4 { 308 | transition: transform 0.3s ease; 309 | } 310 | 311 | .widget1 { 312 | display: flex; 313 | align-items: center; 314 | justify-content: space-between; 315 | width: 100%; 316 | height: 60px; 317 | } 318 | 319 | .widget1:hover, 320 | .widget2:hover, 321 | .site:hover, 322 | .box-social:hover, 323 | .widget4:hover { 324 | transform: translateY(-5px); 325 | } 326 | 327 | @keyframes rotate { 328 | from { 329 | transform: rotate(0deg); 330 | } 331 | 332 | to { 333 | transform: rotate(360deg); 334 | } 335 | } 336 | 337 | @keyframes pulse { 338 | 339 | 0%, 340 | 100% { 341 | transform: scale(1); 342 | } 343 | 344 | 50% { 345 | transform: scale(1.1); 346 | } 347 | } 348 | --------------------------------------------------------------------------------