├── album-art.jpg ├── index.html ├── next-cover.jpg └── style.css /album-art.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/Music-Website-Theme/0b5bfab7419eaccf36e0afa00b5eca556a695b40/album-art.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | MUSIC WEBSITE LANDING PAGE CONCEPT 8 | 9 | 11 | 12 | 13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 |
EST 1994
22 | 23 |
24 |
25 | 26 |
27 |
28 | 29 |
30 | 31 |
32 |

Kinda like it

33 |
34 | 35 |
36 |

Freak like me

37 |
38 | 39 |
40 | 41 |
42 | 43 |
44 |

Buy now

45 |
46 | 47 |
48 | 49 |
50 | 51 |
52 | 53 |
54 | 55 |

Song info

56 |
57 |

 Kinda like it

58 |
59 | 60 |
61 |

 Freak Like Me

62 |
63 | 64 |
65 |

 Alternative

66 |
67 | 68 |
69 | 70 |

Share now :

71 | 72 |
    73 |
    • 74 |
    • 75 |
    • 76 |
    • 77 |
78 | 79 |
80 | 81 |
82 | 83 |
84 |
85 | 86 |
87 | 90 | 91 |
92 | 93 |
94 |

Think about it

95 |
96 | 97 |
98 |

Vhyce alven

99 |
100 | 101 |
102 | 103 | 104 |
105 |

More like this

