diff --git a/QRcode/index.html b/QRcode/index.html new file mode 100644 index 0000000..20ed5aa --- /dev/null +++ b/QRcode/index.html @@ -0,0 +1,42 @@ + + + + + + + Fun Fusion + + + + + +
+

Enter your trxt or URL

+ +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/QRcode/style.css b/QRcode/style.css new file mode 100644 index 0000000..597182b --- /dev/null +++ b/QRcode/style.css @@ -0,0 +1,83 @@ +*{ + margin: 0; + padding: 0; + font-family: 'Poppins', sans-serif; + box-sizing: border-box; +} +body{ + background: #262a2f; +} +.container{ + width: 400px; + padding: 25px 35px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50% , -50%); + background: #fff; + border-radius: 10px; +} +.container p{ + font-weight: 600; + font-size: 15px; + margin-bottom: 8px; +} +.container input{ + width: 100%; + height: 50px; + border: 1px solid #494eea; + outline: 0; + padding: 10px; + margin: 10px 0 20px; + border-radius: 5px; +} +.container button{ + width: 100%; + height: 50px; + background: #494eea; + color: #fff; + border: 0; + outline: 0; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0 , 0, 0 , 0.1); + cursor: pointer; + margin: 20px 0; + font-weight: 500; +} +#imgBox{ + width: 200px; + border-radius: 5px; + max-height: 0; + overflow: hidden; + transition: max-height 1s; +} +#imgBox img{ + width: 100%; + padding: 10px; +} +#imgBox.show-img{ + max-height: 300px; + margin: 10px auto; + border: 1px solid #d1d1d1; + +} +.error{ + animation: shake 0.1s linear 10; +} +@keyframes shake { + 0%{ + transform: translateX(0); + } + 25%{ + transform: translateX(-2px); + } + 50%{ + transform: translateX(0); + } + 70%{ + transform: translateX(2px); + } + 100%{ + transform: translateX(0); + } +} \ No newline at end of file diff --git a/index.html b/index.html index c459448..341e47d 100644 --- a/index.html +++ b/index.html @@ -794,6 +794,12 @@

Alarm Clock


+
+ +

QR Generator

+ +
+