Animated cup with cappuccino code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animated cup with cappuccino</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="cup"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class="plate"></div> </body> </html> 2.style.css: body { background: rgb(159,224,255); margin: 0; padding: 0; } .cup { position: absolute; top: […]
Архивы по годам: 2022
218 записей
3D Jumping Text Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Jumping Text Effect</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1> <span>J</span> <span>U</span> <span>M</span> <span>P</span> <span>I</span> <span>N</span> <span>G</span> </h1> </body> </html> 2.style.css: body { margin: 0; padding: 0; background: rgb(0,238,255); } h1 { margin: 0; padding: 0; position: […]
Animation Effects code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animation Effects</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </body> </html> 2.style.css: body { margin: 0; padding: 0; position: absolute; left: 40%; top: 20%; } ul li { list-style: none; width: 200px; […]
Image Slide on Hover code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Image Zoom Effect</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <img src="image.jpg"> </div> </body> </html> 2.style.css: body { background: rgb(131, 223, 247); margin: 0; padding: 0; } .container { width: 300px; height: 200px; position: absolute; top: 50%; left: […]
Video in background code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Video in background</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="video-container"> <video preload="auto" autoplay="autoplay" type="video/mp4" src="background.mp4" loop></video> <div class="content"> <h1>Video in background</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus quaerat quo magni culpa consectetur deleniti vero, hic […]
Animated Heart code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animated Heart</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="heart"></div> </body> </html> 2.style.css: body { background: rgb(10,255,22); margin: 0; padding: 0; } .heart { width: 180px; height: 100px; position: absolute; top: 40%; left: 35%; background: rgb(253,38,242); transition: 1s; transform-origin: right bottom; […]
3D Div Pointer Code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Div Pointer</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>3D Div Pointer</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus consequatur soluta nulla, sequi numquam mollitia delectus fuga molestiae iste in ea ullam reprehenderit nam minus […]
Div Pointer code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Div Pointer</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <h1>Div Pointer</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum natus quis ratione ad eaque est repellendus, officiis porro autem, modi dicta reprehenderit non laborum facere hic consectetur maxime […]
Skewed Background code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Skewed Background</title> <link rel="stylesheet" href="style.css"> </head> <body> <section class="skewedBox"> <div class="container"> <h1>Visual Code</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro quia odit blanditiis facere deserunt nobis tempore esse accusantium tenetur doloremque autem, atque sint aperiam ut nam voluptates […]
Changing Background Color code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Changing Background Color</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Changing Background Color</h1> </body> </html> 2.style.css: body { margin: 0; padding: 0; animation: bgcolor infinite 15s; } h1 { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 4em; color: #fff; […]