update

assets/css/santosh-magar.css

@@ -572,80 +572,88 @@ div.about-head:nth-child(2) {
 	color: #3298DB;
 }
 
-#portfolio .thumb {
-	background-color: #555;
-	overflow: hidden;
-	height: 152px;
-}
-
-#portfolio .thumb img {
-	width: 100%;
-	height: 100%;
-	opacity: 0.5;
-}
-
-#portfolio .thumb img:hover {
-	transform: scale(1.1);
-}
-
-#portfolio .details {
-	padding: 10px;
-}
-
-#portfolio .details a {
-	text-decoration: none;
-	display: inline-flex;
-}
-
 #portfolio .details h5 {
 	margin: 0px;
 	padding: 0px;
 	align-self: center;
 }
 
-
-/* #portfolio>div:nth-child(1)>div:nth-child(1) {
-	margin-bottom: 40px;
-	padding: inherit;
-} */
-
-.btn-cv {
-	margin-left: 30px;
-}
-
 .portfolio-list {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: 10px;
+	gap: 30px;
 	margin-top: 24px;
 	margin-bottom: 24px;
 }
 
 .portfolio-item {
 	display: flex;
 	flex-direction: column;
-	margin: 10px;
-	width: 200px;
-	aspect-ratio: 16 / 9;
+	flex: 0 0 22%;
 	background-color: white;
-	border: 3px white;
+	border-radius: 7px;
 	overflow: hidden;
-
+	box-shadow: 0 0 6px 6px rgb(171 171 171 / 15%);
+}
+.portfolio-item:hover{
+	box-shadow: 0 0 12px 12px rgb(72 72 72 / 15%);
 }
 
 .portfolio-item-thumb {
+	height: 130px;
+	cursor: pointer;
 	position: relative;
 }
 
-.portfolio-item a {
+.portfolio-item-thumb img {
+	height: 100%;
+	object-fit: cover;
+}
+.overlay{
+    position: absolute;
+	background: rgba(0, 0, 0, 0.5);
+    width: 100%;
+    height: 100%;
+}
+.portfolio-thumb-overlay {
+	position: absolute;
+	bottom: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.5);
+	transition: .5s ease;
+	opacity: 0;
+	display: flex;
+}
+
+.portfolio-thumb-overlay:hover {
+	opacity: 1;
+}
+
+.portfolio-thumb-overlay p {
+	color: white;
+	font-size: 20px;
+	text-align: center;
+	font-weight: 600;
 	margin: auto;
+}
+
+.portfolio-item-title {
+	margin: auto;
+	padding: 16px 0;
+}
+
+.portfolio-item-title a {
 	text-decoration: none;
 	color: rgb(49, 48, 48);
 	font-weight: 600;
+	padding: 20px 0;
 }
 
 
+
+
 /*---------------- section :: contact content  ----------------------- */
 #contact {
 	padding: 40px 25px;
@@ -873,6 +881,11 @@ footer .cc-footer {
 	color: white;
 }
 
+.btn-cv {
+	margin-left: 30px;
+	text-decoration: none;
+}
+
 /*--------------------------------*/
 @media only screen and (max-width: 990px) {
 

index.html

@@ -472,31 +472,57 @@ <h2>Portfolio</h2>
 
 				<div class="row portfolio-list">
 					<div class="portfolio-item">
-						<a href="https://muannepal.org.np/kmp/" target="_blank">
-							KMP MuAN
-						</a>
-					</div>
-					<div class="portfolio-item">
-						<a href="https://np.chimpvine.com/" target="_blank">
-							Chimpvine Nepal
-						</a>
+						<div class="portfolio-item-thumb">
+							<img src="/assets/images/portfolio/default.png" alt>
+							<div class="portfolio-thumb-overlay"><p>View</p></div>
+						</div>
+						<div class="portfolio-item-title">
+							<a href="https://www.fiverr.com/santoshtmp" target="_blank">
+								Fiverr- Freelance
+							</a>
+						</div>
+						<div class="portfolio-item-detail"></div>
 					</div>
 					<div class="portfolio-item">
-						<a href="https://eelms-ces.ioe.edu.np/" target="_blank">
-							EELMS LMS
-						</a>
+						<div class="portfolio-item-thumb">
+							<img src="/assets/images/portfolio/ndrrma.png" alt="img">
+							<div class="portfolio-thumb-overlay"><p>View</p></div>
+						</div>
+						<div class="portfolio-item-title">
+							<a href="https://elearning.ndrrma.gov.np/" target="_blank">
+								NDRRMA LMS
+							</a>
+						</div>
+						<div class="portfolio-item-detail"></div>
 					</div>
 					<div class="portfolio-item">
-						<a href="https://elearning.ndrrma.gov.np/" target="_blank">
-							NDRRMA LMS
-						</a>
+						<div class="portfolio-item-thumb">
+							<img src="/assets/images/portfolio/wplus.png" alt="img">
+							<div class="portfolio-thumb-overlay"><p>View</p></div>
+						</div>
+						<div class="portfolio-item-title">
+							<a href="https://course.wplus.org/" target="_blank">Wplus LMS</a>
+						</div>
+						<div class="portfolio-item-detail"></div>
 					</div>
 					<div class="portfolio-item">
-						<a href="https://nmwws.org.np/" target="_blank">NMWWS NP</a>
+						<div class="portfolio-item-thumb">
+							<img src="/assets/images/portfolio/muan-kmp.png" alt="img">
+							<div class="portfolio-thumb-overlay"><p>View</p></div>
+						</div>
+						<div class="portfolio-item-title">
+							<a href="https://muannepal.org.np/kmp/" target="_blank">
+								MuAN KMP
+							</a>
+						</div>
+						<div class="portfolio-item-detail"></div>
 					</div>
 				</div>
+
 				<div style="display: flex;">
-					<a href="/portfolio" class="btn_primary" style="margin: auto;"> View All </a>
+					<a href="/portfolio" class="btn_primary" style="margin: auto; text-decoration: none;">
+						View All Portfolio
+					</a>
 				</div>
 			</div>
 		</section>