Home Web Design CSS CSS Responsive Infographic Cards | Flexbox Info Cards

CSS Responsive Infographic Cards | Flexbox Info Cards

August 5, 2019

10564

How we can create flexible infographic cards using HTML and CSS? Solution: CSS Responsive Infographic Cards. In other words, Flexbox Info Cards.

Previously I have shared many types of cards, time time is for info cards. Infographic is visual representations of information, data or knowledge. On a website, we use info on many places like how to do, step by step info, etc. Using these kinds of cards we can show easily understandable information.

Today you will learn to create Info Cards using Flexbox. These cards which are given here, they all about learn web development‘s language. You can modify or customize these according to your requirement. It is very easy to understand and reskin the infographic cards, but you must have knowledge of HTML CSS.

So, Today I am sharing CSS Responsive Infographic Cards design example. I have created these using pure CSS & HTML, the design is responsive using flex display. All cards will in a row at a large screen, when screen size will small or decrease then it will show column-wise.

If you are thinking now how these info cards actually are, then see the preview given below.

Preview Of Flexbox Info Cards

See this video preview to getting an idea of how the cards look like.

https://webdevtrick.com/wp-content/uploads/infographic-card.mp4?_=1

Live Demo

Now you can see visually. Also, you can test live by pressing the live view button given above. If you like these, then get the source code of its.

CSS Responsive Infographic Cards Source Code

Before sharing source code, let’s talk about it. First, I have created the main div with class= "container" and placed all the cards inside it. For responsive design used CSS display: flex; property. As you can see in the preview the circle is placed middle in two divs using margin: -60px auto 0px auto; .

I have used font-awesome for icons (get) are placed at the bottom side. There is a different color for each element, if have selected all the elements separately using CSS :nth-child() property. You can create more cards just by copy the codes repetitively. Left all other things you will understand easily after getting the codes, I can’t explain all in writing.

For creating this responsive design you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Responsive Infographic cards | Webdevtrick.com</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'>
  <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>

    <h1>Learn Web Development Step By Step</h1>
<div class="container">
  <div class="card">
    <div class="title">
      Step
    </div>
    <div class="circle">1</div>
    <div class="content">
      <h3>HTML 5</h3>
      <p>HTML 5 is a software solution stack that defines the properties and behaviors of web page content by implementing a markup based pattern to it.</p>
      <div class="icon">
        <i class="fab fa-html5"></i>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="title">
      Step
    </div>
    <div class="circle">2</div>
    <div class="content">
      <h3>CSS 3</h3>
      <p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.</p>
      <div class="icon">
        <i class="fab fa-css3-alt"></i>
            </div>
    </div>
  </div>
  
  <div class="card">
    <div class="title">
      Step
    </div>
    <div class="circle">3</div>
    <div class="content">
      <h3>JavaScript</h3>
      <p>JavaScript, often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the ECMAScript specification.</p>
      <div class="icon">
        <i class="fab fa-js-square"></i>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="title">
      Step
    </div>
    <div class="circle">4</div>
    <div class="content">
      <h3>PHP</h3>
      <p>PHP: Hypertext Preprocessor is a general-purpose programming language originally designed for web development.</p>
      <div class="icon">
        <i class="fab fa-php"></i>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="title">
      Step
    </div>
    <div class="circle">5</div>
    <div class="content">
      <h3>MySQL</h3>
      <p>MySQL is an open-source relational database management system. Its name is a combination of "My", the name of co-founder daughter.</p>
      <div class="icon">
        <i class="fas fa-database"></i>
      </div>
    </div>
  </div>
</div>
  
</body>
</html>

<!DOCTYPE html>

<head>

<title>Responsive Infographic cards | Webdevtrick.com</title>

</head>

<body>

<h1>Learn Web Development Step By Step</h1>

Step

</div>

<p>HTML 5 is a software solution stack that defines the properties and behaviors of web page content by implementing a markup based pattern to it.</p>

</div>

Step

</div>

<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.</p>

</div>

Step

</div>

<h3>JavaScript</h3>

<p>JavaScript, often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the ECMAScript specification.</p>

</div>

Step

</div>

<p>PHP: Hypertext Preprocessor is a general-purpose programming language originally designed for web development.</p>

</div>

Step

</div>

<h3>MySQL</h3>

