djdj - HTMLify profile
djdj
470 Files
102981 Views
Latest files of /djdj/youtube
images/
djdj/youtube/images/
animated_acc/
djdj/youtube/animated_acc/
Flower
djdj/youtube/Flower.html
<style>
body {
margin: 0;
padding: 30px;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
body {
margin: 0;
padding: 30px;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
Tranform & Transition
djdj/youtube/Transform.html
<style>
body{
background-color: black;
}
.box {
width: 100px;
height: 100px;
background-color: rgb(103, 103, 244);
body{
background-color: black;
}
.box {
width: 100px;
height: 100px;
background-color: rgb(103, 103, 244);
Card Flip
djdj/youtube/Cardflip.html
<style>
body{
background-color: black;
}
.card{
display:flex;
align-items: center;
position: relative;
body{
background-color: black;
}
.card{
display:flex;
align-items: center;
position: relative;
Web Pdf Viewer
djdj/youtube/pdfViewer.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Modal Example</title>
<style>
body{
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Modal Example</title>
<style>
body{
html-tags-list.pdf
djdj/youtube/html-tags-list.pdf
Media file
Slide Nav Bar
djdj/youtube/slidenavbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sidebar</title>
<style>
* {
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sidebar</title>
<style>
* {
Theme Changes
djdj/youtube/theme.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Switcher</title>
<style>
/* Basic Reset */
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Theme Switcher</title>
<style>
/* Basic Reset */
Best Navigation Bar
djdj/youtube/nextnavbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sidebar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Sidebar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<style>
More than 1 file upload
djdj/youtube/uploadfile.html
<!DOCTYPE html>
<html>
<head>
<title>Upload Multiple Images or PDFs</title>
<style>
#uploadBox {
border: 2px dashed #aaa;
padding: 20px;
<html>
<head>
<title>Upload Multiple Images or PDFs</title>
<style>
#uploadBox {
border: 2px dashed #aaa;
padding: 20px;
Chat
djdj/youtube/chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive Chat UI</title>
<style>
* {
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Responsive Chat UI</title>
<style>
* {
Cursor Canva
djdj/youtube/cursor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Cursor Effect</title>
<style>
*
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Cursor Effect</title>
<style>
*
djdj/youtube/loader.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Loading</title>
<style>
* {
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Animated Loading</title>
<style>
* {
djdj/youtube/progressbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download the progress animation button</title>
<style>
.button {
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Download the progress animation button</title>
<style>
.button {
Solar System
djdj/youtube/solarsys.html
<!DOCTYPE html>
<html>
<head>
<title>Solar System</title>
<style>
body {
margin: 0;
height: 100vh;
<html>
<head>
<title>Solar System</title>
<style>
body {
margin: 0;
height: 100vh;
Clock
djdj/youtube/clock.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Analog Clock</title>
<style>
* {
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Analog Clock</title>
<style>
* {
Linkedin Loader
djdj/youtube/Liloader.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puzzle Animation</title>
<style>
* {
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Puzzle Animation</title>
<style>
* {
Spring Loder
djdj/youtube/SpringLoder.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Rotating Spring Loop</title>
<style>
body, html {
margin: 0;
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Rotating Spring Loop</title>
<style>
body, html {
margin: 0;
Loder 1
djdj/youtube/Loder1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Rotating Spring Loop</title>
<style>
body, html {
margin: 0;
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Rotating Spring Loop</title>
<style>
body, html {
margin: 0;
Loder 2
djdj/youtube/Loder2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Lissajous Curve Animation</title>
<style>
body {
margin: 0;
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Lissajous Curve Animation</title>
<style>
body {
margin: 0;
Loder 3
djdj/youtube/Loder3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Designer Lissajous Glow</title>
<style>
html, body {
margin: 0;
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Designer Lissajous Glow</title>
<style>
html, body {
margin: 0;
Loder 4
djdj/youtube/Loder4.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Circular Lissajous Glow</title>
<style>
html, body {
margin: 0;
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Circular Lissajous Glow</title>
<style>
html, body {
margin: 0;