The latest articles on DEV Community by Matias Huapaya (@matias_huapaya). https://dev.to/matias_huapaya https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1868483%2F06bc5ac7-61b5-419b-974c-ed771991d1c7.jpg https://dev.to/matias_huapaya en Matias Huapaya Sun, 04 Aug 2024 17:10:46 +0000 https://dev.to/matias_huapaya/recreation-frontend-challenge-submission-4eo4 https://dev.to/matias_huapaya/recreation-frontend-challenge-submission-4eo4 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-07-24">Frontend Challenge v24.07.24</a>, Glam Up My Markup: Recreation</em></p> <h2> What I Built </h2> <p>I built a responsive site using the HTML provided. I did not edit the HTML directly other than in the head. I first designed the site in Figma, then coded it with vanilla Javascript and CSS. When designing the site, I was careful to not stray too much from the original HTML structure. However, I did add a few extra divs with Javascript where necessary. I used fonts from Google Fonts (Roboto and Staatliches). I used the blue from the NYC flag and the red from the color of the cricket balls, making sure the text had an accessible contrast ratio.</p> <p>Images credits:</p> <ul> <li>Cricket ball in the grass: Photo by <a href="https://unsplash.com/@theinfluencermarketingfactory?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash" rel="noopener noreferrer">Alessandro Bogliari</a> on <a href="https://unsplash.com/photos/shallow-focus-photography-of-red-cricket-ball-oDs_AxeR5g4?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash" rel="noopener noreferrer">Unsplash</a> </li> <li>Cricket player: Photo by <a href="https://unsplash.com/@alken?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash" rel="noopener noreferrer">Alfred Kenneally</a> on <a href="https://unsplash.com/photos/man-in-white-pants-and-blue-baseball-mitt-holding-baseball-bat-during-daytime-XqFeVprJ3jQ?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash" rel="noopener noreferrer">Unsplash</a> </li> </ul> <h2> Demo </h2> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feqhwgcugfuknzmy1fbqo.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feqhwgcugfuknzmy1fbqo.png" alt="Screenshot" width="800" height="363"></a><br> <a href="https://mhuap.github.io/DEV-cricket/" rel="noopener noreferrer">Live Demo</a><br> <a href="https://github.com/mhuap/DEV-cricket" rel="noopener noreferrer">Github repo</a></p> devchallenge frontendchallenge css javascript