Hello developers, today in this blog, you will learn how to create a Client Logo Section using HTML & CSS.
A client logo is your public proclamation that a national brand trust you. In your webpage, the client logos can be added to show that they are your clients. It shows in your webpage to the users who are the client and how many clients you have and so on. Like many clients, as you have, you can add many logos.
In this blog (Client Logo Section) on the webpage, there are four logos. When you hover on that logo that particular logo goes hidden up and scrolls to the down logo which is hidden at down. The CSS transform property has been used to show the hidden logo or the scroll logo, which is next down to it. On PC, the logos are aligned horizontally and on the smaller screen, they are aligned vertically or one by one.
The source code of this Client logo section using HTML & CSS is given below if you want the source code of this program, you can copy it. You can use this code of the Client Logo Section with your creativity and, can take this project to the next level.
Client Logo Section [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html, and remember, you have to create a file with a .html extension.
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
width: 100%;
height: 100%;
display: grid;
align-items: center;
font-family: 'Barlow', sans-serif;
background: linear-gradient(to right, #01a9ac, #01dbdf);
}
.container{
width: 90%;
margin-top: 50px;
height: auto;
text-align: center;
}
.container h1{
font-size: 60px;
color: #000;
}
.container hr{
width: 20%;
height: 5px;
border: none;
background: #000;
margin: auto;
margin-top: 30px;
margin-bottom: 30px;
}
.client{
width: 100%;
height: auto;
}
.client ul{
padding: 0;
margin: 0;
}
.client ul li{
list-style: none;
display: inline-block;
width: 250px;
height: 250px;
position: relative;
overflow: hidden;
cursor: pointer;
justify-content: space-around;
}
.client ul li img{
width: 100%;
height: 100%;
padding: 50px;
}
.client ul li img:nth-child(1){
transform: translateY(0);
transition: .5s;
}
.client ul li img:nth-child(2){
transform: translateY(0);
transition: .5s;
}
.client ul li:hover img:nth-child(1){
transform: translateY(-100%);
transition: .5s;
}
.client ul li:hover img:nth-child(2){
transform: translateY(-100%);
transition: .5s;
}
.credit a{
text-decoration: none;
color: #000;
font-weight: 900;
}
.credit {
margin-top: 50px;
text-align: center;
}
Thank you for reading our blog. If you face any problem in creating this Client Logo Section using HTML & CSS then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team