Showing posts with label html and css. Show all posts
Showing posts with label html and css. Show all posts

Just copy the code and paste to create a table in html and css

By  at August 09, 2019    
A List Bank Officer
Serial No Name Address Phone No
1.Saiful Dhaka 0173470..
2.Rana 0173523...
0155178...
3.Faruk Khulna 016728...

Just copy the code and paste in where you want to create the table.

<!DOCTYPE html>
<html>
<style type="text/css">
table,th,td {
border: 1px solid black;
border-collapse: collapse;
text-align: center;
padding: 10px 10px;
background-color: yellow;
color:#9400D3;
}
table{
width: 50%;
height: 500px;
margin: auto;

}
table,th {
background-color: #00CED1;
color: blue;
font-size: 20px;
}



</style>
<head>
<title>A List Bank Officer</title>
</head>
<body>
<div>
<table>
<tr>
<th>Serial No</th>
<th>Name</th>
<th>Address</th>
<th>Phone No</th>

</tr>
<tr>
<td colspan="2">1.Saiful</td>
<td rowspan="3">Dhaka</td>
<td>0173470..</td>

    </tr>
    <tr>
<td colspan="2" rowspan="2">2.Rana</td>
<td>0173523...</td>

</tr>
    <tr>
<td>0155178...</td>
</tr>
    <tr>
<td colspan="2">3.Faruk</td>
<td>Khulna</td>
<td>016728...</td>
</tr>

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

Just copy the code and paste to create a window in html and css

By  at August 09, 2019    
Just copy the code and paste in where you want to create the windows.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="Mustak" content="">
<title>Naika in window</title>

<style type="text/css">

.naika{
background-color: red;
width: 300px;
height: 250px;
margin: 10px auto;
position: relative;

}



.naika:before {
width: 150px;
height: 250px;
background: green;
content: '';
display: block;
clear: both;
position: absolute;
top: 0px;
left: 0px;
transition: 1s;

}
.naika:after {
width: 150px;
height: 250px;
background: green;
content: '';
display: block;
clear: both;
position: absolute;
top: 0px;
right: 0px;
transition: 1s;
}
.naika:hover:before{
left: -150px;
transform: rotateY(180deg);
background: yellow;
}
.naika:hover:after{
right: -150px;
transform: rotateY(180deg);
background: yellow;
}
p {
position: absolute;
top: 0px;
left:30px;

font-size: 40px;
color: blue;

}




</style>




</head>
<body>
<p>Open your window</p>
<div class="naika"></div>
<div class="naika"></div>

</body>
</html>
Naika in window Open your window

Just copy the code and paste to create a triangle in html and css

By  at August 09, 2019    
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Free Web tutorials">
  <meta name="keywords" content="HTML,CSS,XML,JavaScript">
  <meta name="Mustak" content="">

  <title>triangle</title>

<style type="text/css">
  .triangle{
 
    width: 0px;
    height: 0px;
    border-bottom: 200px solid green;
    margin: 0px;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    float: left;
   }
.boy{
width: 150px;
height: 150px;
margin: 100px auto;
background-color: blue;
position: relative;

}

.boy:before{
width: 75px;
height: 75px;
background-color: red;
content: '';
display: block;
clear: both;
position: absolute;
top: 150px;
left: 150px;

}
.boy:after{
width: 75px;
height: 75px;
background-color: green;
content: '';
display: block;
clear: both;
position: absolute;
top: -75px;
left: -75px;
}

.boy:hover:after{
width: 75px;
height: 75px;
background-color: green;
content: '';
display: block;
clear: both;
position: absolute;
top: 150px;
left: 150px;
transition: 1s;
}
.boy:hover:before{
width: 75px;
height: 75px;
background-color: red;
content: '';
display: block;
clear: both;
position: absolute;
top: -75px;
left: -75px;
transition: 1s;

}








</style>





</head>
<body>

<div class="triangle"></div>

<div class="boy"></div>
<div class="boy"></div>

</body>
</html>

triangle

Just copy the code and paste to get a animation in html and css

By  at August 09, 2019    
Animation with html and css . Just copy the code  and paste to get animation

<!DOCTYPE html>
<html>
<head>
<title>animation of football</title>
<style type="text/css">
.boy{
width: 300px;
  height: 300px;
  border-radius: 150px;
  background: linear-gradient(blue, pink,yellow);
  animation: mymove infinite;
  animation-duration: 10s;
  animation-duration: 10s;
   position: absolute;
 top: 50px;
 right: 0px;

}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1000px;}
}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1000px;}
}


.girl{
width: 300px;
  height: 300px;
  border-radius: 150px;
  background: linear-gradient(red, pink,pink,black);
  animation: mymove infinite;
  animation-duration: 6s;
  animation-duration: 6s;
   position: absolute;
 top: 0px;
 right: 0px;

}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

.you{
width: 300px;
  height: 300px;
  border-radius: 150px;
  background: blue;
  animation: mymove infinite;
  animation-duration: 8s;
  animation-duration: 8s;
   position: absolute;
 top: 100px;
 right: 0px;

}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

.she{
width: 300px;
  height: 300px;
  border-radius: 150px;
  background: red;
  animation: mymove infinite;
  animation-duration: 4s; 
  animation-duration: 4s;
   position: absolute;
 top: 70px;
 right: 0px;

}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}

}


.he{
width: 300px;
  height: 300px;
  border-radius: 150px;
  background: #8B0000;
  animation: mymove infinite;
  animation-duration: 2s;
  animation-duration: 2s;
   position: absolute;
 top: 50px;
 right: 0px;

}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}
}

@keyframes mymove {
  from {right: 0px;}
  to {right: 1100px;}

}
</style>
}
</head>
<body>

<div class="boy"></div>

<div class="girl"></div>
<div class="you"></div>
<div class="she"></div>
<div class="he"></div>

</body>
</html>
animation of football }