djdj - HTMLify profile
djdj
515 Files
147628 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;
arattai-logo.png
djdj/youtube/arattai-logo.png
Media file
arattai.svg
djdj/youtube/arattai.svg
<?xml version="1.0" encoding="UTF-8"?><svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 158 158"><defs><style>.cls-1{fill:#fd0;}.cls-2{fill:#303863;}</style></defs><rect class="cls-1" width="158" height="158" rx="12.16" ry="12.16"/><g id="gwI8x0.tif"><g><path class="cls-2" d="m103.61,113.7v-.67c0-24.4,0-48.8,0-73.19,0-.74,0-.74-.76-.74-17.19,0-34.38,0-51.56,0-.14,0-.29.01-.52.03,0,.25,0,.48,0,.7,0,4.75,0,9.5,0,14.26,0,2.58-1.55,4.62-3.98,5.3-3.33.93-6.78-1.6-6.81-5.07-.04-5.21-.05-10.42,0-15
