<html>
<head><title>All</title>
<style>
body {font-family: arial; margin: 0; text-align: center}
div, img {
transition: 1s ease-in-out;
}
.one, .two, .three {
border: 5px solid transparent;
width: 200px;
height: 100px;
margin: 0 auto;
padding: 10px;
}
.one {
background-color: #B0CBC4;
}
.one:hover {
border: #0000FF;
background-color: #FF0000;
border-radius:50%;
}
.two {
background-color: #9F908F;
}
.two:hover {
border: 5px inset #9F908F;
background-color: #E0CABB;
transform: rotateZ(-30deg);
}
.three {
background-color: #FBE2A9;
border: 5px solid #FFD18F;
outline: 5px solid transparent;
}
.three:hover {
outline: 5px solid #9E8463;
outline-offset: 5px;
}
.four {
width: 200px;
height: 100px;
background-color: #95A1B1;
margin: 0 auto;
}
.four:hover {
width: 250px;
height: 80px;
}
.five {
width: 100px;
height: 100px;
background-color: #E0CABB;
margin: 0 auto;
position: relative;
left: 50px;
}
.five:hover {
left: -50px;
}
img:hover {opacity: 0.2;}
.six {
width: 200px;
height: 200px;
margin: 0 auto;
background: url("ball.png");
background-repeat: no-repeat;
background-position: bottom center;
}
.six:hover {
background-position: top center;
}
}
</style>
</head>
<body>
<div class="box"><div class="one"> Хүрээ, дэвсгэр өнгө, хэлбэр
</div></div> <br>
<div class="box"><div class="two"> Хэлбэр, дэвсгэр өнгө
</div></div> <br>
<div class="box"><div class="three">Гадна хүрээ </div></div>
<br>
<div class="box"><div class="four"> Хэмжээ </div></div> <br>
<div class="box"><div class="five"> Байрлал </div></div> <br>
<div class="box"><div> Уусалт </div> <img src="car.jpeg">
</div> <br>
<div class="box"><div class="six"> Дэвсгэр зургийн байрлал
</div></div> <br>
</body>
</html>
No comments:
Post a Comment