├── favicon.ico ├── images ├── logo.png ├── bg-image.png └── toggler-icon.svg ├── README.md ├── style.css └── index.html /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/hard-rock/HEAD/favicon.ico -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/hard-rock/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/bg-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ProgrammingHero1/hard-rock/HEAD/images/bg-image.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hard-rock-solution 2 | ### Search Song 3 | api link: https://api.lyrics.ovh/suggest/:searchText 4 | 5 | example: https://api.lyrics.ovh/suggest/hello 6 | 7 | ### Lyric 8 | lyric link: https://api.lyrics.ovh/v1/:artist/:title 9 | 10 | example: https://api.lyrics.ovh/v1/Adele/Hello 11 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #13141b; 3 | color: #ffffff; 4 | background-image: url(images/bg-image.png); 5 | background-repeat: no-repeat; 6 | background-size: 100%; 7 | background-position: top; 8 | } 9 | 10 | .form-control{ 11 | background-color:rgba(255, 255, 255, 0.2); 12 | padding: 22px; 13 | border: none; 14 | border-radius: 25px; 15 | } 16 | .btn{ 17 | border-radius: 1.5rem; 18 | padding: 9px 20px; 19 | } 20 | 21 | .btn-privious{ 22 | background: rgba(255, 255, 255, 0.2); 23 | color: #ffffff; 24 | } 25 | .navbar-toggler { 26 | border: none; 27 | } 28 | .search-box{ 29 | position: relative; 30 | } 31 | .search-btn { 32 | position: absolute; 33 | top: 0; 34 | right: 0; 35 | height: 100%; 36 | } 37 | .single-result{ 38 | background: rgba(255, 255, 255, 0.2); 39 | border-radius: 15px; 40 | } 41 | 42 | -------------------------------------------------------------------------------- /images/toggler-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hard Rock Solution - Song Lyric App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 47 | 48 |
49 |
50 |

Hard Rock Lyric Search

51 |
52 | 53 | 54 |
55 |
56 | 57 |
58 | 59 |
60 |
61 |
62 |
63 |

Purple Noon

64 |

Album by Washed Out

65 |
66 |
67 | 68 |
69 |
70 |
71 |
72 |
73 | 74 | 77 | 78 | 79 | 80 | 81 | 82 | --------------------------------------------------------------------------------