The latest articles on Forem by Bgguy154 (@bgguy154). https://forem.com/bgguy154 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%2F1876352%2F2b565bd2-4178-431d-895a-0cb95d463948.png https://forem.com/bgguy154 en Bgguy154 Sun, 04 Aug 2024 05:08:59 +0000 https://forem.com/bgguy154/cricket-website-landing-page-583a https://forem.com/bgguy154/cricket-website-landing-page-583a <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> <p><strong>What We Built</strong><br> We build a Cricket Website Landing Page with given template HTML Code.On top of that,we added CSS and Javascript to it to make it more Beautiful,interactive and user friendly.</p> <h2> Demo </h2> <p>Below is the deployed Website for you to view:<br> </p> <div class="crayons-card c-embed text-styles text-styles--secondary"> <a href="https://bsanika.github.io/dev_frontend_challenge/" rel="noopener noreferrer"> bsanika.github.io </a> </div> <br> Also I am adding the images of how it looks and on scrolling,We get Parallax Effect too. <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%2Fcjbf8ftu8plgv1hcsoa7.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%2Fcjbf8ftu8plgv1hcsoa7.png" alt="Image description" width="800" height="450"></a></p> <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%2F4v5yz55ktvf2pdsr1uv2.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%2F4v5yz55ktvf2pdsr1uv2.png" alt="Image description" width="800" height="450"></a></p> <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%2Fqn1mf81d8stvp048g8us.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%2Fqn1mf81d8stvp048g8us.png" alt="Image description" width="800" height="450"></a></p> <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%2Fsvz5iubl125uruzfhb1t.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%2Fsvz5iubl125uruzfhb1t.png" alt="Image description" width="800" height="450"></a></p> <h2> Journey </h2> <p>We(<a class="mentioned-user" href="https://dev.to/bsanika">@bsanika</a> <a class="mentioned-user" href="https://dev.to/gayatri_bannagare_a5247aa">@gayatri_bannagare_a5247aa</a> <a class="mentioned-user" href="https://dev.to/aditi_sadhankar_61bf8e1b1">@aditi_sadhankar_61bf8e1b1</a> <a class="mentioned-user" href="https://dev.to/bgguy154">@bgguy154</a> ) Started to look ways to make the Website more User Friendly and Interactive as well as easy to use ,For that,The first effect we preferred was from CSS that is Parallax effect which changes background as You scroll down in this website.</p> <p>The next we did to make the Website more interactive is adding images which go front and back through navigating,we used Javascript to implement this .Also we have additional given implementation of Clickable entities.(The logic for this both can be visible in swiper function.</p> <p>Also a feature that we added is the Hovering effect for Schedule of the tournament.Upon going deep into it,One will definitely be able to use this to redirect the user to an appropriate entity to show details of the match taking place.Apart from that more sections could also be added to it for matches on same day.</p> devchallenge frontendchallenge css javascript