<body class="container">
<div class="card font-regular">
<img src="https://source.unsplash.com/random/300x250" alt="Unsplash Image">
<div class="card-heading font-regular font-size-4">Card Title</div>
<div><p class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<button type="button" class="btn btn-accent btn-full">Read More</button>
</div>
<div class="card font-regular">
<img src="https://source.unsplash.com/random/300x251" alt="Unsplash Image">
<div class="card-heading font-regular font-size-4">Card Title</div>
<div><p class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<button type="button" class="btn btn-accent btn-full">Read More</button>
</div>
<div class="card font-regular">
<img src="https://source.unsplash.com/random/300x252" alt="Unsplash Image">
<div class="card-heading font-regular font-size-4">Card Title</div>
<div><p class="card-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
<button type="button" class="btn btn-accent btn-full">Read More</button>
</div>
</body>
html,
body {
background-color: #006865;
color: #3f3f3f;
}
span {
color: #ff6f61;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-family: "Lato", sans-serif;
padding: 1rem;
}
.card {
margin: 1rem;
padding: 0.5rem;
border-radius: 3px;
flex-grow: 1;
background-color: #ebfdff;
max-width: 300px;
}
.card-heading {
padding: 0.5rem;
margin-top: 0.5rem;
border-radius: 3px;
text-align: center;
color: #006865;
}
.card-body {
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
text-align: center;
}
.font-light {
font-weight: 300;
}
.font-regular {
font-weight: 400;
}
.font-bold {
font-weight: 700;
}
.font-black {
font-weight: 900;
}
.font-light-italic {
font-weight: 300;
font-style: italic;
}
.font-regular-italic {
font-weight: 400;
font-style: italic;
}
.font-bold-italic {
font-weight: 700;
font-style: italic;
}
.font-black-italic {
font-weight: 900;
font-style: italic;
}
.font-uppercase {
text-transform: uppercase;
}
p {
line-height: 1.5;
margin-bottom: 16px;
}
.font-size-1 {
font-size: 2rem;
}
.font-size-2 {
font-size: 1.8rem;
}
.font-size-3 {
font-size: 1.6rem;
}
.font-size-4 {
font-size: 1.4rem;
}
.font-size-5 {
font-size: 1.2rem;
}
.font-size-6 {
font-size: 1rem;
}
.line-height-slim {
line-height: 1;
}
.line-height-base {
line-height: 1.3;
}
.line-height-wide {
line-height: 1.5;
}
.line-height-extra {
line-height: 1.8;
}
.btn {
padding: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
margin-right: 1rem;
border-radius: 50px;
border: none;
background-color: #EBFDFF;
color: #006865;
}
.btn:focus {
outline-width: 0px;
}
.btn:hover {
background-color: #CDF7FB;
cursor: pointer;
}
.btn-accent {
background-color: #ff6f61;
color: #ffffff;
}
.btn-accent:hover {
background-color: #F75141;
}
.btn-full {
display: block;
width: 100%;
margin-bottom: 1rem;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.