File manager

File manager - Edit - /home/u300416816/domains/recipes4al.com/public_html/public/frontend/css/style.css

Back
body { background-color: #121212; color: #f0f0f0; } .position-relative { overflow: hidden; /* Ensures the play button doesn't extend outside the image / } .navbar-gaming { background-color: #1a1a1d; padding: 15px; } .navbar-gaming .navbar-brand img { width: 150px; } .navbar-gaming .nav-link { color: #f0f0f0; font-weight: bold; margin-right: 15px; text-transform: uppercase; letter-spacing: 1px; } .navbar-gaming .nav-link:hover { color: #ffcc00; } .offcanvas-header { background-color: #1a1a1d; } .offcanvas-body { background-color: #222; color: #f0f0f0; } .carousel-inner img { filter: brightness(0.9); } .carousel-caption h5 { font-family: 'Orbitron', sans-serif; font-size: 2rem; text-transform: uppercase; color: #ffcc00; } .carousel-caption p { font-size: 1.2rem; } .carousel-image { height: 500px; / Set a fixed height for all images / object-fit: cover; / Ensure the image covers the container without distortion / } .btn-primary { background-color: #ffcc00; border: none; color: #f0f0f0; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; } .btn-primary:hover { background-color: #e6b800; } h2 { font-family: 'Orbitron', sans-serif; color: #ffcc00; margin-bottom: 30px; text-transform: uppercase; text-align: center; } .card { background-color: #1e1e1e; border: none; transition: transform 0.3s ease; } .card:hover { transform: translateY(-10px); } .card-title { color: #ffcc00; font-family: 'Orbitron', sans-serif; font-size: 1.2rem; } .card-body a { color: #ffcc00; color: #f0f0f0 } .game-image { width: 100%; height: 180px; object-fit: cover; } .bg-light { background-color: #1a1a1d !important; color: #f0f0f0; } h5 { color: #ffcc00; font-family: 'Orbitron', sans-serif; } footer { background-color: #1a1a1d; color: #f0f0f0; } footer a { color: #ffcc00; text-decoration: none; } footer a:hover { color: #e6b800; } .btn-close-white { filter: invert(1); } / Slick Slider / .slick-slider { overflow: hidden; / Ensures no overflow from the slider / } .slick-list { padding: 0 !important; / Removes padding that causes overflow / margin: 0 -10px; / Adjusts margin to account for the negative space from slick items / } .slick-slide { padding: 0 10px; / Adds padding inside the slick slide / } .slider-item { width: 100%; display: flex; justify-content: center; align-items: center; } .slick-prev, .slick-next { z-index: 1; / Ensures the buttons are above the content / } .play-button { opacity: 0; transition: opacity 0.3s ease; top: 35%; / Vertically centers the play button / left: 50%; / Horizontally centers the play button / transform: translate(-30%, -50%); / Ensures the play button is centered / position: absolute; } .position-relative:hover .play-button { opacity: 1; } .related-games .card-img-top { width: 100%; height: auto; display: block; } .play-icon { width: 50px; height: 50px; } .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; } .modal-content { background-color: white; padding: 20px; max-width: 500px; width: 90%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .close-btn { position: absolute; top: 0px; right: 5px; font-size: 35px; cursor: pointer; } / Responsive Image / .responsive-img { max-width: 100%; height: auto; display: block; margin: 0 auto 20px auto; } / Subscription Form / .subscription-form { display: flex; flex-direction: column; gap: 10px; } .subscription-form .form-group { display: flex; flex-direction: column; gap: 5px; } .subscription-form input[type="email"] { padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; } .subscription-form .submit-btn { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } .subscription-form .submit-btn:hover { background-color: #0056b3; } .post-image { width: 100%; / Ensures the image takes up the full width of its container / height: 200px; / You can adjust this height as needed / object-fit: cover; / Ensures the image fills the container without distortion / } .card-text{ color: #f0f0f0; } p{ color: #f0f0f0; } / Responsive Behavior for Smaller Screens */ @media (max-width: 768px) { .modal-content { width: 90%; max-width: 100%; } }

| ver. 1.4 | Github | . | PHP 8.2.28 | Generation time: 0.02 | proxy | phpinfo | Settings