Logo Slider using HTML, CSS
Hello! Welcome to CodeXimo.
HTML Basic
structure for a web page that features a logo slider. The document begins with a declaration to ensure standards compliance. Within the <head> section, essential metadata such as character encoding (utf-8) and viewport settings for responsive design are defined. The title of the web page is set to "Logo Slider by Coder AaryaN" In the <body>, a div with the class slider contains another div with the class logos, which holds multiple img elements. Each img element is intended to display a logo, although the src attributes are set to placeholder text "image_url".
HTML Details
The structure is minimalist, focusing on the core elements necessary for the slider functionality. Each img tag within the .logos div is meant to be an image in the slider, though there is a typographical error with the attribute scr instead of src for several images. This would need correction for the images to properly display. The HTML is designed to integrate smoothly with CSS animations to create a dynamic, scrolling effect which enhances the visual appeal of the web page by making the logos move continuously.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Logo Slider by Coder AaryaN</title>
</head>
<body>
<div class="slider">
<div class="logos">
<!--Images-->
<img src="image_url" alt="" />
<img src="image_url" alt="" />
<img scr="image_url" alt="" />
<img scr="image_url" alt="" />
<img scr="image_url" alt="" />
<img scr="image_url" alt="" />
<img scr="image_url" alt="" />
<img scr="image_url" alt="" />
<img scr="image_url" alt="" />
<img scr="image_url" alt="" />
</div>
</div>
</body>
</html>CSS Styling
The provided CSS script is crucial for styling and animating the logo slider. It begins by setting a global style for the body, ensuring that the page takes up the full viewport, has no margin or padding, and has a black background. The body is also styled as a grid to center the content. The .slider class is styled to occupy full width, have content-sized height, and hide any overflow, which is essential for the sliding effect.
The .logos class is configured to use flexbox, aligning and centering its items, and applying an animation named "slide" This animation smoothly translates the logos from left to right over 25 seconds in a continuous loop. Individual .img tags within .logos are given a fixed width and spacing to ensure consistent appearance.
Additional CSS
The keyframes for the slide animation define a translation from 0 to -50% of its width, creating the scrolling effect. Responsive design is addressed with media queries, adjusting the size and spacing of logos for different screen widths to maintain visual balance. For screens less than 700px, 480px, and more than 1800px, the logo sizes and margins are adapted accordingly. This ensures that the slider is visually appealing and functional across various devices, enhancing user experience by maintaining proportionate and accessible design elements.
<style>
body {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background: black;
display: grid;
place-items: center;
}
.slider {
width: 100%;
height: fit-content;
overflow: hidden;
}
.logos {
width: fit-content;
display: flex;
align-items: center;
justify-content: center;
animation: slide 25s linear infinite;
}
.logos img {
width: 110px;
margin: 0 25px;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
/*Responsive*/
/*Screen size less that 700 pixels*/
@media screen and (max-width: 700px) {
.logos img {
width: 70px;
margin: 0 20px;
}
}
/*Screen size less that 480 pixels*/
@media screen and (max-width: 480px) {
.logos img {
width: 55px;
margin: 0 15px;
}
}
/*Screen size more that 1800 pixels*/
@media screen and (min-width: 1800px) {
.logos img {
width: 170px;
margin: 0 35px;
}
}
</style>
Post a Comment