diff --git a/Glassmorphism_Cards/Metamask-icon.png b/Glassmorphism_Cards/Metamask-icon.png new file mode 100644 index 0000000..046804f Binary files /dev/null and b/Glassmorphism_Cards/Metamask-icon.png differ diff --git a/Glassmorphism_Cards/Untitled_design_1_-removebg-preview.631ca0cce58337.11261255.png b/Glassmorphism_Cards/Untitled_design_1_-removebg-preview.631ca0cce58337.11261255.png new file mode 100644 index 0000000..4d1a581 Binary files /dev/null and b/Glassmorphism_Cards/Untitled_design_1_-removebg-preview.631ca0cce58337.11261255.png differ diff --git a/Glassmorphism_Cards/chip.png b/Glassmorphism_Cards/chip.png new file mode 100644 index 0000000..c32d35a Binary files /dev/null and b/Glassmorphism_Cards/chip.png differ diff --git a/Glassmorphism_Cards/index.html b/Glassmorphism_Cards/index.html new file mode 100644 index 0000000..0d4e0bb --- /dev/null +++ b/Glassmorphism_Cards/index.html @@ -0,0 +1,101 @@ + + + + + + + + + + + + + + + + +
+ + +

Glassmorphic Credit Card

+
+ +
3256 2335 5669 4566
+
SHASHANK PANDEY
+
+ +

Glassmorphic Identity Card

+
+ +
Picture
+
SHASHANK PANDEY
+
B.TECH CSE
+
Institute of Technical Research and Education
+
Siksha 'O' Anusandhan University
+
+ +

Glassmorphic Banner

+
banner text
+ +

Glassmorphic Circle

+
metamask
+ +

Glassmorphic Visiting Card

+
+ +
+ +

+917428730894

+
+
+

Glassmorphic Voucher

+
+
+

VOUCHER

+

Valid Until 24 July 2025

+
+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae incidunt magnam dolorem.

+
+
+
+

VOUCHER

+

$25

+
+
+
+ + + + + \ No newline at end of file diff --git a/Glassmorphism_Cards/login_page.html b/Glassmorphism_Cards/login_page.html new file mode 100644 index 0000000..ab146c9 --- /dev/null +++ b/Glassmorphism_Cards/login_page.html @@ -0,0 +1,49 @@ + + + + + + + + + Login Page + + + + + + +
+
+

Login

+
+ + +
+
+ + +
+ +
+ + Forgot password? +
+ + + +
+

Don't have an account?Register

