Skip to content

Instantly share code, notes, and snippets.

@alexandreruoso

alexandreruoso/front-end-developer-exercise.markdown

Created August 23, 2018 13:52
Show Gist options
  • Save alexandreruoso/4c539324f96e9723c65df5be6dc60a11 to your computer and use it in GitHub Desktop.
Save alexandreruoso/4c539324f96e9723c65df5be6dc60a11 to your computer and use it in GitHub Desktop.
Download ZIP
Front End Developer Exercise
Raw
index.html
<body onload="getNews(0);">
<div id="container">
<header id="banner">
<img id="logo" src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3Csvg%0A%20%20%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%0A%20%20%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%0A%20%20%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%0A%20%20%20xmlns%3Asvg%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20height%3D%2290%22%0A%20%20%20width%3D%22310%22%0A%20%20%20id%3D%22svg8%22%0A%20%20%20version%3D%221.1%22%0A%20%20%20viewBox%3D%220%200%20310.00001%2089.999996%22%0A%20%20%20preserveAspectRatio%3D%22xMidYMid%22%3E%0A%20%20%3Cmetadata%0A%20%20%20%20%20id%3D%22metadata12%22%3E%0A%20%20%20%20%3Crdf%3ARDF%3E%0A%20%20%20%20%20%20%3Ccc%3AWork%0A%20%20%20%20%20%20%20%20%20rdf%3Aabout%3D%22%22%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Aformat%3Eimage%2Fsvg%2Bxml%3C%2Fdc%3Aformat%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atype%0A%20%20%20%20%20%20%20%20%20%20%20rdf%3Aresource%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fdcmitype%2FStillImage%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%3Cdc%3Atitle%3E%3C%2Fdc%3Atitle%3E%0A%20%20%20%20%20%20%3C%2Fcc%3AWork%3E%0A%20%20%20%20%3C%2Frdf%3ARDF%3E%0A%20%20%3C%2Fmetadata%3E%0A%20%20%3Cdefs%0A%20%20%20%20%20id%3D%22defs4%22%3E%0A%20%20%20%20%3Cstyle%0A%20%20%20%20%20%20%20id%3D%22style2%22%3E.cls-1%20%7B%20fill%3A%20%23000%3B%20fill-rule%3A%20evenodd%3B%20%7D%3C%2Fstyle%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cpath%0A%20%20%20%20%20style%3D%22fill%3A%23000000%3Bfill-rule%3Aevenodd%3Bstroke-width%3A1.0034405%22%0A%20%20%20%20%20id%3D%22path6%22%0A%20%20%20%20%20class%3D%22cls-1%22%0A%20%20%20%20%20d%3D%22m%20298.56712%2C45.083797%20c%205.1009%2C0.52486%206.19252%2C2.458715%206.72027%2C6.260189%20l%200.2107%2C1.51236%20c%200.56186%2C3.301703%201.16385%2C4.004193%204.50191%2C4.004193%20v%200.280996%20c%20-1.16185%2C0.210747%20-2.46316%2C0.311103%20-3.622%2C0.311103%20-3.09726%2C0%20-3.72835%2C-1.515372%20-4.11864%2C-4.676576%20l%20-0.38428%2C-3.171241%20c%20-0.4234%2C-3.522485%20-1.4789%2C-4.325331%20-5.66476%2C-4.325331%20h%20-3.45144%20v%209.282903%20c%200%2C1.716083%200.4515%2C2.278075%203.97316%2C2.388466%20v%200.321138%20h%20-11.11682%20v%20-0.321138%20c%203.58186%2C-0.110391%204.15376%2C-0.70249%204.15376%2C-2.428608%20V%2035.475742%20c%200%2C-1.690994%20-0.56186%2C-2.321228%20-4.15376%2C-2.428609%20v%20-0.280996%20h%2010.2339%20c%206.47144%2C0%2010.09344%2C2.322231%2010.09344%2C5.981201%200%2C3.166222%20-2.18725%2C5.415193%20-7.3945%2C6.226068%20v%200.105373%20z%20m%203.97317%2C-6.297321%20c%200%2C-3.703125%20-1.68358%2C-5.489457%20-6.85772%2C-5.489457%20h%20-2.91967%20v%2011.461625%20h%203.34106%20c%205.27949%2C0%206.43733%2C-2.040231%206.43733%2C-5.978189%20z%20m%20-31.68196%2C-5.489457%20h%20-5.93968%20v%2010.968879%20h%203.3511%20c%202.56851%2C0%203.48154%2C-0.953379%204.39456%2C-4.817074%20h%200.32106%20v%2010.206175%20h%20-0.32106%20c%20-0.91302%2C-3.87373%20-1.82605%2C-4.857216%20-4.39456%2C-4.857216%20h%20-3.34107%20v%2011.9624%20h%206.55171%20c%203.69223%2C0%204.99655%2C-1.76626%206.92293%2C-7.145326%20l%200.32107%2C0.03011%20-0.17057%2C7.627033%20h%20-20.7688%20v%20-0.321138%20c%203.58688%2C-0.100356%204.15376%2C-0.70249%204.15376%2C-2.428608%20V%2035.475742%20c%200%2C-1.685976%20-0.56688%2C-2.318217%20-4.15376%2C-2.428609%20v%20-0.276981%20h%2019.7424%20l%200.10033%2C7.210557%20-0.31705%2C0.04014%20c%20-1.86618%2C-5.057927%20-3.06013%2C-6.713796%20-6.44134%2C-6.713796%20z%20m%20-24.8122%2C0%20h%20-2.80931%20v%2021.235267%20c%200%2C1.756225%200.77256%2C2.318217%204.43469%2C2.428609%20v%200.311102%20h%20-11.85929%20v%20-0.321138%20c%203.66214%2C-0.110391%204.43469%2C-0.672383%204.43469%2C-2.428608%20V%2033.298023%20h%20-2.8093%20c%20-2.53841%2C0%20-4.0133%2C1.441108%20-6.19051%2C6.57932%20l%20-0.31103%2C-0.03713%200.2107%2C-7.075077%20h%2021.21026%20l%200.21773%2C7.065042%20-0.31605%2C0.03011%20c%20-2.1441%2C-4.997714%20-3.622%2C-6.583334%20-6.19051%2C-6.583334%20z%20m%20-30.32146%2C11.782764%20c%205.10492%2C0.52486%206.19453%2C2.458714%206.71927%2C6.260188%20l%200.21069%2C1.513365%20c%200.56186%2C3.304713%201.16386%2C4.006199%204.50091%2C4.006199%20v%200.280996%20c%20-1.15984%2C0.213758%20-2.46115%2C0.316121%20-3.62199%2C0.316121%20-3.09526%2C0%20-3.72836%2C-1.511357%20-4.11765%2C-4.674569%20l%20-0.39129%2C-3.167226%20c%20-0.4214%2C-3.51245%20-1.48492%2C-4.325331%20-5.66878%2C-4.325331%20h%20-3.45144%20v%209.282903%20c%200%2C1.716082%200.4515%2C2.278074%203.97317%2C2.388466%20v%200.321138%20H%20202.7818%20v%20-0.321138%20c%203.58788%2C-0.110392%204.14974%2C-0.70249%204.14974%2C-2.428609%20V%2035.475742%20c%200%2C-1.691998%20-0.56186%2C-2.322232%20-4.14974%2C-2.428609%20v%20-0.280996%20h%2010.23691%20c%206.47144%2C0%2010.09745%2C2.321228%2010.09745%2C5.979193%200%2C3.167226%20-2.18323%2C5.416198%20-7.38948%2C6.227072%20v%200.10437%20z%20m%203.97317%2C-6.297321%20c%200%2C-3.695097%20-1.68559%2C-5.489457%20-6.85571%2C-5.489457%20h%20-2.92269%20v%2011.465639%20h%203.34308%20c%205.27748%2C0%206.43431%2C-2.039228%206.43431%2C-5.977186%20z%20m%20-33.36052%2C19.097691%20c%20-6.05205%2C0%20-11.60846%2C-4.992697%20-11.60846%2C-12.801374%200%2C-7.777567%205.80523%2C-12.915779%2011.64257%2C-12.915779%206.01593%2C0%2011.57836%2C4.957572%2011.57836%2C12.795352%200%2C7.737425%20-5.80925%2C12.905744%20-11.61147%2C12.905744%20z%20m%20-0.10334%2C-25.219389%20c%20-4.57817%2C0%20-8.0266%2C2.779853%20-8.0266%2C12.347766%200%2C9.563899%203.62501%2C12.373859%208.23328%2C12.373859%204.57516%2C0%208.02057%2C-2.819996%208.02057%2C-12.343752%200%2C-9.604041%20-3.622%2C-12.383894%20-8.22725%2C-12.383894%20z%20m%20-27.41382%2C13.613251%20h%20-2.57052%20v%208.264293%20c%200%2C1.798374%200.6642%2C2.326245%204.36446%2C2.428608%20v%200.31612%20h%20-11.50813%20v%20-0.31612%20c%203.5919%2C-0.102363%204.15677%2C-0.70249%204.15677%2C-2.428608%20V%2035.477749%20c%200%2C-1.685976%20-0.56487%2C-2.318217%20-4.15677%2C-2.426601%20v%20-0.278989%20h%209.961%20c%206.82261%2C0%209.71017%2C2.848095%209.71017%2C6.613441%200%2C3.552592%20-2.88556%2C6.890423%20-9.95598%2C6.890423%20z%20m%206.54167%2C-6.857305%20c%200%2C-3.516464%20-1.16386%2C-6.121698%20-6.26074%2C-6.121698%20h%20-2.85145%20v%2012.450129%20h%202.74509%20c%205.2825%2C0%206.3681%2C-2.388466%206.3681%2C-6.329434%20z%20M%20132.21%2C47.190263%20h%209.00583%20v%200.561992%20H%20132.211%20v%20-0.561992%20z%20m%20-8.15301%2C5.978189%20c%201.12372%2C3.026729%201.54712%2C3.552592%204.32432%2C3.79746%20v%200.321139%20H%20117.9337%20v%20-0.321139%20c%203.622%2C-0.137487%203.90594%2C-0.876105%203.09626%2C-3.129091%20l%20-2.21735%2C-6.08557%20h%20-8.75901%20l%20-1.44479%2C3.763339%20c%20-1.62538%2C4.184833%20-1.23409%2C5.09807%202.31768%2C5.449315%20v%200.321138%20h%20-8.05669%20v%20-0.321138%20c%202.41801%2C-0.421494%203.33103%2C-1.370859%204.99655%2C-5.521571%20l%207.73563%2C-19.448935%20h%200.49163%20l%207.94632%2C21.175053%20z%20m%20-9.39613%2C-16.986206%20h%20-0.10033%20l%20-4.2842%2C11.009021%20h%208.37776%20L%20114.68093%2C36.182246%20Z%20M%2095.426138%2C24.797894%20c%203.584876%2C-0.176626%203.659122%2C-1.125991%202.493259%2C-2.954472%20l%20-5.062772%2C-8.088669%20-4.64539%2C6.716807%20c%20-2.046781%2C2.950458%20-1.414686%2C4.074442%201.785917%2C4.325331%20v%200.311103%20h%20-8.789118%20v%20-0.321139%20c%202.739075%2C-0.351245%203.511634%2C-0.772739%206.431307%2C-4.897358%20L%2092.415162%2C13.145593%2086.475485%2C4.0031891%20C%2084.991569%2C1.6859759%2084.429707%2C1.2644819%2081.439802%2C0.87309468%20V%200.59209866%20H%2092.2757%20V%200.87309468%20C%2088.864399%2C1.0135927%2088.613568%2C2.0693347%2089.777424%2C3.9319366%20l%204.545057%2C7.1754324%204.077509%2C-5.8708082%20c%202.07688%2C-2.9855823%201.407663%2C-4.114584%20-1.793944%2C-4.35844833%20V%200.59711645%20h%208.795134%20V%200.87811247%20C%20102.59188%2C1.266489%20101.84942%2C1.758232%2098.959844%2C5.8025669%20l%20-4.223993%2C5.9440681%206.477459%2C9.920161%20c%201.51502%2C2.358359%202.07989%2C2.749747%204.99655%2C3.131098%20v%200.319132%20H%2095.426138%20V%2024.801909%20Z%20M%2067.4936%2C25.711131%20c%20-6.05205%2C0%20-11.608458%2C-4.992696%20-11.608458%2C-12.802377%20C%2055.883142%2C5.1331944%2061.682348%2C0%2067.531726%2C0%20c%206.011917%2C0%2011.570331%2C4.9575719%2011.570331%2C12.805388%200%2C7.737425%20-5.806235%2C12.905743%20-11.612471%2C12.905743%20z%20m%208.126923%2C-12.838505%20c%20-0.002%2C-9.60103%20-3.624006%2C-12.38088304%20-8.237289%2C-12.38088304%20-4.571144%2C0%20-8.020571%2C2.77985304%20-8.020571%2C12.34776604%200%2C9.568916%203.624006%2C12.380883%208.232272%2C12.380883%204.575158%2C0%208.026592%2C-2.80996%208.026592%2C-12.343752%20z%20m%20-30.12179%2C20.425397%20h%20-5.949711%20v%2010.9749%20h%203.341069%20c%202.568509%2C0%203.481534%2C-0.950369%204.397568%2C-4.817074%20h%200.321064%20v%2010.200154%20h%20-0.31103%20c%20-0.913025%2C-3.87072%20-1.82605%2C-4.854206%20-4.394559%2C-4.854206%20h%20-3.341069%20v%2011.95939%20h%206.541672%20c%203.692232%2C0%204.996553%2C-1.762246%206.932968%2C-7.141312%20l%200.321064%2C0.03613%20-0.170565%2C7.62904%20H%2032.417396%20v%20-0.31612%20c%203.589893%2C-0.102363%204.150751%2C-0.70249%204.150751%2C-2.428608%20V%2035.477749%20c%200%2C-1.685976%20-0.561862%2C-2.318217%20-4.150751%2C-2.426601%20v%20-0.278989%20h%2019.735381%20l%200.100332%2C7.210557%20-0.321063%2C0.04014%20C%2050.065863%2C34.964931%2048.871908%2C33.309062%2045.50074%2C33.309062%20Z%20m%20-7.670411%2C-7.586892%20c%20-6.047034%2C0%20-11.604445%2C-4.992696%20-11.604445%2C-12.802377%20C%2026.223877%2C5.1331944%2032.028106%2C0%2037.867451%2C0%20c%206.017937%2C0%2011.576352%2C4.9575719%2011.576352%2C12.805388%200%2C7.737425%20-5.807239%2C12.905743%20-11.615481%2C12.905743%20z%20m%208.133947%2C-12.837502%20c%200%2C-9.602033%20-3.62802%2C-12.38188604%20-8.23428%2C-12.38188604%20-4.575157%2C0%20-8.020571%2C2.77985304%20-8.020571%2C12.34776604%200%2C9.568916%203.611966%2C12.380883%208.227256%2C12.380883%204.565124%2C0%208.016558%2C-2.80996%208.016558%2C-12.343752%20z%20m%20-32.557861%2C1.093878%20v%208.401779%20c%200%2C1.760239%200.917038%2C2.28811%204.258106%2C2.39248%20v%200.351245%20H%206.1905086%20V%2024.797894%20C%209.8526408%2C24.692521%2010.448615%2C24.129525%2010.448615%2C22.369286%20V%2014.596737%20L%204.2942264%2C3.9389615%20C%202.9899053%2C1.7241111%202.2875785%2C1.1611156%200%2C0.87811247%20V%200.60213423%20H%2010.411492%20V%200.88112314%20C%206.6821373%2C1.0216211%206.5085622%2C1.8676197%207.7757603%2C4.0473457%20L%2013.018128%2C13.406518%2017.839099%2C5.0970663%20C%2019.597926%2C2.066324%2019.454451%2C1.2634784%2015.935794%2C0.87209112%20V%200.59209866%20h%208.12893%20V%200.87309468%20C%2021.425982%2C1.1922258%2020.512957%2C2.0000893%2018.5033%2C5.3389236%20L%2013.406414%2C13.959478%20Z%20M%205.7430261%2C36.49937%20c%200%2C-1.89873%20-0.9531577%2C-3.235468%20-4.2601134%2C-3.448222%20V%2032.770152%20H%208.0948173%20L%2022.663081%2C52.500083%20H%2022.6992%20V%2037.133618%20c%200%2C-2.707597%20-0.775569%2C-3.58872%20-4.467801%2C-4.080463%20v%20-0.280996%20h%209.150314%20v%200.280996%20c%20-3.481534%2C0.529878%20-4.043395%2C1.409997%20-4.043395%2C4.081466%20v%2020.75356%20H%2022.846689%20L%206.4513728%2C35.759748%20h%20-0.070233%20v%2017.13373%20c%200%2C2.704586%200.5989844%2C3.584706%204.3614492%2C4.080463%20v%200.317124%20H%201.4819094%20v%20-0.316121%20c%203.55578%2C-0.494753%204.2611167%2C-1.374873%204.2611167%2C-4.079459%20z%20m%208.8994829%2C27.778459%20c%202.638742%2C0%204.541044%2C0.491743%206.545685%2C1.442112%20l%201.474887%2C-1.652859%20h%200.245814%20v%207.737425%20h%20-0.31705%20c%20-2.426038%2C-5.486446%20-4.575157%2C-7.034935%20-8.197157%2C-7.034935%20-4.362452%2C0%20-8.6185522%2C3.167226%20-8.6185522%2C12.276514%200%2C9.074162%204.8189652%2C12.452135%209.1824202%2C12.452135%202.217346%2C0%204.043396%2C-0.63224%205.237351%2C-1.545477%20v%20-6.713797%20c%200%2C-1.716083%20-0.601994%2C-2.428608%20-4.153761%2C-2.528964%20V%2078.39888%20h%2010.103472%20v%200.321139%20c%20-2.638742%2C0.140498%20-2.999939%2C0.672383%20-2.999939%2C2.498857%20v%206.472943%20C%2020.757768%2C89.157012%2017.587265%2C90%2015.058889%2C90%208.4770838%2C90%202.2865752%2C85.60442%202.2865752%2C77.124363%20c%200%2C-7.667176%206.0901762%2C-12.835495%2012.3509178%2C-12.835495%20z%20m%2036.56313%2C6.57932%20c%200%2C3.163212%20-2.181226%2C5.41419%20-7.38948%2C6.222054%20v%200.108384%20c%205.106918%2C0.525864%206.200541%2C2.460722%206.72227%2C6.260189%20l%200.210698%2C1.511357%20c%200.571895%2C3.307724%201.163856%2C4.00921%204.504924%2C4.00921%20v%200.280996%20c%20-1.163855%2C0.212754%20-2.458143%2C0.316121%20-3.621999%2C0.316121%20-3.090238%2C0%20-3.722332%2C-1.50935%20-4.113628%2C-4.676576%20L%2047.137161%2C81.722661%20C%2046.715765%2C78.207201%2045.662275%2C77.39733%2041.478414%2C77.39733%20H%2038.02698%20v%209.28491%20c%200%2C1.724111%200.461529%2C2.286103%203.983196%2C2.393484%20v%200.31612%20H%2030.87328%20v%20-0.31612%20c%203.5919%2C-0.107381%204.153761%2C-0.70249%204.153761%2C-2.428608%20v%20-19.06357%20c%200%2C-1.687983%20-0.561861%2C-2.320224%20-4.153761%2C-2.428608%20v%20-0.280996%20h%2010.233904%20c%206.476456%2C0%2010.101465%2C2.323235%2010.101465%2C5.983207%20z%20M%2038.01193%2C65.401813%20V%2076.87247%20h%203.341068%20c%205.279491%2C0%206.44134%2C-2.043242%206.44134%2C-5.9812%200%2C-3.69309%20-1.689597%2C-5.489457%20-6.860729%2C-5.489457%20z%20m%2033.539112%2C-1.123984%20c%206.013923%2C0%2011.575348%2C4.961586%2011.575348%2C12.802377%200%2C7.739432%20-5.799213%2C12.911766%20-11.608458%2C12.911766%20-6.050043%2C0%20-11.608458%2C-4.997715%20-11.608458%2C-12.805389%200%2C-7.773552%205.809246%2C-12.909757%2011.648591%2C-12.909757%20z%20m%20-8.16505%2C12.835495%20c%200%2C9.566909%203.621999%2C12.383894%208.234279%2C12.383894%204.575157%2C0%208.020571%2C-2.816985%208.020571%2C-12.347766%200%2C-9.600027%20-3.625009%2C-12.37988%20-8.234279%2C-12.37988%20-4.575157%2C0%20-8.020571%2C2.779853%20-8.020571%2C12.343752%20z%20M%2097.967557%2C47.753259%20h%20-9.006839%20v%20-0.561992%20h%209.006839%20z%20m%20-24.922566%2C6.784045%20c%200%2C1.762246%200.775569%2C2.328253%204.430678%2C2.428608%20v%200.317124%20H%2065.617384%20v%20-0.31612%20c%203.659122%2C-0.102363%204.434692%2C-0.667366%204.434692%2C-2.428608%20V%2033.298023%20h%20-2.815327%20c%20-2.536403%2C0%20-4.011289%2C1.441108%20-6.192515%2C6.57932%20l%20-0.318054%2C-0.03713%200.210698%2C-7.075077%20h%2021.215284%20l%200.214711%2C7.065042%20-0.316047%2C0.03011%20c%20-2.147113%2C-4.997714%20-3.632032%2C-6.583334%20-6.190508%2C-6.583334%20h%20-2.81934%20V%2054.522251%20Z%20M%2099.06118%2C65.154938%20c%20-3.521667%2C0.106377%20-3.87283%2C0.704497%20-3.87283%2C2.39248%20v%2013.822995%20c%200%2C5.698197%203.063148%2C7.596927%207.4246%2C7.596927%202.00363%2C0%203.55578%2C-0.527871%204.71562%2C-1.652859%201.2993%2C-1.30061%202.10999%2C-3.060849%202.10999%2C-5.908944%20V%2069.238412%20c%200%2C-2.709604%20-0.77256%2C-3.589724%20-4.50493%2C-4.084478%20v%20-0.280996%20h%209.14731%20v%200.280996%20c%20-3.48354%2C0.531886%20-4.01129%2C1.408994%20-4.01129%2C4.084478%20v%2012.414%20c%200%2C4.923451%20-2.92369%2C8.301424%20-8.7239%2C8.301424%20-5.700888%2C0%20-9.150315%2C-2.639355%20-9.150315%2C-7.807674%20V%2067.58455%20c%200%2C-1.688987%20-0.594972%2C-2.321228%20-4.147742%2C-2.428609%20V%2064.874946%20H%2099.06118%20v%200.280995%20z%20m%2038.89586%2C6.332445%20c%200%2C3.550585%20-2.88957%2C6.891426%20-9.95699%2C6.891426%20h%20-2.56851%20v%208.26931%20c%200%2C1.796368%200.66621%2C2.318217%204.36245%2C2.428609%20v%200.321138%20h%20-11.50511%20v%20-0.311103%20c%203.58989%2C-0.100356%204.15577%2C-0.70249%204.15577%2C-2.418572%20V%2067.600606%20c%200%2C-1.685975%20-0.5719%2C-2.318216%20-4.1638%2C-2.422586%20v%20-0.280996%20h%209.95298%20c%206.8226%2C0%209.70214%2C2.850102%209.70214%2C6.613441%20z%20m%20-12.5255%2C6.365562%20h%202.74309%20c%205.2815%2C0%206.36709%2C-2.393483%206.36709%2C-6.332445%200%2C-3.517467%20-1.15984%2C-6.121698%20-6.26074%2C-6.121698%20h%20-2.84944%20z%22%20%2F%3E%0A%3C%2Fsvg%3E%0A" alt="YOOX NET-A-PORTER GROUP" />
<picture>
<source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-1024w.jpg, https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-2048w.jpg 2x" media="(min-width: 824px)" >
<source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-824w.jpg, https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-1536w.jpg 2x" media="(min-width: 750px)" >
<source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-750w.jpg, https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-1536w.jpg 2x" media="(min-width: 412px)" >
<source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-412w.jpg, https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-824w.jpg 2x" media="(min-width: 320px)" >
<source srcset="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-320w.jpg, https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-640w.jpg 2x" media="(max-width: 320px)" >
<img src="https://media.yoox.biz/ytos/resources/FEDTEST/images/man-yellow-jacket/man-yellow-jacket-1024w.jpg" alt="Man with yellow jacket">
</picture>
</header>
<main>
<p id="about">YOOX NET-A-PORTER GROUP is the <strong>world's leading online luxury fashion retailer.</strong> The Group is a Global company with Anglo-Italian roots, the result of a gaame-changing merger, which in October 2015 brought together YOOX GROUP and THE NET-A-PORTER GROUP, two companies that have <strong>revolutionized the luxury fashion industry</strong> since their birth in 2000.</p>
<section id="news">
<h2>Last news</h2>
<nav id="buttons">
<button class="btn active"> 1 </button>
<button class="btn"> 2 </button>
<button class="btn"> 3 </button>
<button class="btn"> 4 </button>
<button class="btn"> 5 </button>
</nav>
<article id="articles">
<h3 id="articleTitle"></h3>
<div id="articleBody"></div>
</article>
</section>
<aside id="newsletter">
<h2>Newsletter</h2>
<form action="#0">
<input type="email" id="email" name="email" required placeholder="[email protected]" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,7}$" />
<input id="btn" type="submit" value="Subscribe">
</form>
</aside>
</main>
<footer>Copyright &copy; 2000-2018 YOOX NET-A-PORTER GROUP</footer>
</div>
</body>
Raw
script.babel
// Using ECS6 fetch() to get news from API
function getNews(index) {
fetch('https://jsonplaceholder.typicode.com/posts/')
.then(res => res.json())
.then((data) => {
document.getElementById('articleTitle').innerHTML = `${data[index].title}`;
document.getElementById('articleBody').innerHTML = `<p>${data[index].body}</p><p>${data[index].body}</p><p>${data[index].body}</p><p>${data[index].body}</p><p>${data[index].body}</p>`;
});
}
function changeNews() {
let thisIndex = parseInt(this.innerHTML);
let querySelector = document.querySelectorAll('.btn');
for (var i = 0 ; i < querySelector.length; i++) {
querySelector[i].classList.remove('active');
}
this.classList.add('active');
getNews(thisIndex-1);
}
function eventListener() {
let querySelector = document.querySelectorAll('.btn');
for (var i = 0 ; i < querySelector.length; i++) {
querySelector[i].addEventListener('click' , changeNews);
}
}
eventListener();
// Using Jquery to submit email
$("form").submit(function(){
   $(this).replaceWith("<span class='emailOk'>Your email has been successfully registered!</span>");
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
style.scss
$gradient: linear-gradient(#FFF, #CCC);
body {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
background-color: #666666;
margin: 0;
padding: 0;
}
#container {
background-color: #FFFFFF;
}
#logo {
padding: 18px 0 21px 21px;
grid-row: 2;
width: 299px;
}
picture img {
width: 100%;
}
main {
color: #333333;
}
#banner {
display: grid;
grid-template-rows: auto auto;
}
#about {
margin: 0;
color: #666666;
padding: 0 25px 25px 25px;
}
.btn {
background-image: $gradient;
border: 1px solid #666;
padding: 5px 10px;
margin-right: 5px;
}
.active {
background-image: linear-gradient(#CCC, #FFF);
}
#news {
background-color: #F2F2F2;
margin: 0 25px;
padding: 15px;
}
#news h2 {
display: none;
}
#articles {
display: flex;
flex-direction: row;
justify-content: flex-end;
padding-top: 10px;
}
#articleTitle {
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
flex: 1 0 0;
margin: 0 10px 0 0;
padding: 0;
}
#articleBody {
flex: 2 0 0;
column-count: 2;
}
#articleBody p {
padding: 0 0 10px 0;
margin: 0;
}
#articleBody p::first-letter {
text-transform: capitalize;
}
#newsletter {
display: flex;
flex-direction: row;
padding: 25px 0px;
margin: 0 25px;
}
#newsletter h2 {
min-width: 180px;
margin: 0;
padding: 0 0 15px 0;
text-transform: uppercase;
line-height: 100%;
font-size: 24px;
font-weight: normal;
}
#newsletter form {
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-end;
}
#email {
padding: 5px;
height: 18px;
border-top: solid 1px #333;
border-left: solid 1px #333;
border-bottom: solid 1px #333;
border-right: 0;
width: 70%;
}
#btn {
display: block;
border: solid 1px #333;
color: #333;
padding: 5px 10px;
height: 30px;
font-size: 14px;
font-family: 'Open Sans', sans-serif;
background-image: $gradient;
width: 87px;
}
.emailOk {
font-weight: bold;
color: #00d243;
}
footer {
font-size: 10px;
color: #FFF;
background-color: #333;
padding: 15px;
font-weight: 500;
text-transform: uppercase;
text-align: center;
}
@media (min-width: 1024px) {
#container {
margin: 0 auto;
position: relative;
max-width: 1024px;
}
}
@media (max-width: 560px) {
#logo {
grid-row: 1;
width: 265px;
padding-top: 18px;
padding-left: 10px;
padding-bottom: 21px;
}
#about {
margin-top: 11px;
padding: 0px 12px 12px 12px;
}
#news {
margin: 0;
padding: 15px;
}
#articles {
flex-direction: column;
}
#articleTitle {
margin-bottom: 10px;
}
#articleBody {
column-count: 1;
}
#newsletter {
flex-direction: column;
}
#newsletter form {
width: 100%;
}
#email {
width: 100%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment