From 60838a5998d3811a8e8d002e00c8e68cba623de3 Mon Sep 17 00:00:00 2001 From: Traboulsi <salam.traboulsi@hft-stuttgart.de> Date: Thu, 25 Jul 2024 16:40:28 +0000 Subject: [PATCH] Update public/assets/css/main.css --- public/assets/css/main.css | 118 +++++++++++++++++++++++++++++++++++++ 1 file changed, 118 insertions(+) diff --git a/public/assets/css/main.css b/public/assets/css/main.css index 07e46a9..e50c905 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -1449,6 +1449,9 @@ section, color: var(--accent-color); } +/*-------------------------------------------------------------- +# Portfolio Section +--------------------------------------------------------------*/ /*-------------------------------------------------------------- # Portfolio Section --------------------------------------------------------------*/ @@ -1494,9 +1497,13 @@ section, .portfolio .portfolio-content { position: relative; overflow: hidden; + height: 400px; /* Set a fixed height for consistency */ } .portfolio .portfolio-content img { + width: 100%; + height: 100%; /* Ensure the image covers the container */ + object-fit: cover; /* Maintain aspect ratio while filling the container */ transition: 0.3s; } @@ -1561,6 +1568,117 @@ section, transform: scale(1.1); } +/* a remplacer*/ +/* +.portfolio .portfolio-filters { + padding: 0; + margin: 0 auto 20px auto; + list-style: none; + text-align: center; +} + +.portfolio .portfolio-filters li { + cursor: pointer; + display: inline-block; + padding: 0; + font-size: 18px; + font-weight: 500; + margin: 0 10px; + line-height: 1; + margin-bottom: 5px; + transition: all 0.3s ease-in-out; +} + +.portfolio .portfolio-filters li:hover, +.portfolio .portfolio-filters li.filter-active { + color: var(--accent-color); +} + +.portfolio .portfolio-filters li:first-child { + margin-left: 0; +} + +.portfolio .portfolio-filters li:last-child { + margin-right: 0; +} + +@media (max-width: 575px) { + .portfolio .portfolio-filters li { + font-size: 14px; + margin: 0 5px; + } +} + +.portfolio .portfolio-content { + position: relative; + overflow: hidden; +} + +.portfolio .portfolio-content img { + transition: 0.3s; +} + +.portfolio .portfolio-content .portfolio-info { + opacity: 0; + position: absolute; + inset: 0; + z-index: 3; + transition: all ease-in-out 0.3s; + background: rgba(0, 0, 0, 0.6); + padding: 15px; +} + +.portfolio .portfolio-content .portfolio-info h4 { + font-size: 14px; + padding: 5px 10px; + font-weight: 400; + color: #ffffff; + display: inline-block; + background-color: var(--accent-color); +} + +.portfolio .portfolio-content .portfolio-info p { + position: absolute; + bottom: 10px; + text-align: center; + display: inline-block; + left: 0; + right: 0; + font-size: 16px; + font-weight: 600; + color: rgba(255, 255, 255, 0.8); +} + +.portfolio .portfolio-content .portfolio-info .preview-link, +.portfolio .portfolio-content .portfolio-info .details-link { + position: absolute; + left: calc(50% - 40px); + font-size: 26px; + top: calc(50% - 14px); + color: #fff; + transition: 0.3s; + line-height: 1.2; +} + +.portfolio .portfolio-content .portfolio-info .preview-link:hover, +.portfolio .portfolio-content .portfolio-info .details-link:hover { + color: var(--accent-color); +} + +.portfolio .portfolio-content .portfolio-info .details-link { + left: 50%; + font-size: 34px; + line-height: 0; +} + +.portfolio .portfolio-content:hover .portfolio-info { + opacity: 1; +} + +.portfolio .portfolio-content:hover img { + transform: scale(1.1); +}*/ + /*-------------------------------------------------------------- # Testimonials Section --------------------------------------------------------------*/ -- GitLab