diff --git a/animation/mobadratask3.css b/animation/mobadratask3.css new file mode 100644 index 0000000..008c1ec --- /dev/null +++ b/animation/mobadratask3.css @@ -0,0 +1,65 @@ + +*{ + margin: 0; + padding:0; + +} + + + + +section{ + display: flex; + width: 80%; + margin: 100px; + justify-content: space-between; + +} + + +img{ + width: 100%; +} + +.COFFE{ + background-color: beige; + display:flex; +} + +.CoffeCup{ + width: 50%; + animation: coffe 2.5s ; + align-self: center; + animation-iteration-count:infinite; + animation-timing-function:linear; + +} +.CD{ + width: 30%; + align-self: center; + padding: 30px; + text-align: center; +} +.CD > h1{ + color: brown; + font-family: Arial, Helvetica, sans-serif; + + +} + +@keyframes coffe { + 0%{ + transform: translatey(-15px); + } + 50%{ + transform: translateY(5px); + } + 100%{ + transform: translatey(-15px); + } +} + + + + + diff --git a/animation/mobadratask3.html b/animation/mobadratask3.html new file mode 100644 index 0000000..7c9d52c --- /dev/null +++ b/animation/mobadratask3.html @@ -0,0 +1,25 @@ + + +
+ + + + + +Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus ducimus, voluptatem necessitatibus expedita voluptate ut ea aspernatur rerum animi alias debitis obcaecati, culpa quod incidunt dolor asperiores! Reiciendis, molestias ipsam!
+ +