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: […]
Архивы по месяцам: Февраль 2022
30 записей
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; […]
3D Hover Effect code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>3D Hover Effect</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="main"> <div class="top"><h1>visual</h1></div> <div class="front"><h1>code</h1></div> </div> </body> </html> 2.style.css: body { background: rgb(0,225,255); margin: 0; padding: 0; } .main { text-align: center; width: 400px; height: 200px; position: absolute; top: […]
Loading Progress Bar code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Loading Progress Bar</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="Loading"></div> </div> </body> </html> 2.style.css: body { margin: 0; padding: 0; } .container { width: 50%; background: rgb(211,1,1); margin: 260px auto; position: relative; padding: 20px 40px; border-radius: 4px; […]
Animated Toggle Button code: 1.index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Animated Toggle Button</title> <link rel="stylesheet" href="style.css"> </head> <body> <button> <span class="line"></span> <span class="line"></span> <span class="line"></span> </button> </body> </html> 2.style.css: body { background: rgb(183,248,3); margin: 0; padding: 0; } button { background: transparent; width: 100px; height: 100px; position: absolute; top: […]