Блог

 .Image_Cont {  top: 20%;  left: 40%;  position: absolute;  width: 300px;  height: 450px;  background-color: #fff;  overflow: hidden; }  .Scroll_Image {  top: 0%;  left: 0%;  position: absolute;  width: 100%;  height: 100%; }  .Image {  width: 100%;  height: 100%;  position: relative;  -webkit-animation-name: slide_animation;  -webkit-animation-duration: 3s; /* changed from 33s for demo purposes */  -webkit-animation-iteration-count: infinite;  -webkit-animation-direction: alternate;  -webkit-animation-play-state: running; }  .Image img {  top: 0%;  left: 0%;  width: 100%;  height: 100%; }  @-webkit-keyframes slide_animation {  0% {  left: 0px;  }  10% {  left: 0px;  }  20% {  left: 300px;  }  30% {  left: 300px;  }  40% {  left: 600px;  }  50% {  left: 600px;  }  60% {  left: 300px;  }  70% {  left: 300px;  }  80% {  left: 0px;  }  90% {  left: 0px;  }  100% {  left: 0px;  } } 

 lt;!DOCTYPE HTMLgt; lt;html lang="en"gt;  lt;headgt;  lt;meta charset="UTF-8"gt;  lt;meta name="viewport" content="width=device-width, initial-scale=1.0"gt;  lt;link href="CSS/style.css" rel="stylesheet" type="text/css" /gt;  lt;titlegt;Homepagelt;/titlegt; lt;/headgt;  lt;bodygt;  lt;headergt;  lt;a href="index.html" class="header-logo"gt; lt;img src="CSS/images/Logo.jpeg" alt="BeMe Logo"gt;lt;/agt;  lt;navgt;  lt;ulgt;  lt;ligt;lt;a href="products.html"gt;Productslt;/agt;lt;/ligt;  lt;ligt;lt;a href="about_us.html"gt;About uslt;/agt;lt;/ligt;  lt;ligt;lt;a href="contact_us.html"gt;Contact uslt;/agt;lt;/ligt;  lt;ligt;lt;a href="find_us.html"gt;Find uslt;/agt;lt;/ligt;  lt;ligt;lt;a href="basket.html"gt;Basketlt;/agt;lt;/ligt;  lt;/ulgt;  lt;/navgt;  lt;/headergt;  lt;maingt;  lt;div class="Image_Cont"gt;  lt;div class="Scroll_Image"gt;  lt;div class="Image"gt;  lt;img src="CSS/images/Logo_Rot.jpeg" alt="Logo rotated"gt;  lt;/divgt;  lt;div class="Image"gt;  lt;img src="CSS/images/Female_Cln.jpeg" alt="Example of Female Clone"gt;  lt;/divgt;  lt;div class="Image"gt;  lt;img src="CSS/images/Male_Cln.jpeg" alt="Example of Male Clone"gt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/maingt; lt;/bodygt;  lt;/htmlgt;