106 |
107 | 108 |
109 |
110 | 111 |
112 | 113 |
114 | 229 | 230 | 231 | -------------------------------------------------------------------------------- /next-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codegridweb/Music-Website-Theme/0b5bfab7419eaccf36e0afa00b5eca556a695b40/next-cover.jpg -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100%; 5 | height: 100vh; 6 | font-family: Helvetica; 7 | } 8 | 9 | .left-col, .right-col { 10 | position: absolute; 11 | width: 50%; 12 | height: 100vh; 13 | } 14 | 15 | .left-col { 16 | background: #d45b48; 17 | } 18 | 19 | .right-col { 20 | left: 50%; 21 | } 22 | 23 | .upper { 24 | position: absolute; 25 | width: 100%; 26 | height: 50vh; 27 | background: #4f4538; 28 | opacity: 0; 29 | animation: appear-text 0.0001s linear forwards; 30 | animation-delay: 3s; 31 | } 32 | 33 | .bottom { 34 | position: absolute; 35 | top: 50%; 36 | height: 50vh; 37 | width: 100%; 38 | background: url(next-cover.jpg) no-repeat 50% 50%; 39 | background-size: cover; 40 | opacity: 0; 41 | animation: appear-text 0.0001s linear forwards; 42 | animation-delay: 4.2s; 43 | } 44 | 45 | @media(max-width: 900px) { 46 | .left-col { 47 | width: 100%; 48 | } 49 | .right-col { 50 | top: 100%; 51 | left: 0%; 52 | width: 100%; 53 | } 54 | 55 | } 56 | 57 | .logo { 58 | font-family: Poppins; 59 | color: #fff; 60 | position: fixed; 61 | margin: 1.4em; 62 | font-weight: bolder; 63 | z-index: 1; 64 | } 65 | 66 | .year { 67 | position: absolute; 68 | color: #000; 69 | font-family: Poppins; 70 | bottom: 8%; 71 | font-weight: bolder; 72 | transform: rotate(-90deg); 73 | left: 0%; 74 | } 75 | 76 | .buy { 77 | color: #f4c8ad; 78 | text-transform: uppercase; 79 | font-family: Poppins; 80 | text-decoration: underline; 81 | position: absolute; 82 | right: 0%; 83 | top: -2.6%; 84 | margin: 1.4em; 85 | } 86 | 87 | .cover { 88 | position: absolute; 89 | top: 50%; 90 | left: 50%; 91 | transform: translate(-50%, -50%); 92 | width: 45%; 93 | height: 50%; 94 | background: url(album-art.jpg) no-repeat 50% 50%; 95 | background-size: cover; 96 | opacity: 0; 97 | animation: appear-text 0.0001s linear forwards; 98 | animation-delay: 2.6s; 99 | 100 | } 101 | 102 | .data { 103 | position: absolute; 104 | top: 36%; 105 | left: 33%; 106 | transform: translate(-50%, -50%); 107 | color: #cdbba5; 108 | font-family: Poppins; 109 | text-transform: uppercase; 110 | letter-spacing: 4px; 111 | } 112 | 113 | #name { 114 | font-weight: bolder; 115 | } 116 | 117 | #artist { 118 | font-size: 10px; 119 | } 120 | 121 | .play, .next ion-icon { 122 | position: absolute; 123 | top: 50%; 124 | left: 50%; 125 | transform: translate(-50%, -50%); 126 | color: #fff; 127 | opacity: 0.6; 128 | border-radius: 50%; 129 | border: 1px solid rgba(255, 255, 255, 0.3); 130 | padding: 2em; 131 | } 132 | 133 | .about { 134 | position: absolute; 135 | top: 40%; 136 | left: 26%; 137 | transform: translate(-50%, -50%); 138 | } 139 | 140 | .about h1 { 141 | font-weight: bolder; 142 | color: #6f6457; 143 | font-family: Poppins; 144 | text-transform: uppercase; 145 | } 146 | 147 | .about p { 148 | color: #bcac98; 149 | font-family: Poppins; 150 | text-transform: uppercase; 151 | letter-spacing: 4px; 152 | font-size: 10px; 153 | cursor: pointer; 154 | } 155 | 156 | .about span:hover { 157 | text-decoration: underline; 158 | } 159 | 160 | .media { 161 | margin-top: 40px; 162 | } 163 | 164 | .media p { 165 | color: #6f6457; 166 | margin-bottom: 0; 167 | } 168 | 169 | .media ul { 170 | position: absolute; 171 | list-style: none; 172 | left: -24%; 173 | } 174 | 175 | .media ul li { 176 | display: inline-block; 177 | color: #bcac98; 178 | padding-right: 10px; 179 | } 180 | 181 | .next { 182 | position: absolute; 183 | top: 24%; 184 | left: 16%; 185 | } 186 | 187 | .data2 { 188 | position: absolute; 189 | top: 12%; 190 | left: 28%; 191 | color: #cdbba5; 192 | font-family: Poppins; 193 | text-transform: uppercase; 194 | letter-spacing: 4px; 195 | } 196 | 197 | .more { 198 | position: absolute; 199 | top: 80%; 200 | left: 10%; 201 | font-size: 15px; 202 | color: #f4c8ad; 203 | text-transform: uppercase; 204 | font-family: Poppins; 205 | text-decoration: underline; 206 | } 207 | 208 | .block-cover { 209 | position: absolute; 210 | top: 50%; 211 | left: 50%; 212 | transform: translate(-50%, -50%); 213 | width: 45%; 214 | height: 50%; 215 | } 216 | 217 | .block-cover::after { 218 | content: ''; 219 | top: 0; 220 | left: 0; 221 | position: absolute; 222 | width: 0%; 223 | height: 100%; 224 | background: #4f4538; 225 | animation: rev-block 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; 226 | animation-delay: 2s; 227 | } 228 | 229 | @keyframes rev-block { 230 | 231 | 0% { 232 | left: 0; 233 | width: 0%; 234 | } 235 | 50% { 236 | left: 0; 237 | width: 100%; 238 | } 239 | 100% { 240 | left: 100%; 241 | width: 0%; 242 | } 243 | 244 | } 245 | 246 | @keyframes appear-text { 247 | 248 | 0% { 249 | opacity: 0; 250 | } 251 | 100% { 252 | opacity: 1; 253 | } 254 | 255 | } 256 | 257 | .upper-block { 258 | position: absolute; 259 | width: 100%; 260 | height: 50vh; 261 | } 262 | 263 | .upper-block::after { 264 | content: ''; 265 | top: 0; 266 | left: 0; 267 | position: absolute; 268 | width: 0%; 269 | height: 100%; 270 | background: #9a8b78; 271 | animation: rev-block 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; 272 | animation-delay: 2.4s; 273 | } 274 | 275 | .block-bottom { 276 | position: absolute; 277 | top: 50%; 278 | height: 50vh; 279 | width: 100%; 280 | } 281 | 282 | .block-bottom::after { 283 | content: ''; 284 | top: 0; 285 | left: 0; 286 | position: absolute; 287 | width: 0%; 288 | height: 100%; 289 | background: #000; 290 | animation: rev-block 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards; 291 | animation-delay: 3.6s; 292 | } 293 | --------------------------------------------------------------------------------