mark
/
hermina
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align critical slider CSS with final layout
Deploy to Development and Production / deploy (push) Successful in 6s Details

This commit is contained in:
Mark Poljanšek 2025-11-03 15:46:35 +01:00
parent 1b2e5ed788
commit 6b5ebb37b9
1 changed files with 55 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
index.html
View File

@ -16,12 +16,62 @@
<!-- Kritični in razdeljeni CSS --> <!-- Kritični in razdeljeni CSS -->
<style> <style>
body { background-color: #fdfdfd; } body { background-color: #fdfdfd; }
.slider { margin: 2rem auto; padding: 2rem; max-width: 1200px; } .slider {
position: relative;
max-width: 1200px;
margin: 2rem auto;
background: #ffffff;
padding: 2rem;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.slide { display: none; } .slide { display: none; }
.slide.active { display: block; } .slide.active { display: block; animation: fadeIn 0.5s ease-in-out; }
.slide-content { display: flex; flex-direction: column; gap: 2rem; } @keyframes fadeIn {
@media (min-width: 769px) { from { opacity: 0; }
.slide-content { flex-direction: row; align-items: center; } to { opacity: 1; }
}
.slide-content {
display: flex;
align-items: center;
gap: 2.5rem;
}
.slide-image { flex: 1 1 50%; }
.slide-image img {
width: 100%;
height: auto;
display: block;
border-radius: 0.5rem;
}
.slide-text { flex: 1 1 50%; }
.slide-portrait {
float: right;
width: 250px;
height: 250px;
margin: 0 0 2rem 2rem;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.slide-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 768px) {
.slide-content {
flex-direction: column;
text-align: center;
gap: 1.5rem;
}
.slide-portrait {
float: none;
margin: 0 auto 2rem auto;
width: 200px;
height: 200px;
}
} }
</style> </style>
<link as="style" href="/assets/css/style-home.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/> <link as="style" href="/assets/css/style-home.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>