<p>MySQL is an open-source relational database management system. Its name is a combination of "My", the name of co-founder daughter.</p>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes given below.

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
body {
  font-family: 'Montserrat', sans-serif;
  margin-top: 50px;
}
h1 {
  text-align: center;
}
.container {
  display: flex;
}
.container .card {
  flex: 1;
  margin: 10px;
  text-align: center;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
  overflow: hidden;
}
.container .card .title {
  text-transform: uppercase;
  font-size: 25px;
  font-weight: bold;
  padding: 15px;
  padding-bottom: 60px;
  color: #ffffff;
}
.container .card .circle {
  box-sizing: border-box;
  font-size: 35px;
  font-weight: bold;
  background-color: #000000;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -60px auto 0px auto;
  z-index: 2;
  position: relative;
  box-shadow: inset 0px -10px 8px -8px rgba(0, 0, 0, 0.5);
}
.container .card .content {
  padding: 15px;
  padding-top: 45px;
  margin-top: -45px;
  background-color: #ffffff;
  box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.15);
}
.container .card .icon {
  font-size: 50px;
}
.container .card:nth-child(1) .title, .container .card:nth-child(1) .circle {
  background-color: #e34f26;
}
.container .card:nth-child(1) .icon {
  color: #e34f26;
}
.container .card:nth-child(2) .title, .container .card:nth-child(2) .circle {
  background-color: #1b73ba;
}
.container .card:nth-child(2) .icon {
  color: #1b73ba;
}
.container .card:nth-child(3) .title, .container .card:nth-child(3) .circle {
  background-color: #f8d23c;
}
.container .card:nth-child(3) .icon {
  color: #f8d23c;
}
.container .card:nth-child(4) .title, .container .card:nth-child(4) .circle {
  background-color: #7478ae;
}
.container .card:nth-child(4) .icon {
  color: #7478ae;
}
.container .card:nth-child(5) .title, .container .card:nth-child(5) .circle {
  background-color: #de8a00;
}
.container .card:nth-child(5) .icon {
  color: #de8a00;
}
@media (max-width: 767px) {
  .container {
    flex-wrap: wrap;
  }
  .container .card {
    flex: 0 0 100%;
  }
}

/** Code By Webdevtrick ( https://webdevtrick.com ) **/

body {

font-family: 'Montserrat', sans-serif;

margin-top: 50px;

}

h1 {

text-align: center;

}

.container {

display: flex;

}

.container .card {

flex: 1;

margin: 10px;

text-align: center;

box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);

border-radius: 20px;

overflow: hidden;

}

.container .card .title {

text-transform: uppercase;

font-size: 25px;

font-weight: bold;

padding: 15px;

padding-bottom: 60px;

color: #ffffff;

}

.container .card .circle {

box-sizing: border-box;

font-size: 35px;

font-weight: bold;

background-color: #000000;

width: 100px;

height: 100px;

border-radius: 50%;

color: #ffffff;

display: flex;

align-items: center;

justify-content: center;

margin: -60px auto 0px auto;

z-index: 2;

position: relative;

box-shadow: inset 0px -10px 8px -8px rgba(0, 0, 0, 0.5);

}

.container .card .content {

padding: 15px;

padding-top: 45px;

margin-top: -45px;

background-color: #ffffff;

box-shadow: 0px -4px 5px rgba(0, 0, 0, 0.15);

}

.container .card .icon {

font-size: 50px;

}

.container .card:nth-child(1) .title, .container .card:nth-child(1) .circle {

background-color: #e34f26;

}

.container .card:nth-child(1) .icon {

color: #e34f26;

}

.container .card:nth-child(2) .title, .container .card:nth-child(2) .circle {

background-color: #1b73ba;

}

.container .card:nth-child(2) .icon {

color: #1b73ba;

}

.container .card:nth-child(3) .title, .container .card:nth-child(3) .circle {

background-color: #f8d23c;

}

.container .card:nth-child(3) .icon {

color: #f8d23c;

}

.container .card:nth-child(4) .title, .container .card:nth-child(4) .circle {

background-color: #7478ae;

}

.container .card:nth-child(4) .icon {

color: #7478ae;

}

.container .card:nth-child(5) .title, .container .card:nth-child(5) .circle {

background-color: #de8a00;

}

.container .card:nth-child(5) .icon {

color: #de8a00;

}

@media (max-width: 767px) {

.container {

flex-wrap: wrap;

}

.container .card {

flex: 0 0 100%;

}

That’s It. Now you have successfully created CSS Responsive Infographic Cards, Flexbox Info Cards. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.