├── .gitignore ├── README.md ├── dist ├── css │ └── style.css ├── favicon.ico ├── img │ ├── .DS_Store │ ├── cards.png │ ├── logo.png │ ├── mockup1.png │ ├── mockup2.png │ ├── section-bg.jpg │ └── showcase.jpg ├── index.html └── js │ └── main.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist/.DS_Store 3 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MyTunes Landing Page 2 | 3 | > Landing page modeled after iTunes page. This was used in a YouTube tutorial 4 | 5 | To create mockups, use [Smartmockups](https://a.paddle.com/v2/click/19214/34221?link=783) 6 | 7 | The responsive menu is by Ash Neilson: [Visit The Codepen](https://codepen.io/neilso/pen/ziwgI) 8 | 9 | [View The Project](https://bradtraversy.github.io/mytunes_landing) 10 | -------------------------------------------------------------------------------- /dist/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=PT+Sans'); 2 | 3 | /* CSS Variables */ 4 | :root { 5 | --primary-color: #b90415; 6 | --primary-color-hover: #d3071b; 7 | --secondary-color: #103063; 8 | --secondary-color-hover: #143f85; 9 | --light-color: #f4f4f4; 10 | } 11 | 12 | body { 13 | font-family: 'PT Sans', sans-serif; 14 | background-color: #252529; 15 | margin: 0; 16 | color: #fff; 17 | line-height: 1.6; 18 | } 19 | 20 | img { 21 | width: 100%; 22 | } 23 | 24 | a { 25 | text-decoration: none; 26 | color: #ccc; 27 | } 28 | 29 | /* Section */ 30 | .section { 31 | padding: 2rem 0; 32 | } 33 | 34 | .section-head { 35 | font-size: 2.5rem; 36 | margin: 0; 37 | } 38 | 39 | .section h3 { 40 | font-size: 2rem; 41 | } 42 | 43 | section#entertainment { 44 | background: url(../img/section-bg.jpg) no-repeat bottom/cover; 45 | padding: 10rem 0; 46 | } 47 | 48 | .gift-cards { 49 | display: grid; 50 | grid-gap: 20px; 51 | grid-template-columns: repeat(2, 1fr); 52 | text-align: left; 53 | } 54 | 55 | /* Showcase */ 56 | #showcase { 57 | margin: 0; 58 | padding: 0; 59 | background: url('../img/showcase.jpg') no-repeat center/cover; 60 | width: 100%; 61 | height: 100vh; 62 | position: relative; 63 | overflow-y: hidden; 64 | } 65 | 66 | #showcase .container { 67 | margin-top: 25vh; 68 | } 69 | 70 | #showcase h1 { 71 | font-size: 4rem; 72 | margin-bottom: 0; 73 | } 74 | 75 | #showcase h2 { 76 | font-size: 2rem; 77 | } 78 | 79 | /* Footer */ 80 | footer .footer-cols { 81 | display: grid; 82 | grid-gap: 20px; 83 | grid-template-columns: repeat(4, 1fr); 84 | padding: 2rem; 85 | text-align: left; 86 | font-size: 14px; 87 | } 88 | 89 | footer .footer-cols ul { 90 | list-style: none; 91 | } 92 | 93 | footer .footer-cols ul li:first-child { 94 | font-size: 1.2rem; 95 | padding-bottom: 0.5rem; 96 | border-bottom: #444 solid 1px; 97 | margin-bottom: 1rem; 98 | } 99 | 100 | footer .footer-bottom { 101 | background: #333; 102 | padding: 1rem; 103 | } 104 | 105 | /* Utility Classes */ 106 | .container { 107 | max-width: 1180px; 108 | text-align: center; 109 | margin: 0 auto; 110 | padding: 0 3rem; 111 | } 112 | 113 | .lead { 114 | font-size: 1.3rem; 115 | } 116 | 117 | .text-center { 118 | text-align: center; 119 | } 120 | 121 | /* Buttons */ 122 | .btn { 123 | padding: 1rem; 124 | color: #fff; 125 | display: inline-block; 126 | } 127 | 128 | .btn-primary { 129 | background: var(--primary-color); 130 | } 131 | 132 | .btn-primary:hover { 133 | background: var(--primary-color-hover); 134 | } 135 | 136 | .btn-secondary { 137 | background: var(--secondary-color); 138 | } 139 | 140 | .btn-secondary:hover { 141 | background: var(--secondary-color-hover); 142 | } 143 | 144 | /* Text colors */ 145 | .text-primary { 146 | color: var(--primary-color); 147 | } 148 | 149 | .text-secondary { 150 | color: var(--secondary-color); 151 | } 152 | 153 | .text-light { 154 | color: var(--light-color); 155 | } 156 | 157 | .bg-light { 158 | background: var(--light-color); 159 | color: #333; 160 | } 161 | 162 | .mb { 163 | margin-bottom: 1rem; 164 | } 165 | 166 | .mt { 167 | margin-top: 1rem; 168 | } 169 | 170 | /* Navigation */ 171 | nav { 172 | height: 40px; 173 | width: 100%; 174 | background-color: #333; 175 | color: #eee; 176 | position: fixed; 177 | } 178 | nav ul { 179 | padding: 0; 180 | margin: 0; 181 | } 182 | nav li { 183 | display: inline; 184 | float: left; 185 | } 186 | nav a { 187 | display: inline-block; 188 | width: 100px; 189 | text-align: center; 190 | text-decoration: none; 191 | padding: 10px 0; 192 | color: #eee; 193 | text-decoration: none; 194 | } 195 | nav li:hover { 196 | background-color: #444; 197 | } 198 | nav a#openup { 199 | display: none; 200 | } 201 | 202 | @media screen and (max-width: 580px) { 203 | .hide-on-small { 204 | display: none; 205 | } 206 | 207 | #showcase { 208 | height: 50vh; 209 | } 210 | 211 | #showcase .container { 212 | margin-top: 15vh; 213 | } 214 | 215 | #showcase h1 { 216 | font-size: 3rem; 217 | } 218 | 219 | #showcase h2 { 220 | font-size: 1.5rem; 221 | } 222 | 223 | nav { 224 | height: auto; 225 | border-bottom: 0; 226 | } 227 | nav ul { 228 | display: none; 229 | height: auto; 230 | } 231 | nav li { 232 | width: 100%; 233 | float: left; 234 | position: relative; 235 | } 236 | nav a { 237 | text-align: left; 238 | width: 100%; 239 | text-indent: 25px; 240 | background: #333; 241 | border-bottom: 1px solid #555; 242 | } 243 | nav a:hover { 244 | background: #444; 245 | } 246 | nav a#openup:after { 247 | content: '|||'; 248 | transform: rotate(-90deg); 249 | -ms-transform: rotate(-90deg); 250 | /* IE 9 */ 251 | -webkit-transform: rotate(-90deg); 252 | /* Safari and Chrome */ 253 | width: 30px; 254 | height: 30px; 255 | display: inline-block; 256 | position: absolute; 257 | right: 5px; 258 | top: 20px; 259 | } 260 | nav a#openup { 261 | display: block; 262 | background-color: #333; 263 | width: 100%; 264 | position: relative; 265 | } 266 | } 267 | .cf:before, 268 | .cf:after { 269 | content: ''; 270 | display: table; 271 | } 272 | 273 | .cf:after { 274 | clear: both; 275 | } 276 | 277 | .cf { 278 | zoom: 1; 279 | } 280 | 281 | @media screen and (max-width: 780px) { 282 | .gift-cards { 283 | grid-template-columns: 1fr; 284 | } 285 | 286 | footer .footer-cols { 287 | display: none; 288 | } 289 | } 290 | 291 | @media screen and (max-height: 580px) { 292 | #showcase p.lead { 293 | display: none; 294 | } 295 | } 296 | -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/8bc31df83c5efa1f77af1e675d862273b15da14b/dist/favicon.ico -------------------------------------------------------------------------------- /dist/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/8bc31df83c5efa1f77af1e675d862273b15da14b/dist/img/.DS_Store -------------------------------------------------------------------------------- /dist/img/cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/8bc31df83c5efa1f77af1e675d862273b15da14b/dist/img/cards.png -------------------------------------------------------------------------------- /dist/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/8bc31df83c5efa1f77af1e675d862273b15da14b/dist/img/logo.png -------------------------------------------------------------------------------- /dist/img/mockup1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/8bc31df83c5efa1f77af1e675d862273b15da14b/dist/img/mockup1.png -------------------------------------------------------------------------------- /dist/img/mockup2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/8bc31df83c5efa1f77af1e675d862273b15da14b/dist/img/mockup2.png -------------------------------------------------------------------------------- /dist/img/section-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/8bc31df83c5efa1f77af1e675d862273b15da14b/dist/img/section-bg.jpg -------------------------------------------------------------------------------- /dist/img/showcase.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/8bc31df83c5efa1f77af1e675d862273b15da14b/dist/img/showcase.jpg -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 | 7 | 8 | 10 | 11 | 12 |Stream over 45 million songs, ad-free. Or download albums and tracks to listen to offline. All the music in your personal 58 | myTunes library — no matter where it came from — lives right alongside the Orange Music catalog. Start your free 59 | three-month trial with no commitment, and cancel anytime.
60 | Start Your Trial Now 61 |Orange Music is available in myTunes, and for iOS and Android devices.
62 |With over 100,000 movies and TV shows to choose from, there’s always something great to watch on myTunes and if you 71 | watch on Orange TV 4K, you’ll be able to enjoy a tremendous selection of your favorite content in 4K HDR. So get 72 | ready to enjoy episodes of your favorite TV shows or hit movies you’ve been waiting to see — anytime, anywhere. Just 73 | tap to play, or even download if you’re going somewhere you won’t have Wi-Fi.
74 | Read More 75 |Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem veniam nobis, nisi ut expedita, doloribus reprehenderit 84 | explicabo non velit repellat alias saepe inventore repellendus? Molestias suscipit eos tempora? Quae quaerat cumque 85 | in veritatis impedit dolorum sapiente recusandae minima quo aperiam quam, excepturi quasi totam ad quas? Ipsam laudantium 86 | soluta delectus!
87 |100 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque expedita tempore quasi omnis a aut et totam illo fuga accusamus 101 | dolorum vero, ut harum consectetur. Minima molestias officiis culpa non sed dicta itaque. Et aliquam illo obcaecati 102 | molestias veritatis porro. 103 |
104 |Already have an Orange MyTunes Music Gift Card?
105 |