Virág Design

Kód:

<div class="qpm1"><img src="https://jegvirag.gportal.hu/portal/jegvirag/image/gallery/1647265506.jpg"><h1>Virág Design</h1><div class="qpm2"><a href="//jegvirag.gportal.hu">LINK</a><a href="//jegvirag.gportal.hu">LINK</a><a href="//jegvirag.gportal.hu">LINK</a></div><div class="qpm3"><h4>Portálépítés és portáldíszítés kezdőknek és haladóknak! Rengetek leírás, JavaScriptek , CSS ,HTML kódok,Design!</h4></div></div><link href="https://fonts.googleapis.com/css?family=Cabin:700" rel="stylesheet"><style>.qpm1 { width: 400px; height: 130px; background: #A7C9D9; margin: 10px auto; position: relative; }.qpm1 img { width: 130px; }.qpm1:before { width: 0; height: 0; border-right: 30px solid #A7C9D9; border-top: 130px solid transparent; content: ""; position: absolute; top: 0; left: 100px; }.qpm1 h1 { transition: 1s; margin: 0; position: absolute; top: 0; right: 0; text-align: center; display: block; width: 300px; font: 700 30px/4.2 cabin; color: white; letter-spacing: 1px; }.qpm1 h1:after { content: "."; color: #B37085; }.qpm2 { transition: 1s; opacity: 0; position: absolute; top: 50px; right: 0; width: 300px; text-align: center; font: bold 8px/100% calibri; text-transform: uppercase; letter-spacing: 1px; }.qpm2 a { margin-right: 10px; text-decoration: none; color: white; }.qpm2 a:last-child { margin-right: 0; }.qpm2 a:before { content: "["; margin-right: 4px; }.qpm2 a:after { content: "]"; margin-left: 4px; }.qpm3 { transition: 1s; opacity: 0; width: 90px; height: 120px; background: rgba(255,255,255,.4); position: absolute; top: 5px; left: 5px; }.qpm3:before { width: 0; height: 0; border-left: 28px solid rgba(255,255,255,.4); border-bottom: 120px solid transparent; content: ""; position: absolute; right: -28px; top: 0; }.qpm3 h4 { background: white; width: 70px; height: 100px; position: absolute; top: 5px; left: 5px; margin: 0; font: bold 9px/100% calibri; text-transform: uppercase; letter-spacing: 1px; padding: 5px; text-align: justify; word-spacing: -2px; }.qpm3 h4:before { width: 0; height: 0; border-left: 25px solid white; border-bottom: 110px solid transparent; content: ""; position: absolute; right: -25px; top: 0; }.qpm1:hover h1 { top: 12px; transition: 1s; }.qpm1 a:hover { color: #A64765; }.qpm1:hover .qpm2, .qpm1:hover .qpm3 { opacity: 1; transition: 1s .4s; }</style>