HOW TO CREATE CHESS BOARD USING HTML  AND  CSS


SOURCE CODES:-
FOR CSS:
.body{
    background: url(L.jpg);
}
.chessboard{
    width: 600px;
    height: 600px;
    margin: 15px auto;
    border: 15px solid #333;
    
}
.black{
    float: left;
    width: 75px;
    height: 75px;
    background-color: #999;
    font-size: 50px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.white{
    float: left;
    width: 75px;
    height: 75px;
    background-color: #fff;
    font-size: 50px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;

}

FOR HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="chess.css">
    <title>chessboard</title>
</head>
<body class="body">
    <div class="chessboard">
        <!--first-->
        <div class="white">&#9820;</div>
        <div class="black">&#9822;</div>
        <div class="white">&#9821;</div>
        <div class="black">&#9819;</div>
        <div class="white">&#9818;</div>
        <div class="black">&#9821;</div>
        <div class="white">&#9822;</div>
        <div class="black">&#9820;</div>
<!--second-->
        <div class="black">&#9823;</div>
        <div class="white">&#9823;</div>
        <div class="black">&#9823;</div>
        <div class="white">&#9823;</div>
        <div class="black">&#9823;</div>
        <div class="white">&#9823;</div>
        <div class="black">&#9823;</div>
        <div class="white">&#9823;</div>

<!--third-->
        
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>

 <!--forth-->       
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>

 <!--fifth-->       
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>

<!--sixth-->
        <div class="black"></div>       
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>
        <div class="black"></div>
        <div class="white"></div>

<!--seventh-->        
        <div class="white">&#9817;</div>
        <div class="black">&#9817;</div>
        <div class="white">&#9817;</div>
        <div class="black">&#9817;</div>
        <div class="white">&#9817;</div>
        <div class="black">&#9817;</div>
        <div class="white">&#9817;</div>
        <div class="black">&#9817;</div>

<!--eighth-->
        <div class="black">&#9814;</div>
        <div class="white">&#9816;</div>
        <div class="black">&#9815;</div>
        <div class="white">&#9813;</div>
        <div class="black">&#9812;</div>
        <div class="white">&#9815;</div>
        <div class="black">&#9816;</div>   
        <div class="white">&#9814;</div> 

    </div>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Image
HOW TO CREATE FORM USING HTML(INCLUDE CSS) to create this login pag e you need html and css code.the required code is below this is for html ! DOCTYPE   html > < html   lang = "en" > < head >      < title > Registration Form  </ title >      < link   rel = "stylesheet"   href = "style.css" > </ head >     < body >          < div   class = "loginbox" >           < img   src = "j.jpg"   class = "j" >             < form   style = " text-align: center; " >                 < p >< u >< i >< b > LOGIN </ b ></ i ></ u >   </ p >      ...
Read more

PreOrder,InOrder,PostOrder traversal using Iterations

 //inOrder traversal.... public List < Integer > inorderTraversal ( TreeNode root ) { List < Integer > ans = new ArrayList < Integer > ( ) ; Stack < TreeNode > st = new Stack < > ( ) ; if ( root == null ) return ans ; TreeNode node = root ; while ( true ) { if ( node != null ) { st . push ( node ) ; node = node . left ; } else { if ( st . isEmpty ( ) ) break ; node = st . pop ( ) ; ans . add ( node . val ) ; node = node . right ; } } return ans ; //preOrder traversal below..   public List < Integer > preorderTraversal ( TreeNode root ) {         List < Integer > ans = new ArrayList <>();         if (root== null )     ...
Read more

subset of array though recursion in java

 class Solution{     static Boolean isSubsetSum(int N, int arr[]){         // code here         ArrayList<ArrayList<Integer>> res = new ArrayList<>();// this is for storing result         find(0,arr,new ArrayList<Integer>() , res);     }     static void find(int idx ,int[] arr , ArrayList<Integer> cur, ArrayList<ArrayList<Integer>> res){         res.add(new ArrayList<>(cur));                  for(int i=idx;i<arr.length;i++){             cur.add(arr[i]);             find(i+1,arr, cur , res);             cur.remove(cur.get(cur.size()-1));         }     } }
Read more