Coding With David

  This provides a cool look that can be used for displaying products, pictures, or a wide range of items to your users. For our sample, we will be using images, set the background image.  It makes a nice demo. HTML It turns out this is effect fairly easy to implement.  You have a container and a DIV for each card that you want.      <div class="container">          <div class="panel">              <h3>Explore The World</h3>          </div>          <div class="panel">              <h3>Wild Forest</h3>          </div>          <div class="panel">              <h3>Sunny Beach</h3>          </div>          ...

  I was working on a project and wanted an original way of showing the user the application was loading besides using the normal "Loading...." text.  I came across a website page and thought I could refactor that into what I was looking for. When my application starts, it displays a full-screen image with a count down while the page loads.  As a special effect, I want to unblur the image the closer it gets to the applicaiton finishing loading.  Once the teh count down is done, we pause for 1 sec, for effect, then proceed to the application.  I think it turned out pretty cool.  See the demo here . I used the server side Blazor project template in my example, but the code should work on any Blazor template. Template changes 1. Rename the original Index.razor page to "home".  Besure to change the routing at the top of the page as well.      @page "/home" 2. Create a new Index.razor page     a. Add routing      ...