Spaces:

vitaliy-sharandin
/

portfolio

Running

App Files Files Community

vitaliy-sharandin commited on Nov 27, 2023

Commit

f93392b

1 Parent(s): 5d45c77

Update index.html

Browse files

Files changed (1) hide show

index.html +21 -15

index.html CHANGED Viewed

@@ -27,52 +27,58 @@
         .project-row {
             display: flex;
             flex-wrap: wrap;
-            justify-content: space-between; /* This will ensure the two projects per row are spaced out */
         }
         .project {
             border: 2px solid #30363d;
             border-radius: 10px;
             padding: 10px;
-            margin: 10px 0;
             background-color: #161b22;
             transition: background-color 0.3s ease;
-            flex-basis: calc(50% - 20px); /* Two projects per row, minus margin */
-            box-shadow: 0 8px 24px rgba(0,0,0,0.5);
         }
         .project:hover {
             background-color: #21262d;
         }
         .thumbnail {
-            width: 100%;
             border-radius: 5px;
         }
         .project-info {
             padding: 10px;
-            position: relative;
         }
         .project-title {
             font-size: 1.2em;
             color: #ffffff; /* White color for titles */
-            position: absolute; /* Position the title in the top left */
-            top: 10px;
-            left: 10px;
-            margin: 0;
         }
         .project-link {
-            display: block;
             text-decoration: none;
             color: #58a6ff;
-            margin: 10px auto;
             text-align: center;
-            padding: 8px 20px; /* Narrower buttons */
             background-color: #21262d;
             border-radius: 20px;
-            width: auto;
-            box-sizing: border-box;
         }
         .project-link:hover {
             text-decoration: underline;
         }
     </style>
 </head>
 <body>

         .project-row {
             display: flex;
             flex-wrap: wrap;
+            justify-content: space-around; /* Adjust the spacing between projects */
         }
         .project {
             border: 2px solid #30363d;
             border-radius: 10px;
             padding: 10px;
+            margin: 10px;
             background-color: #161b22;
             transition: background-color 0.3s ease;
+            width: calc(50% - 20px); /* Two projects per row, accounting for margin */
+            box-sizing: border-box; /* Includes padding and border in the element's total width and height */
+            display: flex;
+            flex-direction: column; /* Stack elements vertically */
         }
         .project:hover {
             background-color: #21262d;
         }
         .thumbnail {
+            width: 100%; /* Make the image fill the container */
             border-radius: 5px;
         }
         .project-info {
             padding: 10px;
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start; /* Align project info to the start (left) */
         }
         .project-title {
             font-size: 1.2em;
             color: #ffffff; /* White color for titles */
+            margin: 0 0 10px 0; /* Add some margin below the title */
         }
         .project-link {
             text-decoration: none;
             color: #58a6ff;
+            margin: 5px 0; /* Reduce the vertical margin */
             text-align: center;
+            padding: 8px 20px; /* Padding for the button */
             background-color: #21262d;
             border-radius: 20px;
+            transition: background-color 0.2s ease;
         }
         .project-link:hover {
+            background-color: #30363d; /* Darken button on hover */
             text-decoration: underline;
         }
+        @media screen and (max-width: 768px) {
+            /* Responsive design: Stack projects on top of each other on smaller screens */
+            .project {
+                width: 100%;
+            }
+        }
     </style>
 </head>
 <body>