<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> 
  <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <title>Project 1: Card Layout with Flexbox and Media Queries</title>
</head>
	
<body>
	<section id="cards">
		<div class="cards-container">

			<div class="card" id="project-1">
				<h3>Project 1</h3>
				<i class="fas fa-folder-open"></i>
				<p class="label">Portfolio</p>
				<a href="#">View this Project</a>
			</div>
			
			<div class="card" id="project-2">
				<h3>Project 2</h3>
				<i class="fab fa-wpforms"></i>
				<p class="label">Forms</p>
				<a href="#">View this Project</a>
			</div>
			
			<div class="card" id="project-3">
				<h3>Project 3</h3>
				<i class="far fa-image"></i>
				<p class="label">Startup Landing Page</p>
				<a href="#">View this Project</a>
			</div>
			
			<div class="card" id="project-4">
				<h3>Project 4</h3>
				<i class="fas fa-gamepad"></i>
				<p class="label">Interactive Game</p>
				<a href="#">View this Project</a>
			</div>
			
		</div>
	</section>
</body>

</html>

body {
    font-family: 'Lato', sans-serif;
}    

h3 {
    font-size: 1.5rem;
}

.label {
    font-size: 1.2rem;
}

.card	{
    width: 90%;
    margin: 1rem;
    padding-bottom: 1rem;
    background-color: #eaeae8;
    text-align: center;
    border: solid 2px #fcad02;
    border-radius: 10px;
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
}

.card a	{
    color: white;
    font-size: 1.2rem;
    text-decoration: none;
    background-color: #4092ad;
    padding: 0.5rem;
    border-radius: 7px;
    box-shadow: 1px 1px #c6c6c4;
}

i {
    font-size: 2.2rem;
    color: #fcad02;
}

/* 	Display two cards per row at 576px breakpoint */
@media (min-width: 576px)	{

    .cards-container	{
/* 	Set the display for the outer container to flex */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    }

    .card	{
        /* 	Set the flex-basis so that two cards are displayed in each row. */
        flex-basis: calc(50% - 3rem);
    }
}

/* 	Display four cards across one row at 992px breakpoint */
@media (min-width: 992px)	{

    .card	{
        /* 	Set the flex-basis so four cards are displayed across one row. */
        flex-basis: calc(25% - 3rem);
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.