├── .gitignore ├── dist ├── favicon.ico ├── img │ ├── logo.png │ ├── .DS_Store │ ├── cards.png │ ├── mockup1.png │ ├── mockup2.png │ ├── showcase.jpg │ └── section-bg.jpg ├── js │ └── main.js ├── css │ └── style.css └── index.html ├── README.md └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | dist/.DS_Store 3 | node_modules -------------------------------------------------------------------------------- /dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/HEAD/dist/favicon.ico -------------------------------------------------------------------------------- /dist/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/HEAD/dist/img/logo.png -------------------------------------------------------------------------------- /dist/img/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/HEAD/dist/img/.DS_Store -------------------------------------------------------------------------------- /dist/img/cards.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/HEAD/dist/img/cards.png -------------------------------------------------------------------------------- /dist/img/mockup1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/HEAD/dist/img/mockup1.png -------------------------------------------------------------------------------- /dist/img/mockup2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/HEAD/dist/img/mockup2.png -------------------------------------------------------------------------------- /dist/img/showcase.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/HEAD/dist/img/showcase.jpg -------------------------------------------------------------------------------- /dist/img/section-bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bradtraversy/mytunes_landing/HEAD/dist/img/section-bg.jpg -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mytunes_landing", 3 | "version": "1.0.0", 4 | "description": "Simple landing page website", 5 | "main": "index.js", 6 | "scripts": { 7 | "deploy": "gh-pages -d dist" 8 | }, 9 | "homepage": "https://bradtraversy.github.io/mytunes_landing", 10 | "author": "Brad Traversy", 11 | "license": "MIT", 12 | "dependencies": { 13 | "gh-pages": "^1.2.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /dist/js/main.js: -------------------------------------------------------------------------------- 1 | // Responsive Nav 2 | $(function() { 3 | menu = $('nav ul'); 4 | 5 | $('#openup').on('click', function(e) { 6 | e.preventDefault(); 7 | menu.slideToggle(); 8 | }); 9 | 10 | $(window).resize(function() { 11 | var w = $(this).width(); 12 | if (w > 480 && menu.is(':hidden')) { 13 | menu.removeAttr('style'); 14 | } 15 | }); 16 | 17 | $('nav li').on('click', function(e) { 18 | var w = $(window).width(); 19 | if (w < 480) { 20 | menu.slideToggle(); 21 | } 22 | }); 23 | $('.open-menu').height($(window).height()); 24 | }); 25 | 26 | // Smooth Scrolling 27 | $('.cf a').on('click', function(event) { 28 | if (this.hash !== '') { 29 | event.preventDefault(); 30 | 31 | const hash = this.hash; 32 | 33 | $('html, body').animate( 34 | { 35 | scrollTop: $(hash).offset().top 36 | }, 37 | 800, 38 | function() { 39 | window.location.hash = hash; 40 | } 41 | ); 42 | } 43 | }); 44 | -------------------------------------------------------------------------------- /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/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | Welcome to myTunes 13 | 14 | 15 | 16 | 17 |
18 |
19 | 39 |
40 |
41 |

myTunes.

42 |

Your music, movies, and TV shows take center stage.

43 |

44 | myTunes is the best way to organize and enjoy the music, movies, and TV shows you already have — and shop for the ones you 45 | want. Enjoy all the entertainment myTunes has to offer on your Mac and PC. 46 |

47 |
48 |
49 | 50 | 51 |
52 |
53 |

54 | Music 55 |

56 |

45 million songs. Zero ads.

57 |

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 | 63 |
64 |
65 | 66 | 67 |
68 |
69 |

The movie and TV collection you always wished for. Granted.

70 |

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 | 76 |
77 |
78 | 79 | 80 |
81 |
82 |

A world of entertainment. Available wherever you are.

83 |

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 |
88 |
89 | 90 | 91 |
92 |
93 |
94 |
95 | 96 |
97 |
98 |

Gift Cards

99 |

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 |
106 | 107 | Redeem 108 | 109 |
110 |
111 |
112 |
113 | 114 | 115 | 200 | 201 | 203 | 204 | 205 | 206 | --------------------------------------------------------------------------------