From 733c0975eb0c5dfb78c7690934cd577ffce3707d Mon Sep 17 00:00:00 2001 From: mahak0711 Date: Tue, 16 Jul 2024 23:03:09 +0530 Subject: [PATCH 1/2] added new component --- index.css | 554 +++++++++++++++++++++++++++++++ index.html | 953 ++++++++++++++++++++++++++++++++++++++++------------- 2 files changed, 1287 insertions(+), 220 deletions(-) create mode 100644 index.css diff --git a/index.css b/index.css new file mode 100644 index 00000000..a3a2f9f5 --- /dev/null +++ b/index.css @@ -0,0 +1,554 @@ +/*works janky on mobile :<*/ +.column { + float: left; + width: 25%; + padding: 0 12px; + margin-top: 10px; + + } + + /* Remove extra left and right margins, due to padding */ + .row {margin: 10 -5px;} + + /* Clear floats after the columns */ + .row:after { + content: ""; + display: table; + clear: both; + } + + /* Responsive columns */ + @media screen and (max-width: 600px) { + #card { + padding: 10px; + } + #prompt { + font-size: 1.2rem; + } + .title { + font-size: 1.5rem; + } + .column { + width: 100%; + display: block; + margin-bottom: 20px; + margin-left: 20px; + } + } + .column2 { + float: right; + width: 25%; + padding: 0 15px; + margin-top: 15px; + + + } + + /* Remove extra left and right margins, due to padding */ + .row2 {margin: 0 117px;} + + /* Clear floats after the columns */ + .row2:after { + content: ""; + display: table; + clear: both; + } + + + @media screen and (max-width: 600px) { + #card { + padding: 10px; + } + #prompt { + font-size: 1.2rem; + } + .title { + font-size: 1.5rem; + } + .column2 { + width: 100%; + display: block; + margin-bottom: 20px; + } + } + + .column3 { + float: right; + width: 25%; + padding: 0 15px; + margin-top: 15px; + + + } + + /* Remove extra left and right margins, due to padding */ + .row3 {margin: 0 7px;} + + /* Clear floats after the columns */ + .row3:after { + content: ""; + display: table; + clear: both; + } + + + @media screen and (max-width:600px) { + .column3 { + width: 100%; + display: block; + margin-bottom: 20px; + } + } + .column4 { + float: right; + width: 25%; + padding: 0 15px; + margin-top: 15px; + + + } + + /* Remove extra left and right margins, due to padding */ + .row4 {margin: 0 17px;} + + /* Clear floats after the columns */ + .row4:after { + content: ""; + display: table; + clear: both; + } + + + @media screen and (max-width:600px) { + .column4 { + width: 100%; + display: block; + margin-bottom: 20px; + } + } + .column5{ + float: left; + width: 25%; + padding: 0 12px; + margin-top: 10px; + + } + + /* Remove extra left and right margins, due to padding */ + .row5 {margin: 10 -5px;} + + /* Clear floats after the columns */ + .row5:after { + content: ""; + + display: table; + clear: both; + } + + /* Responsive columns */ + @media screen and (max-width: 600px) { + .column5 { + width: 100%; + display: block; + margin-bottom: 20px; + margin-left: 20px; + } + } +.container1 { + position: relative; + width: 190px; + height: 254px; + transition: 200ms; + margin-left: 20px; + z-index: 20; + } + + .container1:active { + width: 180px; + height: 245px; + } + .container2 { + position: relative; + width: 190px; + height: 254px; + margin-left: 25px; + transition: 200ms; + z-index: 20; + } + + .container2:active { + width: 180px; + height: 245px; + } + .container3{ + position: relative; + width: 190px; + height: 254px; + transition: 200ms; + margin-left: 25px; + z-index: 20; + } + + .container3:active { + width: 180px; + height: 245px; + } + + #card { + position: absolute; + inset: 0; + z-index: 0; + display: flex; + justify-content: center; + align-items: center; + border-radius: 20px; + transition: 700ms; + background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); + } + + .subtitle { + transform: translateY(160px); + color: rgb(134, 110, 221); + text-align: center; + width: 100%; + } + + .title { + opacity: 0; + transition-duration: 300ms; + transition-timing-function: ease-in-out-out; + transition-delay: 100ms; + position: absolute; + font-size: x-large; + font-weight: bold; + color: white; + } + + .tracker:hover ~ #card .title { + opacity: 1; + } + + #prompt { + bottom: 8px; + left: 12px; + z-index: 20; + font-size: 20px; + + font-weight: bold; + transition: 300ms ease-in-out-out; + position: absolute; + max-width: 110px; + color: rgb(255, 255, 255); + } + + .tracker { + position: absolute; + z-index: 200; + width: 100%; + height: 100%; + } + + .tracker:hover { + cursor: pointer; + } + + .tracker:hover ~ #card #prompt { + opacity: 0; + } + + .tracker:hover ~ #card { + transition: 300ms; + filter: brightness(1.1); + } + + .container:hover #card::before { + transition: 200ms; + content: ''; + opacity: 80%; + } + + .canvas { + perspective: 800px; + inset: 0; + z-index: 200; + position: absolute; + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr 1fr 1fr; + gap: 0px 0px; + grid-template-areas: "tr-1 tr-2 tr-3 tr-4 tr-5" + "tr-6 tr-7 tr-8 tr-9 tr-10" + "tr-11 tr-12 tr-13 tr-14 tr-15" + "tr-16 tr-17 tr-18 tr-19 tr-20" + "tr-21 tr-22 tr-23 tr-24 tr-25"; + } + + #card::before { + content: ''; + background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); + filter: blur(2rem); + opacity: 30%; + width: 100%; + height: 100%; + position: absolute; + z-index: -1; + transition: 200ms; + } + + .tr-1 { + grid-area: tr-1; + } + + .tr-2 { + grid-area: tr-2; + } + + .tr-3 { + grid-area: tr-3; + } + + .tr-4 { + grid-area: tr-4; + } + + .tr-5 { + grid-area: tr-5; + } + + .tr-6 { + grid-area: tr-6; + } + + .tr-7 { + grid-area: tr-7; + } + + .tr-8 { + grid-area: tr-8; + } + + .tr-9 { + grid-area: tr-9; + } + + .tr-10 { + grid-area: tr-10; + } + + .tr-11 { + grid-area: tr-11; + } + + .tr-12 { + grid-area: tr-12; + } + + .tr-13 { + grid-area: tr-13; + } + + .tr-14 { + grid-area: tr-14; + } + + .tr-15 { + grid-area: tr-15; + } + + .tr-16 { + grid-area: tr-16; + } + + .tr-17 { + grid-area: tr-17; + } + + .tr-18 { + grid-area: tr-18; + } + + .tr-19 { + grid-area: tr-19; + } + + .tr-20 { + grid-area: tr-20; + } + + .tr-21 { + grid-area: tr-21; + } + + .tr-22 { + grid-area: tr-22; + } + + .tr-23 { + grid-area: tr-23; + } + + .tr-24 { + grid-area: tr-24; + } + + .tr-25 { + grid-area: tr-25; + } + + .tr-1:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg); + } + + .tr-2:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg); + } + + .tr-3:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg); + } + + .tr-4:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg); + } + + .tr-5:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg); + } + + .tr-6:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg); + } + + .tr-7:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg); + } + + .tr-8:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg); + } + + .tr-9:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg); + } + + .tr-10:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg); + } + + .tr-11:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg); + } + + .tr-12:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg); + } + + .tr-13:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); + } + + .tr-14:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg); + } + + .tr-15:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg); + } + + .tr-16:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg); + } + + .tr-17:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg); + } + + .tr-18:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg); + } + + .tr-19:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg); + } + + .tr-20:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg); + } + + .tr-21:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg); + } + + .tr-22:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg); + } + + .tr-23:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg); + } + + .tr-24:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg); + } + + .tr-25:hover ~ #card { + transition: 125ms ease-in-out; + transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg); + } + + .noselect { + -webkit-touch-callout: none; + /* iOS Safari */ + -webkit-user-select: none; + /* Safari */ + /* Konqueror HTML */ + -moz-user-select: none; + /* Old versions of Firefox */ + -ms-user-select: none; + /* Internet Explorer/Edge */ + user-select: none; + /* Non-prefixed version, currently + supported by Chrome, Edge, Opera and Firefox */ + } +.fa-square-plus{ + font-size: 70px; +} +.fa-palette{ + font-size: 70px; +} +.fa-caret-right,.fa-code{ + font-size: 70px; +} +.fa-id-card,.fa-bars,.fa-television{ + font-size: 70px; +} +.fa-square-caret-down,.fa-font,.fa-table-list,.fa-screwdriver-wrench{ + font-size: 70PX; +} +.fa-window-maximize,.fa-spinner,.fa-sliders,.fa-info-circle,.fa-magnifying-glass{ + font-size: 70px; +} diff --git a/index.html b/index.html index dcee9d43..60cc0ba5 100644 --- a/index.html +++ b/index.html @@ -5,23 +5,19 @@ - + - + - + + - Beautiify -
-
-
-
-
@@ -45,6 +41,12 @@
+
+
+
+
+
+