Build a Badminton Court Design in Browser Using HTML5 and CSS3 Grid Full Project For Beginners

Build a Badminton Court Design in Browser Using HTML5 and CSS3 Grid Full Project For Beginners

 

Welcome folks today in this blog post we will be building badminton court design in browser using html5 and css3 grid. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

 

index.html

 

 

<div class="court">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

 

 

And now make a style.css file and copy paste the following code

 

 

style.css

 

 

html, body { margin: 0; padding: 0; height: 100%; width: 100%; position: relative; background: #282828; }

.court { display: grid; grid-template-rows: 40px 120px 120px 40px; grid-template-columns: 50px 200px 80px 80px 200px 50px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; border: solid 1px #fff; justify-content: center; align-content: center; }
.court > div { border: solid #fff; border-width: 1px 0 0 1px; transition: all 0.5s; cursor: pointer;  }
.court > div:hover { background: #fff; }
.court > div:nth-child(6), .court > div:nth-child(12), .court > div:nth-child(16), .court > div:nth-child(22) { border-right-width: 1px; }
.court > div:nth-last-child(-n+6) { border-bottom-width: 1px; }
.court > div:nth-child(9), .court > div:nth-child(10) { grid-row: 2/4; }
.court > div:nth-child(9) { grid-column: 3; }
.court > div:nth-child(10) { grid-column: 4; }

 

See also  Building a Live Webcam Video Recorder Which Uploads Videos to Google Drive in Javascript Full Project For Beginners

 

And now if you open the index.html file inside the browser you will see the below screenshot

 

 

 

Leave a Reply