Image Card with Button

image-card-with-button.markdown

Image Card with Button

A Pen by Ginna on CodePen.

License.

index.html

<div align="center">
  
  <div class="card">
    
  <img class="cardImage" src="https://www.pets4homes.co.uk/images/articles/5010/large/immunoproliferative-enteropathy-in-the-basenji-dog-breed-5bb7233e52e02.jpg" alt="Avatar" style="width:100%">
    
    <div class="cardText">
   
    
  <h1 class="h2">This is a Basenji</h1>
    
  <p class="p1">Basenjis are a barkless dog breed, originially from Africa. They make great household pets!</p>
    
  <button class="button primary">Learn More</button>
    </div>
</div>

style.css

.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 33%;
  border-radius: 10px;
  text-align: left;
}

.card:hover {
  box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);
}


.h1 {
  color: #222f3e;
  font-size: 32px;
  font-family: lato;
}

.h2 {
  color: #222f3e;
  font-size: 24px;
  font-family: asap;
  font-weight: bold;
}


.cardImage {
  border-radius: 10px 10px 0 0;
}

.cardText {
  padding: 10px 30px 20px;
}


.p1 {
  color: #576574;
  font-size: 18px;
  font-family: lato;
  font-weight: 300;
  max-width: 500px;
  line-height: 30px;
}

.button {
  border: none;
  color: white;
  font-family: asap;
  font-weight: 500;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 50px;   
}

.button:hover {
  background-color: #1d009b;
  transition: 0.5s;
}

.primary {
  background-color: #5f27cd
} /* Purple */