+
+ +
+ Designed by Alisha Subhamayee Pradhan + +
+ +
+
+ + + + \ No newline at end of file diff --git a/Glassmorphism_Cards/login_page_style.css b/Glassmorphism_Cards/login_page_style.css new file mode 100644 index 0000000..4627a3d --- /dev/null +++ b/Glassmorphism_Cards/login_page_style.css @@ -0,0 +1,143 @@ + +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&&display=swap'); + +*{ + margin:0; + padding:0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} + +body{ + display:flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background: url('science-fiction-1819026_1280.png') no-repeat; + background-size: cover; + background-position: center; +} + +.wrapper{ + width:420px; + background: transparent; + border: 2px solid rgba(255, 255, 255, .2); + backdrop-filter: blur(15px); + box-shadow: 0 0 10px rgba(0, 0, 0, .2); + color: #fff; + border-radius: 10px; + padding: 30px 40px; +} + +.wrapper h1{ + font-size: 36px; + text-align:center; + color: rgb(64, 36, 36); +} + +.wrapper .input-box{ + position: relative; + width:100%; + height:50px; + margin: 30px 0px; +} + +.input-box input{ + height:100%; + width:100%; + background:transparent; + border:none; + outline:none; + border: 2px solid rgba(255, 255, 255, .2); + border-radius: 40px; + font-size: 16px; + color:#fff; + padding: 20px 25px 20px 20px; +} + +.input-box input::placeholder{ + color:#fff; +} + +.input-box i{ + position: absolute; + right:20px; + top:50%; + transform: translateY(-50%); + font-size: 20px; +} + +.wrapper .remember-forgot{ + display: flex; + justify-content: space-between; + font-size: 14.5px; + margin: -15px 0 15px; +} + +.remember-forgot label input{ + color:#fff; + margin-right: 3px; +} + +.remember-forgot a{ + color:#fff; + text-decoration: none; +} + +.remember-forgot a:hover{ + text-decoration: underline; +} + +.wrapper .btn{ + width:100%; + height:45px; + background:#fff; + border: none; + outline: none; + border-radius:40px; + box-shadow: 0 0 10px rgba(0, 0, 0, .1); + cursor: pointer; + font-size: 16px; + color:#333; + font-weight: 600; +} + +.wrapper .register-link{ + font-size:14.5px; + text-align:center; + margin: 20px 0 15px; +} + +.register-link p a{ + color: #fff; + text-decoration: none; + font-weight: 600; +} + +.register-link p a:hover{ + text-decoration: underline; +} + +.about-me{ + text-align: center; +} + +#me{ + width:100%; + font-weight: 300; + font-size: 12px; +} + +#git_Icon{ + display:flex; + justify-content: center; +} + +.about-me button{ + border:none; + padding:5px; + padding-top: 2px; + padding-bottom: 2px; + border-radius:100%; +} + diff --git a/Glassmorphism_Cards/phone.png b/Glassmorphism_Cards/phone.png new file mode 100644 index 0000000..3e5f21d Binary files /dev/null and b/Glassmorphism_Cards/phone.png differ diff --git a/Glassmorphism_Cards/science-fiction-1819026_1280.png b/Glassmorphism_Cards/science-fiction-1819026_1280.png new file mode 100644 index 0000000..803099b Binary files /dev/null and b/Glassmorphism_Cards/science-fiction-1819026_1280.png differ diff --git a/Glassmorphism_Cards/style.css b/Glassmorphism_Cards/style.css new file mode 100644 index 0000000..a9d760d --- /dev/null +++ b/Glassmorphism_Cards/style.css @@ -0,0 +1,607 @@ +body{ + font-family: "Open Sans", sans-serif; + margin: 0; + width: 100%; + background: #833ab4; + background: -webkit-linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); + background: linear-gradient(to right, #fcb045, #fd1d1d, #833ab4); +} +#menu { + /* background: #080808; */ + color: #FFF; + height: 8vh; + width: 90vw; + padding-top: 3px; + padding-bottom: 3px; + padding-left: 18px; + border-radius: 0px; + background: rgba(39, 38, 38, 0.75); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.75); + margin: 0px 3rem; + margin-top: -4.5rem; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + opacity: 0.85; + position: fixed; + z-index: 2; +} +#menu ul, #menu li { + margin: 0 auto; + padding: 0; + list-style: none +} +#menu ul { + width: 100%; +} +#menu li { + float: left; + display: inline; + position: relative; +} +#menu a { + display: block; + line-height: 45px; + padding: 5px 15px; + text-decoration: none; + color: #FFFFFF; + font-size: 20px; + display: flex; + justify-content: center; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; +} +#menu a.dropdown-arrow:after { + content: "\25BE"; + margin-left: 5px; +} +#menu li a:hover { + color: black; + background: #F2F2F2; + opacity: 0.75; +} +#menu input { + display: none; + margin: 0; + padding: 0; + height: 45px; + width: 100%; + opacity: 0; + cursor: pointer +} +#menu label { + display: none; + line-height: 45px; + text-align: center; + position: absolute; + left: 35px +} +#menu label:before { + font-size: 1.6em; + content: "\2261"; + margin-left: 20px; +} +#menu ul.sub-menus{ + height: auto; + overflow: hidden; + width: 170px; + background: #444444; + position: absolute; + z-index: 99; + display: none; +} +#menu ul.sub-menus li { + display: block; + width: 100%; +} +#menu ul.sub-menus a { + color: #FFFFFF; + font-size: 16px; +} +#menu li:hover ul.sub-menus { + display: block +} +#menu ul.sub-menus a:hover{ + background: #F2F2F2; + color: #444444; +} +@media screen and (max-width: 800px){ + #menu{height: 8vh;width: 90vw;margin: 0rem 1rem;margin-top: -4.5rem;} + #menu ul {background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none} + #menu ul.sub-menus {width:100%;position:static;} + #menu ul.sub-menus a {padding-left:30px;} + #menu li {display:block;float:none;width:auto;} + #menu input, #menu label {position:absolute;top:0;left:0;display:block} + #menu input {z-index:4} + #menu input:checked + label {color:white} + #menu input:checked + label:before {content:"\00d7"} + #menu input:checked ~ ul {display:block} +} +.demo{ + background:linear-gradient(90deg,#cc2b5e,#753a88); +} +.menu-button{ + color: #000; + padding: 10px; + font-weight: 200; + background-color: rgba(196, 191, 191, 0.5) ; + border-radius: 5px; + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + -ms-border-radius: 5px; + -o-border-radius: 5px; + vertical-align: 1.1px; + gap: 10px; +} +.menu-button:hover{ + color: #fff; +} +.heading{ + + background: rgba( 255, 255, 255, 0.25 ); + box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); + backdrop-filter: blur( 1px ); + -webkit-backdrop-filter: blur( 1px ); + border-radius: 10px; + border: 1px solid rgba( 255, 255, 255, 0.18 ); + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + padding: 10px; + +} +.main{ + display: block; + width:80%; + background: rgba(39, 38, 38, 0.75); + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.75); + margin: 80px auto; + border-radius: 10px; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + -ms-border-radius: 10px; + -o-border-radius: 10px; + opacity: 0.75; + padding-bottom: 1rem; +} +.main-heading{ + color: #fff; + + text-align: center; + margin: auto; + padding-top: 10px; + padding-bottom: 10px; + font-family: Verdana, Geneva, Tahoma, sans-serif; + font-weight: 300px; + font-size: 30px; + margin-bottom: 10px; + + + +} + +.box-1{ + display:block; + width: 50%; + height: 285px; + min-width: auto; + margin: auto; + margin-bottom: 10px; + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 8px 32px 0 rgba(124, 127, 149, 0.5); + backdrop-filter: blur( 4px ); + -webkit-backdrop-filter: blur( 4px ); + border-radius: 10px; + border: 1px solid rgba( 255, 255, 255, 0.18 ); +} +.box-2{ + display:block ; + width: 22%; + height: 350px; + min-width: auto; + margin: auto; + margin-bottom: 10px; + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 8px 32px 0 rgba(124, 127, 149, 0.5); +backdrop-filter: blur( 4px ); +-webkit-backdrop-filter: blur( 4px ); +border-radius: 10px; +border: 1px solid rgba(227, 219, 219, 0.18); + +} +.box-3{ + display:block ; + padding: auto; + width: 80%; + height: 250px; + min-width: auto; + margin: auto; + margin-bottom: 10px; + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 8px 32px 0 rgba(124, 127, 149, 0.5); +backdrop-filter: blur( 4px ); +-webkit-backdrop-filter: blur( 4px ); +border-radius: 10px; +border: 1px solid rgba( 255, 255, 255, 0.18 ); +} +.box-4{ + display:block; + width: 50%; + height: 285px; + min-width: auto; + margin: auto; + margin-bottom: 10px; + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 8px 32px 0 rgba(124, 127, 149, 0.5); + backdrop-filter: blur( 4px ); + -webkit-backdrop-filter: blur( 4px ); + border-radius: 10px; + border: 1px solid rgba( 255, 255, 255, 0.18 ); +} +.box-4 { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.box-5{ + display:block; + width: 50%; + height: 174px; + min-width: auto; + margin: auto; + margin-bottom: 10px; + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 8px 32px 0 rgba(124, 127, 149, 0.5); + backdrop-filter: blur( 4px ); + -webkit-backdrop-filter: blur( 4px ); + border-radius: 10px; + border: 1px solid rgba( 255, 255, 255, 0.18 ); + display: flex; + flex-direction: row; +} +.visiting-logo img{ + width: 60%; + height: 100%; +} +.visiting-logo{ + display: flex; + justify-content: center; + align-items: center; +} +.details img{ + width: 1rem; + height: 1rem; +} +.details{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} +.left-voucher{ + width: 70%; + height: 85%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.left-voucher h2{ + color: #fff; + font-weight: 900; + font-size: 250%; + margin-bottom: 0.5rem; +} +.valid{ + font-size: 110%; + margin-top: 0; + color: #fff; + margin-bottom: 0.5rem; +} +.valid span{ + font-weight: 800; + color: #fff; +} +.left-voucher hr{ + width: 12.5rem; + margin-top: 0; + margin-bottom: 0.5rem; +} +.lorem{ + margin-top: 0; + text-align: center; + font-size: small; + width: 18rem; + color: #fff; +} +.right-voucher{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; +} +.right-voucher h2{ + transform: rotate(-90deg); + font-size: 1.5rem; + font-weight: lighter; + margin-left: -7rem; + color: #000; + +} +.right-voucher h3{ + transform: rotate(-90deg); + margin-left: -4rem; + font-weight: 900; + font-size: 3rem; + color: #000; +} +.right-voucher hr{ + transform: rotate(90deg); + width: 174px; +} +.foot{ + background-color: #000; + width: 100%; + text-align: center; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + vertical-align: -2px; +} +.circle{ + display:block ; + height: 200px; + width: 200px; + min-width: auto; + margin: auto; + margin-bottom: 20px; + background: rgba(255, 255, 255, 0.25); + box-shadow: 0 8px 32px 0 rgba(124, 127, 149, 0.5); + backdrop-filter: blur( 4px ); + -webkit-backdrop-filter: blur( 4px ); + border-radius: 50% ; + border: 1px solid rgba( 255, 255, 255, 0.18 ); + -webkit-border-radius: 50% ; + -moz-border-radius: 50% ; + -ms-border-radius: 50% ; + -o-border-radius: 50% ; + padding: auto; +} +.logo{ + width: 20px; + height: 20px; + vertical-align: -4px; +} +.navbar{ + width: 100%; + background-color: #000; + display: block; + position: absolute; + border-radius: 0%; + -webkit-border-radius: 0%; + -moz-border-radius: 0%; + -ms-border-radius: 0%; + -o-border-radius: 0%; +} +.right{ + float: right; +} + +.footer-text{ + color: #fff; + margin: 5px auto; +} + +.card-logo{ + display: flex; + flex-direction: row; +} + +.relief{ + height: 30%; + width: 40%; + margin-left: 1%; + margin-top: 2%; +} + +.chip { + height: 10%; + width: 15%; + margin-left: 40%; +} + +.card-number{ + height: 18%; + width: 90%; + font-size: 150%; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + letter-spacing: 2px; + margin-left: 4%; + margin-top: 20%; + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: #fff; + overflow: hidden; + padding: 2px; + text-align: center; +} + +.box-1 .name{ + text-align: center; + margin-right: 32%; + margin-top: -15px; + font-size: 80%; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + letter-spacing: 2px; + margin-left: 4%; + font-family: Verdana, Geneva, Tahoma, sans-serif; + color: #fff; + opacity: 0.3; +} + +.card2-logo img{ + align-items: center; + height: 30%; + width: 70%; + margin-top: 2%; + margin-left: 16% ; +} +.card-name{ + text-align: center; + font-size: 110%; + margin: 5%; + color: #fff; + overflow: hidden; + font-weight: bold; +} +.img img{ + height: 40%; + width: 50%; + border: 1px solid black; + padding: 5px; + border-radius: 50%; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + -ms-border-radius: 50%; + -o-border-radius: 50%; + box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.75);; +} +.img{ + margin-left: 30%; +} +.university{ + text-align: center; + font-size: 90%; + margin: 2%; + color: #fff; + overflow: hidden; + padding: 0rem 2rem; +} +.college{ + text-align: center; + font-size: 90%; + margin-top: 5%; + color: #fff; + padding: 0rem 2rem; +} +.card-profes{ + text-align: center; + font-size: 90%; + margin: 5%; + color: #fff;} + +.box-3 img{ + margin-top:3% ; + margin-left: 21%; + height: 80%; + width: 70%; +} +.circle img{ + height: 60%; + width: 60%; + + margin-left: 20% ; + margin-top: 20%; +} +:-webkit-scrollbar { + width: 15px; + } + + ::-webkit-scrollbar-track { + box-shadow: inset 0 0 5px grey; + border-radius: 10px; + } + + ::-webkit-scrollbar-thumb { + background: linear-gradient(45deg, #fcb045, #fd1d1d, #833ab4); + border-radius: 10px; + } + + ::-webkit-scrollbar-thumb:hover { + background: linear-gradient(135deg, #fcb045, #fd1d1d, #833ab4); + } + :root { + --bg: rgb(137, 144, 158); + --bg-input: #141419; +} + + +:root{ + --bg:linear-gradient(to top right, #363690 41%, #3ec7f5 100%); + + --bg-input: #e1e1ed; +} + + +/* light mode edited */ + +.light-mode { + --bg: linear-gradient(to left, #2a2d30, #080a0c); + --bg-input: #fcf9f9; +} + +body { + background: var(--bg); + color: var(--color-text); + /*font-weight: 500; + display: flex;*/ +} + +.switch { + position: absolute; + margin-left: -9999px; + visibility: hidden; +} + +.switch+label { + display: block; + position: relative; + cursor: pointer; + outline: none; + user-select: none; +} + +.switch+label { + padding: 2px; + width: 52px; + height: 27px; + background-color: var(--color-border), rgba(23, 21, 21, 0.3); + border-radius: 100px; +} + +.switch+label:before, +.switch+label:after { + display: block; + position: absolute; + top: 1px; + left: 1px; + bottom: 1px; + content: ""; +} + +.switch+label:before { + right: 1px; + background-color: var(--bg-input); + border-radius: 60px; + transition: all 0.4s; +} + +.switch+label:after { + width: 30px; + background-color: #fff; + border-radius: 100%; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); + transition: all 0.4s; +} + +.switch:checked+label:before { + background-color: #f3eff5; +} + +.switch:checked+label:after { + transform: translateX(30px); +} diff --git a/Glassmorphism_Cards/tic-tac-toe/index.html b/Glassmorphism_Cards/tic-tac-toe/index.html new file mode 100644 index 0000000..ddb3fa8 --- /dev/null +++ b/Glassmorphism_Cards/tic-tac-toe/index.html @@ -0,0 +1,149 @@ + + + + + + TicTacToe + + + + + + +
+

Rock Papers Scissors

+
You: 0

+
Computer: 0


+

Choose option

+
+
+
rock
+
+
+
paper
+
+
+
scissors
+
+


+

+

+

+ +
+

By Ashutosh Mahapatra

+ + +