{"componentChunkName":"component---src-templates-project-js","path":"/projects/fylo-landing-page-1","result":{"data":{"site":{"siteMetadata":{"title":"itsHally"}},"markdownRemark":{"html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/0af9ae2189c015aafa30c0cea101920b/8e1fc/desktop-preview.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 73.64864864864865%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAwAEBf/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHuE2Omio//xAAYEAEBAQEBAAAAAAAAAAAAAAACAwABBP/aAAgBAQABBQLKhGL4ua/nN9KBkf/EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABwQAAICAgMAAAAAAAAAAAAAAAABEiECEBExUf/aAAgBAQAGPwIt9laUm1x4RxbP/8QAGBAAAwEBAAAAAAAAAAAAAAAAAAERIVH/2gAIAQEAAT8hwnW4Kp6KjB9rA5sE3dP/2gAMAwEAAgADAAAAEPAv/8QAFREBAQAAAAAAAAAAAAAAAAAAABH/2gAIAQMBAT8QR//EABgRAAMBAQAAAAAAAAAAAAAAAAABESFB/9oACAECAQE/EFOjlw//xAAcEAEBAAMBAAMAAAAAAAAAAAABEQAhMWFBUcH/2gAIAQEAAT8QNgaXzGyJSaLzuJJYxUm+/uKOk+pjIiAZsZ2nmNgy1lsD4PM//9k='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Desktop Preview\"\n        title=\"Desktop Preview\"\n        src=\"/static/0af9ae2189c015aafa30c0cea101920b/1c72d/desktop-preview.jpg\"\n        srcset=\"/static/0af9ae2189c015aafa30c0cea101920b/a80bd/desktop-preview.jpg 148w,\n/static/0af9ae2189c015aafa30c0cea101920b/1c91a/desktop-preview.jpg 295w,\n/static/0af9ae2189c015aafa30c0cea101920b/1c72d/desktop-preview.jpg 590w,\n/static/0af9ae2189c015aafa30c0cea101920b/a8a14/desktop-preview.jpg 885w,\n/static/0af9ae2189c015aafa30c0cea101920b/8e1fc/desktop-preview.jpg 900w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h1>Fylo Landing Page with Two Columns</h1>\n<img alt=\"GitHub\" src=\"https://img.shields.io/github/license/itshally/FyloLandingPage?style=for-the-badge\">\n<img alt=\"GitHub top language\" src=\"https://img.shields.io/github/languages/top/itshally/FyloLandingPage?style=for-the-badge\">\n<p>This is my solution for this Frontendmentor Challenge.</p>\n<h2>Tools &#x26; Technologies</h2>\n<ul>\n<li>HTML</li>\n<li>CSS</li>\n<li>Flexbox</li>\n</ul>\n<h2>Installation</h2>\n<p>To clone this project to your device, type the <code>code</code> below to your git bash:</p>\n<pre><code>git clone https://github.com/itshally/FyloLandingPage.git\n</code></pre>\n<p>After cloning the repo, you can start running it locally.</p>\n<pre><code>cd FyloLandingPage\n\nstart index.html\n</code></pre>\n<h2>Screenshots</h2>\n<ul>\n<li>\n<h4>Desktop Design</h4>\n</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/879242703d4ae8f6ebafbeb373d125d2/644c5/desktop-design.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 162.16216216216216%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAgABQDASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAAAAEEBgX/xAAWAQEBAQAAAAAAAAAAAAAAAAAAAQP/2gAMAwEAAhADEAAAAe5KQCsyrSaplB//xAAaEAACAwEBAAAAAAAAAAAAAAAAEwECEQMQ/9oACAEBAAEFAtw0idjfX8h3OR3KBth1x1j/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAWEQEBAQAAAAAAAAAAAAAAAAAAEhD/2gAIAQIBAT8ByUv/xAAZEAADAAMAAAAAAAAAAAAAAAAAEDIRIDH/2gAIAQEABj8CWdKKKXV//8QAHRABAAICAwEBAAAAAAAAAAAAAQARITFhcZFBgf/aAAgBAQABPyFVmsdxxhGNMrLv5BKxOD4xG1xwM1Kn4xxUnkC1TqKuUZ//2gAMAwEAAgADAAAAEGjATf/EABYRAQEBAAAAAAAAAAAAAAAAAAAREP/aAAgBAwEBPxDKr//EABYRAQEBAAAAAAAAAAAAAAAAAAAREP/aAAgBAgEBPxDIQ//EAB8QAQACAgICAwAAAAAAAAAAAAEAESExUWFBwYGh8P/aAAgBAQABPxC9AW2wBarsurjj2NjEFKbOpTbbkjNFGMQyL+bqAG0bYV/EC2QeEvUphWM8fuFoQd0T3LMhylz/2Q=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Desktop Design\"\n        title=\"Desktop Design\"\n        src=\"/static/879242703d4ae8f6ebafbeb373d125d2/1c72d/desktop-design.jpg\"\n        srcset=\"/static/879242703d4ae8f6ebafbeb373d125d2/a80bd/desktop-design.jpg 148w,\n/static/879242703d4ae8f6ebafbeb373d125d2/1c91a/desktop-design.jpg 295w,\n/static/879242703d4ae8f6ebafbeb373d125d2/1c72d/desktop-design.jpg 590w,\n/static/879242703d4ae8f6ebafbeb373d125d2/a8a14/desktop-design.jpg 885w,\n/static/879242703d4ae8f6ebafbeb373d125d2/fbd2c/desktop-design.jpg 1180w,\n/static/879242703d4ae8f6ebafbeb373d125d2/644c5/desktop-design.jpg 1440w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<ul>\n<li>\n<h4>Mobile Design</h4>\n</li>\n</ul>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 590px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/0eb54a7b5217b0ed3b1cc94f3a6276da/acb04/mobile-design.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 755.4054054054053%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCACXABQDASIAAhEBAxEB/8QAGgABAAMBAQEAAAAAAAAAAAAAAAECAwQFBv/EABcBAQEBAQAAAAAAAAAAAAAAAAABAgP/2gAMAwEAAhADEAAAAfemMjYFKXzNkjnr0xqFmbWls62EViVWEQSAfNzbXtnmQl5IxitGAtE1AJBAP//EACAQAAIBBAIDAQAAAAAAAAAAAAECAAMQEUESIRMgIzD/2gAIAQEAAQUC3YwtgzIhCmDuNgzAs1Wmp81KKwYdTAu7cUmwv0tn8+7ZMThPjYNUILus8rTRtq2vX//EABYRAAMAAAAAAAAAAAAAAAAAACAhQP/aAAgBAwEBPwEHB//EABgRAAIDAAAAAAAAAAAAAAAAAAEwESAi/9oACAECAQE/AaZRBR//xAAlEAABAwIDCQAAAAAAAAAAAAAAARAxESEwQVECEiAiMkJhgaH/2gAIAQEABj8C4Lw6eHu1FU6iqQ0Oq6PtaK+WHKmZJzb3o7/jQXShkTif/8QAIhAAAgEEAgIDAQAAAAAAAAAAAREAECExQWGRUXEggfHw/9oACAEBAAE/IVkzUlFzJlQtIJhIjsxaEAYmAcwM2gxDkcEaUVp1HPcEeAnA6gQxHdRBZDEGIspcCLAoSdKNAxEeJfihjFCLtmo/RL+e05HcJDm1ZH+sHMBCBR2oaQvYT+gmg6OexP3Q4V+3wK06f//aAAwDAQACAAMAAAAQw8G82CICUCu+5Cg8P/f/AP/EABYRAQEBAAAAAAAAAAAAAAAAADABEf/aAAgBAwEBPxBGwP/EABwRAAICAgMAAAAAAAAAAAAAAAERICEAMDGR4f/aAAgBAgEBPxCAKWD35hTqbOBo/8QAIhABAAIBBAICAwAAAAAAAAAAAQARITFBUWEQgZHxcdHw/9oACAEBAAE/EPVKq8fErOrAqYWMMvJqLbqtB8wwS8CxzQxv1ckmnnSWgsgShpo8TLJPCBFYTSKTLKWIttD3g8bWCFRTaz+J9IgCgBwTXLkLrqViG4dtolF4d4r11ELJq5iy4FEM7Paz+C/qKw49RBUIB7j1DSINSxlOz8eLRQoSjSC1o+Gi2jqdLP8AcoW7m1QV3cdxd8Qparq8XETLqwDV99MPLEs3fCDrta7I3xUQ7jnLxQwGd9/KFFenHkdBWph3O/H/2Q=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Mobile Design\"\n        title=\"Mobile Design\"\n        src=\"/static/0eb54a7b5217b0ed3b1cc94f3a6276da/1c72d/mobile-design.jpg\"\n        srcset=\"/static/0eb54a7b5217b0ed3b1cc94f3a6276da/a80bd/mobile-design.jpg 148w,\n/static/0eb54a7b5217b0ed3b1cc94f3a6276da/1c91a/mobile-design.jpg 295w,\n/static/0eb54a7b5217b0ed3b1cc94f3a6276da/1c72d/mobile-design.jpg 590w,\n/static/0eb54a7b5217b0ed3b1cc94f3a6276da/acb04/mobile-design.jpg 750w\"\n        sizes=\"(max-width: 590px) 100vw, 590px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<h2>License</h2>\n<p>Distributed under the\n<a href=\"https://github.com/itshally/FyloLandingPage/blob/master/LICENSE\">MIT License</a></p>","id":"b32bec29-0c48-53a3-9f2a-4362123bfb54","frontmatter":{"title":"Fylo Landing Page with Two Columns","description":"My solution for Frontendmentor Challenge","preview":"https://fylo-landing-page-hazel.vercel.app/","tools":["HTML","CSS","Flexbox"],"sourceCode":"https://github.com/itshally/FyloLandingPage","keyWords":null,"image":{"childImageSharp":{"fixed":{"src":"/static/cddd5d8526dabd09db8a109add5b7be2/986a3/fylolandingpage1.png"}}}}}},"pageContext":{"id":"b32bec29-0c48-53a3-9f2a-4362123bfb54","previousPostId":"fa2e7fdf-3191-5ba2-8978-cde597988601","nextPostId":"bf3ee628-da33-5709-bbbc-50b560d79e1e"}},"staticQueryHashes":["143701507"]}