Merge pull request #1 from nipunh/opensource

Opensource

Author: nipunh

.DS_Store

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

.vscode/settings.json

@@ -139,15 +139,16 @@ article .icon {
 .btn-container {
   margin-top: 1rem;
   display: flex;
-  justify-content: center;
+  /* justify-content: space-between; */
+  align-items : space-between;
   gap: 1rem;
 }
 
 .btn {
   font-weight: 600;
   transition: all 300ms ease;
   padding: 1rem;
-  width: 8rem;
+  width: 6rem;
   border-radius: 2rem;
 }
 
@@ -199,7 +200,7 @@ article .icon {
 }
 
 .flip-card-inner {
-  padding: 1rem 0.5rem 0.5rem 0.5rem;
+  padding: 1rem 0.5rem 1rem 0.5rem;
   display: flex;
   flex-direction: column;
   align-content: center;
@@ -210,6 +211,10 @@ article .icon {
 
 /* Position the front and back side */
 .flip-card-front{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-be;
   text-align: center;
   /* position: absolute; */
   -webkit-backface-visibility: hidden;

assets/cyclops.gif

@@ -726,7 +726,7 @@ img {
   border-top: 5px solid hsl(180, 62%, 55%);
   border-color: rgb(180, 62%, 55%);
   text-align: center;
-  /* height: 500px; */
+  min-height: 500px;
   padding: 0.5rem;
   margin: 1rem;
 }
@@ -735,24 +735,22 @@ img {
   font-family: var(--body-font);
 }
 
-
-
 @media screen and (max-width: 600px) {
   .portfolio__container{ 
     padding-left: 1rem;
     padding-right: 1rem;
   }
-
-
 } 
 
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
 
+
  .container-tabs {
 	 display: flex;
 	 align-items: center;
 	 justify-content: center;
-}
+} 
+
  .tabs {
 	 display: flex;
 	 position: relative;
@@ -764,11 +762,14 @@ img {
  .tabs * {
 	 z-index: 2;
 }
+
  input[type="radio"] {
 	 display: none;
 }
+
  .tab {
 	 display: flex;
+   flex-direction : row;
 	 align-items: center;
 	 justify-content: center;
 	 height: 34px;
@@ -821,6 +822,10 @@ img {
 	 transform: translateX(200%);
 }
 
+input[id="radio-4"]:checked ~ .glider {
+  transform: translateX(300%);
+}
+
  @media (max-width: 700px) {
 	 .tabs {
 		 transform: scale(0.6);