diff --git a/images/cubes.png b/images/cubes.png new file mode 100644 index 0000000..cfd7911 Binary files /dev/null and b/images/cubes.png differ diff --git a/images/pic.jpg b/images/pic.jpg new file mode 100644 index 0000000..a301bc5 Binary files /dev/null and b/images/pic.jpg differ diff --git a/index.html b/index.html index 8ed8d0a..d26b9bf 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@
+ pic

Hi,👋
     My name is Sukarna Jana
@@ -26,13 +27,25 @@

🐾 TO APPROCH ME 👣

-
- - - - - - +
+ + instagram + + + snapchat + + + linkedin + + + telegram + + + twitter + + + facebook +
diff --git a/main.css b/main.css index 6830856..576b69f 100644 --- a/main.css +++ b/main.css @@ -5,6 +5,9 @@ body { background-color: #151a24; color: #85b6ff; font-family: 'Nunito', sans-serif; + background-image: url("./images/cubes.png"); + background-position: left top; + background-repeat: repeat; } a { @@ -30,4 +33,71 @@ a { padding: 1px 0; font-size: xx-large; } + +.connect { + margin: 80px 0px; + display: -ms-grid; + display: grid; + -ms-grid-columns: (1fr)[2]; + grid-template-columns: repeat(2, 1fr); + gap: 50px 0px; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + justify-items: center; + -ms-flex-line-pack: space-evenly; + align-content: space-evenly; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.platform { + width: 300px; + height: 300px; + -webkit-animation: swel 5s linear infinite; + animation: swel 5s linear infinite; + -webkit-transition-duration: 5s; + transition-duration: 5s; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; +} + +@-webkit-keyframes swel { + 0% { + -webkit-transform: scale(100%); + transform: scale(100%); + } + 50% { + -webkit-transform: scale(95%); + transform: scale(95%); + } + 100% { + -webkit-transform: scale(100%); + transform: scale(100%); + } +} + +@keyframes swel { + 0% { + -webkit-transform: scale(100%); + transform: scale(100%); + } + 50% { + -webkit-transform: scale(95%); + transform: scale(95%); + } + 100% { + -webkit-transform: scale(100%); + transform: scale(100%); + } +} + +.pic { + width: 100%; + height: auto; + border-radius: 0px 0px 80px 80px; + -webkit-box-shadow: 0px 20px 50px #303647; + box-shadow: 0px 20px 50px #303647; +} /*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/main.css.map b/main.css.map index 4453dcc..63cfb60 100644 --- a/main.css.map +++ b/main.css.map @@ -1,6 +1,6 @@ { "version": 3, - "mappings": "AAAA,OAAO,CAAC,qJAAI;AAEZ,AAAA,IAAI,CAAA;EACA,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,gBAAgB,EAAE,OAAe;EACjC,KAAK,EAAC,OAAkB;EACxB,WAAW,EAAE,oBAAoB;CACpC;;AAED,AAAA,CAAC,CAAA;EACG,eAAe,EAAE,IAAI;EACrB,KAAK,EAAC,OAAkB;CAC3B;;AAED,AAAA,QAAQ,CAAC,CAAC,CAAA;EACN,SAAS,EAAC,QAAQ;EAClB,OAAO,EAAE,SAAS;CACrB;;AAED,AAAA,UAAU,CAAA;EACN,SAAS,EAAC,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,UAAU,EAAE,MAAM;CACrB;;AAED,AAAA,UAAU,CAAA;EACN,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,OAAe;EACjC,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,KAAK;EACd,SAAS,EAAC,QAAQ;CACrB", + "mappings": "AAAA,OAAO,CAAC,qJAAI;AAEZ,AAAA,IAAI,CAAA;EACA,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,gBAAgB,EAAE,OAAe;EACjC,KAAK,EAAC,OAAkB;EACxB,WAAW,EAAE,oBAAoB;EACjC,gBAAgB,EAAE,yBAAyB;EAC3C,mBAAmB,EAAE,QAAQ;EAC7B,iBAAiB,EAAE,MAAM;CAC5B;;AAED,AAAA,CAAC,CAAA;EACG,eAAe,EAAE,IAAI;EACrB,KAAK,EAAC,OAAkB;CAC3B;;AAED,AAAA,QAAQ,CAAC,CAAC,CAAA;EACN,SAAS,EAAC,QAAQ;EAClB,OAAO,EAAE,SAAS;CACrB;;AAED,AAAA,UAAU,CAAA;EACN,SAAS,EAAC,QAAQ;EAClB,OAAO,EAAE,SAAS;EAClB,UAAU,EAAE,MAAM;CACrB;;AAED,AAAA,UAAU,CAAA;EACN,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,OAAe;EACjC,UAAU,EAAE,MAAM;EAClB,OAAO,EAAE,KAAK;EACd,SAAS,EAAC,QAAQ;CACrB;;AAED,AAAA,QAAQ,CAAA;EACJ,MAAM,EAAE,QAAQ;EAChB,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,cAAc;EACrC,GAAG,EAAE,QAAQ;EACb,eAAe,EAAE,YAAY;EAC7B,aAAa,EAAE,MAAM;EACrB,aAAa,EAAE,YAAY;EAC3B,WAAW,EAAE,MAAM;CACtB;;AAED,AAAA,SAAS,CAAA;EACL,KAAK,EAAE,KAAK;EACZ,MAAM,EAAE,KAAK;EACb,SAAS,EAAE,uBAAuB;EAClC,mBAAmB,EAAE,EAAE;EACvB,0BAA0B,EAAE,WAAW;CAC1C;;AAED,UAAU,CAAV,IAAU;EACN,EAAE;IACE,SAAS,EAAE,WAAW;;EAE1B,GAAG;IACC,SAAS,EAAE,UAAU;;EAEzB,IAAI;IACA,SAAS,EAAE,WAAW;;;;AAI9B,AAAA,IAAI,CAAA;EACA,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,aAAa,EAAE,iBAAiB;EAChC,UAAU,EAAE,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAe;CAC5C", "sources": [ "main.scss" ], diff --git a/main.scss b/main.scss index 49a4ae9..a4e2f5a 100644 --- a/main.scss +++ b/main.scss @@ -6,6 +6,9 @@ body{ background-color: rgb(21, 26, 36); color:rgb(133, 182, 255); font-family: 'Nunito', sans-serif; + background-image: url("./images/cubes.png"); + background-position: left top; + background-repeat: repeat; } a{ @@ -30,4 +33,42 @@ a{ text-align: center; padding: 1px 0; font-size:xx-large; -} \ No newline at end of file +} + +.connect{ + margin: 80px 0px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 50px 0px; + justify-content: space-evenly; + justify-items: center; + align-content: space-evenly; + align-items: center; +} + +.platform{ + width: 300px; + height: 300px; + animation: swel 5s linear infinite; + transition-duration: 5s; + transition-timing-function: ease-in-out; +} + +@keyframes swel{ + 0%{ + transform: scale(100%); + } + 50%{ + transform: scale(95%); + } + 100%{ + transform: scale(100%); + } +} + +.pic{ + width: 100%; + height: auto; + border-radius: 0px 0px 80px 80px; + box-shadow: 0px 20px 50px rgb(48, 54, 71); +}