The Image Gallery is the place, where the collection of images get stored. Those stored images can be viewed whenever we want to see it. In this blog (Responsive Image Gallery Card Design), there are eight images with its title and some description of the image and there is also a button named as view details. The hover effect has been used in the button.
The CSS media query property is used to make the page responsive. Based on the screen size, the images will be aligned accordingly. On the large screen, the image cards are aligned horizontally whereas in the smaller screen the image cards are aligned vertically that is the image cards are aligned one after the other. CSS flexbox has been used. Flexbox is mainly used to lay a collection of items in one direction or another. Here, flexbox is used to create a column axis layout.
The source code of this Responsive Image Gallery Card Design using CSS Flexbox is given below, if you want the source code of this program, you can copy it. You can use this Responsive Image Gallery Card Design with your creativity and can take this project to the next level.
Responsive Image Gallery Card Design using CSS Flexbox [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.
*{
box-sizing: border-box;
}
body {
margin: 0;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
background: #11998e;
background: -webkit-linear-gradient(to right, #38ef7d, #11998e);
background: linear-gradient(to right, #38ef7d, #11998e);
}
a {
text-decoration: none;
text-align: center;
}
.main{
margin: 10px auto;
}
h1 {
font-size: 24px;
font-weight: 400;
text-align: center;
font-family: 'Share Tech Mono', monospace;
font-size: 1.1rem;
font-weight: 700;
}
img {
height: 300px;
width: 100%;
vertical-align: middle;
}
.btn {
color: #ffffff;
padding: 0.8rem;
font-size: 14px;
text-transform: uppercase;
border-radius: 4px;
font-weight: 400;
display: block;
width: 100%;
cursor: pointer;
border: 1px solid #1fd4bc;
background: transparent;
border-radius: 15px;
}
.btn:hover {
background-color: #1fd4bc;
color: #12192c;
}
.cards {
display: flex;
flex-wrap: wrap;
list-style: none;
margin: 0 auto;
padding: 0;
}
.cards_item {
padding: 1rem;
width: 25%;
}
.card {
border-radius:15px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: flex;
flex-direction: column;
overflow: hidden;
border-bottom: 9px solid crimson;
}
.card_content {
padding: 2rem;
background: #12192C;
}
.card_title {
color: #ffffff;
font-size: 1.1rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: capitalize;
margin: 0px;
}
.card_text {
color: #ffffff;
font-size: 0.875rem;
line-height: 1.5;
margin-bottom: 1.25rem;
font-weight: 400;
}
.main h1{
font-size: 34px;
font-weight: 400;
text-align: center;
font-family: 'Share Tech Mono', monospace;
font-weight: 700;
}
@media screen and (max-width:900px) {
.cards_item {
padding: 1rem;
width: 50%;
}
}
@media screen and (max-width:600px) {
.cards_item {
padding: 1rem;
width: 100%;
}
}
.credit{
text-align: center;
color: #000;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color:#000;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Image Gallery Card Design using CSS Flexbox, 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