-
-
-
- - Html
- - Css
- - Python
- - இசை
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Madhan Aadithya
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/main.css b/main.css
index 35d3b07..fda13bb 100644
--- a/main.css
+++ b/main.css
@@ -1,96 +1,196 @@
+:root {
+ --pixel-size: 2px;
+ --grid-cell: calc( var(--pixel-size) * 16);
+ --bg: #9fa7e4;
+ }
+ @media( min-width: 700px ) {
+ :root {
+ --pixel-size: 3px;
+ }
+ }
+ @media( min-width: 1000px ) {
+ :root {
+ --pixel-size: 4px;
+ }
+ }
+ /* @media( min-width: 1000px ) {
+ :root {
+ --pixel-size: 5px;
+ }
+ } */
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
-*{
- font-family: 'Montserrat', sans-serif;
-margin: 0;
-padding: 0;
-}
-.main{
+ *{
+ margin:0;
+ padding:0;
+
+ }
+
+ body {
+ background: var(--bg);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .pixel-art {
+ image-rendering: pixelated;
+ }
+
+ .frame {
+ /* This is just for Pen decoration */
width: 100vw;
height: 100vh;
-}
-.main video{
- position: fixed;
- top:0;
- left:0;
+ outline: var(--pixel-size) solid #fff;
+ z-index:1;
+ position:relative;
+ }
+
+ .camera {
width: 100vw;
height: 100vh;
- object-fit: cover;
-}
-.main h1{
+ overflow: hidden;
+ background: #000;
+ position:relative;
+ }
+
+ .map {
+ image-rendering: pixelated;
+ background-image: url("https://assets.codepen.io/21542/CameraDemoMap.png");
+ background-size: 100%;
+ width: calc(13 * var(--grid-cell));
+ height: calc(10 * var(--grid-cell));
+ position: relative;
+ }
+
+ .character {
+ width: calc( var(--grid-cell)* 2 );
+ height: calc( var(--grid-cell)* 2 );
+ position: absolute;
+ overflow:hidden;
+ }
+
+ .shadow {
+ width: calc( var(--grid-cell)* 2 );
+ height: calc( var(--grid-cell)* 2 );
position: absolute;
+ left:0;
top:0;
- left: 0;
- width: 100vw;
- height: 100vh;
- display: flex;
- user-select: none;
- flex-direction: column;
- font-size: 25vw;
- font-weight: 900;
- justify-content: center;
- align-items: center;
- text-align: center;
- color: #fff;
- background: #000000;
- mix-blend-mode: multiply;
-
-}
-
-.div{
- height:100vh;
- mix-blend-mode: multiply;
- background-color: #000;
- width: 100vw;
-}
-#about{
- display: flex;
- flex-direction: column;
- align-items: center;
- text-align: center;
- justify-content: center;
-}
+ background: url("https://assets.codepen.io/21542/DemoRpgCharacterShadow.png") no-repeat no-repeat;
+ background-size: 100%;
+ }
+
+ .character_spritesheet {
+ position: absolute;
+ background: url("https://assets.codepen.io/21542/DemoRpgCharacter.png") no-repeat no-repeat;
+ background-size: 100%;
-#about .wrapper{
- color: #fff;
- display: flex;
- font-size: 20vw;
-}
-#about .wrapper .dynamic{
- margin-left: 15px;
- height: 25vw;
- overflow: hidden;
-
-}
-#about .wrapper .dynamic li{
- position: relative;
- list-style: none;
+ width: calc( var(--grid-cell)* 8 );
+ height: calc( var(--grid-cell)* 8 );
+ }
+
+ .character[facing="right"] .character_spritesheet {
+ background-position-y: calc( var(--pixel-size) * -32 );
+ }
+ .character[facing="up"] .character_spritesheet {
+ background-position-y: calc( var(--pixel-size) * -64 );
+ }
+ .character[facing="left"] .character_spritesheet {
+ background-position-y: calc( var(--pixel-size) * -96 );
+ }
+ .character[walking="true"] .character_spritesheet {
+ animation: walkAnimation 0.6s steps(4) infinite;
+ }
+
+ @keyframes walkAnimation {
+ from {
+ transform: translate3d(0%,0%,0);
+ }
+ to {
+ transform: translate3d(-100%,0%,0);
+ }
+ }
+
+ .dpad {
+ position:absolute;
+ margin: 10vw;
+ right: calc(var(--pixel-size) * 2);
+ bottom: calc(var(--pixel-size) * 2);
+ width: calc(var(--pixel-size) * 37);
+ height: calc(var(--pixel-size) * 38);
+ }
+ .dpad-button {
+ appearance:none;
+ outline:0;
+ border:0;
+ background:transparent;
+ padding:0;
+ cursor:pointer;
+ }
+ .dpad-button svg {
+ display:block;
+ height: calc(var(--pixel-size) * 13);
+ }
+
+ .dpad-button.pressed .Arrow_arrow-inset { stroke:#000; }
+ .dpad-button.pressed .Arrow_arrow-body { stroke:#000; }
+
+ .dpad-up {
+ position: absolute;
+ left: calc(var(--pixel-size) * 12);
top:0;
- animation: slide 12s steps(4) infinite;
-}
-@keyframes slide{
- 100%{
- top:-100vw
- }
-}
-#about .wrapper .dynamic li::after{
- content:"";
+ }
+ .dpad-down {
position: absolute;
- left: 0;
- background: #000;
- height: 100%;
- width: 100%;
- border-left: 30px solid #fff;
- animation: typing 3s steps(10) infinite;
-}
-@keyframes typing{
- 40%,60%{
- left:calc(100% + 30px)
- }
- 100%{
- left: 0;
- }
-}
-@media only screen and (max-width: 600px) {
-
- }
\ No newline at end of file
+ bottom:var(--pixel-size);
+ left: calc(var(--pixel-size) * 12);
+ }
+ .dpad-left {
+ position: absolute;
+ top: calc(var(--pixel-size) * 12);
+ left:0;
+ }
+ .dpad-right {
+ position: absolute;
+ top: calc(var(--pixel-size) * 12);
+ right:0;
+ }
+
+ .dpad {
+ user-select:none;
+ }
+
+
+ .corner_topleft,
+ .corner_topright,
+ .corner_bottomleft,
+ .corner_bottomright {
+ position: absolute;
+ width: var(--pixel-size);
+ height: var(--pixel-size);
+ background: var(--bg);
+ z-index:2;
+ }
+
+ .corner_topleft {
+ top: calc(var(--pixel-size) * -1);
+ left: calc(var(--pixel-size) * -1);
+ }
+ .corner_topright {
+ top: calc(var(--pixel-size) * -1);
+ right: calc(var(--pixel-size) * -1);
+ }
+ .corner_bottomleft {
+ bottom: calc(var(--pixel-size) * -1);
+ left: calc(var(--pixel-size) * -1);
+ }
+ .corner_bottomright {
+ bottom: calc(var(--pixel-size) * -1);
+ right: calc(var(--pixel-size) * -1);
+ }
+
+ .headline {
+ position:absolute;
+ top:calc(var(--pixel-size) * 2);
+ right:calc(var(--pixel-size) * 2);
+ width: calc(var(--pixel-size) * 75)
+ }
\ No newline at end of file
diff --git a/script.js b/script.js
index e69de29..71f1983 100644
--- a/script.js
+++ b/script.js
@@ -0,0 +1,4 @@
+function pop(){
+
+ document.getElementById
+}
\ No newline at end of file
diff --git a/style.css b/style.css
deleted file mode 100644
index 5240608..0000000
--- a/style.css
+++ /dev/null
@@ -1,283 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
-*{
- font-family: Poppins;
-}
-
-:root{
- --deep: #ff005e;
- --aqua: #00fff2;
-}
-*::selection{
- background: var(--deep);
-}
-html{
- scroll-behavior: smooth;
-}
-*{
- margin: 0;
- padding:0
-}
-
-body{
- background: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.5)), url(back.jpeg);
- background-size: cover;
- background-position: 50% 50%;
- background-attachment: fixed;
-}
-.sidenav svg{
- position: fixed;
- top:7%;
- right:2.5%;
- transform: translate(-50%,-50%);
- cursor: pointer;
- background:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), linear-gradient(to bottom right,#ff005d83 50%,#00fff270 50%), linear-gradient(to bottom left,yellow 50%,violet 50%);
- padding: 10px;
- border-radius: 50%;
- z-index: 10000;
-}
-.sidenav .list{
- width:100vw;
- height:100vh;
- background:linear-gradient(to bottom, #000,rgba(0,0,0,0.8), rgba(0,0,0,0.6));
- z-index:10;
- opacity: 0;
- position: fixed;
- top:-200%;
- left:50%;
- transform: translate(-50%,-50%);
- align-items: center;
- text-align: center;
- justify-content: center;
- display: flex;
- flex-direction: column;
- transition: .5s;
- z-index: 1000000000;
-}
-
-.sidenav #close{
- background-color: red;
- font-size: 2rem;
- padding: 5px 20px;
- border-radius: 10px;
- position: absolute;
- font-size: 1.25rem;
- top:5%;
- right:2.5%;
- cursor: pointer;
-}
-.main{
- background: transparent;
- height: 100vh;
-}
-.main .watermark{
- white-space: nowrap;
- color: #fff;
- opacity: 0.1;
- user-select: none;
- position: absolute;
- top:100%;
- left:50%;
- transform: translate(-25%,0%);
-}
-.text{
- position: absolute;
- top:40%;
- left:30%;
- transform: translate(-50%,-50%);
- align-items: center;
- text-align: center;
- justify-content: center;
- display: flex;
- flex-direction: column;
-}
-.text .tags{
- align-items: center;
- text-align: center;
- justify-content: center;
- display: flex;
- flex-direction: row;
-}
-.main .text i{
- color: white;
- width: 20px;
- height: 20px;
-
-}
-.main h1{
-
- font-size: 8vw;
- color: white;
-}
-.main h1 span{
- visibility: none;
-}
-.main p{
- margin-left: 2.5vw;
-
-}
-.main .lf{
- text-align: left;
-}
-.main .lf p{
- color: aqua;
- font-weight:900;
-}
-.main svg{
- position: absolute;
- bottom: 10%;
- right: 5%;
- transform: translate(-50%,-50%);
- fill: rgba(255, 255, 0, 0.486);
-}
-
-.about {
- padding: 5vh;
- align-items: center;
- justify-content: center;
- text-align: center;
- background: #fff;
- display: flex;
- flex-direction: column;
-}
-
-.about h2{
- padding-right: 20px;
- color: #000;
- line-height: 2.5;
-}
-.mainabt{
- height: 100vh;
- width: 100vw;
- background:#fff;
- backdrop-filter: blur(50%);
- text-align: center;
-}
-.mainabt .watermark{
- font-size: 20vw;
- color: var(--deep);
- position: absolute;
- left: 50%;
- transform: translate(-50%);
- opacity: 0.1;
- user-select: none;
- mask-position: 100%;
-}
-.mainabt p{
- position: relative;
- top:25%;
- left: 50%;
- transform: translate(-50%);
- font-size: 2rem;
-}
-.hash{
- background: var(--aqua);
- color: var(--deep);
- padding: 5px;
- border-radius: 10px;
-}
-.links{
- position: relative;
- top:50%;
- left: 50%;
- transform: translate(-50%);
- padding-top: 5vh;
- padding-bottom: 5vh;
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: center;
- text-align: center;
-}
-.mainabt a{
- color: aqua;
- text-decoration: none;
- padding: 2px;
-}
-.projects{
- background: linear-gradient(to top,#fff 20%, rgba(255,255,255,0.8) 20%);
- width:100vw;
- height:100vh;
- align-items: center;
- text-align: center;
- justify-content: center;
- display: flex;
- flex-direction: column;
-}
-.projects .watermark{
- font-size: 25vw;
- color: yellow;
- opacity: 0.5;
- user-select: none;
-}
-.projectlist{
- display: flex;
- flex-wrap: wrap;
- text-align: center;
- background: #fff;
- padding-bottom: 10vh;
-}
-.projectlist .card {
- flex: 50%;
- max-width: 100vw;
- line-height: 3;
- margin-bottom: 5vh;
- box-shadow: 5px 0px 0px #ff0;
-}
-.projectlist .card a{
- text-decoration: none;
- color: black;
- padding: 5px;
- border-bottom: 2px solid black;
- transition: .5s;
-}
-.projectlist .card a:hover{
- color: white;
- background:black;
-}
-.projectlist .card .lang{
- color: var(--deep);
- text-shadow: 1px 1px 0 #000;
-}
-
-.footer{
- padding:10vh;
- align-items: center;
- text-align: center;
- justify-content: center;
- display: flex;
- flex-direction: row;
-}
-.footer a{
- margin-left: 10px;
- transition: .5s;
- box-shadow: 0px 2px 0 aqua;
-}
-.footer a:hover{
- box-shadow: 0px 10px 0px #fff;
-}
-@media only screen and (max-width: 1500px) {
- .projectlist .card {
- flex: 100%;
- max-width: 100vw;
- }
- .main .text{
- top:50%;
- left:50%
- }
- .main h1{
- font-size: 15vw;
- }
- .main .hash{
- font-size: 0.8rem;
- }
- .main .watermark{
- font-size: 10vw;
- position: absolute;
- top:125%;
- left:50%;
- transform: translate(-50%,-50%);
- }
- .mainabt{
- height:auto
- }
- }
\ No newline at end of file