- var movies = [{ name: "Captain Marvel", img: 'p-captmarvel.jpg'},{name: "Ant-Man and the Wasp", img: 'p-antmanwasp.jpg'},{name: "Avengers: Infinity War", img: "p-iw.jpg"}, {name:"Black Panther", img: "p-bp.jpg"},{name:"Spider-Man: Homecoming",img:"p-spiderman.jpg"},{name:"Thor: Ragnarok",img:"p-thor.jpg"},{name:"Guardians of the Galaxy Vol. 2",img:"p-gotg.jpg"},{name:"Doctor Strange",img:"strange.jpg"},{name:"Captain America: Civil War", img:"p-civilwar.jpg"},{name:"Ant-Man",img:"p-antman.jpg"},{name:"Avengers: Age of Ultron",img:"p-ultron.jpg"}];
main.main-content
.inflight__wrapper
.inflight
.inflight__menu-button.js-nav
.menu-item
.menu-item__icon
svg(viewBox="0 0 512 512")
path(d="M491.318,235.318H20.682C9.26,235.318,0,244.577,0,256s9.26,20.682,20.682,20.682h470.636 c11.423,0,20.682-9.259,20.682-20.682C512,244.578,502.741,235.318,491.318,235.318z")
path(d="M491.318,78.439H20.682C9.26,78.439,0,87.699,0,99.121c0,11.422,9.26,20.682,20.682,20.682h470.636 c11.423,0,20.682-9.26,20.682-20.682C512,87.699,502.741,78.439,491.318,78.439z")
path(d="M491.318,392.197H20.682C9.26,392.197,0,401.456,0,412.879s9.26,20.682,20.682,20.682h470.636 c11.423,0,20.682-9.259,20.682-20.682S502.741,392.197,491.318,392.197z")
.menu-item__desc Menu
.inflight__settings-list
div
svg(viewBox="0 0 495.398 495.398")
path(d="M487.083,225.514l-75.08-75.08V63.704c0-15.682-12.708-28.391-28.413-28.391c-15.669,0-28.377,12.709-28.377,28.391 v29.941L299.31,37.74c-27.639-27.624-75.694-27.575-103.27,0.05L8.312,225.514c-11.082,11.104-11.082,29.071,0,40.158 c11.087,11.101,29.089,11.101,40.172,0l187.71-187.729c6.115-6.083,16.893-6.083,22.976-0.018l187.742,187.747 c5.567,5.551,12.825,8.312,20.081,8.312c7.271,0,14.541-2.764,20.091-8.312C498.17,254.586,498.17,236.619,487.083,225.514z")
path(d="M257.561,131.836c-5.454-5.451-14.285-5.451-19.723,0L72.712,296.913c-2.607,2.606-4.085,6.164-4.085,9.877v120.401 c0,28.253,22.908,51.16,51.16,51.16h81.754v-126.61h92.299v126.61h81.755c28.251,0,51.159-22.907,51.159-51.159V306.79 c0-3.713-1.465-7.271-4.085-9.877L257.561,131.836z")
div.time
p
strong Time to SFO
p 13:20
div.logo aero
span
svg(viewBox="0 0 297 297")
path(d="M148.51,117.216c32.317,0,58.608-26.291,58.608-58.608S180.827,0,148.51,0c-32.317,0-58.608,26.291-58.608,58.608 S116.193,117.216,148.51,117.216z")
path(d="m227.154,145.618c-0.025-0.008-0.073-0.026-0.098-0.032-7.631-1.864-30.999-5.133-30.999-5.133-2.638-0.812-5.457,0.585-6.406,3.188l-35.174,96.509c-2.029,5.567-9.903,5.567-11.932,0l-35.174-96.509c-0.766-2.102-2.75-3.42-4.876-3.42-0.504,0-24.531,3.369-32.53,5.358-21.858,5.435-35.645,26.929-35.645,49.329v80.302c0,12.034 9.756,21.79 21.79,21.79h184.782c12.034,0 21.79-9.756 21.79-21.79v-80.569c-0.001-22.303-14.328-42.096-35.528-49.023z")
path(d="m161.775,138.613c-1.404-1.53-3.456-2.299-5.532-2.299h-15.485c-2.076,0-4.129,0.77-5.532,2.299-2.173,2.368-2.489,5.789-0.946,8.462l8.278,12.479-3.875,32.69 7.631,20.3c0.744,2.042 3.631,2.042 4.375,0l7.631-20.3-3.875-32.69 8.278-12.479c1.541-2.673 1.225-6.094-0.948-8.462z")
span
svg(viewBox="0 0 512.001 512")
path(d="M 256 0 C 167.996094 0 96.398438 71.597656 96.398438 159.601562 C 96.398438 210.25 120.277344 257.511719 160.664062 287.605469 L 160.664062 300.933594 C 150.828125 309.578125 144.601562 322.238281 144.601562 336.332031 C 144.601562 348.742188 149.429688 360.042969 157.296875 368.46875 C 149.429688 376.894531 144.601562 388.191406 144.601562 400.601562 C 144.601562 421.742188 158.589844 439.675781 177.800781 445.628906 C 183.980469 483.222656 216.683594 512 256 512 C 295.316406 512 328.023438 483.222656 334.203125 445.628906 C 353.410156 439.671875 367.402344 421.742188 367.402344 400.597656 C 367.402344 388.191406 362.574219 376.890625 354.707031 368.464844 C 362.574219 360.039062 367.402344 348.742188 367.402344 336.332031 C 367.402344 322.238281 361.175781 309.578125 351.335938 300.929688 L 351.335938 287.605469 C 391.722656 257.511719 415.601562 210.25 415.601562 159.601562 C 415.601562 71.597656 344.003906 0 256 0 Z M 320.269531 319.199219 C 329.714844 319.199219 337.402344 326.886719 337.402344 336.332031 C 337.402344 345.78125 329.714844 353.46875 320.269531 353.46875 L 191.734375 353.46875 C 182.285156 353.46875 174.597656 345.78125 174.597656 336.332031 C 174.597656 326.886719 182.285156 319.199219 191.734375 319.199219 Z M 256 482 C 234.0625 482 215.429688 467.585938 209.066406 447.734375 L 302.933594 447.734375 C 296.574219 467.589844 277.9375 482 256 482 Z M 320.269531 417.734375 L 191.734375 417.734375 C 182.285156 417.734375 174.597656 410.046875 174.597656 400.601562 C 174.597656 391.152344 182.285156 383.46875 191.734375 383.46875 L 320.269531 383.46875 C 329.714844 383.46875 337.402344 391.152344 337.402344 400.601562 C 337.402344 410.046875 329.714844 417.734375 320.269531 417.734375 Z M 327.992188 267.378906 C 323.832031 270.164062 321.335938 274.839844 321.335938 279.84375 L 321.335938 289.226562 C 320.980469 289.21875 320.625 289.199219 320.269531 289.199219 L 303.132812 289.199219 L 303.132812 230.082031 L 324.671875 208.542969 C 330.53125 202.683594 330.53125 193.1875 324.671875 187.328125 C 318.816406 181.46875 309.316406 181.46875 303.460938 187.328125 L 277.527344 213.261719 C 274.714844 216.074219 273.132812 219.886719 273.132812 223.867188 L 273.132812 289.199219 L 238.867188 289.199219 L 238.867188 223.867188 C 238.867188 219.890625 237.285156 216.074219 234.472656 213.261719 L 208.539062 187.328125 C 202.683594 181.472656 193.1875 181.472656 187.328125 187.328125 C 181.46875 193.1875 181.46875 202.683594 187.328125 208.542969 L 208.867188 230.082031 L 208.867188 289.203125 L 191.734375 289.203125 C 191.375 289.203125 191.019531 289.21875 190.664062 289.226562 L 190.664062 279.84375 C 190.664062 274.839844 188.167969 270.164062 184.007812 267.378906 C 147.9375 243.230469 126.398438 202.941406 126.398438 159.601562 C 126.398438 88.136719 184.539062 30 256 30 C 327.460938 30 385.601562 88.136719 385.601562 159.601562 C 385.601562 202.941406 364.0625 243.230469 327.992188 267.378906 Z M 327.992188 267.378906 ")
span
svg(viewBox="0 0 21.589 21.589")
path(d="M18.622,8.371l-0.545-1.295c0,0,1.268-2.861,1.156-2.971l-1.679-1.639c-0.116-0.113-2.978,1.193-2.978,1.193l-1.32-0.533 c0,0-1.166-2.9-1.326-2.9H9.561c-0.165,0-1.244,2.906-1.244,2.906L6.999,3.667c0,0-2.922-1.242-3.034-1.131L2.289,4.177 C2.173,4.29,3.507,7.093,3.507,7.093L2.962,8.386c0,0-2.962,1.141-2.962,1.295v2.322c0,0.162,2.969,1.219,2.969,1.219l0.545,1.291 c0,0-1.268,2.859-1.157,2.969l1.678,1.643c0.114,0.111,2.977-1.195,2.977-1.195l1.321,0.535c0,0,1.166,2.898,1.327,2.898h2.369 c0.164,0,1.244-2.906,1.244-2.906l1.322-0.535c0,0,2.916,1.242,3.029,1.133l1.678-1.641c0.117-0.115-1.22-2.916-1.22-2.916 l0.544-1.293c0,0,2.963-1.143,2.963-1.299v-2.32C21.59,9.425,18.622,8.371,18.622,8.371z M14.256,10.794 c0,1.867-1.553,3.387-3.461,3.387c-1.906,0-3.461-1.52-3.461-3.387s1.555-3.385,3.461-3.385 C12.704,7.41,14.256,8.927,14.256,10.794z")
.inflight__menu-list
.menu-item
.menu-item__icon
svg(viewBox="0 0 56.966 56.966")
path(d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23 s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92 c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17 s-17-7.626-17-17S14.61,6,23.984,6z")
.menu-item__desc Search
.menu-item.active
.menu-item__icon
svg(viewBox="0 0 612 612")
path(d="M573.75,267.75L459,344.25c0-23.218-10.557-43.758-26.89-57.796c38.881-23.428,65.14-65.637,65.14-114.329 c0-73.938-59.938-133.875-133.875-133.875c-73.937,0-133.875,59.938-133.875,133.875c0,37.504,15.51,71.317,40.373,95.625 h-70.151c18.322-20.33,29.778-46.971,29.778-76.5c0-63.38-51.37-114.75-114.75-114.75S0,127.87,0,191.25 c0,34.578,15.625,65.216,39.818,86.254C16.199,290.528,0,315.371,0,344.25v153c0,42.247,34.253,76.5,76.5,76.5h306 c42.247,0,76.5-34.253,76.5-76.5l114.75,76.5c21.133,0,38.25-17.117,38.25-38.25V306C612,284.867,594.883,267.75,573.75,267.75z M114.75,267.75c-42.247,0-76.5-34.253-76.5-76.5s34.253-76.5,76.5-76.5s76.5,34.253,76.5,76.5S156.997,267.75,114.75,267.75z M363.375,267.96c-52.938,0-95.835-42.917-95.835-95.835c0-52.938,42.917-95.835,95.835-95.835s95.835,42.897,95.835,95.835 S416.312,267.96,363.375,267.96z")
.menu-item__desc Watch
.menu-item
.menu-item__icon
svg(viewBox="0 0 287.386 287.386" style="enable-background:new 0 0 287.386 287.386;")
path(d="M62.743,155.437v98.42c0,5.867,4.741,10.605,10.605,10.605c5.854,0,10.605-4.738,10.605-10.605v-98.42 c0-5.856-4.751-10.605-10.605-10.605C67.484,144.832,62.743,149.576,62.743,155.437z")
path(d="M29.456,264.582h23.351v-116.85c0.064-0.56,0.166-1.119,0.166-1.693c0-50.412,40.69-91.42,90.698-91.42 c50.002,0,90.692,41.008,90.692,91.42c0,0.771,0.113,1.518,0.228,2.263v116.28h23.354c16.254,0,29.442-13.64,29.442-30.469 v-60.936c0-13.878-8.989-25.57-21.261-29.249c-1.129-66.971-55.608-121.124-122.45-121.124 c-66.86,0-121.347,54.158-122.465,121.15C8.956,147.638,0,159.32,0,173.187v60.926C0,250.932,13.187,264.582,29.456,264.582z")
path(d="M203.454,155.437v98.42c0,5.867,4.748,10.605,10.604,10.605s10.604-4.738,10.604-10.605v-98.42 c0-5.856-4.748-10.605-10.604-10.605C208.191,144.832,203.454,149.576,203.454,155.437z")
.menu-item__desc Listen
.menu-item
.menu-item__icon
svg(viewBox="0 0 296.999 296.999")
path(d="M45.432,35.049c-0.008,0-0.017,0-0.025,0c-2.809,0-5.451,1.095-7.446,3.085c-2.017,2.012-3.128,4.691-3.128,7.543 v159.365c0,5.844,4.773,10.61,10.641,10.625c24.738,0.059,66.184,5.215,94.776,35.136V84.023c0-1.981-0.506-3.842-1.461-5.382 C115.322,40.849,70.226,35.107,45.432,35.049z")
path(d="M262.167,205.042V45.676c0-2.852-1.111-5.531-3.128-7.543c-1.995-1.99-4.639-3.085-7.445-3.085c-0.009,0-0.018,0-0.026,0 c-24.793,0.059-69.889,5.801-93.357,43.593c-0.955,1.54-1.46,3.401-1.46,5.382v166.779 c28.592-29.921,70.038-35.077,94.776-35.136C257.394,215.651,262.167,210.885,262.167,205.042z")
path(d="M286.373,71.801h-7.706v133.241c0,14.921-12.157,27.088-27.101,27.125c-20.983,0.05-55.581,4.153-80.084,27.344 c42.378-10.376,87.052-3.631,112.512,2.171c3.179,0.724,6.464-0.024,9.011-2.054c2.538-2.025,3.994-5.052,3.994-8.301V82.427 C297,76.568,292.232,71.801,286.373,71.801z")
path(d="M18.332,205.042V71.801h-7.706C4.768,71.801,0,76.568,0,82.427v168.897c0,3.25,1.456,6.276,3.994,8.301 c2.545,2.029,5.827,2.78,9.011,2.054c25.46-5.803,70.135-12.547,112.511-2.171c-24.502-23.19-59.1-27.292-80.083-27.342 C30.49,232.13,18.332,219.963,18.332,205.042z")
.menu-item__desc Read
.menu-item
.menu-item__icon
svg(viewBox="0 0 512 512")
path(d="M467.852,36.608C427.949,9.622,373.06,14.429,338.761,51.72c-53.134-20.741-112.466-20.704-165.495,0.001 C129.269,3.888,53.064,10.48,17.138,63.643C-11.847,106.501-3.48,164.822,37.796,197.662 C22.318,248.21,24.802,303.526,45.813,353.1c35.02,82.634,116.671,139.431,210.199,139.419 c125.812,0.009,228.183-102.367,228.167-228.166c0.002-23.164-3.488-45.57-9.953-66.686 C527.665,155.152,523.382,74.133,467.852,36.608z M50.936,164.389c-27.876-30.279-21.492-77.543,11.93-100.113 c23.158-15.644,54.891-15.703,78.271,2.991C103.249,89.427,71.225,122.912,50.936,164.389z M155.842,225.397 c0-9.22,7.474-16.695,16.695-16.695c9.22,0,16.695,7.475,16.695,16.695c0,9.22-7.475,16.695-16.695,16.695 C163.316,242.092,155.842,234.617,155.842,225.397z M272.708,413.236v-19.802c9.977-5.774,16.695-16.555,16.695-28.911 c0-18.44-14.95-33.39-33.39-33.39c-18.441,0-33.39,14.95-33.39,33.39c0,12.357,6.717,23.138,16.695,28.913v19.817 c-36.216-5.921-66.765-31.899-66.78-65.424c0.033-36.954,37.772-66.784,83.476-66.78c45.859-0.001,83.458,29.964,83.476,66.78 C339.458,381.377,309.002,407.299,272.708,413.236z M339.489,242.092c-9.221,0-16.695-7.475-16.695-16.695 c0-9.22,7.474-16.695,16.695-16.695c9.22,0,16.695,7.475,16.695,16.695C356.184,234.617,348.71,242.092,339.489,242.092z M370.884,67.271c19.6-15.676,45.335-18.279,66.94-9.149c42.275,17.867,54.522,72.318,23.269,106.265 C441.223,123.78,409.645,89.944,370.884,67.271z")
.menu-item__desc Kids
.menu-item
.menu-item__icon
svg(viewBox="0 0 53.626 53.626")
path(d="M48.831,15.334c-7.083-11.637-17.753-3.541-17.753-3.541c-0.692,0.523-1.968,0.953-2.835,0.955 l-2.858,0.002c-0.867,0.001-2.143-0.429-2.834-0.952c0,0-10.671-8.098-17.755,3.539C-2.286,26.97,0.568,39.639,0.568,39.639 c0.5,3.102,2.148,5.172,5.258,4.912c3.101-0.259,9.832-8.354,9.832-8.354c0.556-0.667,1.721-1.212,2.586-1.212l17.134-0.003 c0.866,0,2.03,0.545,2.585,1.212c0,0,6.732,8.095,9.838,8.354c3.106,0.26,4.758-1.812,5.255-4.912 C53.055,39.636,55.914,26.969,48.831,15.334z M20.374,24.806H16.7v3.541c0,0-0.778,0.594-1.982,0.579 c-1.202-0.018-1.746-0.648-1.746-0.648v-3.471h-3.47c0,0-0.433-0.444-0.549-1.613c-0.114-1.169,0.479-2.114,0.479-2.114h3.675 v-3.674c0,0,0.756-0.405,1.843-0.374c1.088,0.034,1.885,0.443,1.885,0.443l-0.015,3.604h3.47c0,0,0.606,0.778,0.656,1.718 C20.996,23.738,20.374,24.806,20.374,24.806z M37.226,28.842c-1.609,0-2.906-1.301-2.906-2.908c0-1.61,1.297-2.908,2.906-2.908 c1.602,0,2.909,1.298,2.909,2.908C40.135,27.542,38.828,28.842,37.226,28.842z M37.226,20.841c-1.609,0-2.906-1.3-2.906-2.907 c0-1.61,1.297-2.908,2.906-2.908c1.602,0,2.909,1.298,2.909,2.908C40.135,19.542,38.828,20.841,37.226,20.841z M44.468,25.136 c-1.609,0-2.906-1.3-2.906-2.908c0-1.609,1.297-2.908,2.906-2.908c1.602,0,2.909,1.299,2.909,2.908 C47.377,23.836,46.07,25.136,44.468,25.136z")
.menu-item__desc Play
.menu-item
.menu-item__icon
svg(viewBox="0 0 441.732 441.732")
polygon(points="342.289,32.594 314.181,50.799 311.618,65.33 339.73,47.125")
polygon(points="337.032,62.381 308.934,80.581 305.977,97.298 334.086,79.092")
polygon(points="347.29,4.257 323.147,0 316.876,35.541 344.976,17.34")
path(d="M267.251,155.936c-8.377,0-15.174,6.791-15.174,15.173c0,8.389,6.797,15.18,15.174,15.18c0.389,0,0.762-0.09,1.135-0.112 c3.661,26.969-24.635,51.625-51.435,53.078c-30.184,1.629-42.702-27.605-45.202-53.397c6.709-1.567,11.712-7.56,11.712-14.742 c0-8.378-6.793-15.174-15.174-15.174c-8.377,0-15.173,6.791-15.173,15.174c0,4.646,2.128,8.747,5.416,11.533 c2.22,35.485,22.442,74.765,64.052,69.129c34.83-4.717,65.965-38.285,57.522-72.662c1.457-2.332,2.325-5.054,2.325-8 C282.426,162.732,275.629,155.936,267.251,155.936z")
path(d="M382.406,426.771c-11.159-43.923-44.178-194.693-0.588-290.595c0.046-0.093,0.052-0.194,0.093-0.29 c0.235-0.562,0.407-1.127,0.533-1.715c0.032-0.145,0.08-0.285,0.107-0.425c0.12-0.728,0.158-1.469,0.12-2.207 c-0.005-0.135-0.05-0.271-0.06-0.4c-0.065-0.593-0.174-1.182-0.355-1.765c-0.061-0.208-0.136-0.407-0.214-0.61 c-0.191-0.509-0.431-1.004-0.711-1.485c-0.064-0.118-0.098-0.257-0.182-0.386c-0.041-0.074-0.112-0.118-0.153-0.192 c-0.08-0.112-0.126-0.235-0.206-0.347l-31.349-42.148c-1.11-1.502-2.648-2.567-4.347-3.215c3.613,8.758,3.007,19.403-1.825,27.519 l10.356,13.929H309.9l18.676-12.099l2.825-15.986l-28.104,18.206l-1.751,9.88h-29.452l14.392-22.696l3.277-5.321l-22.199-14.131 l-53.426-33.877l-16.085,25.366l15.609,50.665h-8.073L172.888,16.29L87.207,42.687l11.575,37.588h-8.981 c-3.648,0-6.994,2.038-8.656,5.289l-21.613,42.148c-0.096,0.187-0.134,0.38-0.225,0.572c-0.112,0.246-0.208,0.493-0.294,0.755 c-0.159,0.466-0.277,0.936-0.356,1.415c-0.043,0.222-0.093,0.441-0.118,0.67c-0.06,0.635-0.071,1.262-0.011,1.888 c0.007,0.084-0.005,0.164,0,0.249c0.086,0.706,0.261,1.406,0.495,2.082c0.023,0.058,0.023,0.113,0.039,0.17 c46.047,125.29,13.634,255.43,2.599,292.333c-0.631,2.122-1.807,6.085,1.166,10.024c1.834,2.435,4.72,3.863,7.762,3.863h0.128 c2.638-0.033,4.566-0.939,6-2.209h291.263c1.385,1.021,3.192,1.732,5.565,1.732c3.006,0,5.841-1.388,7.685-3.759 C384.166,433.721,383.271,430.186,382.406,426.771z M95.752,99.732h9.028l6.99,22.695H84.102L95.752,99.732z M84.046,420.068 c12.849-48.63,35.138-163.794-2.197-278.18h276.61c-34.768,93.836-10.332,224.637,2.278,278.18H84.046z")
.menu-item__desc Shop
.menu-item
.menu-item__icon
svg(viewBox="0 0 512 512")
path(d="M256,0C153.755,0,70.573,83.182,70.573,185.426c0,126.888,165.939,313.167,173.004,321.035 c6.636,7.391,18.222,7.378,24.846,0c7.065-7.868,173.004-194.147,173.004-321.035C441.425,83.182,358.244,0,256,0z M256,278.719 c-51.442,0-93.292-41.851-93.292-93.293S204.559,92.134,256,92.134s93.291,41.851,93.291,93.293S307.441,278.719,256,278.719z")
.menu-item__desc Locate
.inflight__content
.content__menu
svg(viewBox="0 0 240.823 240.823")
path(d="M57.633,129.007L165.93,237.268c4.752,4.74,12.451,4.74,17.215,0c4.752-4.74,4.752-12.439,0-17.179 l-99.707-99.671l99.695-99.671c4.752-4.74,4.752-12.439,0-17.191c-4.752-4.74-12.463-4.74-17.215,0L57.621,111.816 C52.942,116.507,52.942,124.327,57.633,129.007z")
.content__menu-type Watch
ul.content__menu-tabs
li.active Movies
li TV Shows
li News
.content__shows
each val in movies
div
img(src="https://meowlivia.s3.us-east-2.amazonaws.com/codepen/avengers/"+val.img alt="Movie Poster")
.title-box
.name=val.name
aside.context
.explanation
| Clicking on the hamburger menu will expand the menu, animated if you're on Firefox.
br
| 100 points to your house of choice if you fork this and make it fully functional.
br
| Part of the
a(href="https://codepen.io/collection/DQvYpQ/" target="_blank") CSS Grid Collection here
| .
footer
a(href="https://twitter.com/meowlivia_" target="_blank")
i.icon-social-twitter.icons
a(href="https://github.com/oliviale" target="_blank")
i.icon-social-github.icons
a(href="https://dribbble.com/oliviale" target="_blank")
i.icon-social-dribbble.icons
View Compiled
