<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.grid-item {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,.2);
font-size: 4rem;
}
.red {
background-color: #FF5252;
color: white;
}
.blue {
background-color: #2196F3;
color: white;
}
.green {
background-color: #4CAF50;
color: white;
}
.yellow {
background-color: #FFC107;
color: white;
}
i {
font-size: 1.5rem;
}
</style>
<title>Page Title</title>
</head>
<body>
<div class="grid-container">
<div class="grid-item red">
<i class="fas fa-phone"> Active</i>
</div>
<div class="grid-item blue">
<i class="fas fa-phone"> ICC</i>
</div>
<div class="grid-item green">
<i class="fas fa-phone">FFF</i>
</div>
<div class="grid-item yellow">
<i class="fas fa-phone">DD</i>
</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario