support/khy-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

updated website (html/css/images) + .drone.yml

Browse source
This commit is contained in:
support 2025-06-26 12:36:18 +00:00
parent 6b9f5bb1cc
commit 314ac5f346
20 changed files with 166 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

100
style.css
View file

@ -83,9 +83,13 @@ header .container {
}
.logo {
font-size: 1.8rem;
font-weight: 300;
letter-spacing: 2px;
display: block;
}
.logo img {
height: 2.5rem; /* This matches the original font-size to maintain the height */
width: auto; /* This preserves your logo's aspect ratio */
vertical-align: middle; /* Good practice for image alignment */
}
header nav ul {
@ -287,6 +291,7 @@ footer p:first-child {
header .container {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
.about-grid, .values-grid {
@ -296,4 +301,91 @@ footer p:first-child {
.content-section, .content-section-dark {
padding: 4rem 0;
}
}
header nav ul {
flex-direction: column;
width: 100%;
gap: 1rem;
}
header nav li {
width: 100%;
}
header nav a {
display: block;
width: 100%;
}
}
.css-slider-container {
max-width: 900px; /* Matches your image width */
margin: 2rem auto 0 auto;
position: relative;
}
/* 1. Hide the actual radio buttons */
.css-slider-container input[type="radio"] {
display: none;
}
/* 2. Style the slider viewport and wrapper */
.slider-viewport {
width: 100%;
overflow: hidden; /* This hides the slides that are off-screen */
border-radius: 8px;
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.slider-wrapper {
display: flex; /* Lines up slides in a row */
width: 500%; /* 100% for each of the 5 slides */
transition: transform 0.6s ease-in-out; /* The slide animation */
}
.slide {
width: 20%; /* Each slide takes up 1/5th of the wrapper width */
}
.slide img {
width: 100%;
height: 60vh;
max-height: 500px;
object-fit: cover;
display: block;
}
/* 3. Style the navigation dots (which are labels) */
.slider-nav {
text-align: center;
padding-top: 1rem;
}
.slider-nav label {
display: inline-block;
width: 12px;
height: 12px;
background-color: #c4c4c4;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* 4. The Magic: Connect the radio buttons to the slider position */
/* When a radio button is :checked, move the .slider-wrapper using the general sibling selector (~) */
#slide-1:checked ~ .slider-viewport .slider-wrapper { transform: translateX(0%); }
#slide-2:checked ~ .slider-viewport .slider-wrapper { transform: translateX(-20%); }
#slide-3:checked ~ .slider-viewport .slider-wrapper { transform: translateX(-40%); }
#slide-4:checked ~ .slider-viewport .slider-wrapper { transform: translateX(-60%); }
#slide-5:checked ~ .slider-viewport .slider-wrapper { transform: translateX(-80%); }
/* 5. Highlight the active navigation dot */
/* When a radio is :checked, style its corresponding label */
#slide-1:checked ~ .slider-nav label[for="slide-1"] { background-color: var(--primary-color); }
#slide-2:checked ~ .slider-nav label[for="slide-2"] { background-color: var(--primary-color); }
#slide-3:checked ~ .slider-nav label[for="slide-3"] { background-color: var(--primary-color); }
#slide-4:checked ~ .slider-nav label[for="slide-4"] { background-color: var(--primary-color); }
#slide-5:checked ~ .slider-nav label[for="slide-5"] { background-color: var(--primary-color); }